Colorful icons make full use of the
Breeze color palette
. Colorful icons are not flat and incorporate elevation,
shadows, and lighting.
There are a variety of colorful icon types:
Colorful icons have a top and bottom margin of 4 pixels. Icons should
not put any details here whatsoever.
Colorful icons also have a left and right margin of 4 pixels. Minor
details can extend here as necessary.
32px Colorful Icons
32px colorful icons have a 2px margin instead of 4px margins.
All colorful icons share the same basic anatomy.
- Foreground Shadow
- Base Shadow
Icons can have a variety of shapes, which when combined with color,
produce numerous unique arrangements.
Icons are composed of layers that cast shadows.
Lighting and Shadows
Icon fills should reflect ambient lighting—go from a lighter top to a
Every icon should have a 1px solid hard shadow. A good baseline color to
overlay is 10% black (#000000).
Foregrounds should have a 45° shadow to the bottom right.