Every token in the system with its oklch value. Toggle the theme to see how one color drives the entire inversion.
The entire system pivots on a single oklch value. In dark mode it is the canvas. In light mode it becomes the primary text, the CTA button, and at reduced opacities it tints every surface, border, and overlay.
| oklch | Dark mode | Light mode | |
|---|---|---|---|
| 0.22 0.044 230.17 | --bg-canvas (page background) | --text-primary, --btn-primary-bg (headings, CTA button) | |
| ... / 10% | -- | --border-standard (cards, inputs) | |
| ... / 6% | -- | --border-subtle (dividers) | |
| ... / 5% | -- | --surface-05 (hover, badge bg) | |
| ... / 2% | -- | --surface-02 (input bg, table header) | |
| ... / 50% | -- | --overlay-backdrop | |
| ... / 85% | --overlay-backdrop | -- |
| Token | Dark oklch | Light oklch | Role | |
|---|---|---|---|---|
| --bg-canvas | 0.22 0.044 230 | 0.975 0.005 228 | Page background | |
| --bg-panel | 0.25 0.038 228 | 0.952 0.008 228 | Sidebars, panels | |
| --bg-surface | 0.285 0.041 228 | 0.993 0.003 228 | Cards, popovers | |
| --bg-elevated | 0.331 0.043 228 | 0.988 0.004 228 | Hover, raised |
Both modes carry brand hue 228 (teal). Dark: luminance 0.22 to 0.331, chroma ~0.04. Light: luminance 0.952 to 0.993, chroma 0.003 to 0.008.
| Token | Dark | Light | Role | |
|---|---|---|---|---|
| --surface-02 | 0.23 0.041 233 | 0.968 0.006 228 | Input bg, table header | |
| --surface-03 | 0.239 0.04 234 | 0.963 0.007 228 | Mid compositing | |
| --surface-05 | 0.256 0.041 236 | 0.953 0.009 228 | Hover, badge bg |
| Token | Dark oklch | Light oklch | Role | |
|---|---|---|---|---|
| --text-primary | 0.978 0 0 | 0.22 0.044 230 | Headings, values | |
| --text-secondary | 0.874 0.015 261 | 0.331 0.043 228 | Body text | |
| --text-tertiary | 0.649 0.015 262 | 0.521 0.024 233 | Metadata, placeholders | |
| --text-quaternary | 0.61 0.024 233 | 0.53 0.015 232 | Timestamps, disabled |
Primary inverts between modes (near-white L=0.978 in dark, forest-black L=0.22 in light). Quaternary is independently tuned per mode to pass WCAG AA (4.5:1) at all text sizes.
| Token | oklch | |
|---|---|---|
| --accent-primary | 0.825 0.237 148 | |
| --accent-functional | 0.458 0.096 165 | |
| --accent-hover | 0.625 0.173 150 | |
| --accent-text | 0.825 0.237 148 | |
| --btn-primary-bg | 0.458 0.096 165 | |
| --btn-primary-hover | 0.625 0.173 150 |
CTA button is green in dark mode, forest-black in light mode. Hover reveals brand green in both modes. --accent-text shifts from neon (L=0.825) to functional (L=0.458) for AA contrast.
| Token | Dark | Light | |
|---|---|---|---|
| --status-success | 0.825 0.237 148 | 0.458 0.096 165 | |
| --status-error | 0.637 0.208 25 | 0.57 0.215 27 | |
| --status-warning | 0.769 0.165 70 | 0.555 0.146 49 | |
| --status-info | 0.62 0.228 260 | 0.473 0.168 257 |
Light mode darkens status colors (lower L values) to pass AA contrast on white. Hues stay in the same family.
| Token | Dark | Light | Role |
|---|---|---|---|
| --border-subtle | white / 5% | forest / 6% | Dividers, faint separators |
| --border-standard | white / 8% | forest / 10% | Cards, inputs, tables |
Dark: semi-transparent white on teal. Light: semi-transparent forest-black on white. Same visual weight, inverted source.
| Token | Family | Role |
|---|---|---|
| --font-primary | Satoshi | UI, headings, body, nav |
| --font-mono | Source Code Pro | Technical labels (uppercase) |
| --font-data | JetBrains Mono | Amounts, IDs (tabular-nums) |
| Weight | Use |
|---|---|
| 400 | Reading text, body copy |
| 500 | UI, navigation, labels (signature) |
| 700 | Strong emphasis, display, logo |
| Value | Name | Use |
|---|---|---|
| 2px | Micro | Inline badges, toolbar |
| 4px | Standard | Small containers |
| 6px | Comfortable | Buttons, inputs |
| 8px | Card | Cards, tables |
| 12px | Panel | Featured cards |
| 9999px | Pill | Chips, tags |
| 50% | Circle | Avatars, dots |
| Token | Value | Use |
|---|---|---|
| --duration-press | 100ms | Active/pressed |
| --duration-state | 150ms | Toggle, switch |
| --duration-hover | 150ms | Background hover |
| --duration-focus | 150ms | Focus ring |
| --duration-reveal | 200ms | Tooltip, dropdown |
| --duration-panel | 300ms | Modal, theme |
| --duration-mount | 400ms | Content enter |
| --duration-data | 600ms | Count-up, chart |
| Token | Value |
|---|---|
| --ease-out | cubic-bezier(0.16, 1, 0.3, 1) |
| --ease-in-out | cubic-bezier(0.77, 0, 0.175, 1) |
| --ease-spring | cubic-bezier(0.34, 1.56, 0.64, 1) |
| State | Treatment |
|---|---|
| Hover | bg +1 luminance step |
| Active | scale(0.97) |
| Focus | 2px canvas + 4px accent ring |
| Disabled | opacity: 0.4 |
| Loading | shimmer, 1.5s infinite |