Overview

The Alta Rich Icons Style are based on the Guiding Principles of our design system. They share the fundamental principles of consistent use of perspective, soft & hard edges, line weight, padding and color palette. What distinguishes these icons is the introduction of additional material attributes such as use of gradation, patterns and light source.

Added Material Attributes

Palette and Lighting

• Choose colors that are appropriate for the metaphor and meaning of the icon within the overall context of the content.
• The icons use a gradient fill as specified below.
• There is an oval transparent white highlight.
• A pattern can optionally overlay the icon gradient.
• Interior symbols are overlaid on top of the gradient with a drop shadow.

Gradient Fill

• A 2 color gradient at 90 degree angle with color stops at 0, 23, and 100.
• The gradient is 100 percent opacity.
• The darkest, most saturated color should be at stop 23 with a lighter but saturated color at 0 and 100.

Use of Highlight and Symbol Overlay

• White 20% opacity highlight with oval cutout.
• The symbol overlay has a white 90 degree 85% opacity to 100% opacity gradient fill.
• The symbol overlay has a 1 pixel -90 degree drop shadow using a darker shade of the background color. Optional CSS Reflection Gradient.
• -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(65%, transparent), to(rgba(255,255,255,0.2)));

Icon Samples