design system

Reference for the site's styles, components, and available icons.

Typography

Silkscreen: display headings

Geist Mono: headings and structural

Inter: body

Inter: muted (text-zinc-400)

Inter: fine (text-zinc-500)

Texture Dividers (20 experiments)

Full-bleed canvas geometry for section breaks. Static, crisp at any width. Ink follows the theme.

guilloche braid
guilloche bulge
guilloche beat
busy beaver
binary counter
turing weave
turing drift
turing chaos
rule 110
rule 30
rule 90
rule 184
langtons ant
turmite
thue-morse
dragon
turing 3-color
turing 4-color
cityscape
mountains

Moire Backgrounds (14 experiments)

Procedural interference for the site backdrop. Each is two phase fields whose beat is the moire, drawn as crisp vector contours per frame so motion stays sharp and smooth. The ink follows the color scheme (dark on light, light on dark). Faint by design; idles when the tab is hidden and stills out under reduced-motion. Click a card to set it as the site backdrop; the choice sticks across pages.

Buttons

Links

A paragraph with an inline link for reference. Underline is dotted by default, solid on hover.

Color (zinc)

zinc-100
zinc-200
zinc-300
zinc-400
zinc-500
zinc-600
zinc-700
zinc-800
zinc-900
zinc-950

Semantic Tokens (light / dark via system)

Theme-aware roles that flip automatically with the OS color scheme. Prefer these over raw zinc so new UI supports both modes for free. The scene-overlay glass tokens render over the always-dark 3D scenes (frosted-dark in dark mode, frosted-light in light mode).

background
card
popover
muted
accent-violet
destructive
warning
border
border-strong

foreground: primary text

muted-foreground: secondary, labels

faint-foreground: fine print

accent-violet: brand accent, links, eyebrows

destructive: errors

glass over a dark scene
glass panel

Icons (3,669)

Font Awesome 6 (2,058)

Font Awesome 4 (legacy) (1,611)