# Colors

The docs share the 2026 website's palette: black and white ink, a hard 1.5px rule, mint for the answer you copy and the active thing, yellow for gotchas, and a dark editor surface for code in both themes. Every color is a **semantic token**, named by role, and most of them switch with the theme.

> **Watch out:**
>
> **Build with the tokens.** Never hard-code a hex value or reach for Tailwind's default palette; it is cleared in `styles.css`. The only non-semantic colors are the brand fills mint, yellow, black and white, and the `white-*` opacities for text on the [editor surface](/design-system/colors#editor).

## Surfaces

Page and panel backgrounds. surface-muted is a tint overlay: header strips, inset panels, chips and hover states.

Token Light Dark

`surface`

Page and panel

`#ffffff` `#0b0b0b`

`surface-muted`

Header strips, chips, hover

`black 4.5%` `white 6%`

`surface-elevated`

Menus, dialogs, popovers

`#ffffff` `#161616`

## Ink

Text by emphasis. Inverted is text on an ink fill (a primary button).

Token Light Dark

`text-primary`

Headings and body

`#000000` `#ffffff`

`text-secondary`

Descriptions, leads

`#5c5c5c` `#b4b4b4`

`text-muted`

Meta, captions

`#707070` `#8f8f8f`

`text-inverted`

Text on an ink fill

`#ffffff` `#000000`

## Lines

The rule is the website’s hard line, always drawn at 1.5px (2px on top of columns). Hairlines separate quietly: table rows, header strips.

Token Light Dark

`rule`

Frames, h2 rules, column tops

`#000000` `#ffffff`

`border`

Hairline separator

`black 10%` `white 13%`

`border-strong`

Stronger hairline

`black 22%` `white 28%`

## Brand accents

Mint and yellow fills are constant and always carry black text; the soft tints switch with the theme.

Token Light Dark

`mint`

Copy, active, the answer

`#b5edbd` `#b5edbd`

`mint-strong`

Mint hover

`#a2e3ac` `#a2e3ac`

`yellow`

Watch out, demo data

`#ffe58a` `#ffe58a`

`mint-soft`

Highlighted column, link hover

`#ddfde8` `mint 14%`

`yellow-soft`

Warning callout

`#fff3c8` `yellow 12%`

## State

accent is ink in light and mint in dark. The status colors are for real status only.

Token Light Dark

`accent`

Ink / mint highlight

`#000000` `#b5edbd`

`accent-muted`

Fill paired with text-accent

`#b5edbd` `mint 16%`

`success`

Passed, confirmed

`#15803d` `#6fdc8c`

`warning`

Caution

`#8a5a00` `#ffe58a`

`error`

Failed, destructive

`#c81e1e` `#ff7b72`

## Usage

Apply tokens as Tailwind utilities: `bg-`, `text-`, `border-`. The rule is always drawn at 1.5px (`border-[1.5px] border-rule`); 2px rules top columns (`border-t-2 border-rule`).

text-text-primary

text-text-secondary, for descriptions and leads

text-text-muted, for meta and captions

Panel header strip

bg-surface-muted strip, border-border hairline, framed by the rule.

A 2px rule tops a column

### Brand fills

Mint and yellow are constant in both themes and always carry black text. Mint marks the thing you copy, the active item and confirmations; yellow marks gotchas and demo data. Their `-soft` tints switch with the theme and work as backgrounds and hover states.

bg-mint bg-yellow bg-surface-muted bg-mint-soft bg-yellow-soft

### State colors

`accent` is ink in light mode and mint in dark mode, like the website's dark sections; pair `bg-accent-muted` with `text-accent`. `success`, `warning` and `error` (each with a `-muted` tint) are for real status only, never decoration.

accent success warning error

## Editor surface

Code blocks, the scripted terminal and CLI chips sit on `bg-editor`, framed by the rule. It stays dark in both themes: `#202020` on the light page, `#161616` on the dark one. The `white-*` opacities are its foreground palette. They don't switch with the theme, because the surface is dark either way: use them only on that surface, and a semantic `text-*` token everywhere else.

`editor` #202020 / #161616

`white-50` #fff

`white-100` 4%

`white-200` 8%

`white-300` 16%

`white-400` 32%

`white-500` 48%

`white-600` 64%

## CSS variables

Tokens are declared in `src/styles.css`: registered with Tailwind under `@theme`, given light values on `:root` and dark values under `.dark` (set on `<html>`). Switching the theme flips the variables; no utility class changes. Radii, the rule width and motion live there too.

```css filename="src/styles.css"
@theme {
  --color-mint: #b5edbd;
  --color-mint-strong: #a2e3ac;
  --color-yellow: #ffe58a;
  --color-rule: var(--color-rule);
  --color-editor: var(--color-editor);
  /* …every semantic token is registered the same way */
}

:root {
  --radius-sm: 3px;   /* chips, kbd */
  --radius-lg: 6px;   /* panels, code blocks */
  --rule-width: 1.5px;
  --duration-fast: 0.15s;

  --color-surface: #ffffff;
  --color-editor: #202020;
  --color-rule: #000000;
  --color-text-primary: #000000;
  --color-text-secondary: #5c5c5c;
  --color-accent: #000000;
}

.dark {
  --color-surface: #0b0b0b;
  --color-editor: #161616;
  --color-rule: #ffffff;
  --color-text-primary: #ffffff;
  --color-text-secondary: #b4b4b4;
  --color-accent: #b5edbd;
}
```

## Accessibility

- **Text on surface**: primary, secondary and muted text all clear WCAG AA (4.5:1) on `surface` in both themes (muted is the floor: 4.9:1 light, 6.1:1 dark).
- **Brand fills**: mint and yellow always carry black text, never white.
- **Focus**: the global `:focus-visible` outline is 2px in the rule color. Don't remove it; move it inside a clipped container with a negative offset instead.