lookbook

Lookbook — Award-Grade Design Languages

A curated library of design languages. Each is a pack: a philosophy, a full token system, ruthless anti-slop rules, and — the part that matters — a real, hand-built reference page to study and adapt. You produce craft by adapting a proven exemplar, not by interpreting keywords.

The one rule

Never design from scratch when a language fits. Pick a language, open its pack, study its reference/index.html, then build in the user's stack by adapting that exemplar's tokens, composition, and details. The reference is the source of truth for how the style actually looks.

Workflow

1. Pick a language

• If the user named a style (or one clearly maps to their words), use it.
• Otherwise, read their vibe (product, audience, tone) and recommend 2–3 languages from the index below with honest one-line tradeoffs, then let them choose. Don't silently pick for them on a brand-new project unless they've said to just go.

2. Load that pack only

Read languages/<slug>/LANGUAGE.md in full, then open and study languages/<slug>/reference/index.html (and any CSS next to it). This is progressive disclosure — load one pack, not the whole library.

3. Build by adapting the reference

• Lift the token system (color, type, spacing, radius, shadow, motion, grid) verbatim unless the user's brand overrides it.
• Mirror the reference's composition and signature moves (the layout devices, the typographic scale, the specific effects). These are what make the style read as that style.
• Translate to the user's stack (HTML/Tailwind, React, Vue, Svelte, etc.). The references are static HTML/CSS precisely so they translate anywhere.
• Honor the pack's anti-slop do/don'ts. They are not optional.

4. Verify before delivering

Check your output against the pack's anti-slop checklist. If it could pass for generic AI output, it's not done.

Language index

Slug	Language	The feeling	Best for	Avoid for
swiss	Swiss / International	Grid, precision, restraint	SaaS, docs, fintech, B2B, dev tools	Playful consumer, maximal brands
editorial	Editorial / Magazine	Typographic, asymmetric, print-inspired	Long-form, media, culture, agencies, blogs	Dense app UIs, dashboards
neo-brutalism	Neo-Brutalism	Raw and bold — the refined kind	Creator tools, startups, portfolios, bold brands	Conservative/enterprise, accessibility-critical
glassmorphism	Glassmorphism	Frosted depth, Apple-grade	Modern SaaS, dashboards, fintech, premium product	Content-heavy reading, low-power, flat brands
y2k	Y2K / Retro-futurism	Chrome, gloss, nostalgia	Music, fashion, gaming, Gen-Z, culture drops	Enterprise, trust-critical, accessibility-critical
soft-organic	Soft / Organic	Warm, rounded, tactile	Wellness, consumer apps, kids/education, friendly brands	Data-dense, austere/luxury, technical
maximalism	Maximalism	Controlled chaos, layered density	Fashion, culture, events, portfolios, statement sites	Utility UIs, accessibility-critical, dashboards
luxury-minimal	Luxury Minimal	Fashion-house restraint, vast space	Luxury, fashion, beauty, architecture, hospitality	Dense functional apps, playful consumer
cyber-terminal	Cyber / Terminal	Monospace, dark, technical	Dev tools, infra, crypto/web3, security, AI products	Warm consumer, luxury, mainstream non-tech
bauhaus	Bauhaus / Geometric	Primary colors, shapes, modernist	Culture, museums, education, design-forward brands	Conservative corporate, soft/luxury
art-deco	Art Deco / Gatsby	Gilded geometry, symmetric grandeur	Luxury hospitality, spirits, finance, theatre, fashion, events	Dev tools, minimal SaaS, playful consumer
claymorphism	Claymorphism	Soft inflated 3D, pillowy and friendly	Playful apps, kids/education, fintech onboarding, mobile, games	Dense data UIs, austere luxury, editorial
vaporwave	Vaporwave / Synthwave	Neon sunset, retro-future haze	Music, gaming, nightlife, creative tools, Gen-Z drops	Enterprise, trust-critical, accessibility-first
neumorphism	Neumorphism / Soft UI	Soft monochrome, pressable, tactile	Smart-home/IoT, calm apps, finance dashboards, audio/player UIs	Data-dense tables, content-heavy reading, text-everywhere
frutiger-aero	Frutiger Aero	Glossy aqua optimism, nature-meets-tech	Eco/clean-tech, wellness, consumer cloud, family tech	Enterprise, luxury restraint, dark/edgy, austere
memphis	Memphis / Postmodern	Clashing pastels, playful confetti geometry	Design festivals, creative studios, food/kids, culture	Enterprise, luxury, finance trust, dense dashboards
skeuomorphism	Skeuomorphism	Real materials — leather, metal, paper, glass	Heritage/nostalgic apps, audio tools, journaling, hobby	Data-dense SaaS, ultra-modern minimal, fast utility
brutalist	Brutalist / Raw Web	Exposed structure, default type, harsh honesty	Experimental studios, portfolios, zines, art/culture, dev	Trust-critical mainstream, e-commerce, enterprise calm
constructivism	Constructivism	Diagonal red-and-black agitprop energy	Arts/film/theatre festivals, type studios, exhibitions	Corporate calm, luxury, soft consumer, dense data
japandi	Scandinavian / Japandi	Warm muted calm, craft, vast space	Ceramics/homeware, tea/coffee, wellness, furniture, slow-living	Data UIs, dev tools, loud consumer, high-energy events
pixel	Pixel / Retro-Gaming	8-bit pixels, CRT, arcade HUD	Indie games & studios, game jams, arcades, retro products	Enterprise, luxury, finance trust, dense reading

Global anti-slop guardrails (apply to every language)

These override default habits regardless of style:

• No default fonts (Inter, Roboto, Arial, system-ui) unless a pack explicitly calls for them. Each pack names its real typefaces.
• No purple-on-white gradient cliché, no timid evenly-distributed palettes. Commit to the pack's palette with dominant colors and sharp accents.
• No predictable centered single-column unless the pack's composition calls for it.
• No emojis — ever. Not as icons, bullets, badges, or decoration. Emoji instantly cheapen a layout and read as AI-generated. Use a real word or a custom SVG glyph instead.
• No icon libraries. Never pull Lucide, Feather, Font Awesome, Heroicons, Material Icons, Bootstrap Icons, Tabler, or any icon font/package — and never substitute an emoji for an icon. Draw custom inline <svg> icons tuned to the pack: its stroke weight, corner radius, optical size, and grid. Premium products draw their own marks; a borrowed icon set is a slop tell. Keep the set small and internally consistent (one stroke width, one corner treatment, one optical size), mark each aria-hidden, and pair it with a real text label.
• No status / indicator dots. The little ● "Live" / "Online" / pulsing-green availability dot (and the red notification dot) is a generic AI-UI cliché. Signal status with a word, a colored label or pill, a custom glyph, or type weight — never a bare dot.
• Match implementation effort to the aesthetic: maximalist/Y2K need elaborate detail; Swiss/luxury need precision and restraint. Execute the vision fully.