Theme generation

Generate a coherent theme for the project — colors, typography, and the rest of the design tokens — so the exported application starts from a consistent visual system rather than defaults. A theme here is a whole design-system document: eight semantic color roles, three font stacks (heading, body, mono), a base radius, a type scale, and an elevation scale, plus optional spacing, gradient, and motion tokens.

The theme travels with the project, so previews and generated code share the same look.

How a theme is generated

There are three ways to arrive at a design system, and they compose:

• Generate with AI writes the whole theme from the project description — palette, fonts, type scale, and the shadow scale together, so the result is one coherent system rather than colors bolted onto leftover elevation.
• Shuffle redraws any combination of aspects — palette, typography, shape, shadows, type scale — while locks hold the parts you have already settled. Lock the fonts, shuffle the palette, repeat until it clicks.
• Build it directly: grow the palette from one seed color and a harmony rule, start from one of 40 curated palettes, or paste existing shadcn/ui CSS variables and edit from there.

Either way, generated candidates are browsable — you compare them against the current theme and apply one deliberately, so a bad draw never destroys work.

Fonts

Typography comes from a library of 67 curated font pairings, each a heading/body/mono trio with real CSS fallback stacks, filterable by mood category. You can adopt a whole pairing or mix slots from different ones; Google-hosted families are loaded automatically for the preview, and the same stacks are written into the exported theme. The type scale — base size plus a modular ratio — is generated with the faces, because a pairing only works at the rhythm it was chosen for.

What shadcn/ui and Tailwind get

The output is a Tailwind v4 @theme block in app/globals.css, in shadcn/ui's token vocabulary. From the eight roles Nodlume derives the full extended set — foregrounds, destructive, a five-step chart-* ramp, and the sidebar tokens — and a .dark block is derived from the light palette rather than maintained as a second document. Because Tailwind v4 makes token names load-bearing, the emitted tokens restyle the components the generated project already uses: naming a shadow md restyles every shadow-md, and animation tokens become animate-* utilities. See theming shadcn/ui with Tailwind v4 for how this compares to other free tools.

One resolver feeds both the live preview and the emitted CSS, so what the Theme tab shows is byte-for-byte what ships. How the theme is edited and reviewed inside a project is covered in the Theme tab; the file lands in the export alongside the rest of the scaffolding.

The same tools, standalone

Everything above is also available free, with no account:

• The shadcn/ui theme generator is this whole editor — palette, fonts, shape, and a live light/dark preview, exporting a globals.css that drops into any Tailwind v4 project.
• The color palette generator grows the eight semantic UI color roles from one seed color and a harmony rule, or starts from 40 curated palettes.
• The modular scale calculator computes the typography scale and exports Tailwind v4 --text-* tokens.
• The font pairings library has the 67 curated heading/body/mono combinations.
• The dark mode converter derives a .dark block from your existing light shadcn/ui variables.