Colors

Four palettes — Iron Night, Birch Mist, Forest, Bloom — organised by role. A two-layer token architecture separates raw palette values from semantic aliases, so components never reference a colour directly. Click any swatch to copy its hex value.

Palette Tokens

Raw palette tokens define the colour vocabulary. In production code, use thesemantic layer instead — raw tokens are for brand moments and design showcases only.

Iron Night — Dark Surfaces

--in0-void

Primary bg (dark); primary text (light)

bgtext
--in1-iron

Elevated dark surfaces; panels, cards

bgborder
--in2-slate

Active lines, selections, highlights

bgborder
--in3-ash

Secondary text, placeholders (AA large only)

textborder

Birch Mist — Light Surfaces

--bm0-sand

Elevated light surface; inset fills; dark tertiary text

bgtext
--bm1-mist

Card fill, hover states; dark secondary text

bgtext
--bm2-birch

Primary light bg; primary dark text; accent text

bgtext

Forest — Accent

--fo0-glade

Dark-mode primary accent — links, buttons (9.79:1 on void)

accent
--fo1-fern

Light-mode primary accent — buttons, links, CTAs

accent
--fo2-forest

Accent hover; card highlight bg (dark mode)

accent
--fo3-deepwater

Code block bg (light); card highlight bg (light)

accent

Bloom — Semantic States

--bl0-ember

Error, destructive actions

state
--bl1-ochre

Warning, draft, pending

state
--bl2-grain

Annotation, decorator-weight info

state
--bl3-moss

Success, published, active

state
--bl4-heather

Special states, beta, experimental

state

Semantic Token Layer

Components always reference semantic tokens — never palette tokens directly. The semantic layer resolves to the correct palette value per theme mode automatically. Surface depth patterns (data-surface) are documented onFoundations › Surfaces.

Token reference — light & dark

Light Mode (default)

:root,
[data-theme="light"] {
  --color-bg:             var(--bm2-birch);           /* Page background        */
  --color-bg-panel:       var(--bm1-mist);            /* Cards, panels          */
  --color-bg-inset:       var(--bm0-sand);            /* Input fills            */
  --color-bg-code:        var(--fo3-deepwater);       /* Code block background  */
  --color-text:           var(--in0-void);            /* Primary text           */
  --color-text-secondary: var(--in2-slate);           /* Supporting text        */
  --color-text-tertiary:  var(--in3-ash);             /* Placeholders, captions */
  --color-border:         var(--in3-ash);             /* Default border         */
  --color-border-strong:  var(--in1-iron);            /* Prominent dividers     */
  --color-border-subtle:  rgba(55,65,81,0.12);        /* Hairline borders       */
  --color-ghost-border:   rgba(55,65,81,0.25);        /* Ghost button border    */
  --color-accent:         var(--fo1-fern);            /* Primary CTA, links     */
  --color-accent-hover:   var(--fo2-forest);          /* Accent hover           */
  --color-accent-text:    var(--bm2-birch);           /* Text on accent bg      */
  --color-error:          var(--bl0-ember);           /* Error, destructive     */
  --color-warning:        var(--bl1-ochre);           /* Warning, draft         */
  --color-success:        var(--bl3-moss);            /* Success, published     */
}

Dark Mode

[data-theme="dark"] {
  --color-bg:             var(--in0-void);
  --color-bg-panel:       var(--in1-iron);
  --color-bg-inset:       var(--in2-slate);
  --color-bg-code:        var(--in1-iron);
  --color-text:           var(--bm2-birch);
  --color-text-secondary: var(--bm1-mist);
  --color-text-tertiary:  var(--bm0-sand);
  --color-border:         var(--in2-slate);
  --color-border-strong:  var(--bm0-sand);
  --color-border-subtle:  rgba(75,85,99,0.25);
  --color-ghost-border:   rgba(247,246,243,0.25);
  --color-accent:         var(--fo0-glade);
  --color-accent-hover:   var(--fo1-fern);
  --color-accent-text:    var(--in0-void);
  --color-error:          var(--bl0-ember);
  --color-warning:        var(--bl1-ochre);
  --color-success:        var(--bl3-moss);
}

Accessibility

All semantic token pairs meet at least 4.5:1 contrast (WCAG 2.1 AA) in both themes. One exception — --color-text-tertiary — is AA Large only. The complete foreground/background contrast matrix, with colour chips and WCAG ratings for every pair, is on Foundations › Accessibility.

Usage Rules