# vibn — UX Screen Pack

Design system: **Ink & parchment** — Lora serif + Inter sans, no colour accent.
All HTML files open directly in any browser — no build step required.

## Complete screen inventory

| File | Screen | Interactive? |
|------|--------|-------------|
| `01_homepage.html` | Marketing homepage | Scroll |
| `02_signup.html` | Sign up (3 steps) | ✓ Click through steps, mode selection |
| `03_dashboard.html` | Projects dashboard | ✓ Projects / Clients / Invoices / Costs nav |
| `04_welcome.html` | Welcome phase | Static |
| `05_discover.html` | Discover phase | ✓ Live chat, PRD fills in |
| `06_architect.html` | Architect phase | ✓ Change modal per block |
| `07_design.html` | Design phase | ✓ Live style preview switching |
| `08_market.html` | Market phase | ✓ Voice sliders, Topics, Website style |
| `09_build.html` | Build phase | ✓ Review + animated 12-step pipeline |
| `10_vibe_editor.html` | Vibe editor (post-launch) | ✓ Chat, preview updates, deploy status |
| `vibn-website.jsx` | Marketing site | React component |
| `vibn-dashboard.jsx` | Dashboard + billing | React component |
| `00_design-tokens.css` | Design tokens | Reference |

## Full user flow
01 Homepage → 02 Sign up → 03 Dashboard → 04 Welcome →
05 Discover → 06 Architect → 07 Design → 08 Market →
09 Build → 10 Vibe editor

## Design tokens

| Token | Value | Usage |
|-------|-------|-------|
| `--ink` | `#1a1510` | Primary text, buttons |
| `--ink3` | `#444441` | Secondary text |
| `--mid` | `#5f5e5a` | Body text |
| `--muted` | `#888780` | Labels, captions |
| `--stone` | `#b4b2a9` | Disabled, hints |
| `--cream` | `#f1efe8` | Surface tint, hover |
| `--paper` | `#f7f4ee` | Page background |
| `--white` | `#fdfcfa` | Card backgrounds |
| `--border` | `#e8e2d9` | All borders |

Heading font: **Lora** (serif)
Body font: **Inter** (sans-serif)