Alta Web Icon Guide

Overview

The Alta Palette is referenced both in a limited and extended form based on the context and style of icon that is desired. The primary reason for this is to make sure that our icons are well balanced and supportive of the UI framework in which they are experienced. There are times where icons need to be subordinate to the content and other times where we want to highlight and enhance the icon style in order to enhance and enrich the user experience of a given UI.

Please note that we do not include the Restricted Icon Styles such as the Application Navigation & Functional Icons Styles in this section. By design, those icons are closely tied to the chrome and subdued to give rise to the page content. Please reference the Monochromatic Icon Style section for more information.

Icon Palette Details

The palette samples below capture an extended palette that is broken down in parts as it applies to the various icon styles. The Rich and Realistic Icon Style reference the entire palette while the other icons styles listed focus on a more limited range of color hues. These are represented visually in order to help provide a quick overview of the color range that should be targeted for each style of icon. The primary reason for this is to ensure that our palette is balanced and doesn't overpower the UI framework or content in a negative manner.

Extended Color Palette

The extended color palette below should only be referenced for the Rich and Realistic Style Icons.

Limited Color Palette

The limited color palette below should be referenced for the Full Palette, Mono Color and Achromatic Icons. This is done to ensure that any UI messages associated with the icons such as badging will remain prominent when viewed in relation to an icon. Please reference the Badge Icon section for more details.

Use of Grey or Neutural Color Hues

It is encouraged to reference grey or neutural tones in relation to your icon palette. We have included a limited set of swatches that you can add to. We recommend that you stay in the cool tones for those as much as possible.