Pick a visual language, feel it in motion.
An interactive atlas of design systems — 16 archetypes and 8 real-world brands. Each one is a working miniature, not a screenshot. Click any tile to open a full interactive playground with tokens, when-to-use notes, and copy-pasteable CSS. Press / to search, ↑/↓ to navigate, Esc to come home.
All styles · card view
Photos & patterns
A field guide to the kinds of imagery that pair well with each visual language. Each card shows a CSS-rendered stand-in so you can feel the composition without needing a photo library. When you're ready to drop in real images, the slot is wired — just replace the URL.
Colors & palettes
Hand-curated palettes organized by mood and use case. Each one shows live contrast ratios against white and black, with copy-able CSS variables. Click any swatch to open a full mood board with the palette applied to a real-looking page mockup.
Fonts & pairings
A live playground for Google Fonts. Pick any font, adjust its weight, size, and letter-spacing with sliders, then try it in a paragraph and a heading sample. Curated pairings show heading + body combinations that work together — common ones you'd see on real sites.