# CommerceDex Design Docs — Overview

## What this document set is

This is the **Phase 4 deliverable** of CommerceDex: Design System & UI Framework. It defines the visual and interaction language the product is built in, so every screen implemented in Phase 5 onward looks and behaves like it came from the same hand:

- What "minimal, premium, professional, elegant, timeless" means as checkable rules, not adjectives (`01-design-principles.md`)
- Concrete design tokens: color, type, spacing, radius, shadow, motion (`02-design-tokens.md`)
- Core component conventions built from those tokens (`03-component-conventions.md`)
- Layout, grid, and responsive/mobile behavior (`04-layout-and-responsive.md`)
- Motion and micro-interaction rules (`05-motion-and-microinteractions.md`)
- Open questions for later phases (`06-open-questions.md`)

## What this document set is NOT

- **Not a component code library.** No actual CSS/component implementation ships here — that's Phase 5+, built against these specs.
- **Not a full brand identity exercise.** No logo, brand name treatment, or marketing site design. This is the *product* design system — the merchant-facing admin and storefront UI — not brand collateral. See `06-open-questions.md`.
- **Not a redesign of the IA or flows.** `../ux/01-information-architecture.md` and `../ux/02-core-user-flows.md` are taken as given; this phase defines how they look and feel, not what they are.

## How this phase resolves an earlier open question

`../ux/04-open-questions.md` #4 deferred the mobile navigation pattern to this phase. It's resolved concretely in `04-layout-and-responsive.md`.

## How to read these docs

Read in order — `01` establishes the "why," `02` gives the literal values, `03`–`05` apply those values to components, layout, and motion respectively. Treat `02-design-tokens.md` as the single source of truth for any specific value (a color hex, a spacing number) referenced elsewhere.

## Relationship to other phases

| Phase | Depends on Phase 4 for |
|---|---|
| Phase 5+ (Commerce Core, Catalog & Inventory, etc.) | Every screen built implements these tokens and component conventions directly — this is the shared UI foundation every later phase draws from. |
| Phase 11 — Performance Optimization | Motion and image-heavy component conventions here (`03`, `05`) are written with performance in mind from the start, so Phase 11 is tuning, not retrofitting. |