Style Guide Overview

    The Alta Style captures a contemporary expression of UI’s that are flat, spacious, and bold in the use of color, typography, photography, iconography, and data visualization components. This page provides an overview of the principles that define the Alta visual style. It is not meant to replace the critical information that is captured in the various guidelines and patterns.


    Color

    The Alta Palette leverages the entire color spectrum of primary colors with a balance of cool grey tones that are complimentary to the overall UI messaging and data visualization components. The Icon Palette, UI Palette and Date Visualization Palette are interlinked to work together harmoniously. Color values and tones can be mixed and matched as required by the component or layout. The color value combinations supported are

    Color Image

    Icons

    Our primary goal for the Alta Icon Style is to ensure it translates elegantly on all platforms and devices, while providing the flexibility needed to enhance the user experience of the overall UI.

    The key concept that defines the Alta Icon Style is a system-based design approach to the structure of icons. The icon style is flexible in structure in that we provide a variety of icon styles that share the guiding design principles and common attributes, but are expressed differently depending on the icon type needed within the UI.

    UI Screens

    Typography

    Typography is a critical aspect of highlighting information and minimizing the density of page layouts. It’s an elegant way to help guide the user through the flow of a page without having to introduce unwanted chrome.

    Our focus is to provide a variety of font sizes to support the expression of a simple and clean UI. We encourage the use of color and generous use of white space to help bridge the various formats of content. Typography becomes a design element within the UI.

    For Cloud and Web UI designs, we reference Helvetica Neue type face family ranging from Thin, Regular and Medium. Mobile Applications achieve a native look by referencing Helvetica Neue for iOS, Roboto for Android and Segoe type face for Windows UI.

    Typography Image

    Use of Photography

    Choosing the right photography is critical as it relates to a brand. We encourage contemporary messaging that captures a personal point of view rather then a technical or complex rendition of an image. Photography is a powerful way to communicate brand and product messaging. When referencing photography, the use of white space, color regions or overlays and typography impacts the UI and enhance the user experience.

    Photography Image