Frontend Design

Overview

Build memorable, functional interfaces with a clear aesthetic direction (no generic templates). Focus on bold typography, cohesive palettes, purposeful motion, semantic structure, and accessibility.

Quick Start

• Collect intent: purpose, audience, platform constraints, framework, delivery format (HTML/React/Vue).
• Choose an aesthetic direction and signature move (stripe, glow, grain, magazine stack). See references/aesthetic-playbook.md.
• Define tokens: fonts, palette, shadows, radii, spacing scale. Load fonts early.
• Plan layout: hero + supporting sections, data/timeline rails, cards; pick grid system and motion plan.
• Build semantic markup, wire CSS variables, add motion with staggered reveals, then run accessibility and responsive checks.

Workflow

1) Define intent and aesthetic

• Ask for: target users, tone (brutalist, editorial, neon, soft craft, industrial, etc.), content types (cards, forms, charts), performance constraints.
• Pick a single memorable gesture and stick to it. Avoid mixed-font chaos unless the style calls for it.
• If the user is vague, propose 2–3 aesthetic directions from references/aesthetic-playbook.md and confirm.