Theme

Seed colors are set with theme(), everything else derives via relative color syntax in OKLCH.

Color Palette

accent

accent hover

bg-2 (raised)

bg-1 (base)

text primary

text secondary

text tertiary

border

Primary heading

Body text — uses --text-color-primary for readable, high-contrast copy.

Secondary text — derived at 55% alpha from primary. Used for captions, metadata, and supporting content.

Tertiary text — 35% alpha. For timestamps, fine print, and footnotes.

Interactive card Hover to see the accent border. Uses bg-2 (raised) surface. Accent link →

Static card Base surface with --border-color-base border, derived at 12% alpha from text primary.

Left-accent border Used for work entries and aside elements.

Elevated surface bg-2 — shifted -0.04 lightness from bg-1.

Tab to the button below to see the :focus-visible ring. Uses --color-accent with a 2px offset.

Inline code uses bg-2 surface: const x = 42

function greet(name: string) {
  return `Hello, $${name}`
}

Code blocks use --background-color-2 and --text-color-primary via prose tokens.

Select this text to see the accent-tinted highlight. Uses --color-accent at 20% alpha.