01 / Monolith
Tech-futurist.
Eerie black surfaces, electric blue accents, sharp 6px corners, Space Grotesk display. Precise motion (0.85×), strict 12-column grid. Side-rail accent on emphasis cards.
The wardrobe
Six skins. One codebase.
Every skin rearranges the interface — not just the palette. Radius, border weight, density, motion speed, grain texture, bento offsets, and typography pairing all shift together. Pick one from the menu up top (or click a card) and watch the whole site rewire itself.
Arrow keys work too — ←/→ to cycle, Esc to close the picker.
02 / Aurora Noir
Cyber-noir.
Rich black with electric cyan glow, Archivo bold hero type, pill-heavy geometry, ghost borders. Slower motion (1.15×) with neon box-shadow on emphasis cards.
03 / Halcyon
Sci-fi HUD.
Teal + copper cinematic scheme, Fraunces wide-tracked uppercase display, bracket-corner modules, 2px square radii, JetBrains Mono for data readouts.
04 / Biomorph
Organic & grainy.
Dusty rose on slate blue, Fraunces at maximum SOFT + WONK for sculpted display, blob-radius emphasis cards that morph on hover, 12px cell offsets, slow 1.45× motion, noise overlay.
05 / Atelier
Editorial luxury.
Warm cream against near-black ink with ox-blood + gold accents, italic Fraunces display, magazine-airy density (1.25×), cinematic 1.3× motion, flat cards with hard-shadow emphasis.
06 / Firefly
Neon & bold.
Deep plum ground with French-rose, valentino-red, and burnt-sienna hits. Archivo 900 display, thick 2px borders, full-bleed gradient emphasis, springy 0.75× motion.
Shared component kit
Every skin drives the same primitives.
These samples are rendered once and reread the current theme's tokens — radius, density, motion, border width, surface alpha all shift live when you swap.
Buttons
Pills + status
Primary
Accent
Success
Warning
Danger
Online
Degraded
Down
Form field
Changes shape, padding, and focus ring per theme.
Emphasis card
This panel reshapes per skin.
Aurora Noir wraps it in neon. Halcyon adds bracket corners. Biomorph morphs to a blob on hover. Atelier replaces the lift with a hard offset shadow. Firefly gradient-fills. Monolith adds a side-rail accent.
Stats
6Skins
1Codebase
0Page reloads
Live primitives
Toggle — shape changes per theme
html[data-theme]
Under the hood
Theme is an attribute, not a rebuild.
Every component reads --theme-radius-card, --theme-density, --theme-motion-scale, and friends from the active [data-theme] block. Flip one attribute on <html> and CSS transitions carry the swap.