Design Process SOP: Define -> Build -> Review -> Refine

2. Content Per Section - Define content before design:

• List every section the page needs (hero, features, testimonials, pricing, FAQ, footer)
• Write the actual text content for each section in separate specs
• Include: headings, subheadings, body copy, CTAs, metadata
• This prevents placeholder-driven design which always looks generic

3. Mood Board and Aesthetic Direction - Commit to a BOLD direction:

• Pick a clear aesthetic: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian
• Note specific things you like: layout patterns, typography choices, color treatments, animation styles, component shapes
• Every design decision should trace back to the aesthetic direction

4. Style Guide (living document) - Create a single source of truth:

• Color palette with usage rules (primary, secondary, accent, semantic)
• Typography scale with font pairing rationale
• Spacing system with component and section rules
• Component specifications (button styles, card treatments, input patterns)
• Animation principles and timing standards
• This document evolves as you build - update it when you learn something new

Phase 2: Build

Build section by section with isolated context.

• Start each section referencing only its spec and the style guide
• Commit after completing each section (enables safe rollback)
• Build in order: global styles -> navigation -> hero -> content sections -> footer
• Each section gets its own focused prompt with specific requirements

Phase 3: Review

After building each section:

• Check against the style guide for consistency
• Verify responsive behavior at all breakpoints
• Test animations and interactions
• Compare against the mood board aesthetic direction

Phase 4: Refine

Based on review findings:

• Update the style guide if design decisions changed
• Apply fixes to the current section
• Document learnings for future sections
• This loop continues until the section matches the vision

Typography System

Typography is the single most impactful design decision. It sets the entire tone.

Font Selection Principles

Choose fonts that are beautiful, unique, and characterful. Pair a distinctive display font with a refined body font.

Display Font Categories (for headings, hero text, statements):

• Geometric Sans: Outfit, Plus Jakarta Sans, Satoshi, General Sans
• Humanist Sans: Source Sans 3, Libre Franklin
• Neo-Grotesque: Switzer, Neue Montreal (paid)
• Serif Display: Playfair Display, Fraunces, Instrument Serif
• Slab Serif: Zilla Slab, Roboto Slab
• Monospace Display: JetBrains Mono, Space Mono, Fira Code
• Variable/Experimental: Clash Display, Cabinet Grotesk

Body Font Categories (for paragraphs, UI text, labels):

• Clean Sans: DM Sans, Nunito Sans, Work Sans, Manrope
• Readable Serif: Source Serif 4, Lora, Crimson Pro
• System-feel: Inter (only as body, never as display), Geist Sans

Font Pairing Rules:

• Contrast in style (serif display + sans body, or geometric + humanist)
• Match x-height proportions for visual harmony
• Limit to 2 fonts maximum (3 if using a monospace accent)
• The display font carries personality; the body font carries readability

Type Scale

Use a consistent modular scale. Recommended: Major Third (1.250) for most projects.

--text-xs:    0.75rem   (12px)  - Captions, labels, metadata
--text-sm:    0.875rem  (14px)  - Small body, secondary text
--text-base:  1rem      (16px)  - Body text baseline
--text-lg:    1.125rem  (18px)  - Lead paragraphs, emphasis
--text-xl:    1.25rem   (20px)  - Section intros
--text-2xl:   1.5rem    (24px)  - H4, card titles
--text-3xl:   1.875rem  (30px)  - H3, section headers
--text-4xl:   2.25rem   (36px)  - H2, major sections
--text-5xl:   3rem      (48px)  - H1, page titles
--text-6xl:   3.75rem   (60px)  - Hero headlines
--text-7xl:   4.5rem    (72px)  - Display, statement text

Line Height and Spacing

Headings:     line-height: 1.1 - 1.2  (tight, creates visual weight)
Body:         line-height: 1.5 - 1.7  (comfortable reading)
UI elements:  line-height: 1.3 - 1.4  (compact but readable)

Letter Spacing:

• Headings: -0.02em to -0.04em (tight - creates premium feel)
• Body: 0 to 0.01em (natural)
• All-caps text: 0.05em to 0.1em (wide - prevents letters from crowding)

Font Weights:

• 300 (Light): Elegant headings, minimal aesthetic
• 400 (Regular): Body text default
• 500 (Medium): UI labels, subtle emphasis
• 600 (Semi-bold): Subheadings, buttons
• 700 (Bold): Strong headings, CTAs

Responsive Scaling: Reduce heading sizes by ~20-30% on mobile. Use CSS clamp() for fluid scaling:

font-size: clamp(2rem, 5vw, 3.75rem);

For the full typography reference including font specimen examples, read references/typography-scale.md.