Colors
Each token is named for its job, like background-surface or text-secondary. It has one value for light mode and one for dark, so a component that uses it follows the theme on its own.
Background
App canvas, cards, popovers and menus, inputs and wells, inverted blocks. Disabled and material are pending review: disabled controls, and the see-through fills of the material levels, used only through the material-* utilities.
| Token | Light / Dark |
|---|---|
| color-background-page | #ffffff / #0a0a0a |
| color-background-surface | #fafafa / #111111 |
| color-background-raised | #ffffff / #181818 |
| color-background-sunken | #f4f4f4 / #060606 |
| color-background-inverse | #171717 / #f5f5f5 |
| color-background-disabled | #ededed / #1e1e1e |
| color-background-material-thin | #fafafae6 / #111111d9 |
| color-background-material-thick | #ffffffd9 / #181818e6 |
| color-background-material-refract | #ffffffd9 / #181818e6 |
Text
Body and headings, supporting text, hints, disabled labels, text on inverse.
| Token | Light / Dark |
|---|---|
| color-text-primary | #171717 / #f5f5f5 |
| color-text-secondary | #5d5d5d / #a4a4a4 |
| color-text-tertiary | #868686 / #747474 |
| color-text-disabled | #b7b7b7 / #484848 |
| color-text-inverse | #fafafa / #171717 |
Icon
Icons next to primary or secondary text, icons in disabled controls.
| Token | Light / Dark |
|---|---|
| color-icon-primary | #171717 / #f5f5f5 |
| color-icon-secondary | #5d5d5d / #a4a4a4 |
| color-icon-disabled | #b7b7b7 / #484848 |
Border
Dividers and outlines, emphasized outlines, form control edges (3:1), the material edge highlight, keyboard focus.
| Token | Light / Dark |
|---|---|
| color-border | #e5e5e5 / #262626 |
| color-border-strong | #d4d4d4 / #404040 |
| color-border-control | #8d8d8d / #656565 |
| color-border-material-edge | #ffffff99 / #ffffff1f |
| color-focus-ring | #111111 / #f5f5f5 |
Overlay
Hover and pressed states on neutral fills, dimming behind dialogs. The on-solid layers are pending review: hover and pressed on accent, danger, success, warning and info, and the material top highlight.
| Token | Light / Dark |
|---|---|
| color-overlay-hover | #0000000a / #ffffff0f |
| color-overlay-pressed | #00000014 / #ffffff1a |
| color-overlay-scrim | #00000066 / #00000099 |
| color-overlay-hover-on-accent | #ffffff0d / #00000012 |
| color-overlay-pressed-on-accent | #ffffff1a / #00000024 |
| color-overlay-hover-on-danger | #0000001f / #0000001f |
| color-overlay-pressed-on-danger | #0000003b / #0000003b |
| color-overlay-hover-on-success | #ffffff2b / #ffffff2b |
| color-overlay-pressed-on-success | #ffffff52 / #ffffff52 |
| color-overlay-hover-on-warning | #ffffff29 / #00000017 |
| color-overlay-pressed-on-warning | #ffffff52 / #0000002b |
| color-overlay-hover-on-info | #0000001f / #0000001f |
| color-overlay-pressed-on-info | #0000003d / #0000003d |
| color-overlay-highlight-on-accent | #ffffff33 / #ffffff33 |
| color-overlay-shade-on-accent | #00000033 / #00000033 |
| color-overlay-highlight-on-danger | #ffffff00 / #ffffff00 |
| color-overlay-shade-on-danger | #00000033 / #00000033 |
| color-overlay-highlight-on-material | #ffffffcc / #ffffff29 |
Accent
Primary actions, selected states, links.
| Token | Light / Dark |
|---|---|
| color-text-accent | #111111 / #f5f5f5 |
| color-text-on-accent | AaAa#ffffff / #0a0a0a |
| color-text-on-muted | AaAa#111111 / #f5f5f5 |
| color-icon-accent | #111111 / #f5f5f5 |
| color-icon-on-accent | #ffffff / #0a0a0a |
| color-accent | #111111 / #f5f5f5 |
| color-accent-muted | #eeeeee / #222222 |
Hues
Nine hues, five tokens each: the solid for chart series, status dots and avatars, a soft background and a border for badges, banners and tags, text on the soft background, and text on the solid.
| Hue | color-* | color-background-* | color-text-* | color-border-* | color-text-on-* |
|---|---|---|---|---|---|
| red | #e72c35 / #e72c35 | #ffe9e6 / #361715 | #c3001f / #ff9992 | #c77871 / #9a4f4a | AaAa#0a0a0a / #0a0a0a |
| blue | #127eee / #127eee | #e4f0ff / #112238 | #0060bb / #82b9ff | #658fc6 / #3d669a | AaAa#0a0a0a / #0a0a0a |
| yellow | #bc8d00 / #edb417 | #fbedd1 / #2a2009 | #7b5c00 / #edb417 | #a48a53 / #7a6129 | AaAa#0a0a0a / #0a0a0a |
| teal | #00a59e / #00a59e | #d9f5f3 / #0e2625 | #006d69 / #35c9c2 | #5e9793 / #356e6a | AaAa#0a0a0a / #0a0a0a |
| green | #17a750 / #17a750 | #dbf7e0 / #112716 | #007132 / #4dcd73 | #64996f / #3c7048 | AaAa#0a0a0a / #0a0a0a |
| orange | #ec6f00 / #ec6f00 | #ffeade / #341a0b | #9d4800 / #ff9d64 | #bf7e5a / #925531 | AaAa#0a0a0a / #0a0a0a |
| purple | #914de6 / #914de6 | #f1ebff / #251c36 | #7f37d0 / #c6a5ff | #9982c4 / #715998 | AaAa#ffffff / #ffffff |
| pink | #e652a3 / #e652a3 | #ffe7f1 / #331725 | #b31a77 / #ff92c8 | #c0779a / #934f71 | AaAa#0a0a0a / #0a0a0a |
| gray | #747474 / #747474 | #eeeeee / #222222 | #606060 / #b6b6b6 | #8d8d8d / #656565 | AaAa#ffffff / #ffffff |
Status
Danger, success, warning and info come from red, green, yellow and blue. Success and warning are aliases of their hue. The danger and info solids are their hue darkened just enough for white text; their soft fill, text and border are aliases of the hue. They are the only solids that take text and icons, and only with their own on-* tokens.
| Status | color-* | color-background-* | color-text-* | color-border-* | color-text-on-* | color-icon-on-* |
|---|---|---|---|---|---|---|
| danger | #e42732 / #e42732 | #ffe9e6 / #361715 | #c3001f / #ff9992 | #c77871 / #9a4f4a | AaAa#ffffff / #ffffff | #ffffff / #ffffff |
| success | #17a750 / #17a750 | #dbf7e0 / #112716 | #007132 / #4dcd73 | #64996f / #3c7048 | AaAa#0a0a0a / #0a0a0a | #0a0a0a / #0a0a0a |
| warning | #bc8d00 / #edb417 | #fbedd1 / #2a2009 | #7b5c00 / #edb417 | #a48a53 / #7a6129 | AaAa#0a0a0a / #0a0a0a | #0a0a0a / #0a0a0a |
| info | #0075e2 / #0075e2 | #e4f0ff / #112238 | #0060bb / #82b9ff | #658fc6 / #3d669a | AaAa#ffffff / #ffffff | #ffffff / #ffffff |