SaaS Dashboard (analytics, metrics, charts)
E-commerce (products, orders, payments)
Fintech (transactions, portfolio, market data)
Social / Content (feeds, profiles, messaging)
Productivity / Internal tool
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?

Purple (#721FE5) — default Toss style
Blue (#2563EB) — trust, corporate
Green (#059669) — growth, health, finance
Orange (#EA580C) — energy, creative
Red (#DC2626) — bold, urgent
Dark (#18181B) — minimal, premium
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 awesome-design-md)

Ask:

Want to apply an existing brand's visual style?

Popular options from awesome-design-md:

Stripe — clean, professional
Linear — minimal, dark-first
Vercel — black & white, geometric
Notion — warm, friendly
Spotify — bold, dark, green
Supabase — modern, green
Airbnb — warm, coral
No thanks — keep the default style
Other — name any brand or describe a vibe


If they pick a brand (options 1-7 or 9):
1. Fetch: `https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/[brand]/DESIGN.md`
   - Brand folder names: `stripe`, `linear.app`, `vercel`, `notion`, `spotify`, `supabase`, `airbnb`
2. Read the DESIGN.md and extract: primary color, secondary colors, text colors, background colors
3. Apply extracted colors to `css/theme.css` (both `:root` and `.dark` blocks)
4. Keep ALL StyleSeed layout rules, typography ratios, spacing, and component patterns unchanged — only swap the color palette

If they pick 8 (No thanks): skip, keep current brand color from Step 2.

### Step 4: Font

Ask:

What font do you prefer?

Inter (clean, universal — recommended)
Pretendard + Inter (Korean + English)
Geist (Vercel-style, modern)
DM Sans (friendly, rounded)
Custom — tell me the font name


After they choose:
- Update `css/fonts.css`: change the @import URL
- Update `css/base.css`: change `font-family` in the body rule

Font imports:
| Font | Import |
|------|--------|
| Inter | `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');` |
| Geist | `@import url('https://cdn.jsdelivr.net/npm/geist@1/dist/fonts/geist-sans/style.css');` |
| DM Sans | `@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');` |
| Pretendard | Keep existing import in fonts.css |

### Step 5: App Name & First Page

Ask:

Last step! What's your app name and what should the main page show?

Example: "Acme — SaaS dashboard with revenue, users, and recent activity"


Then:
1. Read DESIGN-LANGUAGE.md Section 63 for the matching recipe (based on Step 1 app type)
2. Generate the first page using the page composition recipe:
   - SaaS → Hero + KPI Grid + Chart + Progress + Activity List
   - E-commerce → Hero + KPI Grid + Donut + Bar Chart + Orders List
   - Fintech → Hero + KPI Grid + Donut + Area Chart + Transactions
   - Social → Hero + Stats + Feed List + Trending Carousel
   - Productivity → Hero + KPI Grid + Progress + Task List
3. Set the TopBar logo text to the app name
4. Apply the chosen brand color, font, and design concept
5. Place the file in `src/app/App.tsx` or appropriate location

### Step 6: Summary

Show:

Setup Complete!

App: [name] Brand Color: [hex] (dark mode: [dark hex]) Font: [font name] Design Concept: [brand or "Toss default"] First Page: [description]

Files modified:

css/theme.css (colors)
css/fonts.css (font import)
css/base.css (font family)
src/app/App.tsx (first page)

Next steps:

npm run dev to preview
/ui-page to add more pages
/ux-audit to check UX quality
/ui-review to verify design compliance


## Rules

- Ask ONE question at a time. Wait for response.
- If the user seems unsure, recommend the default option.
- Design RULES (layout, typography ratios, spacing, forbidden patterns) stay the same regardless of color/font choice.
- Always verify the awesome-design-md DESIGN.md URL is accessible before applying. If fetch fails, tell the user and fall back to manual color selection.

ui-setup

Design System Setup Wizard

Instructions

Step 1: App Type

More from bitjaru/styleseed

ss-setup

ss-audit

ss-a11y

ss-lint

ss-review

ss-update