frontend-design

Frontend Design

Design Philosophy

Avoid distributional convergence — the tendency for AI to default to generic purple gradients, Inter font, and rounded-corner cards. Every interface should have a deliberate aesthetic based on its purpose and audience.

Before writing a single line of CSS, define:

• What emotion should this interface convey?
• Who is the user and what context are they in?
• What is the single most important action on this screen?

---

Component Architecture

Atomic Design Hierarchy

Atoms      → Button, Input, Label, Icon
Molecules  → SearchBar (Input + Button), FormField (Label + Input + Error)
Organisms  → Header, ProductCard, UserProfile
Templates  → PageLayout, DashboardLayout
Pages      → Specific instances with real data

Component Rules

• One component = one responsibility
• Props should be explicit, not inferred
• Use composition over prop-drilling
• Default to server components; use client components only for interactivity

---

Styling System

Tailwind Best Practices

// Extract repeated patterns into components, not custom CSS
// BAD: Duplicating classes everywhere
<div className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg">

// GOOD: Extract to a component
<Button variant="primary">Click me</Button>

Design Tokens (Custom Properties)

:root {
  --color-primary: #your-brand-color;
  --color-surface: #f8f9fa;
  --spacing-unit: 4px;
  --radius-default: 8px;
  --font-heading: 'Your Chosen Font', sans-serif;
}

Typography That Avoids Generic AI Look

• Don't default to Inter or Roboto — they signal "AI generated"
• Consider: Geist, Instrument Sans, Plus Jakarta Sans, DM Sans
• Mix weights deliberately: 400 for body, 600 for emphasis, 800 for headlines
• Establish a clear type scale before building

---

Performance Optimization

Core Web Vitals Targets

Metric	Target	What It Measures
LCP	< 2.5s	Largest Contentful Paint — loading
FID/INP	< 100ms	Interaction responsiveness
CLS	< 0.1	Layout stability