frontend-design

# Frontend Design

Build production-grade frontend interfaces with intentional, distinctive design.
Avoid AI slop: no generic aesthetics, no predictable patterns.

Step 1: Direction before code:
  Purpose  : what is this interface for? who uses it?
  Tone     : pick ONE: brutally minimal / editorial / maximalist /
             brutalist / soft luxury / high-contrast data
  Theme    : light or dark: choose deliberately

Step 2: Typography:
  Pair a display font (character) with a functional body font.
  Use a clear scale: 12/14/16/20/28/40/64px: not arbitrary values.
  Avoid: Inter alone, Space Grotesk alone, system-ui as the only font.

Step 3: Color:
  Max 3 roles: background, content, accent.
  Accent used sparingly: one element per view maximum.
  Test contrast: WCAG AA minimum (4.5:1 text, 3:1 UI).

Step 4: Layout:
  Define the grid first (8px or 4px base unit).
  Whitespace is content: use it intentionally.
  Mobile-first, then desktop breakpoints.

Step 5: Interaction:
  Every state has a visual: default / hover / active / disabled / loading.
  Transitions: 150ms for micro, 300ms for layout shifts.
  No transition on color-scheme changes.

Output: working React/Tailwind code, not mockups.