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
#a39a89
kraken
#e0211b
kraken-deep
#99140f
kelp
#35c08a
signal-amber
#e3a83e
obsidian
#080807
obsidian-raised
#12100e
basalt
#11110f
basalt-raised
#181713
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
--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-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-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) | #080807 |
| --ch-bg-raised | Raised canvas — wells, code blocks | #12100e |
| --ch-surface | Cards and surfaces | #11110f |
| --ch-surface-raised | Raised surfaces — popovers, menus | #181713 |
| --ch-overlay | Modal scrim | rgba(0, 0, 0, 0.86) |
| --ch-fg | Primary foreground | #eee6d6 |
| --ch-fg-muted | Secondary text | #aaa294 |
| --ch-fg-faint | Tertiary text, microcopy | #6b6b6b |
| --ch-primary | Actions, focus, active states | #c99a43 |
| --ch-primary-bright | Primary hover/emphasis | #e6c96a |
| --ch-primary-fg | Text on primary fills | #080807 |
| --ch-primary-muted | Primary tint backgrounds | rgba(212, 175, 55, 0.16) |
| --ch-accent | Rich gold — premium accents, confirmations | #c99a43 |
| --ch-accent-bright | Accent emphasis | #e6c96a |
| --ch-accent-fg | Text on accent fills | #080807 |
| --ch-accent-muted | Accent tint backgrounds | rgba(212, 175, 55, 0.16) |
| --ch-border | Dividers, default borders | rgba(201, 154, 67, 0.26) |
| --ch-border-strong | Emphasized borders | rgba(201, 154, 67, 0.44) |
| --ch-border-faint | Hairlines | rgba(217, 207, 188, 0.12) |
| --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 | #e0211b |
| --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 | #8c7a5b |
| --ch-viz-3 | Data-viz series 3 | #aaa294 |
| --ch-viz-4 | Data-viz series 4 | #8a6f1c |
| --ch-viz-5 | Data-viz series 5 | #e6c96a |
| --ch-viz-grid | Chart gridlines | rgba(235, 235, 235, 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.15:1AAA | 15.30:1AAA | 15.24:1AAA | 14.46:1AAA |
| fg-muted | 7.92:1AAA | 7.51:1AAA | 7.48:1AAA | 7.09:1AAA |
| fg-faint | 3.76:1Fail | 3.56:1Fail | 3.55:1Fail | 3.37:1Fail |
| primary | 7.81:1AAA | 7.40:1AAA | 7.37:1AAA | 6.99:1AA |
| accent | 7.81:1AAA | 7.40:1AAA | 7.37:1AAA | 6.99:1AA |
| success | 8.64:1AAA | 8.19:1AAA | 8.15:1AAA | 7.74:1AAA |
| warning | 9.48:1AAA | 8.98:1AAA | 8.94:1AAA | 8.49:1AAA |
| danger | 4.20:1Fail | 3.98:1Fail | 3.96:1Fail | 3.76:1Fail |
| info | 12.33:1AAA | 11.69:1AAA | 11.64:1AAA | 11.04:1AAA |