Theme

The Theme tab creates the visual system the planned application ships with: eight semantic color roles, font stacks for headings, body, and code, a base radius and type scale, and an optional long tail of spacing, shadow, gradient, and motion tokens. The live preview renders from the same theme document that is saved with the project, so the values you review are exactly the values the export writes into app/globals.css.

Build the palette

Colors are edited as semantic roles — primary, secondary, accent, background, and the neutrals — rather than as a loose swatch list, so every generated component knows which color means what. You can grow a palette three ways:

• From a seed color — pick one brand color and a harmony, and the supporting roles and tinted neutrals derive from it.
• From a curated palette — forty named palettes, each mapped onto the roles positionally.
• By pasting CSS variables — an existing --name: value; block is parsed and routed into the matching roles and extended tokens.

The brand trio can be rotated without regenerating, and the extended shadcn/ui tokens — foregrounds, the chart color ramp, sidebar tokens — derive from the roles automatically, editable individually when the product needs more control.

Typography, shape, and elevation

Font choices come from a catalogue of 67 curated heading/body/mono pairings, filterable by category, with per-slot overrides when a pairing is almost right. The type scale is a modular ratio over the base size, so heading sizes stay related instead of hand-picked.

Shape and elevation follow the same pattern: radius, spacing, and shadow scales each start from presets — seventeen base radii from square to pill, ten groups of shadow styles — and expose per-step overrides only where you diverge. Because the export emits Tailwind v4 tokens, naming a shadow md restyles every shadow-md the generated components already use.

Shuffle, and generate with AI

The shuffle rail explores whole design systems at once. Shuffle redraws every unlocked aspect — palette, typography, shape, shadows, type scale — into a browsable candidate, with lock chips to hold the parts you have settled. Each section header also carries its own dice, which re-rolls just that section in place. Generate theme asks the AI for a complete design system from a description — colors, fonts, type settings, and the elevation scale together, so a generated theme is coherent rather than a palette dropped onto leftover shadows. The theme generation page covers this pipeline in depth.

Preview in both modes

The preview header has a light/dark toggle, and dark mode makes exactly the substitution the emitted .dark CSS block makes — the dark palette is derived from the one palette you edit, never maintained as a second document. Contrast and component states are worth reviewing here, in both modes, before the theme goes anywhere.

Where the theme goes

A theme is not treated as a project decision until it has been edited or generated — a default theme is not a choice. Once set, it flows into the export as a Tailwind v4 globals.css and a W3C-style design-tokens.json, and styles the "Project theme" section of the project report.

To try the same editor without a project or an account, use the free standalone shadcn/ui theme generator — one of several free shadcn theming tools — which keeps its theme in your browser and exports the same CSS.