Theme Builder

Create and customize themes for your design system. Modify colors, typography, spacing, and more. Preview your changes in real-time and export the theme in various formats.

Theme Configuration

Customize your design system theme

Theme Name

Base Colors

Background

Foreground

Card

Card Foreground

Primary & Secondary

Primary

Primary Foreground

Secondary

Secondary Foreground

Accent & Muted

Accent

Accent Foreground

Muted

Muted Foreground

Utility Colors

Destructive

Destructive Foreground

Border

Input

Ring

Predefined Themes

Choose from our predefined themes or create your own

Saved Themes

Your custom saved themes

No saved themes yet

Save your current theme to see it here

Export Theme

Export your theme in various formats

Export Theme

:root {
  --background: #ffffff;
  --foreground: #0f172a;
  --card: #ffffff;
  --card-foreground: #0f172a;
  --popover: #ffffff;
  --popover-foreground: #0f172a;
  --primary: #49664E;
  --primary-foreground: #ffffff;
  --secondary: #f1f5f9;
  --secondary-foreground: #0f172a;
  --muted: #f1f5f9;
  --muted-foreground: #64748b;
  --accent: #f1f5f9;
  --accent-foreground: #0f172a;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #94a3b8;
  --radius: 0.5rem;
}