Step 4: Design System

Transform your product description into a complete design system with consistent colors, typography, spacing, and component variants.

Why This Matters

The boilerplate uses @shopify/restyle with a token-based design system. Instead of hardcoding values, the AI will:

• Generate brand colors based on your product's "vibe"
• Create light and dark mode palettes
• Define typography scales and spacing systems
• Configure component variants (buttons, cards, inputs)

Result: Consistent, theme-able design across all 69+ UI components.

Prerequisites

The 3-Step Process

1. Copy the Generator Prompt

Navigate to:

ai_rules/generators/design_system_generator.md

This generator will:

• Read your product_description.md automatically
• Extract brand personality (Modern? Playful? Professional?)
• Ask 4 clarifying questions about colors and style
• Generate complete theme configuration
• Note: This generator focuses on code and tokens. App icons and splash screens are generated in a separate step (see App Customization).

2. Paste into Your AI Assistant

Open your AI assistant (Cursor, Claude, ChatGPT) and paste the entire generator.

The interactive Design System Generator prompt

The AI will ask questions like:

## BRAND IDENTITY QUESTIONS

1. **Primary Brand Color**:
   What's your main brand color? (Hex code or description like "Vibrant Blue")

2. **Secondary/Accent Color**:
   What's your accent color for CTAs? (Hex code or description)

3. **App Vibe**:
   How should the app feel?
   - Modern/Clean (Sharp edges, minimal)
   - Playful/Bouncy (Rounded, colorful)
   - Dark/Serious (Muted, professional)
   - Luxury/Minimal (Elegant, spacious)

4. **Border Radius Preference**:
   - Sharp (4-6px)
   - Rounded (12-16px)
   - Pill-shaped (20-30px)

3. AI Generates Theme Files

After your answers, the AI will generate/update:

src/ui/tokens/colors.ts - Base Palette

export const colors = {
  // Primary shades
  primary100: '#E3F2FD',
  primary300: '#64B5F6',
  primary500: '#2196F3', // Main brand color
  primary700: '#1976D2',
  primary900: '#0D47A1',

  // Secondary shades
  secondary300: '#FFB74D',
  secondary500: '#FF9800', // Accent color
  secondary700: '#F57C00',

  // Feedback colors
  success: '#4CAF50',
  warning: '#FFC107',
  error: '#F44336',
  info: '#2196F3',

  // ... generated based on your answers
};

src/ui/style/colors-theme.ts - Semantic Theme

export const themeColors = {
  light: {
    mainBackground: colors.gray50,
    mainForeground: colors.gray900,
    primaryButton: colors.primary500,
    secondaryButton: colors.secondary500,
    cardBackground: colors.white,
    // ... complete theme mapping
  },
  dark: {
    mainBackground: colors.gray900,
    mainForeground: colors.gray50,
    primaryButton: colors.primary300,
    // ... automatic dark mode adaptation
  }
};

src/ui/style/theme.ts - Shape & Spacing

export const lightTheme = createTheme({
  colors: themeColors.light,
  spacing: {
    xs: 4,
    s: 8,
    m: 16,
    l: 24,
    xl: 32,
  },
  borderRadii: {
    s: 12, // Based on your "Rounded" preference
    m: 16,
    l: 20,
  },
  // ... complete theme config
});

src/ui/style/variants/button-variants.ts - Component Variants

export const buttonTypeVariants = {
  primary: {
    backgroundColor: 'primaryButton',
    borderRadius: 'm',
    // ... styled to match your brand
  },
  secondary: {
    backgroundColor: 'secondaryButton',
    // ... styled to complement primary
  },
};

What the AI Considers

The generator is context-aware and considers:

From Your Product Description

• Target Users: Professional app → Minimal design, serious app → muted colors
• Core Value: Productivity → Clean, focus-driven; Entertainment → Playful, vibrant
• App Personality: "Calm meditation app" → Soft pastels, large spacing

Design Best Practices

• Contrast Ratios: Ensures text meets WCAG 4.5:1 accessibility standards
• Color Theory: Generates harmonious palettes (complementary, analogous, triadic)
• Dark Mode: Auto-adapts colors for dark mode (lighter tints, adjusted contrast)
• Spacing Scale: Uses 4pt or 8pt grid system for consistency

Example: Meditation App

User Input:

• Primary: #6B4EFF (Calming Purple)
• Secondary: #FF6B9D (Soft Pink accent)
• Vibe: Luxury/Minimal
• Radius: Rounded (12-16px)

AI Generates:

Light Mode:
- Background: Off-white (#FAFAFA)
- Cards: Pure white with subtle shadows
- Primary buttons: Purple (#6B4EFF)
- Text: Near-black (#1A1A1A)
- Spacing: Generous (16-32px)

Dark Mode:
- Background: Deep purple-gray (#1A1425)
- Cards: Lighter purple-gray (#2A2235)
- Primary buttons: Lighter purple (#8B7EFF)
- Text: Off-white (#F5F5F5)

Verification

After generation, verify the theme:

Testing Your Theme

1. Run the app, and navigate to Settings -> Story book to check components

2. Theme Switcher

The boilerplate includes a theme toggle in Settings. Test:

• Switch to dark mode → all colors adapt
• All text remains readable
• Buttons maintain contrast

3. Component Gallery

Navigate through your app and verify:

• Buttons look consistent
• Cards have proper elevation
• Inputs have clear focus states
• All screens respect the theme

Previewing your generated theme in light and dark mode

Customization After Generation

You can always refine the generated theme:

Adjust a Color

// src/ui/tokens/colors.ts
export const colors = {
  primary500: '#2196F3', // Change this to your exact brand color
  // ... AI generated the rest
};

Add a New Variant

// src/ui/style/variants/button-variants.ts
export const buttonTypeVariants = {
  // ... AI-generated variants
  danger: {
    backgroundColor: 'error',
    // ... custom variant
  },
};

Adjust Spacing

// src/ui/style/theme.ts
spacing: {
  xs: 4,
  s: 8,
  m: 16,
  l: 24,
  xl: 40, // Increased for more breathing room
},

What's Next?

Once your design system is configured:

Tips for Great Design Systems

1. Start with Brand Colors: Have your primary and secondary colors ready (hex codes)
2. Think Mobile-First: Preview on actual device sizes
3. Test Both Modes: Dark mode isn't just inverted - it needs proper adaptation
4. Use Semantic Names: primaryButton beats blueButton (what if you change to green?)
5. Limit Your Palette: 2-3 brand colors + feedback colors (success/error/warning)

Troubleshooting

Q: The AI generated colors I don't like A: Edit src/ui/tokens/colors.ts and adjust the hex values. The semantic mappings will update automatically.

Q: Dark mode looks bad A: Check src/ui/style/colors-theme.ts. Dark mode needs lighter tints and higher contrast.

Q: Buttons don't look right A: Edit src/ui/style/variants/button-variants.ts. Adjust padding, borderRadius, or colors.

Q: Can I use custom fonts? A: Yes! Load fonts in app.json and update textVariants in theme with fontFamily.

git add src/ui/style/ src/ui/tokens/
git commit -m "feat: generate design system with AI"