Every token in one place — its value in both themes and its computed contrast.
The table is built from the same file the stylesheet and the Tailwind preset are generated from, so it cannot describe a palette the product does not have. The contrast is computed rather than written down: a number typed by hand is right on the day it was typed.
Contrast is measured against the light theme. 4.5 is the threshold for body text, 3 for large text and interface borders. Ink tokens should pass on both surfaces; border tokens only on the one they are drawn on.
| Token | Light | Dark | Contrast on --bg | Contrast on --surface |
|---|---|---|---|---|
--bg | #f1f0ed | #0b0a09 | 1.00— | 1.14— |
--surface | #ffffff | #2e2b27 | 1.14— | 1.00— |
--surface-2 | #f4f3f0 | #3e3934 | 1.03— | 1.11— |
--surface-3 | #e6e4df | #4e473f | 1.11— | 1.27— |
--border | #ddd9d3 | #665d53 | 1.23— | 1.41— |
--border-strong | #c4bfb8 | #877c6f | 1.60— | 1.83— |
--ink | #0c0a09 | #fffefd | 17.34AA | 19.76AA |
--ink-2 | #3f3b37 | #eeeae3 | 9.74AA | 11.10AA |
--ink-3 | #57534e | #cbc3b7 | 6.69AA | 7.63AA |
--ink-4 | #696460 | #aba398 | 5.13AA | 5.85AA |
--ink-5 | #d6d3d1 | #605c57 | 1.31— | 1.49— |
--blue-accent | #2563eb | #5192f7 | 4.54AA | 5.17AA |
--blue-accent-ink | #1d4ed8 | #bfdbfe | 5.88AA | 6.70AA |
--blue-accent-bg | #eff6ff | #0f1b30 | 1.05— | 1.09— |
--blue-accent-border | #bfdbfe | #1e3a8a | 1.25— | 1.42— |
--accent | var(--blue-accent) | var(--blue-accent) | — | — |
--accent-ink | var(--blue-accent-ink) | var(--blue-accent-ink) | — | — |
--accent-bg | var(--blue-accent-bg) | var(--blue-accent-bg) | — | — |
--accent-border | var(--blue-accent-border) | var(--blue-accent-border) | — | — |
--ok | #047454 | #22c55e | 5.07AA | 5.78AA |
--ok-bg | #eaf7ee | #0a2013 | 1.03— | 1.10— |
--ok-border | #a7dfba | #166534 | 1.33— | 1.51— |
--warn | #b05109 | #f59e0b | 4.58AA | 5.21AA |
--warn-bg | #fffbeb | #2a1e07 | 1.10— | 1.04— |
--warn-border | #fde68a | #92400e | 1.09— | 1.25— |
--danger | #b91c1c | #f36464 | 5.68AA | 6.47AA |
--danger-bg | #fef2f2 | #2a1010 | 1.04— | 1.09— |
--danger-border | #fecaca | #991b1b | 1.27— | 1.45— |
--custom | #6d28d9 | #ae94fa | 6.23AA | 7.10AA |
--custom-bg | #f5f3ff | #1e1533 | 1.04— | 1.10— |
--custom-border | #ddd6fe | #6d28d9 | 1.22— | 1.39— |
--plan | #faf5ff | #faf5ff | 1.06— | 1.07— |
--plan-bg | #6b21a8 | #9333ea | 7.65AA | 8.72AA |
--plan-border | #7e22ce | #a855f7 | 6.13AA | 6.98AA |
--code-comment | #696460 | #aba398 | 5.13AA | 5.85AA |
--code-keyword | #6d28d9 | #c4aefc | 6.23AA | 7.10AA |
--code-string | #047454 | #5ddb99 | 5.07AA | 5.78AA |
--code-tag | #2563eb | #7ab0fa | 4.54AA | 5.17AA |
--code-attr | #b05109 | #f5b74a | 4.58AA | 5.21AA |
--code-number | #b91c1c | #f79a9a | 5.68AA | 6.47AA |
--code-punct | #57534e | #cbc3b7 | 6.69AA | 7.63AA |
--s-1 | 4px | 4px | — | — |
--s-2 | 8px | 8px | — | — |
--s-3 | 12px | 12px | — | — |
--s-4 | 16px | 16px | — | — |
--s-5 | 24px | 24px | — | — |
--s-6 | 32px | 32px | — | — |
--s-7 | 48px | 48px | — | — |
--s-8 | 72px | 72px | — | — |
--r-xs | 4px | 4px | — | — |
--r-sm | 6px | 6px | — | — |
--r-md | 10px | 10px | — | — |
--r-lg | 14px | 14px | — | — |
--font-sans | "Geist Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | "Geist Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | — | — |
--font-mono | "Geist Mono", ui-monospace, Menlo, Consolas, monospace | "Geist Mono", ui-monospace, Menlo, Consolas, monospace | — | — |
--motion-ease | cubic-bezier(0.2, 0.6, 0.3, 1) | cubic-bezier(0.2, 0.6, 0.3, 1) | — | — |
--motion-dur | 0.22s | 0.22s | — | — |