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.
By business
Pick the kind of site you're building, see which design systems fit. Filter by industry, sort by coverage, or flip into reverse view to see which businesses a given style works for. Type your own industry below if it's not in the list.