Theme Builder
Build a Duckit theme by editing semantic tokens, previewing real components live, and generating production-ready CSS.
Semantic tokens
Every Duckit token — surfaces, brand, utilities, borders, charts and radius — is editable with inline validation.
Light & dark modes
Each mode keeps its own token values. Switch anytime without losing your work.
Built-in presets
Twelve curated presets from Neutral to Amber. Pick one, then keep fine-tuning freely.
Live preview
A gallery of real components rendered with your tokens — buttons, dialogs, forms and more.
Generate & copy
Production-ready CSS with :root, .dark and @theme inline blocks, ready for globals.css.
Import & export
Paste an existing theme to load its tokens, or export your theme as CSS or JSON.
Choose a preset
Start from a curated palette in the Editor.
Tune tokens
Edit any value for light and dark mode independently.
Preview live
See every change applied to real components instantly.
Generate CSS
Copy the output, download theme.css, or export JSON.