Theme Synthesizer
Tweak every design token, preview it live, and export a drop-in base.css for your project.
Colors
Backgrounds
--bg-deep --bg-surface --bg-card --bg-elevated Text
--text-primary --text-secondary --text-muted --text-ghost Borders
--border-subtle --border-default --border-bright Accents
--accent-primary --accent-secondary Feedback
--color-success --color-warning --color-error --color-info Typography
Font Families
The quick brown fox
SECTION HEADING
const x = 42;
Scale
Spacing & Radii
Spacing Scale
Border Radius
Effects
Transitions
Layout
Live Preview
These components update in real time as you change tokens above.
Buttons
Inputs
Feedback
Content
Heading Body text with secondary color. The quick brown fox jumps over the lazy dog.
const theme = 'custom'; Badges & Tags
Card
This card uses your custom tokens for background, border, and radius.
Progress & Divider
Output
Copy this into your project as base.css to override ARC UI defaults.
[data-theme="light"].