Design System Generator
Create comprehensive design systems with 100+ customizable properties
On This Page
Overview
The Design System Generator helps you build a complete, consistent design system for your projects. Configure typography, colors, spacing, shadows, animations, and more - then export everything in your preferred format. The live preview updates in real-time as you make changes.
Navigate to Design System from the top navigation bar. The page is organized into three main tabs: Overview, Customize, and Export.
Quick Actions
At the top of the page, you'll find four quick action cards:
Save Version
Enter a name and save the current state. Up to 20 versions can be stored in your browser.
Load Preset
Choose from 4 built-in presets (Default, Material, Tailwind, Bootstrap) to start with a proven foundation.
Export Config
Download your entire design system as a JSON file for backup or sharing with team members.
Import Config
Load a previously exported JSON file to restore a design system configuration.
Explore the Overview
The Overview tab gives you a bird's-eye view of your design system:
Live Preview: A full-width preview showing typography, colors, components, and spacing using your current settings.
Feature Cards: Quick stats showing 100+ properties, dark mode support, 5 export formats, and version control capabilities.
The live preview has 4 tabs: Typography, Colors, Components, and Spacing - giving you a comprehensive view of how all values work together.
Customize Typography
Switch to the Customize tab. In the left panel, the Text sub-tab controls typography:
Typography Controls
- Font Family: Select from 5 options - Inter, Roboto, Open Sans, Lato, or Poppins. Each includes system fallback fonts.
- Heading Sizes (H1-H4): Set font sizes for each heading level. Values use rem units for responsive scaling.
- Body Size: The default text size for paragraphs and general content.
- Line Height: Controls vertical spacing between lines of text. 1.5-1.6 is recommended for body text.
Changes update the live preview on the right in real-time, so you can see exactly how your typography choices look.
Set Colors & Dark Mode
Switch to the Colors sub-tab to configure your color palette:
Light Mode Colors
- Brand: Primary, Secondary, Accent
- Status: Success, Warning, Error, Info
- Base: Background, Text, Border, Muted
Click any color swatch to open the color picker popup.
Dark Mode Colors
- Separate configuration for dark theme
- Same 11 color slots as light mode
- Preview with dark mode toggle
Exported CSS includes [data-theme="dark"] overrides.
Configure Layout & Spacing
Switch to the Layout sub-tab for spacing, shadows, and animations:
Spacing Scale (8 levels)
Configure spacing from XS to 4XL. These values are used for padding, margin, and gap utilities. Uses rem units by default.
Border Radius (6 levels)
Set corner rounding from none to full (9999px). Values control how rounded buttons, cards, and inputs appear.
Shadow System (6 levels)
Define elevation shadows from SM to 2XL plus an inner shadow. Each shadow has a live preview box so you can see the result.
Animation Controls
Set animation durations (fast, normal, slow) and easing functions (linear, ease-in, ease-out, ease-in-out) for transitions and animations.
Preview Your Design
The live preview panel on the right (in Customize tab) or full-width (in Overview tab) shows your design system in action with 4 preview tabs:
Typography Preview
H1-H3 heading samples, body text, and muted text rendered with your font family, sizes, and weights.
Colors Preview
Grid of all 11 color swatches showing color names and hex values. Toggle dark mode to see the dark palette.
Components Preview
Buttons (primary, secondary, accent, outline), alerts (4 types), cards (3 shadow levels), and badges (6 variants).
Spacing Preview
Spacing scale visualization, border radius samples, and shadow examples rendered with your values.
Export Your Design System
Switch to the Export tab to generate code in 5 formats. Each format includes a syntax-highlighted preview, a copy button, and a download button.
CSS
Complete CSS with custom properties (--var), dark mode overrides, base styles, utility classes, component styles, grid system, and responsive breakpoints.
SCSS
Sass variables ($var format) for use in SCSS/Sass projects. Compatible with any Sass-based build pipeline.
JSON
Complete design tokens in JSON format. Ideal for design token tools, style dictionaries, or custom build systems.
Tailwind
Ready-to-use Tailwind config (module.exports) with theme.extend for colors, spacing, shadows, animations, and breakpoints.
JavaScript
ES6 module with named exports for each design category. Tree-shakeable for optimal bundle size.
Use the "Download All" button to download all formats at once, or download individual formats as needed.
Version Control
Save up to 20 versions of your design system and switch between them:
How to Use Versions
- Enter a descriptive name in the "Save Version" card (e.g., "v1 - Blue Theme").
- Click Save or press Enter to save the current state.
- Click Versions in the header to open the version history panel.
- Click Load on any version to restore it.
- Click Delete to remove versions you no longer need.
Versions are stored in your browser's local storage. Use Export Config to create a portable backup you can share or transfer between devices.
Presets
Start with a proven foundation by loading one of the 4 built-in presets:
Default
A clean, balanced design system with blue primary color and Inter font. Good starting point for most projects.
Material
Based on Google's Material Design 3. Uses Roboto font with Material color palette and spacing conventions.
Tailwind
Matches Tailwind CSS default theme. Uses the standard Tailwind color palette, spacing scale, and typography.
Bootstrap
Based on Bootstrap 5 defaults. Uses Bootstrap's color scheme, spacing, and typography conventions.
Loading a preset replaces all current values. Save your current work as a version first if you want to keep it.
Import & Export Config
Exporting
- Click "Export JSON" in the quick actions.
- A JSON file downloads with all your design system values.
- Share this file with teammates or use it as a backup.
Importing
- Click "Import JSON" in the quick actions.
- Select a previously exported JSON file.
- All values are restored and the preview updates instantly.
Tips & Best Practices
Start with a preset closest to your desired style, then customize from there.
Save versions frequently, especially before making major changes to your color palette.
Use the dark mode controls to ensure your design works well in both light and dark themes.
The live preview's Components tab is the best way to see how all your values work together in real UI elements.
Export as Tailwind config if you're using Tailwind CSS - it drops right into your tailwind.config.js.
Use JSON export for design token workflows with tools like Style Dictionary.
The CSS export includes ready-to-use utility classes, component styles, and responsive breakpoints.
Click the Reset button to return all values to defaults if you want a fresh start.