Theme Creator

Design Your Theme

Customize every design token visually and instantly preview how it looks across components. Export CSS variables or Tailwind config for your project.

Design Tokens

Adjust colors and border radius

Background

--background

#f7f8fa

--foreground

#1a1a1a

Card

--card

#ffffff

--card-foreground

#1a1a1a

Primary

--primary

#1a1a1a

--primary-foreground

#f7f8fa

Secondary

--secondary

#e2e4e9

--secondary-foreground

#1a1a1a

Muted

--muted

#e2e4e9

--muted-foreground

#6b7280

Accent

--accent

#e2e4e9

--accent-foreground

#1a1a1a

Border

--border

#e2e4e9

Destructive

--destructive

#ef4444

--destructive-foreground

#ffffff

Border Radius

4px (0.25rem)

SharpRoundedPill

Palette

SUI App

DashboardAnalyticsSettings

Users

12,482

+8.2%

Revenue

$48k

+14%

Active

1,893

+3%

Component Preview

Badge

John Doe

[email protected]

Performance87%

Accessibility94%

SEO78%

Notifications

New message

Build complete

PR approved

Quick Actions