Theme Builder

Customize your design system theme and preview components in real-time.

Brand Colors

Primary and secondary brand colors

Primary

Primary Foreground

Secondary

Secondary Foreground

Accent

Accent Foreground

Interface Colors

Background, text, and UI element colors

Background

Foreground

Muted

Muted Foreground

Border

Input

Ring

Component Colors

Colors for specific UI components

Card

Card Foreground

Popover

Popover Foreground

Destructive

Destructive Foreground

Accessibility Check

WCAG contrast requirements

Text on Background

17.9:1

Primary Button

17.09:1

Secondary Button

16.31:1

Muted Text

4.89:1

Passes WCAG AAA (7:1+)

Passes WCAG AA (4.5:1+)

Fails WCAG requirements

Component Preview

See your theme applied to components

Generated Config

Your tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))"
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))"
        },
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))"
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))"
        },
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))"
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))"
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))"
        }
      }
    }
  }
}