--- title: "Color tokens" description: "Every system color role with its resolved light and dark value at each contrast level." url: "https://tanrei.chnotchy.com/tokens/color/" last_updated: 2026-10-23T17:33:05.000Z --- # Color tokens > Every system color role with its resolved light and dark value at each contrast level. 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](https://tanrei.chnotchy.com/foundations/color/). **Standard** ### 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` **Medium** ### 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` **High** ### 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`