aesthetic-web-design

## Register Distinction Every design task is either **Brand** or **Product**. | Register | Scope | Bar | Approach | |----------|-------|-----|----------| | Brand | Marketing, landing pages, campaign surfaces, portfolios, long-form content. Design IS the product. | Distinctiveness. Must stand out from competitors. | Full creative range. Editorial, luxury, brutalist, cinematic — any visual lane. | | Product | App UI, admin, dashboards, developer tools. Design SERVES the product. | Earned familiarity. Users of Linear, Stripe, Vercel should trust it. | Restrained. Clean. Fast. One palette. Predictable patterns. | Identify before designing. Priority: (1) task cue ("landing page" vs "dashboard"), (2) surface in focus, (3) project context. First match wins. --- ## 1. Typography — The Main Visual Element ### Display fonts by direction **Editorial serif** (Structured.money, Cori Corinne, Steep.app): - Canela (preferred, premium license) — high contrast, editorial - DM Serif Display (free) — elegant, sharp serifs - Cormorant Garamond (free) — ultra-high contrast, ultra-luxury - Playfair Display (free) — classic editorial - Fraunces (free) — optical-size variable, editorial/vintage **Bold display sans** (Leonardo.AI, Monopo): - Neue Haas Grotesk Display — definitive display grotesque - Cabinet Grotesk (free) — wide, excellent for oversized headlines - Bebas Neue (free) — all-caps condensed - Anton (free) — punchy, condensed - Space Grotesk (free) — tech/futuristic **Body/UI tex...