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.00surface | 1.14surface |
--surface | #ffffff | #2e2b27 | 1.14surface | 1.00surface |
--surface-2 | #f4f3f0 | #3e3934 | 1.03surface | 1.11surface |
--surface-3 | #e6e4df | #4e473f | 1.11surface | 1.27surface |
--border | #ddd9d3 | #665d53 | 1.23decorative | 1.41decorative |
--border-strong | #8d8a84 | #8f8376 | 3.02outline 3 ✓ | 3.44outline 3 ✓ |
--ink | #0c0a09 | #fffefd | 17.34text 4.5 ✓ | 19.76text 4.5 ✓ |
--ink-2 | #3f3b37 | #eeeae3 | 9.74text 4.5 ✓ | 11.10text 4.5 ✓ |
--ink-3 | #57534e | #cbc3b7 | 6.69text 4.5 ✓ | 7.63text 4.5 ✓ |
--ink-4 | #696460 | #aba398 | 5.13text 4.5 ✓ | 5.85text 4.5 ✓ |
--ink-5 | #d6d3d1 | #605c57 | 1.31decorative | 1.49decorative |
--blue-accent | #2563eb | #5192f7 | 4.54text 4.5 ✓ | 5.17text 4.5 ✓ |
--blue-accent-ink | #1d4ed8 | #bfdbfe | 5.88text 4.5 ✓ | 6.70text 4.5 ✓ |
--blue-accent-bg | #eff6ff | #0f1b30 | 1.05surface | 1.09surface |
--blue-accent-border | #bfdbfe | #1e3a8a | 1.25decorative | 1.42decorative |
--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.07text 4.5 ✓ | 5.78text 4.5 ✓ |
--ok-bg | #eaf7ee | #0a2013 | 1.03surface | 1.10surface |
--ok-border | #a7dfba | #166534 | 1.33decorative | 1.51decorative |
--warn | #b05109 | #f59e0b | 4.58text 4.5 ✓ | 5.21text 4.5 ✓ |
--warn-bg | #fffbeb | #2a1e07 | 1.10surface | 1.04surface |
--warn-border | #fde68a | #92400e | 1.09decorative | 1.25decorative |
--danger | #b91c1c | #f36464 | 5.68text 4.5 ✓ | 6.47text 4.5 ✓ |
--danger-bg | #fef2f2 | #2a1010 | 1.04surface | 1.09surface |
--danger-border | #fecaca | #991b1b | 1.27decorative | 1.45decorative |
--custom | #6d28d9 | #ae94fa | 6.23text 4.5 ✓ | 7.10text 4.5 ✓ |
--custom-bg | #f5f3ff | #1e1533 | 1.04surface | 1.10surface |
--custom-border | #ddd6fe | #6d28d9 | 1.22decorative | 1.39decorative |
--plan | #faf5ff | #faf5ff | 1.06surface | 1.07surface |
--plan-bg | #6b21a8 | #9333ea | 7.65surface | 8.72surface |
--plan-border | #7e22ce | #a855f7 | 6.13decorative | 6.98decorative |
--code-comment | #696460 | #aba398 | 5.13text 4.5 ✓ | 5.85text 4.5 ✓ |
--code-keyword | #6d28d9 | #c4aefc | 6.23text 4.5 ✓ | 7.10text 4.5 ✓ |
--code-string | #047454 | #5ddb99 | 5.07text 4.5 ✓ | 5.78text 4.5 ✓ |
--code-tag | #2563eb | #7ab0fa | 4.54text 4.5 ✓ | 5.17text 4.5 ✓ |
--code-attr | #b05109 | #f5b74a | 4.58text 4.5 ✓ | 5.21text 4.5 ✓ |
--code-number | #b91c1c | #f79a9a | 5.68text 4.5 ✓ | 6.47text 4.5 ✓ |
--code-punct | #57534e | #cbc3b7 | 6.69text 4.5 ✓ | 7.63text 4.5 ✓ |
--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 | — | — |