ss-setuplisted

# Design System Setup Wizard Guide the user through setting up StyleSeed for their project, step by step. ## Instructions Walk through these steps ONE AT A TIME. After each step, wait for the user to respond before proceeding. Keep it conversational and friendly. ### Step 1: App Type Ask: ``` What type of app are you building? 1. SaaS Dashboard (analytics, metrics, charts) 2. E-commerce (products, orders, payments) 3. Fintech (transactions, portfolio, market data) 4. Social / Content (feeds, profiles, messaging) 5. Productivity / Internal tool 6. Other — describe it ``` Remember the answer — it determines which page composition recipe to use (DESIGN-LANGUAGE.md Section 63). ### Step 2: Brand Color Ask: ``` What's your brand color? 1. Purple (#721FE5) — default style (toss skin) 2. Blue (#2563EB) — trust, corporate 3. Green (#059669) — growth, health, finance 4. Orange (#EA580C) — energy, creative 5. Red (#DC2626) — bold, urgent 6. Dark (#18181B) — minimal, premium 7. Custom — just type your hex code ``` After they choose, update `css/theme.css`: - In `:root` block: change `--brand` to the chosen hex - In `.dark` block: change `--brand` to a lighter version for dark backgrounds Dark mode color mapping: | Light | Dark | |-------|------| | #721FE5 | #9B5FFF | | #2563EB | #60A5FA | | #059669 | #34D399 | | #EA580C | #FB923C | | #DC2626 | #F87171 | | #18181B | #A1A1AA | For custom hex: lighten by ~30% (increase luminance in HSL). ### Step 3: Design Concept (from awe