Design Systems Lab — interactive atlas
/

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

click any card → opens the interactive concept page
pick up to 4 styles:
Inspiration lab · photos & patterns

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.

Categories12 patterns
TipClick any card → opens a full-frame view
KeysP photos · C colors · F fonts
Filter
Inspiration lab · colors & palettes

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.

Palettes14 curated moods
ContrastWCAG AA / AAA checked live
FormatClick palette → full mood board view
Mood
Inspiration lab · fonts & pairings

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.

Fonts24+ Google Fonts loaded
Pairings10 curated heading + body combos
LiveTry your own text in any font
Category
Inspiration lab · by business type

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.

Categories12 business types
Coverageall 24 design systems
Viewsforward (by business) · reverse (by style)
Customtype your industry below

Pick a business type

Copied!