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-25 #0a5888 | grey-25 #45535f | ||||
| blue-23 #09517c | turquoise-23 #0d5d5a | yellow-23 #736115 | grey-23 #374652 | red-23 #601722 | green-23 #003a24 |
| grey-19 #34424e | |||||
| 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 depend on the theme (dark or light). Each color has a corresponding foreground color (prefixed by --on-) to ensure good contrast.
Surface-related tokens are generated in perceptual color spaces, so changing --surface shifts the whole surface ladder with it. --surface-container gets its default tone from --surface, while the other --surface-container-* values are generated from --surface-container itself so a custom override of that anchor color also shifts the full ladder. --on-surface stays tied to --surface for base-surface contrast, --on-surface-container is generated from --surface-container, and --on-surface-variant plus --outline* are softened from --on-surface toward --surface-container so they still react when the container anchor is overridden.
The primary, secondary, tertiary, negative, and positive container backgrounds are also generated from their base colors, using relative oklch(...) transforms to shift lightness and chroma while keeping the family hue. Overriding any of those semantic base colors therefore still shifts the corresponding *-container tone automatically, but with a result that stays closer to the original swatches than a plain white/black mix.
The table below shows the default light and dark rendered outputs.
| CSS variable name | Light mode value | Dark mode value |
|---|---|---|
| --on-primary --primary | #ebf8ff #09517c | #07212f #7cd0ff |
| --on-primary-container --primary-container | #09517c #daedfd | #e0f4ff #1c3f52 |
| --on-primary-bright-fixed --primary-bright-fixed | #05090e #33b4ff | #05090e #33b4ff |
| --on-secondary --secondary | #ffffff #117c79 | #05090e #6ee0db |
| --on-secondary-container --secondary-container | #0a4846 #baf2ee | #e8fafa #095c59 |
| --on-secondary-bright-fixed --secondary-bright-fixed | #05090e #1ccfc9 | #05090e #1ccfc9 |
| --on-tertiary --tertiary | #05090e #99811c | #332b09 #ffe479 |
| --on-tertiary-container --tertiary-container | #332b09 #fff2bd | #fffbea #5a4c12 |
| --on-tertiary-bright-fixed --tertiary-bright-fixed | #05090e #ffd72e | #05090e #ffd72e |
| --on-negative --negative | #fbebed #801f2e | #05090e #e57c8c |
| --on-negative-container --negative-container | #05090e #e57b82 | #fbebed #5e1627 |
| --on-negative-bright-fixed --negative-bright-fixed | #ffffff #d6334c | #ffffff #d6334c |
| --on-positive --positive | #e6f2ed #004d2f | #05090e #5cae8f |
| --on-positive-container --positive-container | #002d1c #c0e1cd | #e6f2ed #11382b |
| --on-positive-bright-fixed --positive-bright-fixed | #ffffff #00804f | #ffffff #00804f |
| --on-surface --on-surface-variant --surface | #262b30 #44494e #f3f5f6 | #fafbfb #ecedee #2b353e |
| --on-surface-container --surface-container | #2f3439 #f3f1f1 | #fafafb #273039 |
| --on-surface-container --surface-container-lowest | #2f3439 #fafcfd | #fafafb #2f3942 |
| --on-surface-container --surface-container-low | #2f3439 #f5f7f8 | #fafafb #2b363f |
| --on-surface-container --surface-container-high | #2f3439 #e8eaeb | #fafafb #222c35 |
| --on-surface-container --surface-container-highest | #2f3439 #dadcdd | #fafafb #18222a |
| --on-surface-dark-fixed --surface-dark-fixed | #f9fafb #1a2027 | #f9fafb #1a2027 |
| --on-surface-black-fixed --surface-black-fixed | #f9fafb #05090e | #f9fafb #05090e |
| --outline --outline-variant | #000000ad #00000057 | #000000ad #00000057 |
| --hover-shadow --focus-shadow --active-shadow |