Colors
Static color tokens
| white #fff | |||||
| grey-98 #f9fafb | |||||
| blue-95 #ebf8ff | turquoise-95 #e8fafa | yellow-95 #fffbea | grey-95 #f3f5f6 | red-95 #fbebed | green-95 #e6f2ed |
| blue-93 #e0f4ff | turquoise-93 #ddf8f7 | yellow-93 #fff9e0 | grey-93 #eff0f1 | red-93 #f9e0e4 | green-93 #d9ece5 |
| grey-90 #eaebed | |||||
| blue-85 #c0e8ff | turquoise-85 #b9f0ee | yellow-85 #fff3be | grey-85 #dbe0e4 | red-85 #f2c0c8 | green-85 #b0d8c8 |
| blue-68 #7cd0ff | turquoise-68 #6ee0db | yellow-68 #ffe479 | grey-68 #b8c1c7 | red-68 #e57c8c | green-68 #5cae8f |
| blue-50 #33b4ff | turquoise-50 #1ccfc9 | yellow-50 #ffd72e | grey-50 #96a1aa | red-50 #d6334c | green-50 #00804f |
| blue-45 #14a0f4 | turquoise-45 #19bab5 | yellow-45 #e6c229 | grey-45 #849099 | red-45 #c12e44 | green-45 #007347 |
| blue-40 #0e8fdc | turquoise-40 #16a6a1 | yellow-40 #ccac25 | grey-40 #717f88 | red-40 #ab293d | green-40 #00663f |
| blue-37 #0f88cc | turquoise-37 #159b97 | yellow-37 #bfa123 | grey-37 #677781 | red-37 #a12639 | green-37 #00603b |
| blue-30 #0c6ba5 | turquoise-30 #117c79 | yellow-30 #99811c | grey-30 #4f5d68 | red-30 #801f2e | green-30 #004d2f |
| blue-23 #09517c | turquoise-23 #0d5d5a | yellow-23 #736115 | grey-23 #374652 | red-23 #601722 | green-23 #003a24 |
| blue-17 #07405f | turquoise-17 #0a4846 | yellow-17 #594b10 | grey-17 #2b353e | red-17 #4b121b | green-17 #002d1c |
| blue-10 #07212f | turquoise-10 #062928 | yellow-10 #332b09 | grey-10 #1a2027 | red-10 #2b0a0f | green-10 #001a10 |
| black #05090e |
Dynamic color variables
The values of these depends on the theme (dark or light). Each color has a corresponding foreground color (prefixed by --on-) to ensure good contrasts.
| Variable name | Light mode value | Dark mode value |
|---|---|---|
| --on-primary --primary | blue-95 blue-30 | blue-10 blue-68 |
| --on-primary-container --primary-container | blue-17 blue-85 | blue-95 blue-23 |
| --on-primary-bright-fixed --primary-bright-fixed | black blue-50 | black blue-50 |
| --on-secondary --secondary | turquoise-95 turquoise-30 | turquoise-10 turquoise-68 |
| --on-secondary-container --secondary-container | turquoise-17 turquoise-85 | turquoise-95 turquoise-23 |
| --on-secondary-bright-fixed --secondary-bright-fixed | black turquoise-50 | black turquoise-50 |
| --on-tertiary --tertiary | black yellow-30 | yellow-10 yellow-68 |
| --on-tertiary-container --tertiary-container | yellow-17 yellow-85 | yellow-95 yellow-17 |
| --on-tertiary-bright-fixed --tertiary-bright-fixed | black yellow-50 | black yellow-50 |
| --on-negative --negative | red-95 red-30 | black red-68 |
| --on-negative-container --negative-container | black red-68 | red-95 red-23 |
| --on-negative-bright-fixed --negative-bright-fixed | white red-50 | white red-50 |
| --on-positive --positive | green-95 green-30 | black green-68 |
| --on-positive-container --positive-container | green-17 green-85 | green-85 green-23 |
| --on-positive-bright-fixed --positive-bright-fixed | white green-50 | white green-50 |
| --on-surface --on-surface-variant --surface | grey-17 grey-30 grey-95 | grey-98 grey-93 grey-17 |
| --on-surface --on-surface-variant --surface-container-lowest | grey-17 grey-30 white | grey-98 grey-93 black |
| --on-surface --on-surface-variant --surface-container-low | grey-17 grey-30 grey-98 | grey-98 grey-93 grey-10 |
| --on-surface --on-surface-variant --surface-container | grey-17 grey-30 grey-93 | grey-98 grey-93 grey-17 |
| --on-surface --on-surface-variant --surface-container-high | grey-17 grey-30 grey-90 | grey-98 grey-93 grey-23 |
| --on-surface --on-surface-variant --surface-container-highest | grey-17 grey-30 grey-85 | grey-98 grey-93 grey-30 |
| --on-surface-dark-fixed --surface-dark-fixed | grey-98 grey-10 | grey-98 grey-10 |
| --on-surface-black-fixed --surface-black-fixed | grey-98 black | grey-98 black |
| --outline --outline-variant | grey-40grey-68 | grey-68grey-40 |
| --hover-shadow --focus-shadow --active-shadow |