frontend-design

Frontend Design Skill

Step 1: Establish Aesthetic Direction Before Writing Code

Before touching a line of CSS, decide:

1. Purpose - What is this interface for? Who uses it? What emotion should it evoke?
2. Tone - Serious/clinical? Playful/energetic? Minimal/confident? Bold/expressive?
3. Differentiator - What one thing will make this memorable? (Unusual typography? Unexpected layout? Strong color contrast?)
4. Constraint - What can you NOT use? (Overused styles to avoid)

Choose an extreme and execute with intentionality. Mediocre design lives in the middle. Either go brutally minimal or richly layered - both work; the generic middle does not.

---

Step 2: Typography (The Most Impactful Decision)

Font Pairing Formula

• Display/Heading: Distinctive, character-rich (serif, slab, condensed, or geometric sans)
• Body: Highly legible neutral (Inter, Geist, Outfit, DM Sans)

Pairings that Work

Heading	Body	Mood
Playfair Display	Inter	Editorial, premium
Space Grotesk	DM Sans	Tech, modern
Syne	Outfit	Bold, design-forward
Fraunces	Source Serif	Literary, warm
Cabinet Grotesk	Inter	Startup, clean

Font Scale (Never Use Default Browser Sizes)

:root {
  --text-xs:   0.75rem;   /* 12px - captions */
  --text-sm:   0.875rem;  /* 14px - secondary text */
  --text-base: 1rem;      /* 16px - body */
  --text-lg:   1.125rem;  /* 18px - lead text */
  --text-xl:   1.25rem;   /* 20px - small headings */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  clamp(3rem, 8vw, 5rem); /* Responsive hero */
}

Typography Rules

• Heading line-height: 1.1–1.2
• Body line-height: 1.6–1.8
• Max line length: 65–75 characters (add max-width: 65ch to body text)
• Never: all-caps body text, three different font weights at the same size, Arial/Times New Roman