Skip to main content

Tokens 🖌️

This page documents the design tokens powering this site. All tokens are CSS custom properties defined per-theme in globals.css and consumed via Tailwind CSS v4.

Backgrounds

Background tokens control surface hierarchy. They adapt across all three themes (light, dim, dark).

bg
bg-panel
bg-sidebar
bg-hover
bg-active

Usage in Tailwind: bg-(--color-bg-panel), bg-(--color-bg-hover), etc.

Colors

Ink

Text colors are contrast-tuned per theme so that primary ink meets WCAG AA against every background token.

Accent

The accent palette (teal) is used for interactive elements, links, and highlights.

Semantic

Info, success, warning, and danger each have a foreground and a light background variant, used in components like Panel and form validation.

Ink
ink
ink-2
ink-3
ink-4
Accent
accent
accent-text
accent-l
accent-xl
Semantic
info / info-bg
success / success-bg
warning / warning-bg
danger / danger-bg

Themes

The site supports three themes — light, dim, and dark — controlled by a data-theme attribute on <html>. Each theme redefines the full set of CSS custom properties, so components never need conditional logic for theming.

Approach

All design tokens live in src/styles/globals.css as CSS custom properties, consumed through Tailwind v4's bg-(--color-*) / text-(--color-*) shorthand. This gives us:

  1. Zero runtime cost — no JavaScript color derivation or CSS-in-JS overhead
  2. Multi-theme support — adding a theme means adding one CSS block
  3. Tailwind integration — tokens work with all Tailwind utilities, responsive prefixes, and hover/focus states out of the box

More complex scenarios can use goober for CSS-in-JS.