Generating custom themes for your application

The problem with picking colors last

Most projects acquire their visual system by accident. A button gets a blue, a card gets a border, and six weeks later the codebase holds forty hardcoded hex values that nobody can change together. The design decisions were real, but they were never written down anywhere a tool could read.

Nodlume's Theme tab treats the design system as part of the plan, alongside the pages and the data model. You define the system once — as roles and scales rather than as individual values — and the export turns it into the stylesheet the generated project actually uses.

Eight roles, not forty colors

A theme starts with eight semantic color roles: primary, secondary, accent, background, surface, text, muted, and border. Naming them by job rather than by hue is what makes them swappable — a component that says "this is a primary surface" survives a rebrand, and one that says #4f46e5 does not.

You can fill those eight roles four different ways.

From a seed color. Give the palette builder one color and a harmony rule — complementary, analogous, triadic, split complementary, or monochromatic — and it works out the brand roles around the color wheel, then builds the neutrals as near-white or near-black steps tinted toward your seed's hue. That last part matters more than it sounds: neutrals carrying a hint of the brand hue are what makes a palette feel designed rather than assembled. Build for light or dark mode and the neutrals invert while the brand colors lighten so they still read on dark surfaces.

From the curated library. Forty-one pre-designed palettes, each tagged with the use case it was built for — editorial, product, brand, technical, corporate, hospitality. "Ink & Paper" is stark print contrast for long-form reading; "Canyon Trail" is warm and earthy for outdoor or lifestyle brands. Pick one and the brand roles fill in from its colors with neutrals to match, so a curated starting point is still yours to push around.

By pasting CSS. If you already have a theme — a shadcn/ui block, a token export, anything shaped like --name: value; — paste it in. Recognized names land on the roles they correspond to, including the aliases (--foreground becomes text, --card becomes surface), and names it doesn't recognize are kept as extra color entries rather than dropped. Values stay exactly as you wrote them, so an oklch() stays an oklch().

One role at a time. Sometimes the answer is just a color picker.

Beyond the eight, the extended token set covers the readable-on-role foregrounds, a destructive color, a five-step chart ramp, and the sidebar tokens. Every one of them is optional: leave one alone and it follows from the roles, so you only spend attention on the tokens your product actually needs to control.

Typography and scale

Fonts are three stacks — heading, body, mono — and the pairing builder offers sixty-five pre-matched combinations organized by the same use-case categories as the palettes. Pick a pairing, or write your own stacks.

Type size is a base and a ratio rather than a list. Set the body size, choose a ratio between 1.125 and 1.618, and every step above and below follows from it. This is the same idea as the roles, applied to size: one decision that moves the whole system instead of nine independent numbers that drift.

The same pattern repeats for shape and elevation. A base border radius gives you the sm/md/lg/xl steps; a base shadow gives you a matching elevation scale. The shadow presets are grouped by the house style they came from — GitHub's whisper, Stripe's soft lift, Material's paper, Linear's feather, Vercel's float — which is a much faster way to choose an elevation feel than typing rgba values. Any individual step can be overridden when the system needs an exception.

Base spacing works the same way, and past those scales the theme also carries gradients, textures, micro-interactions, animations, responsive layouts, and custom SVG icons. All of it is optional, and anything you don't set simply doesn't appear in the export.

Two ways to skip the blank page

Designing a system from nothing is harder than editing one that exists, so the Theme tab gives you two ways to get a first draft.

Shuffle composes a random-but-coherent theme — a palette, a font pairing, a radius, a shadow, and a type scale, all chosen to work together. You pick which aspects get redrawn and which stay put, so you can hold a palette you like and reshuffle only the typography, or rule out font styles you don't want to see. Candidates accumulate as you generate them, so you can browse a set and apply the one that works.

AI generation goes the other direction: describe the project and get a theme built for it. It reads your project's description and target platform and returns a complete set — a name, all eight colors, the three font stacks, radius, base font size, and type scale. It costs one credit, which every plan's monthly allowance covers.

Neither is a commitment. Both land as an ordinary theme, so a generated one is just a theme you didn't have to type.

The preview is the real thing

The preview column renders a full landing-page mockup plus token specimens, built from the same values the export uses. That is the part worth trusting: you are not looking at an approximation of the theme, you are looking at the theme. If a muted text color fails against your surface color, you see it fail in a paragraph rather than discovering it after the export.

Palettes you like can be saved by name and re-applied to any later project. Those live in your browser rather than in the project — they are your working library, not one project's decision.

What lands in the export

When you export a project skeleton, the theme becomes app/globals.css: a Tailwind v4 @theme block where every role and every scale step is a custom property.

The consequence is that ordinary Tailwind utilities resolve to your design system. bg-primary, text-muted, border-border, font-heading, rounded-lg, text-xl — all of them read from the theme, so the generated components are already styled and the entire look is changeable from one file. Textures, micro-interactions, and layouts arrive as .texture-*, .motion-*, and .layout-* classes; animations arrive as animate-* utilities.

Because the theme is stored with the project rather than in a browser tab, it travels: the scaffolding preview shows it, the exported stylesheet matches what you saw in the Theme tab, and the project report can be styled with it when you send a plan to someone.

Where to start

Open a project, go to the Theme tab, and shuffle a few candidates before you decide anything. It takes about a minute to find a direction you didn't expect, and editing from there is much easier than starting from the eight-role blank.

The Theme tab reference covers the panel in detail, and theme generation covers the AI path. When a theme is set, it shows up in Scaffolding — and from there it is in every file the export produces.