# Aesthetics — Style Direction Library > Read this at the start of every project. Pick ONE direction. Hold the line. Mixing styles = slop. --- ## How to Choose Answer these three questions in order. The answer drives the pick. 1. **Who is the primary user?** (CTO vs. designer vs. consumer vs. journalist) 2. **What is the emotional job?** (Trust, desire, curiosity, delight, urgency) 3. **What would a senior designer at [relevant studio] do?** (Don't pick a studio — pick a *kind* of decision-making.) If still unsure → **Refined Minimal**. --- ## 1. Refined Minimal **For:** SaaS dashboards, fintech, dev tools, B2B products, professional services. **Reference:** Linear, Stripe, Vercel, Arc browser, Cron, Mercury bank, Pitch, Height, Notion (settings), Sublime. **Vibe:** Quiet confidence. The interface gets out of the way. Everything you see was decided. ### Typography - **Display:** Söhne, Inter Display, GT America, Söhne Breit, ABC Diatype Mono (for headings) - **Text:** Inter, IBM Plex Sans, Söhne, Geist - **Pairs that work:** Söhne Mono + Söhne, Inter Display + Inter, GT America + GT America Mono - **Hero size:** `clamp(3.5rem, 7vw, 6rem)` for primary H1 - **Line height:** tight on display (1.05–1.15), normal on body (1.5–1.65) ### Color - **Surface:** Pure white (#FFFFFF) or off-white (#FAFAFA / #F7F7F5) - **Ink:** Near-black (#0A0A0A), not pure black - **Muted:** #6B6B6B / #8A8A8A - **Hairline:** #E5E5E5 / #EDEDED - **Accent:** ONE — saturated, often a desaturated jewel tone. Examples: Linear purple (#5E6AD2), Stripe indigo, Vercel black-on-white, Mercury deep green (#1B4332). Used on links, one CTA per page, focus rings. ### Layout - 12-column grid, max-width 1200–1280px - Generous side padding (px-6 mobile, px-12 desktop) - Sections separated by **whitespace**, not dividers - Hero is asymmetric — headline left-aligned, supporting element (image, product UI) on the right at large sizes, stacked on mobile - Tables and data dense? Use compact spacing, hairline borders, monospace numbers ### Hallmarks - No background colors on hero (or extremely subtle gradient-to-paper) - Buttons are crisp rectangles or 6px radius — not pills - Icons are 16px or 20px, single-weight stroke - Focus rings are precise (2px offset, not blurry glows) - Numbers are monospace (alignment matters) - Empty states have personality but restraint ### Hallmarks to avoid - ❌ Adding background tint "to make it pop" - ❌ Centered everything - ❌ Drop shadows on cards (use hairlines or nothing) - ❌ Gradient hero backgrounds --- ## 2. Editorial / Magazine **For:** Publishing, journalism, premium content, books, high-end consumer brands, manifestos, agency sites. **Reference:** NYT Magazine, Bloomberg Businessweek, It's Nice That, Wallpaper*, Apartamento, The Gentlewoman, Magazine N°, Pin–Up, Cabana, Courier (studio), Olympia (NYT). **Vibe:** Considered. Authorial. The page is a page, the headline is a headline, the photo is a photo. Long-form and confident. ### Typography - **Display:** A serif with character. Tiempos Headline, Lyon, Söhne Serif, GT Sectra, Domaine Display, Canela, Playfair Display (used sparingly), GT Super, Editorial New, Reckless - **Text:** Same serif at smaller sizes, or a paired humanist sans (Söhne, GT America) - **Mono (for kickers/byline):** IBM Plex Mono, JetBrains Mono, GT America Mono - **Hero size:** Massive. `clamp(4rem, 9vw, 9rem)` or larger. Set tight (line-height 0.95–1.05). - **Drop caps** OK on long-form articles, sparingly. ### Color - **Surface:** Warm off-white (#FAF7F2, #F4F1EB) or deep editorial black (#0E0E0E) - **Ink:** True black (#000) on cream, warm white (#F5F0E8) on black - **Accent:** Editorial red (#C8281C) or a single ink color. Often used on pull-quotes, kickers, section markers. - **Rule lines:** 1px hairlines in muted ink. ### Layout - Strong vertical rhythm. Generous gutters. - Use a measure (line length) of 60–75 characters for body - Asymmetric grids: image bleeds off one edge, text column offset - Pull quotes: large, set in display face, often with rule lines above/below - Section numbers / folio numbers as design elements - Footnotes / margin notes where appropriate ### Hallmarks - Image-led. Photography is the design. - Captions in smaller, often italic, type - Issue / volume / date markers in masthead style - Long-form scroll is encouraged — reading time, chapter markers - Treat the page as a magazine spread ### Hallmarks to avoid - ❌ SaaS-style "3 features in a row" sections — use full-bleed spreads instead - ❌ Generic sans-serif throughout — bring the serif - ❌ Centered body text — left-aligned, ragged right - ❌ Stock photography with overlaid gradient --- ## 3. Swiss / International Typographic **For:** Galleries, museums, archives, design studios, manifestos, annual reports, anything where information is the design. **Reference:** Müller-Brockmann, Vignelli, Pentagram (archive work), Bureau Mirko Borsche, Studio Dumbar, Werkplaats Typografie, HfG Karlsruhe output, MoMA design. **Vibe:** The grid is the design. Typography is precise. Information architecture = visual architecture. ### Typography - **Display & Text:** One neutral grotesque used ruthlessly. Akzidenz-Grotesk, Helvetica Now, Söhne, Neue Haas Grotesk, GT America, Inter, ABC Diatype - **Mono:** Same family in mono variant, or IBM Plex Mono for tabular data - **Hero size:** Often smaller than expected. The Swiss move is restraint. `clamp(2.5rem, 5vw, 4.5rem)`. Big headlines feel loud here. - **Type as image:** large numerals, dates, indices as visual anchors ### Color - **Surface:** White or black. Nothing in between. - **Ink:** Pure black or pure white - **Accent:** Used very rarely. A red, a fluorescent, an electric blue — as a single punctuation mark. - **Often NO accent.** Pure monochrome is a valid Swiss choice. ### Layout - Strict modular grid. 12-col or 6-col. Visible or invisible. - Left-aligned everything. No centering. - Numbered sections. Folio numbers. Indices. - Lots of metadata shown: dates, locations, dimensions, edition numbers - Diagrams and tables treated as typography, not decoration ### Hallmarks - Captions and labels are part of the design (often small, mono) - Information density is high — whitespace used as separator, not filler - Manifestos / mission statements set large, no decoration - Photographic imagery is documentary, full-bleed, unretouched ### Hallmarks to avoid - ❌ Decorative elements — there are none, that's the point - ❌ Multiple fonts - ❌ Centered headlines - ❌ "Friendly" rounded corners --- ## 4. Brutalist / Raw **For:** Music, fashion, streetwear, art, counterculture, alternative media, edgy tech, "we're not like other brands." **Reference:** Bandcamp, Working Format, Bloomberg Businessweek (early 2010s), Acne Studios (early), Balenciaga (creative pages), Slam Jam, Internet-Troll aesthetic done well, Bottega (web), SSENSE editorial, Brutalist Websites (gallery), Yung Lean / Drain Gang visual world. **Vibe:** Rejection of polish. Anti-design that is itself designed. Raw HTML energy, but precise. ### Typography - **Display:** Anything goes — Helvetica (the original sin), Times New Roman used ironically, monospace terminals, custom condensed faces - **Text:** Often same family throughout, or a chaotic mix that's clearly intentional - **Hero size:** Either massive and crude OR tiny and clinical — the contrast IS the design - **Use of system fonts** (`Helvetica, Arial, sans-serif`) is OK if it's a statement. Default browser styles can be part of the look. ### Color - **Surface:** Pure white, pure black, or one crude color (lime, hot pink, hazard yellow) - **Accent:** Loud. Used liberally but in block shapes. - **High contrast** is mandatory. Anti-design ≠ low contrast. ### Layout - Visible grid artifacts (alignment is sometimes deliberately off by 1px) - Tables as layout - Underlined links in default blue - Image crops unexpected - Scrolling text, marquee, but used surgically - Negative space used aggressively — emptiness is confrontational ### Hallmarks - Loudness and quietness alternated — not constant noise - A few perfect moments (one beautiful spread) inside the rawness - Self-aware: the brutalism is a choice, not a lack of effort - Often uses stock imagery, scans, photocopies — texture ### Hallmarks to avoid - ❌ Calling it "brutalist" but shipping unstyled HTML — that's not brutalism, that's unfinished - ❌ Random colors with no logic - ❌ Sloppy where sloppiness isn't the point - ❌ Inaccessible by design (low contrast, missing alt text, no keyboard nav) — see `motion.md` on accessibility --- ## 5. Soft / Warm / Hand-crafted **For:** Lifestyle, hospitality, food, small business, indie SaaS, personal brands, creative practices, parenting, wellness (without woo). **Reference:** Mailbrew, Cron, Glossier (2014–2018), Away (early), Sweetgreen, Oatly (web), Cobot, Hem, Fellow, Pattern Brands (the goods), Studio Neat, Areaware. **Vibe:** Considered warmth. Soft, but not saccharine. Rounded but not gummy. Personality without performance. ### Typography - **Display:** GT Super, Tiempos, Editorial New, Söhne (soft weight), a humanist sans with warmth: ABC Diatype, Inter, Söhne - **Text:** Same family - **Avoid:** Geometric sans (Futura, Avenir) — too cold. Heavy weights — too assertive. - **Hero size:** Comfortable, not massive. `clamp(2.5rem, 5vw, 4.5rem)`. ### Color - **Surface:** Cream (#FAF6F0, #F4EFE6), warm white, soft taupe - **Ink:** Warm near-black (#1A1A1A, #2B2522) - **Accent:** Terracotta, sage, dusty blue, mustard, plum. Desaturated, not pastel. - **Accent usage:** Generous — can be on backgrounds, but in soft washes. ### Layout - Generous padding (more than refined minimal) - Rounded corners allowed (12–20px), but not on everything - Photography-led: warm, natural light, lifestyle contexts - Cards exist but feel like objects, not data containers - Type can overlap images slightly (intentional, not careless) ### Hallmarks - Texture: subtle paper grain, soft shadows, hand-drawn marks (used once or twice) - Product photography is real, not stock - Microcopy has voice: "Hey there" not "Welcome" - Soft transitions, never aggressive ### Hallmarks to avoid - ❌ Pastel overload - ❌ Hand-drawn icons everywhere — pick one or none - ❌ Handwritten fonts for body copy (display OK) - ❌ Confusing softness with low contrast --- ## 6. Technical / Mono **For:** Dev tools, APIs, infrastructure, docs, CLI tools, terminals, hacker-native products, data products. **Reference:** Fly.io, Cloudflare, Tailscale, Planetscale, Supabase (docs), Vercel (docs), Railway, Render, Cloudflare Workers docs, Wing, Terminal aesthetic, ASCII art used well. **Vibe:** The interface is the documentation. Code is a first-class citizen. Numbers and logs feel like home. ### Typography - **Display & Text:** Mono family — JetBrains Mono, IBM Plex Mono, Berkeley Mono, GT America Mono, Geist Mono, Iosevka - **Pair with:** A clean grotesque for long-form prose (IBM Plex Sans, Inter, Söhne) - **Hero size:** Often smaller, with the headline being literal (file path, command, status). `clamp(2rem, 4vw, 3.5rem)`. ### Color - **Surface:** True black (#000) or terminal green-tinted black, or off-white (#F4F4F2) - **Ink:** Pure white on black, pure black on white - **Accent:** Terminal green (#00FF00), amber (#FFB000), red for errors, cyan for links. Or single accent like Vercel pink. - **Syntax highlighting palette** if showing code: muted, not rainbow ### Layout - Dense. Information-rich. Multi-column where it helps. - Tables of specifications, environment variables, endpoints - Code blocks are the design — make them beautiful - Status indicators (● ◯) used semantically - Footer often shows: build hash, region, version, last deployed ### Hallmarks - ASCII diagrams used as visual elements (boxes made of `+`, `-`, `|`) - Real numbers shown (latency, throughput, cost) - Logs as UI patterns - Keyboard-first design (visible shortcuts) - Easter eggs for nerds ### Hallmarks to avoid - ❌ Fake "hacker" aesthetic without technical content — reads as costume - ❌ Green-on-black that's actually painful to read - ❌ Emoji as status indicators - ❌ Pretending to be a terminal when the product is a marketing site --- ## 7. Playful / Geometric **For:** Consumer, social, gaming, creative tools, kids, education, anything where delight is a feature. **Reference:** Notion Calendar, Linear (mobile), Things 3, Headspace (used well), Duolingo (engagement surfaces), Pitch (presentations), Arcade, Cron, editorial sections of The Browser Company. **Vibe:** Geometric, colorful, considered-but-joyful. Play is the design system, not the decoration. ### Typography - **Display:** Geometric with character: ABC Diatype, GT Walsheim, Söhne (rounded weights), Inter, Manrope - **Pair with:** A mono for accents (GT America Mono, JetBrains Mono) - **Hero size:** Confident. `clamp(3rem, 6vw, 5.5rem)`. ### Color - **Surface:** Off-white or a tinted near-white - **Palette:** Multiple accents used deliberately — a 4-color palette of well-chosen hues, not rainbow - **Color is meaningful:** each color = a category, a state, a feature ### Layout - Asymmetric, often tilted elements - Cards with bold outlines (2px) rather than subtle shadows - Generous whitespace between bold moments - Icons are large, custom or weighty — never emoji - Motion is part of the design (not garnish) ### Hallmarks - Custom illustrations as primary imagery - Microcopy that has a voice - Achievement / state moments (delight) - Sound used well (or not at all) ### Hallmarks to avoid - ❌ Comic Sans or "playful" = bad typography - ❌ Rainbow palettes with no logic - ❌ Bouncy animations on everything — be selective - ❌ Confusing play with chaos --- ## Hybrid Rules Sometimes a project sits between two aesthetics. The rules: 1. **Pick the dominant one.** The other can contribute a single technique (e.g., Refined Minimal layout + Editorial headline typography). Don't blend 50/50. 2. **Aesthetic components are atomic.** Don't mix and match components across aesthetics. One button system, one card system. 3. **Typography pairs must be in the same family.** Söhne + Söhne Mono. GT America + GT America Mono. Inter + JetBrains Mono. Don't pair random faces. 4. **Color palette stays in one aesthetic.** Don't mix Refined Minimal neutrals with Soft palette accents. If a project needs more than one aesthetic (e.g., marketing site + product), treat them as **separate surfaces** with different design systems, sharing only typography family.