Token reference
Look-up tables for every shipped token, generated from the CSS on each build: resolved values per theme, spacing, density aliases, and the CI-gated contrast ratios. For what the tiers MEAN and when to reach for which, read Design tokens once — this page is the reference you come back to. The semantic tier is stable API: renaming or removing any token below is a major version (versioning). Each token resolves per theme to a scale step (or a deliberate literal); status colors carry meaning and are never re-skinned by palettes.
Color tokens
Backgrounds
| Token | Role | Light | Dark |
|---|---|---|---|
| --bo-color-bg-canvas | the page itself, behind everything | #f9fafb (gray-50) | #0f1115 |
| --bo-color-bg-surface | cards, panels, table bodies | #ffffff | #1a1d23 |
| --bo-color-bg-surface-raised | popovers, dropdowns, dialogs | #ffffff | #22262e |
| --bo-color-bg-muted | subdued fills: table stripes, wells, disabled fields | #f3f4f6 (gray-100) | #262a33 |
| --bo-color-bg-hover | opaque hover fill (sticky cells that must cover content) | #f3f4f6 (gray-100) | #262a33 |
| --bo-color-bg-selected | the selected row/item fill | #f0fdfa (teal-50) | #0b3b37 |
Borders
| Token | Role | Light | Dark |
|---|---|---|---|
| --bo-color-border-default | hairlines: table rules, card edges | #e5e7eb (gray-200) | #2e333d |
| --bo-color-border-strong | emphasized dividers | #d1d5db (gray-300) | #3d434f |
| --bo-color-border-control | input/select boundaries (≥3:1 against surface) | #6b7280 (gray-500) | #9ca3af (gray-400) |
Text
| Token | Role | Light | Dark |
|---|---|---|---|
| --bo-color-text-primary | body text | #111827 (gray-900) | #f9fafb (gray-50) |
| --bo-color-text-secondary | supporting text | #374151 (gray-700) | #d1d5db (gray-300) |
| --bo-color-text-muted | captions, hints (still AA on muted fills) | #4b5563 (gray-600) | #9ca3af (gray-400) |
| --bo-color-text-disabled | disabled labels — decorative only | #9ca3af (gray-400) | #4b5563 (gray-600) |
| --bo-color-text-inverse | text on solid accent/status fills | #ffffff | #ffffff |
Accent (brand)
| Token | Role | Light | Dark |
|---|---|---|---|
| --bo-color-accent | the brand color — links, active nav | #0f766e (teal-700) | #2dd4bf (teal-400) |
| --bo-color-accent-strong | hover/active accent | #115e59 (teal-800) | #115e59 (teal-800) |
| --bo-color-accent-solid | solid fills carrying text-inverse | #0f766e (teal-700) | #0f766e (teal-700) |
| --bo-color-accent-subtle | tinted accent backgrounds | #f0fdfa (teal-50) | #0b3b37 |
| --bo-color-accent-text | accent-colored text on surfaces | #115e59 (teal-800) | #5eead4 (teal-300) |
| --bo-color-focus-ring | the keyboard focus indicator | #0d9488 (teal-600) | #0d9488 (teal-600) |
Status
| Token | Role | Light | Dark |
|---|---|---|---|
| --bo-color-danger | errors, destructive actions | #dc2626 (red-600) | #f87171 (red-400) |
| --bo-color-danger-solid | solid danger fills — destructive buttons | #dc2626 (red-600) | #dc2626 (red-600) |
| --bo-color-danger-strong | hover/active on solid danger | #b91c1c (red-700) | #b91c1c (red-700) |
| --bo-color-danger-subtle | danger-tinted backgrounds | #fef2f2 (red-50) | #3a1d1d |
| --bo-color-danger-text | danger text on surfaces | #b91c1c (red-700) | #fca5a5 (red-300) |
| --bo-color-warning | warning accents — alert stripe, table markers | #f59e0b (amber-500) | #f59e0b (amber-500) |
| --bo-color-warning-strong | warning fills and emphasis | #b45309 (amber-700) | #f59e0b (amber-500) |
| --bo-color-warning-subtle | warning-tinted backgrounds | #fffbeb (amber-50) | #3a2e14 |
| --bo-color-warning-text | warning text on surfaces | #b45309 (amber-700) | #fcd34d (amber-300) |
| --bo-color-success | confirmations, positive states | #22c55e (green-500) | #22c55e (green-500) |
| --bo-color-success-subtle | success-tinted backgrounds | #f0fdf4 (green-50) | #14301d |
| --bo-color-success-text | success text on surfaces | #15803d (green-700) | #86efac (green-300) |
Dark literals (the #1a1d23-family
surfaces) are deliberate: dark surfaces are tuned as a set rather than
aliased to gray steps, so elevation reads as a ladder. That tuning is
inside the semantic contract — apps never need to reproduce it.
Spacing scale
--bo-space-0 0 --bo-space-1 0.25rem --bo-space-2 0.5rem --bo-space-3 0.75rem --bo-space-4 1rem --bo-space-5 1.25rem --bo-space-6 1.5rem --bo-space-8 2rem --bo-space-10 2.5rem --bo-space-12 3rem Contrast ratios generated & CI-gated
Computed from the shipped token values by
check-contrast.mjs on every build — the build fails if any pair
drops below its threshold, so these numbers cannot drift.
40/40 light-theme pairs pass their required minimum — 14 with AAA headroom.
| light | on | sample | ratio | min | level |
|---|---|---|---|---|---|
| text-primary #111827 | bg-surface #ffffff | 17.74 | 4.5 | AAA | |
| text-primary #111827 | bg-canvas #f9fafb | 16.98 | 4.5 | AAA | |
| text-secondary #374151 | bg-surface #ffffff | 10.31 | 4.5 | AAA | |
| text-secondary #374151 | bg-muted #f3f4f6 | 9.37 | 4.5 | AAA | |
| text-muted #4b5563 | bg-surface #ffffff | 7.56 | 4.5 | AAA | |
| text-muted #4b5563 | bg-muted #f3f4f6 | 6.87 | 4.5 | AA | |
| text-inverse #ffffff | accent-solid #0f766e | 5.47 | 4.5 | AA | |
| text-inverse #ffffff | danger-solid #dc2626 | 4.83 | 4.5 | AA | |
| bg-surface #ffffff | text-primary #111827 | 17.74 | 4.5 | AAA | |
| accent-text #115e59 | accent-subtle #f0fdfa | 7.27 | 4.5 | AAA | |
| danger-text #b91c1c | danger-subtle #fef2f2 | 5.91 | 4.5 | AA | |
| warning-text #b45309 | warning-subtle #fffbeb | 4.84 | 4.5 | AA | |
| success-text #15803d | success-subtle #f0fdf4 | 4.79 | 4.5 | AA | |
| danger-text #b91c1c | bg-surface #ffffff | 6.47 | 4.5 | AA | |
| danger-text #b91c1c | bg-canvas #f9fafb | 6.19 | 4.5 | AA | |
| success-text #15803d | bg-surface #ffffff | 5.02 | 4.5 | AA | |
| success-text #15803d | bg-canvas #f9fafb | 4.8 | 4.5 | AA | |
| accent #0f766e | bg-surface #ffffff | 5.47 | 4.5 | AA | |
| text-primary #111827 | bg-hover #f3f4f6 | 16.12 | 4.5 | AAA | |
| text-primary #111827 | bg-selected #f0fdfa | 17.01 | 4.5 | AAA | |
| text-secondary #374151 | bg-selected #f0fdfa | 9.88 | 4.5 | AAA | |
| accent-text #115e59 | bg-selected #f0fdfa | 7.27 | 4.5 | AAA | |
| text-primary #111827 | bg-surface-raised #ffffff | 17.74 | 4.5 | AAA | |
| text-secondary #374151 | bg-canvas #f9fafb | 9.86 | 4.5 | AAA | |
| border-control #6b7280 | bg-surface #ffffff | 4.83 | 3 | AA | |
| accent #0f766e | bg-selected #f0fdfa | 5.25 | 3 | AA | |
| --bo-state-error-color #dc2626 | bg-surface #ffffff | 4.83 | 3 | AA | |
| accent #0f766e | accent-subtle #f0fdfa | 5.25 | 3 | AA | |
| border-control #6b7280 | bg-hover #f3f4f6 | 4.39 | 3 | AA Large | |
| border-control #6b7280 | bg-muted #f3f4f6 | 4.39 | 3 | AA Large | |
| focus-ring #0d9488 | bg-canvas #f9fafb | 3.58 | 3 | AA Large | |
| accent #0f766e | bg-muted #f3f4f6 | 4.97 | 3 | AA | |
| warning-strong #b45309 | bg-muted #f3f4f6 | 4.56 | 3 | AA | |
| warning-strong #b45309 | bg-surface #ffffff | 5.02 | 3 | AA | |
| danger #dc2626 | bg-muted #f3f4f6 | 4.39 | 3 | AA Large | |
| text-primary #111827 | bg-muted #f3f4f6 | 16.12 | 4.5 | AAA | |
| success-text #15803d | bg-muted #f3f4f6 | 4.56 | 4.5 | AA | |
| accent #0f766e | bg-muted #f3f4f6 | 4.97 | 4.5 | AA | |
| warning-strong #b45309 | bg-muted #f3f4f6 | 4.56 | 4.5 | AA | |
| danger-text #b91c1c | bg-muted #f3f4f6 | 5.88 | 4.5 | AA |
40/40 dark-theme pairs pass their required minimum — 24 with AAA headroom.
| dark | on | sample | ratio | min | level |
|---|---|---|---|---|---|
| text-primary #f9fafb | bg-surface #1a1d23 | 16.15 | 4.5 | AAA | |
| text-primary #f9fafb | bg-canvas #0f1115 | 18.08 | 4.5 | AAA | |
| text-secondary #d1d5db | bg-surface #1a1d23 | 11.46 | 4.5 | AAA | |
| text-secondary #d1d5db | bg-muted #262a33 | 9.75 | 4.5 | AAA | |
| text-muted #9ca3af | bg-surface #1a1d23 | 6.65 | 4.5 | AA | |
| text-muted #9ca3af | bg-muted #262a33 | 5.66 | 4.5 | AA | |
| text-inverse #ffffff | accent-solid #0f766e | 5.47 | 4.5 | AA | |
| text-inverse #ffffff | danger-solid #dc2626 | 4.83 | 4.5 | AA | |
| bg-surface #1a1d23 | text-primary #f9fafb | 16.15 | 4.5 | AAA | |
| accent-text #5eead4 | accent-subtle #0b3b37 | 8.38 | 4.5 | AAA | |
| danger-text #fca5a5 | danger-subtle #3a1d1d | 8.06 | 4.5 | AAA | |
| warning-text #fcd34d | warning-subtle #3a2e14 | 9.21 | 4.5 | AAA | |
| success-text #86efac | success-subtle #14301d | 10.17 | 4.5 | AAA | |
| danger-text #fca5a5 | bg-surface #1a1d23 | 8.89 | 4.5 | AAA | |
| danger-text #fca5a5 | bg-canvas #0f1115 | 9.96 | 4.5 | AAA | |
| success-text #86efac | bg-surface #1a1d23 | 12.02 | 4.5 | AAA | |
| success-text #86efac | bg-canvas #0f1115 | 13.46 | 4.5 | AAA | |
| accent #2dd4bf | bg-surface #1a1d23 | 9.07 | 4.5 | AAA | |
| text-primary #f9fafb | bg-hover #262a33 | 13.75 | 4.5 | AAA | |
| text-primary #f9fafb | bg-selected #0b3b37 | 11.86 | 4.5 | AAA | |
| text-secondary #d1d5db | bg-selected #0b3b37 | 8.41 | 4.5 | AAA | |
| accent-text #5eead4 | bg-selected #0b3b37 | 8.38 | 4.5 | AAA | |
| text-primary #f9fafb | bg-surface-raised #22262e | 14.51 | 4.5 | AAA | |
| text-secondary #d1d5db | bg-canvas #0f1115 | 12.82 | 4.5 | AAA | |
| border-control #9ca3af | bg-surface #1a1d23 | 6.65 | 3 | AA | |
| accent #2dd4bf | bg-selected #0b3b37 | 6.66 | 3 | AA | |
| --bo-state-error-color #f87171 | bg-surface #1a1d23 | 6.1 | 3 | AA | |
| accent #2dd4bf | accent-subtle #0b3b37 | 6.66 | 3 | AA | |
| border-control #9ca3af | bg-hover #262a33 | 5.66 | 3 | AA | |
| border-control #9ca3af | bg-muted #262a33 | 5.66 | 3 | AA | |
| focus-ring #0d9488 | bg-canvas #0f1115 | 5.05 | 3 | AA | |
| accent #2dd4bf | bg-muted #262a33 | 7.72 | 3 | AA | |
| warning-strong #f59e0b | bg-muted #262a33 | 6.69 | 3 | AA | |
| warning-strong #f59e0b | bg-surface #1a1d23 | 7.86 | 3 | AA | |
| danger #f87171 | bg-muted #262a33 | 5.19 | 3 | AA | |
| text-primary #f9fafb | bg-muted #262a33 | 13.75 | 4.5 | AAA | |
| success-text #86efac | bg-muted #262a33 | 10.23 | 4.5 | AAA | |
| accent #2dd4bf | bg-muted #262a33 | 7.72 | 4.5 | AAA | |
| warning-strong #f59e0b | bg-muted #262a33 | 6.69 | 4.5 | AA | |
| danger-text #fca5a5 | bg-muted #262a33 | 7.57 | 4.5 | AAA |
Density aliases
Components never hard-code sizes — they read six
aliases (--bo-density-control-height, --bo-density-row-height, --bo-density-cell-padding-y, --bo-density-cell-padding-x, --bo-density-field-gap, --bo-density-font-size)
that remap when data-density changes. Try it: the Density
picker in this page's header re-sizes the control below.