Dial the theme. Copy the setup.
Pick colors and type, watch real ai2 sections repaint, then copy the setup and paste it into your project.
A sketch of the generator being built. Change a value on the left, the whole preview follows.
Four moves, then it is yours.
A theme tool is only useful if the thing you tuned is the thing you ship. That is the whole design goal.
Pick the base
Mode, base color and style up front, so the whole system starts from one decision instead of forty.
Tune every token
Brand, surfaces, semantic tones and type. Each value editable, in oklch, with both modes side by side.
Judge it on real screens
Not swatches. Your theme lands on real ai2 sections and components, so you see it the way a user will.
Copy the setup
One click hands you the setup for your project. Paste it and the system arrives already wearing your theme.
The accent dialer already works.
This is the first slice of the generator, running right now. Move the sliders, the real components repaint, and the export updates as you go. Free, no account, no waiting.
:root {
--brand: oklch(0.585 0.233 272);
--brand-foreground: oklch(0.985 0 0);
--brand-soft: oklch(0.95 0.060 272);
--brand-soft-foreground: oklch(0.505 0.200 272);
--radius: 10px;
}The export sets the semantic accent tokens. Everything else in your system keeps reading from them. Read the theming guide to see how the layers map.
What lands in your clipboard.
The generator will hand you a setup, not a picture of one: initialize, drop in the CSS variables, wire the fonts. The same flow you already use for the open components.
The exact command lands with the tool. We will not print one here until it is real.
The setup command appears here when the generator ships.
Be first to tune it.
The full generator is in preparation. Leave your email and you will hear the day it opens.