Themes and style guides

Every project has a theme: a set of design tokens for colours, typography, radii and spacing. Screens reference those tokens rather than hard-coded values, which is what keeps twenty screens looking like one product.

Changing a few colours#

Just ask:

Make the primary colour #1B4DFF. The background is too cold — warm it up.

This merges a small change into the existing theme and leaves everything else alone. It's free and it applies everywhere at once.

Building a whole new look#

For a wholesale change — a redesign, a switch to dark, a new brand — ask for exactly that:

Give the whole project a dark theme. Redesign this with our new brand: deep green primary, cream background, serif headings.

That builds a complete new token set rather than patching the old one.

Scoping a change#

By default, theme changes are project-wide. To limit one to a single screen, say so:

Only on the landing page, make the header background black.

Contrast is enforced#

Themes are validated for readable colour pairings before they're applied, so you shouldn't end up with dark text on a dark background. If you deliberately want a low-contrast treatment, say so — but expect the system to push back toward legibility.

Generating a style guide#

Ask for a style guide and you'll get a rendered screen showing the palette, type scale and core components — useful as a handoff artifact and as a check that the system is coherent.

Common mistakes#

• Editing a colour on one screen. It works, and then the next generated screen doesn't match. Use the theme.
• Asking for "dark mode" while in edit mode on one element. That path can hard-code colours instead of re-theming. Ask in chat, at the project level.
• Assuming the theme tool reported success means it rendered. Look at the canvas. If the screens didn't move, see My style guide didn't apply.