Skip to main content
The Design System feature is currently in Beta. We’re actively improving it based on user feedback.
The Design System lets you customize your project’s colors, typography, and effects through a visual editor—no code required.

​
How It Works

HelloLeo projects use CSS variables as design tokens. When Leo creates a project, it sets up a centralized design system in src/index.css with variables for:
  • Colors - Primary, secondary, accent, background, text colors
  • Typography - Body and heading fonts
  • Effects - Border radius, shadows
The visual editor reads these variables and lets you modify them in real-time.

​
Using the Design Editor

​
Accessing the Editor

  1. Open your project in HelloLeo
  2. Click Settings in the top navigation bar
  3. Select Design from the settings menu

​
Colors Tab

Edit your project’s color palette:
  • Primary - Main brand color for buttons, links, and accents
  • Secondary - Supporting color for less prominent elements
  • Accent - Highlight color for special elements
  • Background/Foreground - Page and text colors
  • Destructive/Success/Warning - Semantic colors for states
Click any color swatch to open the color picker. Changes preview instantly in the live preview.

​
Typography Tab

Choose fonts for your project:
  • Body Font - Used for paragraphs and general text
  • Heading Font - Used for titles and headings
Select from 30+ Google Fonts organized by category (Sans Serif, Serif, Display, Monospace). Fonts load automatically in the preview.

​
Effects Tab

Adjust visual effects:
  • Border Radius - Control corner rounding (square to fully rounded)
  • Shadow Intensity - Adjust shadow depth from None to Strong

​
Saving Changes

Click Save Changes to apply your modifications to the project. Changes are written to src/index.css and hot-reload automatically.

​
Light & Dark Mode

Use the toggle at the top of the editor to switch between editing:
  • Light mode colors (default theme)
  • Dark mode colors (when user enables dark mode)
Both modes can have independent color values.

​
Troubleshooting

​
”No Color Tokens Found” Message

This means your project doesn’t use the HelloLeo Design System structure yet. Solution: Click the “Ask Leo to Setup Design System” button, or copy this prompt and send it to Leo: 
Please set up the HelloLeo Design System for this project. Update src/index.css to use CSS variables for colors, fonts, and effects. Update tailwind.config.js to reference these variables. Make sure body has the font-sans class applied.

​
Colors/Fonts Not Applying

If changes don’t appear in the preview:
  1. Check the CSS structure - The design system requires specific CSS variable names
  2. Verify Tailwind config - Colors must be mapped to CSS variables
  3. Check body styles - Body needs @apply bg-background text-foreground font-sans
Fix prompt to share with Leo: 
The Design System editor changes aren't applying. Please verify and fix:
1. src/index.css has :root and .dark blocks with CSS variables (--primary, --background, --font-sans, etc.)
2. tailwind.config.js maps colors to hsl(var(--name)) format
3. tailwind.config.js maps fontFamily to var(--font-sans) and var(--font-heading)
4. Body has @apply bg-background text-foreground font-sans
5. index.html has Google Fonts import in <head>

​
Fonts Not Loading

If fonts don’t appear:
  1. Google Fonts import - Check that index.html has the font imported
  2. CSS variable value - Font must be in format 'Font Name', fallback
Fix prompt: 
Fonts from the Design System aren't loading. Please add the Google Fonts import to index.html <head> section and ensure --font-sans and --font-heading CSS variables use the correct format: 'Font Name', ui-sans-serif, system-ui, sans-serif

​
Shadows Not Working

If shadow changes don’t apply:
  1. CSS variables - Project needs --shadow-sm, --shadow, --shadow-md, --shadow-lg, --shadow-xl, --shadow-2xl
  2. Tailwind config - boxShadow must map to CSS variables
Fix prompt: 
Shadow intensity changes aren't applying. Please update:
1. src/index.css to include all shadow CSS variables (--shadow-sm through --shadow-2xl)
2. tailwind.config.js boxShadow to map sm/DEFAULT/md/lg/xl/2xl to var(--shadow-*) values

​
Design System Structure

For reference, here’s what the HelloLeo Design System looks like:

​
CSS Variables (src/index.css)

@layer base {
  :root {
    /* Colors */
    --primary: 221 83% 53%;
    --primary-foreground: 210 40% 98%;
    /* ... more colors ... */

    /* Effects */
    --radius: 0.5rem;
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);

    /* Fonts */
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-heading: 'Inter', ui-sans-serif, system-ui, sans-serif;
  }

  .dark {
    /* Dark mode overrides */
  }
}

body {
  @apply bg-background text-foreground font-sans;
}

​
Tailwind Config (tailwind.config.js)

export default {
  theme: {
    extend: {
      colors: {
        primary: "hsl(var(--primary))",
        background: "hsl(var(--background))",
        // ... more colors
      },
      fontFamily: {
        sans: "var(--font-sans)",
        heading: "var(--font-heading)",
      },
      boxShadow: {
        sm: "var(--shadow-sm)",
        DEFAULT: "var(--shadow)",
        // ... more shadows
      },
    },
  },
}

Live Preview

See your design changes in real-time

Project Settings

Other project configuration options