Color
One restrained accent, cool-grey surfaces and status ramps with identical lightness steps.
Every semantic colour token, grouped by role, with its light and dark value. The contrast badges are computed at build time from the oklch values against the background the token is meant to sit on: text on layer-1, status text on its status background, button text on its button.
surface
| Token | Light | Dark | Contrast (light / dark) |
|---|---|---|---|
| surface.canvas | oklch(0.985 0.002 250) | oklch(0.11 0.01 250) | — |
| surface.layer-1 | oklch(1 0 0) | oklch(0.15 0.012 250) | — |
| surface.layer-1-hover | oklch(0.965 0.003 250) | oklch(0.21 0.012 250) | — |
| surface.layer-2 | oklch(0.985 0.002 250) | oklch(0.21 0.012 250) | — |
| surface.layer-2-hover | oklch(0.965 0.003 250) | oklch(0.25 0.012 250) | — |
| surface.layer-3 | oklch(0.965 0.003 250) | oklch(0.25 0.012 250) | — |
| surface.layer-3-hover | oklch(0.925 0.005 250) | oklch(0.29 0.012 250) | — |
| surface.overlay | oklch(1 0 0) | oklch(0.21 0.012 250) | — |
| surface.inverse | oklch(0.15 0.012 250) | oklch(0.985 0.002 250) | — |
fg
| Token | Light | Dark | Contrast (light / dark) |
|---|---|---|---|
| fg.primary | oklch(0.15 0.012 250) | oklch(0.985 0.002 250) | 19.67:1 AAA18.84:1 AAA on surface.layer-1 |
| fg.secondary | oklch(0.38 0.012 250) | oklch(0.87 0.007 250) | 10.00:1 AAA13.28:1 AAA on surface.layer-1 |
| fg.muted | oklch(0.48 0.012 250) | oklch(0.66 0.01 250) | 6.53:1 AA6.33:1 AA on surface.layer-1 |
| fg.placeholder | oklch(0.53 0.012 250) | oklch(0.66 0.01 250) | 5.27:1 AA6.33:1 AA on surface.layer-1 |
| fg.disabled | oklch(0.66 0.01 250) | oklch(0.48 0.012 250) | 3.11:1 AA-large3.01:1 AA-large on surface.layer-1 |
| fg.inverse | oklch(1 0 0) | oklch(0.15 0.012 250) | 19.67:1 AAA18.84:1 AAA on surface.inverse |
| fg.numeric | oklch(0.11 0.01 250) | oklch(1 0 0) | 20.45:1 AAA19.67:1 AAA on surface.layer-1 |
| fg.link | oklch(0.45 0.18 262) | oklch(0.79 0.12 262) | 7.74:1 AAA10.11:1 AAA on surface.layer-1 |
| fg.link-hover | oklch(0.38 0.15 262) | oklch(0.88 0.08 262) | 10.32:1 AAA13.68:1 AAA on surface.layer-1 |
| fg.on-accent | oklch(1 0 0) | oklch(1 0 0) | 6.00:1 AA6.00:1 AA on action.primary |
line
| Token | Light | Dark | Contrast (light / dark) |
|---|---|---|---|
| line.subtle | oklch(0.965 0.003 250) | oklch(0.21 0.012 250) | — |
| line.default | oklch(0.925 0.005 250) | oklch(0.29 0.012 250) | — |
| line.strong | oklch(0.53 0.012 250) | oklch(0.53 0.012 250) | 5.27:1 AA3.73:1 AA-large on surface.layer-1 |
| line.inverse | oklch(0.38 0.012 250) | oklch(0.87 0.007 250) | — |
action
| Token | Light | Dark | Contrast (light / dark) |
|---|---|---|---|
| action.primary | oklch(0.51 0.2 262) | oklch(0.51 0.2 262) | — |
| action.primary-hover | oklch(0.45 0.18 262) | oklch(0.45 0.18 262) | — |
| action.primary-active | oklch(0.38 0.15 262) | oklch(0.38 0.15 262) | — |
| action.primary-fg | oklch(1 0 0) | oklch(1 0 0) | 6.00:1 AA6.00:1 AA on action.primary |
| action.secondary | oklch(1 0 0) | oklch(0.15 0.012 250) | — |
| action.secondary-hover | oklch(0.985 0.002 250) | oklch(0.21 0.012 250) | — |
| action.secondary-active | oklch(0.965 0.003 250) | oklch(0.29 0.012 250) | — |
| action.secondary-fg | oklch(0.15 0.012 250) | oklch(0.985 0.002 250) | 19.67:1 AAA18.84:1 AAA on action.secondary |
| action.secondary-line | oklch(0.66 0.01 250) | oklch(0.48 0.012 250) | — |
| action.ghost-hover | oklch(0.965 0.003 250) | oklch(0.21 0.012 250) | — |
| action.ghost-active | oklch(0.925 0.005 250) | oklch(0.29 0.012 250) | — |
| action.destructive | oklch(0.53 0.2 27) | oklch(0.53 0.2 27) | — |
| action.destructive-hover | oklch(0.46 0.17 27) | oklch(0.46 0.17 27) | — |
| action.destructive-active | oklch(0.39 0.14 27) | oklch(0.39 0.14 27) | — |
| action.destructive-fg | oklch(1 0 0) | oklch(1 0 0) | 5.85:1 AA5.85:1 AA on action.destructive |
| action.disabled | oklch(0.925 0.005 250) | oklch(0.29 0.012 250) | — |
| action.disabled-fg | oklch(0.53 0.012 250) | oklch(0.66 0.01 250) | 4.23:1 AA-large4.54:1 AA on action.disabled |
status
| Token | Light | Dark | Contrast (light / dark) |
|---|---|---|---|
| status.neutral | oklch(0.48 0.012 250) | oklch(0.66 0.01 250) | 6.53:1 AA6.33:1 AA on surface.layer-1 |
| status.neutral-bg | oklch(0.965 0.003 250) | oklch(0.21 0.012 250) | — |
| status.neutral-fg | oklch(0.29 0.012 250) | oklch(0.925 0.005 250) | 12.74:1 AAA14.20:1 AAA on status.neutral-bg |
| status.neutral-line | oklch(0.66 0.01 250) | oklch(0.48 0.012 250) | — |
| status.neutral-solid | oklch(0.38 0.012 250) | oklch(0.87 0.007 250) | — |
| status.neutral-solid-fg | oklch(1 0 0) | oklch(0.11 0.01 250) | 10.00:1 AAA13.81:1 AAA on status.neutral-solid |
| status.success | oklch(0.5 0.14 152) | oklch(0.68 0.15 152) | 5.62:1 AA7.27:1 AAA on surface.layer-1 |
| status.success-bg | oklch(0.97 0.03 152) | oklch(0.24 0.05 152) | — |
| status.success-fg | oklch(0.37 0.1 152) | oklch(0.88 0.1 152) | 9.23:1 AAA11.70:1 AAA on status.success-bg |
| status.success-line | oklch(0.6 0.15 152) | oklch(0.5 0.14 152) | — |
| status.success-solid | oklch(0.44 0.12 152) | oklch(0.68 0.15 152) | — |
| status.success-solid-fg | oklch(1 0 0) | oklch(0.11 0.01 250) | 7.34:1 AAA7.56:1 AAA on status.success-solid |
| status.warning | oklch(0.6 0.15 60) | oklch(0.75 0.16 70) | 4.13:1 AA-large8.58:1 AAA on surface.layer-1 |
| status.warning-bg | oklch(0.98 0.03 80) | oklch(0.25 0.05 50) | — |
| status.warning-fg | oklch(0.41 0.11 50) | oklch(0.9 0.12 80) | 8.69:1 AAA11.91:1 AAA on status.warning-bg |
| status.warning-line | oklch(0.6 0.15 60) | oklch(0.6 0.15 60) | — |
| status.warning-solid | oklch(0.83 0.15 75) | oklch(0.83 0.15 75) | — |
| status.warning-solid-fg | oklch(0.11 0.01 250) | oklch(0.11 0.01 250) | 11.88:1 AAA11.88:1 AAA on status.warning-solid |
| status.critical | oklch(0.53 0.2 27) | oklch(0.68 0.18 27) | 5.85:1 AA6.30:1 AA on surface.layer-1 |
| status.critical-bg | oklch(0.97 0.02 27) | oklch(0.25 0.07 27) | — |
| status.critical-fg | oklch(0.39 0.14 27) | oklch(0.88 0.08 27) | 9.38:1 AAA11.09:1 AAA on status.critical-bg |
| status.critical-line | oklch(0.6 0.21 27) | oklch(0.53 0.2 27) | — |
| status.critical-solid | oklch(0.53 0.2 27) | oklch(0.53 0.2 27) | — |
| status.critical-solid-fg | oklch(1 0 0) | oklch(1 0 0) | 5.85:1 AA5.85:1 AA on status.critical-solid |
| status.info | oklch(0.52 0.13 230) | oklch(0.68 0.12 230) | 5.35:1 AA7.01:1 AAA on surface.layer-1 |
| status.info-bg | oklch(0.97 0.02 230) | oklch(0.24 0.05 230) | — |
| status.info-fg | oklch(0.38 0.09 230) | oklch(0.88 0.07 230) | 9.04:1 AAA11.54:1 AAA on status.info-bg |
| status.info-line | oklch(0.6 0.13 230) | oklch(0.52 0.13 230) | — |
| status.info-solid | oklch(0.52 0.13 230) | oklch(0.68 0.12 230) | — |
| status.info-solid-fg | oklch(1 0 0) | oklch(0.11 0.01 250) | 5.35:1 AA7.29:1 AAA on status.info-solid |
| status.accent | oklch(0.51 0.2 262) | oklch(0.68 0.16 262) | 6.00:1 AA6.72:1 AA on surface.layer-1 |
| status.accent-bg | oklch(0.97 0.02 262) | oklch(0.24 0.08 262) | — |
| status.accent-fg | oklch(0.38 0.15 262) | oklch(0.88 0.08 262) | 9.47:1 AAA11.54:1 AAA on status.accent-bg |
| status.accent-line | oklch(0.58 0.19 262) | oklch(0.51 0.2 262) | — |
| status.accent-solid | oklch(0.51 0.2 262) | oklch(0.51 0.2 262) | — |
| status.accent-solid-fg | oklch(1 0 0) | oklch(1 0 0) | 6.00:1 AA6.00:1 AA on status.accent-solid |
field
| Token | Light | Dark | Contrast (light / dark) |
|---|---|---|---|
| field.bg | oklch(1 0 0) | oklch(0.11 0.01 250) | — |
| field.bg-hover | oklch(0.985 0.002 250) | oklch(0.15 0.012 250) | — |
| field.bg-disabled | oklch(0.965 0.003 250) | oklch(0.21 0.012 250) | — |
| field.line | oklch(0.66 0.01 250) | oklch(0.48 0.012 250) | 3.11:1 AA-large3.13:1 AA-large on field.bg |
| field.line-hover | oklch(0.53 0.012 250) | oklch(0.53 0.012 250) | — |
| field.line-invalid | oklch(0.53 0.2 27) | oklch(0.6 0.21 27) | — |
| field.line-disabled | oklch(0.87 0.007 250) | oklch(0.29 0.012 250) | — |
focus
| Token | Light | Dark | Contrast (light / dark) |
|---|---|---|---|
| focus.ring | oklch(0.51 0.2 262) | oklch(0.68 0.16 262) | 6.00:1 AA6.72:1 AA on surface.layer-1 |
data
| Token | Light | Dark | Contrast (light / dark) |
|---|---|---|---|
| data.1 | oklch(0.51 0.2 262) | oklch(0.68 0.16 262) | — |
| data.2 | oklch(0.6 0.13 230) | oklch(0.68 0.12 230) | — |
| data.3 | oklch(0.6 0.15 152) | oklch(0.68 0.15 152) | — |
| data.4 | oklch(0.6 0.15 60) | oklch(0.75 0.16 70) | — |
| data.5 | oklch(0.6 0.21 27) | oklch(0.68 0.18 27) | — |
| data.6 | oklch(0.53 0.012 250) | oklch(0.66 0.01 250) | — |
| data.positive | oklch(0.44 0.12 152) | oklch(0.68 0.15 152) | — |
| data.negative | oklch(0.46 0.17 27) | oklch(0.68 0.18 27) | — |