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.

Surfaces

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

Ink

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

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.

Brand accents

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

State

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

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

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.

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.

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.

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.

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