UI Theme Studio

What is UI Theme Studio?

How to use it

1. 1Pick one of five starting styles: soft, precise, paper, airy or playful.
2. 2Drag the character pad to set spacing and boldness, then choose brand color, neutrals, typeface and motion.
3. 3Switch the preview between specimens, a settings page, a data page and the full component library, in light and dark.
4. 4Fine-tune individual component families, type, corners, borders, shadows and motion, and check contrast.
5. 5Sign in, download the theme package and copy the instruction for your coding agent.

FAQ

What exactly do I get?

A ZIP with 29 files: the shared React components, theme.css with semantic --kv-* variables for light and dark, tokens in JSON and DTCG formats, Tailwind and shadcn token bridges, a design-system specification, runnable example pages and two local check scripts (verify.mjs and check-usage.mjs).

Is my design uploaded anywhere?

No. Editing, preview and packaging all happen in your browser. Drafts are kept only on this device for seven days so you can pick up where you left off.

Which frameworks does the kit support?

The components are React 18.2–19, with Base UI for complex interactions. Other frameworks need an adapter; the package says so explicitly so your agent does not assume otherwise.

Why do I need to sign in to download?

Designing and previewing are free without an account. Downloading the package needs a free account.

Does it replace a design tool like Figma?

No. It defines a coherent UI theme and hands it to a coding agent quickly. Fonts are system fonts and only basic contrast pairs are checked — it is not a full accessibility audit, and complex components such as rich text or trees still need to be built on top of the kit.