Loading page…
Loading page…
Semantic names are the API; palette names are internal. Components read --ch-bg, --ch-fg, --ch-primary — never a palette variable, never a raw hex. One flat dark theme; every value on this page is read from the compiled token JSON at build time.
The internal reference plate — nautical names, dark water. Reach for a semantic token, not one of these.
abyss
#070706
abyss-raised
#0c0b0a
plate
#080807
atlantic
#121110
atlantic-raised
#1a1815
ion
#2aa9ff
ion-bright
#6cc6ff
ion-deep
#155f96
aurum
#c9a227
aurum-bright
#e6c96a
aurum-deep
#8a6f1c
bronze
#8c7a5b
bronze-faint
#5a4f3c
steel
#7c93b5
steel-deep
#3f4d63
bone
#f0e8d8
bone-muted
#aba393
kraken
#e0211b
kraken-deep
#99140f
kelp
#35c08a
signal-amber
#e3a83e
obsidian
#080807
obsidian-raised
#12100e
basalt
#11110f
basalt-raised
#181713
wine-black
#0b0608
wine-black-raised
#120a0d
claret
#170c10
claret-raised
#1f1218
garnet
#c32148
garnet-bright
#f295ab
garnet-deep
#7a1230
doubloon
#c99a43
doubloon-bright
#e6c96a
doubloon-deep
#8a6f1c
pearl
#eee6d6
pearl-deep
#d9cfbc
pearl-muted
#aaa294
calypso
#2a91d8
calypso-bright
#6cc6ff
calypso-deep
#155f96
maelstrom
#6d5cff
maelstrom-bright
#9f90ff
maelstrom-deep
#3a2ba8
leviathan
#57c7ad
leviathan-bright
#8adcc8
leviathan-deep
#1f6f5d
polaris
#62cbe0
polaris-bright
#9adfee
polaris-deep
#19606f
corsair
#e0211b
corsair-bright
#f2938f
corsair-deep
#7c1a12
--ch-palette-abyss--ch-palette-abyss-raised--ch-palette-plate--ch-palette-atlantic--ch-palette-atlantic-raised--ch-palette-ion--ch-palette-ion-bright--ch-palette-ion-deep--ch-palette-aurum--ch-palette-aurum-bright--ch-palette-aurum-deep--ch-palette-bronze--ch-palette-bronze-faint--ch-palette-steel--ch-palette-steel-deep--ch-palette-bone--ch-palette-bone-muted--ch-palette-kraken--ch-palette-kraken-deep--ch-palette-kelp--ch-palette-signal-amber--ch-palette-obsidian--ch-palette-obsidian-raised--ch-palette-basalt--ch-palette-basalt-raised--ch-palette-wine-black--ch-palette-wine-black-raised--ch-palette-claret--ch-palette-claret-raised--ch-palette-garnet--ch-palette-garnet-bright--ch-palette-garnet-deep--ch-palette-doubloon--ch-palette-doubloon-bright--ch-palette-doubloon-deep--ch-palette-pearl--ch-palette-pearl-deep--ch-palette-pearl-muted--ch-palette-calypso--ch-palette-calypso-bright--ch-palette-calypso-deep--ch-palette-maelstrom--ch-palette-maelstrom-bright--ch-palette-maelstrom-deep--ch-palette-leviathan--ch-palette-leviathan-bright--ch-palette-leviathan-deep--ch-palette-polaris--ch-palette-polaris-bright--ch-palette-polaris-deep--ch-palette-corsair--ch-palette-corsair-bright--ch-palette-corsair-deepOne variable name bound to :root. Components speak utilities (bg-surface, text-fg); utilities speak the --ch-* vars resolved here.
| Token | Role | Value |
|---|---|---|
| --ch-bg | Page background (canvas) | #0a0a0a |
| --ch-bg-raised | Raised canvas — wells, code blocks | #101010 |
| --ch-surface | Cards and surfaces | #141414 |
| --ch-surface-raised | Raised surfaces — popovers, menus | #1b1b1b |
| --ch-overlay | Modal scrim | rgba(0, 0, 0, 0.86) |
| --ch-fg | Primary foreground | #ededed |
| --ch-fg-muted | Secondary text | #b0b0b0 |
| --ch-fg-faint | Tertiary text, microcopy | #a6a6a6 |
| --ch-primary | Actions, focus, active states | #c99a43 |
| --ch-primary-bright | Primary hover/emphasis | #e6c96a |
| --ch-primary-fg | Text on primary fills | #0d0a04 |
| --ch-primary-muted | Primary tint backgrounds | rgba(201, 154, 67, 0.16) |
| --ch-accent | Rich gold — premium accents, confirmations | #c99a43 |
| --ch-accent-bright | Accent emphasis | #e6c96a |
| --ch-accent-fg | Text on accent fills | #0d0a04 |
| --ch-accent-muted | Accent tint backgrounds | rgba(201, 154, 67, 0.16) |
| --ch-border | Dividers, default borders | rgba(255, 255, 255, 0.16) |
| --ch-border-strong | Emphasized borders | rgba(255, 255, 255, 0.46) |
| --ch-border-faint | Hairlines | rgba(255, 255, 255, 0.09) |
| --ch-focus | Focus ring | #e6c96a |
| --ch-success | Success — confirmations settled | #35c08a |
| --ch-success-muted | Success tint | rgba(53, 192, 138, 0.14) |
| --ch-warning | Warning — pending, caution | #e3a83e |
| --ch-warning-muted | Warning tint | rgba(227, 168, 62, 0.14) |
| --ch-danger | Danger — errors, destructive | #f28a86 |
| --ch-danger-muted | Danger tint | rgba(224, 33, 27, 0.14) |
| --ch-info | Informational | #e6c96a |
| --ch-viz-1 | Data-viz series 1 | #c99a43 |
| --ch-viz-2 | Data-viz series 2 | #35c08a |
| --ch-viz-3 | Data-viz series 3 | #7c93b5 |
| --ch-viz-4 | Data-viz series 4 | #8c7a5b |
| --ch-viz-5 | Data-viz series 5 | #e6c96a |
| --ch-viz-grid | Chart gridlines | rgba(255, 255, 255, 0.10) |
/* Components speak utilities, utilities speak vars. */
<div className="bg-surface text-fg border-line" />
<p className="text-muted">Secondary copy</p>
<button className="bg-primary text-primary-fg focus-visible:ring-focus" />--ch-bg--ch-surface--ch-fg--ch-fg-muted--ch-primary--ch-accent--ch-border--ch-focusWCAG 2.x normal-text ratios computed at build time from the resolved token JSON. Translucent values are composited over the canvas first. AA ≥ 4.5, AAA ≥ 7.
| text ⬇ on surface ➞ | bg | bg-raised | surface | surface-raised |
|---|---|---|---|---|
| fg | 16.91:1AAA | 16.25:1AAA | 15.74:1AAA | 14.71:1AAA |
| fg-muted | 9.13:1AAA | 8.77:1AAA | 8.49:1AAA | 7.94:1AAA |
| fg-faint | 8.13:1AAA | 7.82:1AAA | 7.57:1AAA | 7.08:1AAA |
| primary | 7.72:1AAA | 7.42:1AAA | 7.18:1AAA | 6.71:1AA |
| accent | 7.72:1AAA | 7.42:1AAA | 7.18:1AAA | 6.71:1AA |
| success | 8.54:1AAA | 8.21:1AAA | 7.95:1AAA | 7.43:1AAA |
| warning | 9.37:1AAA | 9.00:1AAA | 8.72:1AAA | 8.15:1AAA |
| danger | 8.25:1AAA | 7.93:1AAA | 7.68:1AAA | 7.18:1AAA |
| info | 12.19:1AAA | 11.71:1AAA | 11.34:1AAA | 10.60:1AAA |