All system color roles under tanrei.sys.color, resolved for light and dark. Swatches show the literal resolved values, so both themes are visible whichever theme you are reading in; translucent roles are drawn over the canvas they are meant for. For what the roles mean and how to use them, read Color.
Primary
| Role | Light | Dark | CSS custom property |
|---|
on-primary | #ffffff | #111111 | --tanrei-sys-color-on-primary |
on-primary-container | #1b1b1b | #ebebeb | --tanrei-sys-color-on-primary-container |
primary | #1b1b1b | #ebebeb | --tanrei-sys-color-primary |
primary-container | #eeeeee | #262626 | --tanrei-sys-color-primary-container |
Secondary
| Role | Light | Dark | CSS custom property |
|---|
on-secondary | #ffffff | #1b1b1b | --tanrei-sys-color-on-secondary |
on-secondary-container | #262626 | #e2e2e2 | --tanrei-sys-color-on-secondary-container |
secondary | #525252 | #b9b9b9 | --tanrei-sys-color-secondary |
secondary-container | #eeeeee | #242424 | --tanrei-sys-color-secondary-container |
Status: error, success, warning, info
| Role | Light | Dark | CSS custom property |
|---|
error | #cd262f | #ff928c | --tanrei-sys-color-error |
error-container | #ffedeb | #361d1b | --tanrei-sys-color-error-container |
info | #3066cb | #8eafff | --tanrei-sys-color-info |
info-container | #edf0ff | #1c2334 | --tanrei-sys-color-info-container |
on-error | #ffffff | #410004 | --tanrei-sys-color-on-error |
on-error-container | #3a211f | #ffe1df | --tanrei-sys-color-on-error-container |
on-info | #ffffff | #001944 | --tanrei-sys-color-on-info |
on-info-container | #212839 | #e1e8ff | --tanrei-sys-color-on-info-container |
on-success | #ffffff | #002108 | --tanrei-sys-color-on-success |
on-success-container | #1b2c1c | #daeed6 | --tanrei-sys-color-on-success-container |
on-warning | #ffffff | #2c1600 | --tanrei-sys-color-on-warning |
on-warning-container | #362410 | #ffe3cb | --tanrei-sys-color-on-warning-container |
success | #077b32 | #62c572 | --tanrei-sys-color-success |
success-container | #e2f6df | #172718 | --tanrei-sys-color-success-container |
warning | #9b5c00 | #f39e3a | --tanrei-sys-color-warning |
warning-container | #ffeee0 | #32200c | --tanrei-sys-color-warning-container |
Surface
| Role | Light | Dark | CSS custom property |
|---|
on-surface | #1b1b1b | #ebebeb | --tanrei-sys-color-on-surface |
on-surface-variant | #4b4b4b | #a0a0a0 | --tanrei-sys-color-on-surface-variant |
surface | #ffffff | #0b0b0b | --tanrei-sys-color-surface |
surface-bright | #ffffff | #1f1f1f | --tanrei-sys-color-surface-bright |
surface-container | #f6f6f6 | #151515 | --tanrei-sys-color-surface-container |
surface-container-high | #f3f3f3 | #1b1b1b | --tanrei-sys-color-surface-container-high |
surface-container-highest | #eeeeee | #222222 | --tanrei-sys-color-surface-container-highest |
surface-container-low | #f9f9f9 | #111111 | --tanrei-sys-color-surface-container-low |
surface-container-lowest | #ffffff | #040404 | --tanrei-sys-color-surface-container-lowest |
surface-dim | #f1f1f1 | #000000 | --tanrei-sys-color-surface-dim |
surface-variant | #eeeeee | #222222 | --tanrei-sys-color-surface-variant |
Outline
| Role | Light | Dark | CSS custom property |
|---|
outline | #848484 | #7c7c7c | --tanrei-sys-color-outline |
outline-variant | #000000 · 8% | #ffffff · 14% | --tanrei-sys-color-outline-variant |
Inverse
| Role | Light | Dark | CSS custom property |
|---|
inverse-link | #e2e2e2 | #1b1b1b | --tanrei-sys-color-inverse-link |
inverse-on-surface | #f1f1f1 | #1f1f1f | --tanrei-sys-color-inverse-on-surface |
inverse-primary | #e2e2e2 | #1b1b1b | --tanrei-sys-color-inverse-primary |
inverse-surface | #1f1f1f | #ebebeb | --tanrei-sys-color-inverse-surface |
Utility
| Role | Light | Dark | CSS custom property |
|---|
elevation-ring | #000000 · 8% | #ffffff · 14% | --tanrei-sys-color-elevation-ring |
elevation-shadow-1 | #000000 · 4% | #000000 · 10% | --tanrei-sys-color-elevation-shadow-1 |
elevation-shadow-2 | #000000 · 6% | #000000 · 16% | --tanrei-sys-color-elevation-shadow-2 |
elevation-shadow-3 | #000000 · 12% | #000000 · 30% | --tanrei-sys-color-elevation-shadow-3 |
focus-ring | #0070ac | #5db8ff | --tanrei-sys-color-focus-ring |
focus-ring-inner | #000000 · 0% | #000000 · 0% | --tanrei-sys-color-focus-ring-inner |
link | #1b1b1b | #ebebeb | --tanrei-sys-color-link |
scrim | #000000 · 40% | #000000 · 40% | --tanrei-sys-color-scrim |
shadow | #000000 | #000000 | --tanrei-sys-color-shadow |
Accent — a palette declared by the Tanrei system, not core vocabulary
| Role | Light | Dark | CSS custom property |
|---|
accent | #0070ac | #5db8ff | --tanrei-sys-color-accent |
accent-container | #ddedff | #003859 | --tanrei-sys-color-accent-container |
on-accent | #ffffff | #001d32 | --tanrei-sys-color-on-accent |
on-accent-container | #003352 | #c2e0ff | --tanrei-sys-color-on-accent-container |
Generated from design/tokens/tanrei.light.tokens.json, design/tokens/tanrei.dark.tokens.json
Primary
| Role | Light | Dark | CSS custom property |
|---|
on-primary | #ffffff | #111111 | --tanrei-sys-color-on-primary |
on-primary-container | #131313 | #f3f3f3 | --tanrei-sys-color-on-primary-container |
primary | #131313 | #f3f3f3 | --tanrei-sys-color-primary |
primary-container | #e8e8e8 | #2a2a2a | --tanrei-sys-color-primary-container |
Secondary
| Role | Light | Dark | CSS custom property |
|---|
on-secondary | #ffffff | #1b1b1b | --tanrei-sys-color-on-secondary |
on-secondary-container | #1b1b1b | #f1f1f1 | --tanrei-sys-color-on-secondary-container |
secondary | #424242 | #cccccc | --tanrei-sys-color-secondary |
secondary-container | #e8e8e8 | #282828 | --tanrei-sys-color-secondary-container |
Status: error, success, warning, info
| Role | Light | Dark | CSS custom property |
|---|
error | #b40e20 | #ffb3ae | --tanrei-sys-color-error |
error-container | #ffedeb | #361d1b | --tanrei-sys-color-error-container |
info | #1655b9 | #b0c6ff | --tanrei-sys-color-info |
info-container | #edf0ff | #1c2334 | --tanrei-sys-color-info-container |
on-error | #ffffff | #410004 | --tanrei-sys-color-on-error |
on-error-container | #311917 | #ffe9e7 | --tanrei-sys-color-on-error-container |
on-info | #ffffff | #001944 | --tanrei-sys-color-on-info |
on-info-container | #181f30 | #e9edff | --tanrei-sys-color-on-info-container |
on-success | #ffffff | #002108 | --tanrei-sys-color-on-success |
on-success-container | #132315 | #dff3dc | --tanrei-sys-color-on-success-container |
on-warning | #ffffff | #2c1600 | --tanrei-sys-color-on-warning |
on-warning-container | #2d1c08 | #ffead9 | --tanrei-sys-color-on-warning-container |
success | #006828 | #78dc86 | --tanrei-sys-color-success |
success-container | #e2f6df | #172718 | --tanrei-sys-color-success-container |
warning | #834d00 | #ffb86d | --tanrei-sys-color-warning |
warning-container | #ffeee0 | #32200c | --tanrei-sys-color-warning-container |
Surface
| Role | Light | Dark | CSS custom property |
|---|
on-surface | #131313 | #f3f3f3 | --tanrei-sys-color-on-surface |
on-surface-variant | #3b3b3b | #b9b9b9 | --tanrei-sys-color-on-surface-variant |
surface | #ffffff | #0b0b0b | --tanrei-sys-color-surface |
surface-bright | #ffffff | #1f1f1f | --tanrei-sys-color-surface-bright |
surface-container | #f6f6f6 | #151515 | --tanrei-sys-color-surface-container |
surface-container-high | #f3f3f3 | #1b1b1b | --tanrei-sys-color-surface-container-high |
surface-container-highest | #eeeeee | #222222 | --tanrei-sys-color-surface-container-highest |
surface-container-low | #f9f9f9 | #111111 | --tanrei-sys-color-surface-container-low |
surface-container-lowest | #ffffff | #040404 | --tanrei-sys-color-surface-container-lowest |
surface-dim | #f1f1f1 | #000000 | --tanrei-sys-color-surface-dim |
surface-variant | #eeeeee | #222222 | --tanrei-sys-color-surface-variant |
Outline
| Role | Light | Dark | CSS custom property |
|---|
outline | #6d6d6d | #9b9b9b | --tanrei-sys-color-outline |
outline-variant | #000000 · 44% | #ffffff · 36% | --tanrei-sys-color-outline-variant |
Inverse
| Role | Light | Dark | CSS custom property |
|---|
inverse-link | #e2e2e2 | #1b1b1b | --tanrei-sys-color-inverse-link |
inverse-on-surface | #f1f1f1 | #1f1f1f | --tanrei-sys-color-inverse-on-surface |
inverse-primary | #e2e2e2 | #1b1b1b | --tanrei-sys-color-inverse-primary |
inverse-surface | #1f1f1f | #ebebeb | --tanrei-sys-color-inverse-surface |
Utility
| Role | Light | Dark | CSS custom property |
|---|
elevation-ring | #000000 · 14% | #ffffff · 22% | --tanrei-sys-color-elevation-ring |
elevation-shadow-1 | #000000 · 4% | #000000 · 10% | --tanrei-sys-color-elevation-shadow-1 |
elevation-shadow-2 | #000000 · 6% | #000000 · 16% | --tanrei-sys-color-elevation-shadow-2 |
elevation-shadow-3 | #000000 · 12% | #000000 · 30% | --tanrei-sys-color-elevation-shadow-3 |
focus-ring | #005e91 | #94ccff | --tanrei-sys-color-focus-ring |
focus-ring-inner | #000000 · 0% | #000000 · 0% | --tanrei-sys-color-focus-ring-inner |
link | #131313 | #f3f3f3 | --tanrei-sys-color-link |
scrim | #000000 · 40% | #000000 · 40% | --tanrei-sys-color-scrim |
shadow | #000000 | #000000 | --tanrei-sys-color-shadow |
Accent — a palette declared by the Tanrei system, not core vocabulary
| Role | Light | Dark | CSS custom property |
|---|
accent | #005e91 | #94ccff | --tanrei-sys-color-accent |
accent-container | #d2e8ff | #003859 | --tanrei-sys-color-accent-container |
on-accent | #ffffff | #001d32 | --tanrei-sys-color-on-accent |
on-accent-container | #002842 | #d8eaff | --tanrei-sys-color-on-accent-container |
Generated from design/tokens/tanrei.light-medium.tokens.json, design/tokens/tanrei.dark-medium.tokens.json
Primary
| Role | Light | Dark | CSS custom property |
|---|
on-primary | #ffffff | #111111 | --tanrei-sys-color-on-primary |
on-primary-container | #000000 | #ffffff | --tanrei-sys-color-on-primary-container |
primary | #000000 | #ffffff | --tanrei-sys-color-primary |
primary-container | #e2e2e2 | #2e2e2e | --tanrei-sys-color-primary-container |
Secondary
| Role | Light | Dark | CSS custom property |
|---|
on-secondary | #ffffff | #1b1b1b | --tanrei-sys-color-on-secondary |
on-secondary-container | #000000 | #ffffff | --tanrei-sys-color-on-secondary-container |
secondary | #303030 | #e2e2e2 | --tanrei-sys-color-secondary |
secondary-container | #e2e2e2 | #2c2c2c | --tanrei-sys-color-secondary-container |
Status: error, success, warning, info
| Role | Light | Dark | CSS custom property |
|---|
error | #930015 | #ffcfcb | --tanrei-sys-color-error |
error-container | #ffedeb | #361d1b | --tanrei-sys-color-error-container |
info | #00429b | #cdd9ff | --tanrei-sys-color-info |
info-container | #edf0ff | #1c2334 | --tanrei-sys-color-info-container |
on-error | #ffffff | #410004 | --tanrei-sys-color-on-error |
on-error-container | #281110 | #fff0ef | --tanrei-sys-color-on-error-container |
on-info | #ffffff | #001944 | --tanrei-sys-color-on-info |
on-info-container | #101728 | #f1f3ff | --tanrei-sys-color-on-info-container |
on-success | #ffffff | #002108 | --tanrei-sys-color-on-success |
on-success-container | #0b1b0d | #e5f9e1 | --tanrei-sys-color-on-success-container |
on-warning | #ffffff | #2c1600 | --tanrei-sys-color-on-warning |
on-warning-container | #241403 | #fff1e7 | --tanrei-sys-color-on-warning-container |
success | #00531e | #8bf097 | --tanrei-sys-color-success |
success-container | #e2f6df | #172718 | --tanrei-sys-color-success-container |
warning | #683c00 | #ffd2a6 | --tanrei-sys-color-warning |
warning-container | #ffeee0 | #32200c | --tanrei-sys-color-warning-container |
Surface
| Role | Light | Dark | CSS custom property |
|---|
on-surface | #000000 | #ffffff | --tanrei-sys-color-on-surface |
on-surface-variant | #262626 | #d4d4d4 | --tanrei-sys-color-on-surface-variant |
surface | #ffffff | #0b0b0b | --tanrei-sys-color-surface |
surface-bright | #ffffff | #1f1f1f | --tanrei-sys-color-surface-bright |
surface-container | #f6f6f6 | #151515 | --tanrei-sys-color-surface-container |
surface-container-high | #f3f3f3 | #1b1b1b | --tanrei-sys-color-surface-container-high |
surface-container-highest | #eeeeee | #222222 | --tanrei-sys-color-surface-container-highest |
surface-container-low | #f9f9f9 | #111111 | --tanrei-sys-color-surface-container-low |
surface-container-lowest | #ffffff | #040404 | --tanrei-sys-color-surface-container-lowest |
surface-dim | #f1f1f1 | #000000 | --tanrei-sys-color-surface-dim |
surface-variant | #eeeeee | #222222 | --tanrei-sys-color-surface-variant |
Outline
| Role | Light | Dark | CSS custom property |
|---|
outline | #4b4b4b | #c6c6c6 | --tanrei-sys-color-outline |
outline-variant | #000000 · 56% | #ffffff · 48% | --tanrei-sys-color-outline-variant |
Inverse
| Role | Light | Dark | CSS custom property |
|---|
inverse-link | #e2e2e2 | #1b1b1b | --tanrei-sys-color-inverse-link |
inverse-on-surface | #f1f1f1 | #1f1f1f | --tanrei-sys-color-inverse-on-surface |
inverse-primary | #e2e2e2 | #1b1b1b | --tanrei-sys-color-inverse-primary |
inverse-surface | #1f1f1f | #ebebeb | --tanrei-sys-color-inverse-surface |
Utility
| Role | Light | Dark | CSS custom property |
|---|
elevation-ring | #000000 · 30% | #ffffff · 40% | --tanrei-sys-color-elevation-ring |
elevation-shadow-1 | #000000 · 4% | #000000 · 10% | --tanrei-sys-color-elevation-shadow-1 |
elevation-shadow-2 | #000000 · 6% | #000000 · 16% | --tanrei-sys-color-elevation-shadow-2 |
elevation-shadow-3 | #000000 · 12% | #000000 · 30% | --tanrei-sys-color-elevation-shadow-3 |
focus-ring | #004a74 | #bddeff | --tanrei-sys-color-focus-ring |
focus-ring-inner | #000000 · 0% | #000000 · 0% | --tanrei-sys-color-focus-ring-inner |
link | #000000 | #ffffff | --tanrei-sys-color-link |
scrim | #000000 · 40% | #000000 · 40% | --tanrei-sys-color-scrim |
shadow | #000000 | #000000 | --tanrei-sys-color-shadow |
Accent — a palette declared by the Tanrei system, not core vocabulary
| Role | Light | Dark | CSS custom property |
|---|
accent | #004a74 | #bddeff | --tanrei-sys-color-accent |
accent-container | #c8e3ff | #003859 | --tanrei-sys-color-accent-container |
on-accent | #ffffff | #001d32 | --tanrei-sys-color-on-accent |
on-accent-container | #001d32 | #edf4ff | --tanrei-sys-color-on-accent-container |
Generated from design/tokens/tanrei.light-high.tokens.json, design/tokens/tanrei.dark-high.tokens.json