Themes
Every component works in every theme. A theme is one CSS file keyed by data-theme, and the tokens behind it are designed in Figma.
Eras
Looks that actually existed, rebuilt from memory and screenshots. The gaps down the page are the gaps in years.
1984
The first one
system
The original Macintosh: 1-bit black and white, no gray anywhere. Depth comes from dither patterns, selection inverts, nothing animates.
data-theme="system"1995
The beveled desktop
bevel
Gray chrome, raised and sunken 2px borders, a gradient title strip and a dotted focus rectangle. Every edge tells you whether it is up or down.
data-theme="bevel"1997
Platinum
platinum
Mac OS 8 and 9: flat gray, 1px black outlines, raised and sunken bevels, hard drop shadows, square corners and no animation. Dark mode is graphite.
data-theme="platinum"2001
Aqua
aqua
Lickable gel buttons, pinstripes, the blue ⇅ popup button, yellow help tags and smoky notifications. Midnight dark mode included.
data-theme="aqua"2009
Frutiger Aero
aero
Glossy glass, saturated sky blues, wet highlights on every control. Vista and Windows 7 by way of a stock photo.
data-theme="aero"2012
Skeuomorphic
linen
Woven linen behind the glass, stitched edges, glossy pill controls, letterpress labels and switches that look like they were sewn on.
data-theme="linen"2026
Liquid glass
liquid
Frosted glass with a bright rim light, deep soft shadows and one Aqua style shine on the primary button.
data-theme="liquid"
Styles
Looks that are just looks. No nostalgia required.
Loud
brutalist
Thick black outlines, hard offset shadows, zero radius and flat color. Press a button and it slams into its own shadow.
data-theme="brutalist"Night
urban
Streetwear: near black with a scanline grain, acid green accent, heavy uppercase type and monospace sticker tags.
data-theme="urban"Printed
paper
Warm off-white stock, serif headings over a quiet sans, clay accent and ink hairlines. The look of a well set document.
data-theme="paper"Phosphor
terminal
Monospace everything, bracketed buttons, inverted selection, scanlines and a blinking caret. Light mode is amber on paper.
data-theme="terminal"City
neon
Deep violet black with magenta and cyan glow, blurred halos and lit controls. The switch actually glows when it is on.
data-theme="neon"Ink
sumi
Japanese spatial minimalism: a space scale with a hole in it, so every gap is either hairline fine or room sized. Cut square corners and one vermilion seal per component.
data-theme="sumi"Arcade
pixel
8 bit: hard pixel borders, no antialiasing, a four colour ramp and controls that push down by two pixels when you press them.
data-theme="pixel"Soft
clay
Claymorphism: puffy rounded shapes, pastel ground, soft double shadows inside and out. Everything looks pressable because everything is a cushion.
data-theme="clay"Drafted
blueprint
Technical drawing: cyan lines on navy, a millimetre grid behind everything, monospace annotations and dimension ticks on the focused control.
data-theme="blueprint"Drawn
notebook
Hand drawn: uneven borders, a ruled page, marker highlights and controls that look sketched in pencil rather than rendered.
data-theme="notebook"