Skip to content

Color

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.

Palette

The internal reference plate — nautical names, dark water. Reach for a semantic token, not one of these.

  • abyss

    #070706

  • abyss-raised

    #0c0b0a

  • 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

    #d75a4d

  • kelp

    #35c08a

  • signal-amber

    #e3a83e

  • calypso

    #1fc7bd

  • calypso-bright

    #5fe6dc

  • calypso-deep

    #0a7d74

  • maelstrom

    #6d5cff

  • maelstrom-bright

    #9f90ff

  • maelstrom-deep

    #3a2ba8

  • --ch-palette-abyss
  • --ch-palette-abyss-raised
  • --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-kelp
  • --ch-palette-signal-amber
  • --ch-palette-calypso
  • --ch-palette-calypso-bright
  • --ch-palette-calypso-deep
  • --ch-palette-maelstrom
  • --ch-palette-maelstrom-bright
  • --ch-palette-maelstrom-deep

Semantic tokens

One variable name bound to :root. Components speak utilities (bg-surface, text-fg); utilities speak the --ch-* vars resolved here.

Semantic tokens with their dark values
TokenRoleValue
--ch-bgPage background (canvas) #070706
--ch-bg-raisedRaised canvas — wells, code blocks #0c0b0a
--ch-surfaceCards and surfaces #121110
--ch-surface-raisedRaised surfaces — popovers, menus #1a1815
--ch-overlayModal scrim rgba(3, 2, 1, 0.86)
--ch-fgPrimary foreground #f0e8d8
--ch-fg-mutedSecondary text #a39a89
--ch-fg-faintTertiary text, microcopy #6d675c
--ch-primaryActions, focus, active states #c9a227
--ch-primary-brightPrimary hover/emphasis #e6c96a
--ch-primary-fgText on primary fills #070706
--ch-primary-mutedPrimary tint backgrounds rgba(201, 162, 39, 0.16)
--ch-accentAurum — premium accents, confirmations #c9a227
--ch-accent-brightAccent emphasis #e6c96a
--ch-accent-fgText on accent fills #070706
--ch-accent-mutedAccent tint backgrounds rgba(201, 162, 39, 0.16)
--ch-borderDividers, default borders rgba(176, 158, 120, 0.22)
--ch-border-strongEmphasized borders rgba(176, 158, 120, 0.40)
--ch-border-faintHairlines rgba(176, 158, 120, 0.12)
--ch-focusFocus ring #e6c96a
--ch-successSuccess — confirmations settled #35c08a
--ch-success-mutedSuccess tint rgba(53, 192, 138, 0.14)
--ch-warningWarning — pending, caution #e3a83e
--ch-warning-mutedWarning tint rgba(227, 168, 62, 0.14)
--ch-dangerDanger — errors, destructive #d75a4d
--ch-danger-mutedDanger tint rgba(215, 90, 77, 0.14)
--ch-infoInformational #e6c96a
--ch-viz-1Data-viz series 1 #c9a227
--ch-viz-2Data-viz series 2 #8c7a5b
--ch-viz-3Data-viz series 3 #a39a89
--ch-viz-4Data-viz series 4 #8a6f1c
--ch-viz-5Data-viz series 5 #e6c96a
--ch-viz-gridChart gridlines rgba(176, 158, 120, 0.14)
/* 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-focus

Contrast

WCAG 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.

WCAG contrast for every text token on every surface — dark theme
text ⬇ on surface ➞ bg bg-raised surface surface-raised
fg16.54:1AAA16.14:1AAA15.48:1AAA14.54:1AAA
fg-muted7.24:1AAA7.06:1AAA6.77:1AA6.36:1AA
fg-faint3.59:1Fail3.51:1Fail3.36:1Fail3.16:1Fail
primary8.33:1AAA8.13:1AAA7.80:1AAA7.32:1AAA
accent8.33:1AAA8.13:1AAA7.80:1AAA7.32:1AAA
success8.69:1AAA8.48:1AAA8.14:1AAA7.64:1AAA
warning9.54:1AAA9.31:1AAA8.92:1AAA8.38:1AAA
danger5.24:1AA5.11:1AA4.90:1AA4.61:1AA
info12.41:1AAA12.11:1AAA11.61:1AAA10.91:1AAA