# Design styles — 10 design languages to anchor a vague brief When the brief is too vague to execute ("make a landing page", "design me something nice", "I don't know what style I want"), don't improvise on generic intuition — that's how AI slop is born. Switch into **Design Direction Advisor** mode: propose 2–3 differentiated directions from the library below, and let the user pick before you commit. The 10 styles below span 5 schools. Each entry gives you enough to: - **Explain the direction** to the user in one sentence - **Identify the look** via signature traits - **Commit to a system** (type, color, layout, texture) without Googling further Use them as anchors, not prescriptions — you can blend and adapt once the user picks a direction. **Concrete reference:** [../demos/style-gallery/index.html](../demos/style-gallery/index.html) renders the same one-page intro in all 10 styles — open any cell to see what a committed system in that direction looks like when applied to identical content. Useful when talking a user through Advisor mode. --- ## The Advisor mode — how to propose directions When a brief triggers this mode: 1. **Pick 3 styles from different schools** (not 3 minimalist schools, not 3 maximalist). Diversity matters more than each being "the perfect fit" — you're giving the user a spread. 2. **For each direction, give:** - One-sentence pitch ("Direction A · Swiss Editorial — think Pentagram x Apple.com: structured type hierarchy, a lot of black on cream, and precision over warmth.") - Signature flagship (a designer, firm, or brand the user likely recognizes) - 3 keywords capturing the feeling (*e.g., "editorial / structural / quiet"*) - One sentence on what it would mean concretely for THIS brief 3. **Build a small preview** for each direction — even a 3-cell design canvas where each cell is a sketch of that direction's hero treatment. Don't produce finished artifacts yet; the preview is the decision-making tool. 4. **Ask the user which direction (or blend) to proceed with.** Once they pick, go into the normal Junior Designer workflow rooted in that style. The whole advisor cycle should take 5–10 minutes. If you find yourself spending 30 minutes on previews, you've overshot. --- ## School 1 · Structural modernism ### 1. Swiss Editorial (Pentagram / Massimo Vignelli lineage) - **Feeling:** precision, authority, editorial gravity - **Keywords:** structural · monochrome · grid-disciplined · quiet - **Flagships:** Pentagram, Vignelli's Unimark, the MIT Press canon - **Typography:** Neue Haas Grotesk / Helvetica Now / GT America / Söhne — one sans family, 3–4 sizes, weight contrast via bold not color - **Color:** near-black on cream, off-white, or structured greys. One accent (often a saturated red, blue, or yellow) used sparingly - **Layout:** strict grid, horizontal rules, lots of negative space, numbered sections - **Signature moves:** oversized folio numerals, hairline rules, left-flush headlines, body columns at 12–14 char widths on large displays - **Avoid:** decorative gradients, drop shadows, 3D, blur - **Right for:** editorial sites, B2B professional services, serious products, data-forward experiences - **Wrong for:** anything that needs warmth, playfulness, or emotional arousal ### 2. Bauhaus geometric (Josef Müller-Brockmann / Karel Martens lineage) - **Feeling:** primary, architectural, confident - **Keywords:** geometric · primary-color · flat · rhythmic - **Flagships:** Müller-Brockmann Zurich Tonhalle posters, Paula Scher's Public Theater identity - **Typography:** geometric sans (Futura, Avenir, PP Neue Montreal), large scale, sometimes rotated 90° - **Color:** primary red / blue / yellow on black or white. Can push to fluorescent accents (#FF3C00, #0019FF, #F5E100) - **Layout:** circles, squares, triangles as primary composition elements — not decoration - **Signature moves:** type-as-shape, giant circular elements as composition anchors, bold diagonal rhythms - **Avoid:** photography (use illustration / shape), 3D perspective - **Right for:** posters, arts programming, bold editorial stances, cultural identity work - **Wrong for:** corporate contexts, hi-fi product UI --- ## School 2 · Quiet minimalism ### 3. Kenya Hara "emptiness" (Japanese quiet minimalism) - **Feeling:** quiet, meditative, reverent, deliberately un-full - **Keywords:** generous-whitespace · monochrome · patient · reduced - **Flagships:** MUJI art direction, Shiseido editorial, Hara's own book covers - **Typography:** delicate serif (Tsukushi Mincho, Chronicle Text) OR a single humanist sans (Yu Gothic, Avenir Next Light) at quiet sizes. Never loud weights - **Color:** off-white dominant, with a single warm neutral or a subtle natural color. Never pure black — always warm ink or charcoal - **Layout:** ~70–80% negative space. Tiny content islands. Precise vertical rhythm - **Signature moves:** single object photographed against infinite white, captions that are smaller than you'd expect, page numbers in faded grey - **Avoid:** anything loud. No saturated accents. No more than 2 type sizes per layout. - **Right for:** lifestyle brands, wellness, high-end product reveals, editorial retreats - **Wrong for:** dashboards, information-dense UIs, marketing that needs to fight for attention ### 4. Dieter Rams industrial (Braun / early Apple lineage) - **Feeling:** useful, honest, restrained, quietly confident - **Keywords:** functional · tactile · unobtrusive · long-lasting - **Flagships:** Braun catalogs, pre-2010 Apple, Vitsœ's site - **Typography:** Helvetica or Söhne. Medium weight. One or two sizes. - **Color:** monochrome grey scales with one functional accent (product-red, warning-yellow — used where it means something) - **Layout:** product-first. Generous whitespace framing a single hero. Labels and specs in understated typography - **Signature moves:** isometric line drawings of products as diagram, spec tables as quiet compositions, hairline grids separating columns - **Avoid:** decorative flourishes, marketing bombast, colored backgrounds - **Right for:** physical products (hardware, tools, furniture), understated tech, B2B craft tools - **Wrong for:** consumer entertainment, maximalist brands --- ## School 3 · Editorial and narrative ### 5. Magazine editorial (New York Magazine / Bloomberg Businessweek lineage) - **Feeling:** opinionated, layered, editorial, alive - **Keywords:** layered · photographic · type-driven · maximalist-typography - **Flagships:** New York Magazine, Bloomberg Businessweek, The California Sunday Magazine - **Typography:** a contrasted pairing — a strong serif display (Druk, Austin, Chronicle Display) and a humanist sans for body (GT Alpina, Söhne, Graphik). Headlines in dramatic scale - **Color:** photograph-driven color. Accent palettes pulled from the photo. Rich supporting neutrals - **Layout:** magazine grid, pull quotes, drop caps, sidebars, bylines. Real editorial hierarchy - **Signature moves:** oversized display serifs, pull quotes at 2x body scale, captions in monospace or condensed sans, color-blocked sidebars - **Avoid:** generic stock photography, over-centered layouts, icons as decoration - **Right for:** long-form content, opinion-driven brands, publications, rich storytelling marketing - **Wrong for:** short-attention-span interfaces, data dashboards ### 6. Zine / risograph (independent print lineage) - **Feeling:** handmade, immediate, low-fidelity on purpose, warm - **Keywords:** risograph · two-color · textured · hand-placed - **Flagships:** independent zines, Rough Trade posters, skate-culture design - **Typography:** a distinctive display (Tiempos, PP Editorial New, ITC Bookman, Tusker Grotesk) + photocopied feel. Can hand-letter or use all-caps display - **Color:** 2–3 spot colors with a risograph palette feel (flo-pink, teal, navy, yellow). Slight misalignment is good - **Layout:** slightly off-kilter, collage-like, hand-placed. Not perfect grid - **Signature moves:** halftone patterns, spot-color overprints, slight rotation on elements, typewriter captions - **Avoid:** pixel-perfect precision, gradients, shiny effects - **Right for:** indie brands, culture / music / zines, merchandise, "made by humans" positioning - **Wrong for:** enterprise, any brand that needs to feel premium/expensive --- ## School 4 · Motion and the digital-native ### 7. Field.io / motion poetics - **Feeling:** alive, computational, mesmerizing - **Keywords:** generative · motion-first · particle · light-as-material - **Flagships:** Field.io, Active Theory, Moniker, Universal Everything - **Typography:** restrained — usually one geometric sans in a single weight. Type is rarely the hero; motion is. - **Color:** gradients from dark indigo to electric; or pure monochrome with one light-based accent - **Layout:** full-bleed. Motion occupies the entire canvas. UI is delicate and often semi-transparent. - **Signature moves:** particle fields, shader-driven gradients, slow continuous motion, audio-reactive visuals, type that emerges from motion - **Avoid:** traditional web layouts, static imagery as hero - **Right for:** tech brands that want to feel futuristic, cultural institutions, interactive installations, launch moments - **Wrong for:** content-heavy sites, purchase funnels, any context where the user needs to read or decide ### 8. Brutalist web (Bloomberg/Drudge/Are.na lineage) - **Feeling:** raw, direct, anti-polish, confident - **Keywords:** unstyled · monospace · text-dense · system-typography - **Flagships:** Are.na, early Craigslist, Bloomberg Terminal aesthetic transplanted to web - **Typography:** IBM Plex Mono, Times New Roman, system-ui. Deliberately "unstyled". Headings at standard sizes, not display-dramatic - **Color:** black on white, occasional single saturated accent for links. Almost no gradients, shadows, or rounded corners - **Layout:** dense text, horizontal rules, tables, long scrolling pages. No hero "section" apparatus. - **Signature moves:** raw `` and `
`, visible borders, small link lists, server-rendered feel
- **Avoid:** animations, skeuomorphic effects, any attempt to "polish"
- **Right for:** tools-for-thought, text-forward brands, independent publications, developer-facing products
- **Wrong for:** consumer retail, emotional storytelling, visual-heavy brands

---

## School 5 · Expressive and experimental

### 9. Sagmeister / Stefan Walz / Experimental

- **Feeling:** provocative, hand-made, emotional, attention-grabbing
- **Keywords:** expressive · hand-craft · concept-driven · theatrical
- **Flagships:** Stefan Sagmeister, Paula Scher (in her expressive mode), Stefan Walz
- **Typography:** often custom, hand-drawn, or modified display faces. Type treated as image.
- **Color:** saturated, often clashing pairs used deliberately. No fear of "bad taste."
- **Layout:** the concept drives everything. Grid serves the idea, not the other way around.
- **Signature moves:** physical photography of hand-crafted type, extreme scale shifts, deliberate "mistakes," unusual materials
- **Avoid:** restraint — this style requires commitment. If you hedge, you just look confused.
- **Right for:** cultural work, strong opinions, one-time campaigns, bold personalities
- **Wrong for:** functional UI, ongoing systems, B2B

### 10. Y2K / futurist-retro

- **Feeling:** optimistic, technological, nostalgic-for-futures-past
- **Keywords:** chrome · bubble · glossy · iridescent
- **Flagships:** early-2000s tech branding, Daito Manabe's recent work, contemporary bounces in fashion
- **Typography:** either a pixel / bitmap face (Departure Mono, PP Mondwest) OR a stretched rounded geometric (VT323, Matrix II). Often mixed.
- **Color:** chrome / iridescence, acid green, electric blue, hot pink. Gradient-heavy in a meant-to-be-retro way.
- **Layout:** HUD-like overlays, sci-fi UI tropes, visible "interface" metaphors
- **Signature moves:** chrome-ball 3D, scan lines, bubble letters, pseudo-HUD elements
- **Avoid:** mixing with genuine modernism — commit fully
- **Right for:** gaming, music, Gen Z brands, crypto-native projects, nostalgia-forward marketing
- **Wrong for:** professional tools, trust-seeking industries

---

## How to apply a style once chosen

Once the user picks a direction (say, "Direction A · Swiss Editorial"):

1. **Write a mini system upfront** in a comment at the top of the HTML:
   ```html
   
   ```
2. **Hold yourself to the system.** Every choice should cite the system. If you need a color not in the system, extend the system explicitly (add it to the comment) instead of ad-hoc adding it.
3. **Lean into the signature moves.** The point of a style is its specific character. Swiss Editorial without numbered sections and hairline rules is just "generic minimal." Kenya Hara without 70% whitespace is just "a bit sparse."
4. **Fight your averaging instinct.** When unsure, do *more* of what defines the style, not less. A style done at 30% reads as hesitant; at 80% it reads as deliberate.

## When none of the 10 fit

Real brands and real briefs exceed any pre-canned style library. If the user picks "none of the above," ask them for:
- A reference artifact (a site, a magazine cover, a screenshot) that captures the feeling
- 3 words that describe the vibe they want
- An adjacent brand whose aesthetic they admire

Then reverse-engineer a mini-system from those anchors, using the same "type + color + layout + signature moves" structure.