Color
Press the upper-right icon to switch between light and dark modes.
How to use
Every palette features both a static and dynamic palette.
Static palettes
The static palette is always the same, in both light and dark modes.
Dynamic palettes
The dynamic palette inverts itself between light and dark modes. Try it!
By using these dynamic color variables, it's easier to create layouts that work between light and dark modes.
Here's a handy cheatsheet.
To summarize:
- Use high numbers, 100-120, for prominent foreground items: text, icons, borders.
- Use middle numbers, 40-90, for brand elements, highlights, and calls to action.
- Use low numbers, 10-30, for backgrounds.
Themes and backgrounds
There are four theme colors: coastal, desert, mountain, and valley.
Themes have additional background colors. Use these theme backgrounds to create complex layouts and heirarchies when needed.
Active theme
Use "primary" to access the current active theme.
Standard gray
Standard gray.
Coastal blue
Coastal blue is the default included theme.
Desert tan
Theme color.
Mountain gray
Theme color.
Valley green
Theme color.
Magenta
Bright color.
Orange
Bright color.
Green
Bright color.
Blue
Bright color.
Purple
Bright color.
Red
Alert color.
Yellow
Alert color.