## Aesthetic Direction
 
**Purpose**: What problem does this interface solve? Who uses it?
**Domain**: 5+ concepts, metaphors, or vocabulary from this product's world
**Color world**: 5+ colors that exist naturally in this domain's physical space
**Tone**: Pick ONE — brutally minimal, maximalist, editorial, luxury, brutalist,
          retro-futuristic, soft/pastel, industrial, organic... commit to an extreme.
**Differentiation**: What's the one element that could only exist for THIS product?
**Defaults rejected**: Three obvious patterns you're explicitly not doing.

## Design Process
 
1.**Understand** → Who is the user? What's the goal?
2.**Map** → What's the user flow? (entry → action → result)
3.**Structure** → What components are needed? (hierarchy)
4.**Validate** → Does the design meet the requirements?
5.**Implement** → Build with technology skills (react, css, mui)

## User Flow: Checkout
 
**Entry:** User clicks "Checkout" from cart
**Goal:** Complete purchase
 
Flow:
1.Review cart items → [Edit quantities] → [Remove items]
2.Enter shipping address → [Auto-fill from saved] → [Validate address]
3.Select shipping method → [Show estimated delivery]
4.Enter payment → [Validate card] → [Show errors inline]
5.Review order → [Edit any section] → [Place order]
6.Confirmation → [Order number] → [Email sent]
 
**Edge cases:**
-Empty cart → Redirect to shop with message
-Payment failure → Show error, keep form state, retry
-Session timeout → Save progress, prompt re-login

## Component Hierarchy: Dashboard
 
DashboardPage
├── DashboardHeader
│   ├── PageTitle
│   └── DateRangePicker
├── MetricsRow
│   ├── MetricCard (revenue)
│   ├── MetricCard (orders)
│   └── MetricCard (customers)
├── ChartsSection
│   ├── RevenueChart
│   └── OrdersChart
└── RecentOrdersTable
    ├── TableHeader
    ├── TableRow[]
    └── Pagination

## State Analysis: Checkout
 
| Component       | State Needed              | Source             |
|-----------------|---------------------------|--------------------|
| CartReview      | items, quantities         | Redux store        |
| ShippingForm    | address fields, errors    | Local form state   |
| ShippingMethod  | methods[], selected       | API + local        |
| PaymentForm     | card fields, errors       | Local form state   |
| OrderSummary    | totals, tax, shipping     | Derived from above |
| CheckoutPage    | currentStep, isSubmitting | Local state        |

Borders-only      → technical, precise feel; no shadows
Subtle shadows    → layered surfaces with soft elevation
Surface shifts    → elevation via lightness (dark mode: higher = slightly lighter)
Borders + shadows → reserved for emphasis elements only
 
❌ Don't mix approaches — inconsistent depth is the clearest sign of no system.

Default  → resting appearance
Hover    → cursor over element
Active   → pressed/clicked (brief; gives physical feel)
Focus    → keyboard navigation — visible ring, never hidden
Disabled → reduced opacity + cursor:not-allowed
 
❌ Missing focus = broken keyboard accessibility
❌ Missing disabled = broken form UX

## Checkpoint 1: User Flow
-[ ] All user goals are achievable
-[ ] Error cases handled (empty, invalid, failure)
-[ ] Navigation is clear (user always knows where they are)
 
## Checkpoint 2: Component Structure
-[ ] Each component has single responsibility
-[ ] No component handles 3+ unrelated concerns
-[ ] Hierarchy reflects visual nesting
 
## Checkpoint 3: State Design
-[ ] State is colocated (closest to where it's used)
-[ ] No redundant state (derived values computed, not stored)
-[ ] Loading and error states accounted for
 
## Checkpoint 4: Craft Self-Evaluation
-[ ] Swap Test: replacing the typeface/layout with generic alternatives changes how it feels
-[ ] Squint Test: hierarchy is perceivable without reading — contrast/scale carry it
-[ ] Signature Test: 3+ specific elements feel unique to THIS product
-[ ] Token Test: CSS variable names evoke this product's world, not any generic project

❌ Generic fonts (Inter, Roboto, Arial, system-ui) when context calls for character
❌ Purple/blue gradients on white — the most overused AI aesthetic
❌ Predictable card-grid-dashboard layouts without context-specific differentiation
❌ "Clean and modern" without defining what those mean for THIS product
❌ Same aesthetic repeated — vary light/dark themes, typefaces, and palettes across projects
 
"No design should be the same. Make unexpected choices that feel genuinely designed
for this context."
"Extraordinary creative work is possible here — don't hold back."

# ❌ WRONG
"Let me create the components and figure it out as I go."
 
# ✅ CORRECT
"Let me commit to an aesthetic direction, map the user flow,
define the component hierarchy, identify state needs, then implement."

Designing a new page/feature?
  → Aesthetic direction → User flow → Component hierarchy → State analysis
  → Visual design → Responsive → Motion → Implementation
 
Committing to aesthetic direction?
  → Define tone (pick ONE extreme), differentiation, and 3 defaults you reject
 
Planning visual design?
  → See references/visual-design.md
 
Planning responsive behavior?
  → See references/responsive-design.md
 
Adding interactions/animations?
  → See references/interaction-design.md
 
Choosing between UI patterns?
  → See Examples table below or references/design-thinking.md
 
Evaluating existing UI?
  → Run Design Critique Framework (5 dimensions: impression, usability, hierarchy, consistency, a11y)
  → Run 4 craft checkpoints → Verify depth strategy is consistent
  → Confirm all 5 interactive states are covered
 
Accessibility concerns?
  → Use a11y skill; Checkpoint 4 for planning; visual-design.md for contrast ratios