Themes and style guides
How the project theme works, how to change it safely, and why colours should never be edited screen by screen.
Last updated
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.
Frequently asked
- Does changing the theme cost credits?
- No. Building or updating a theme is free. Only the screens themselves cost credits to generate.
- Can one screen have a different theme?
- Yes — ask for the change to be scoped to that screen. By default a theme change applies to the whole project, which is usually what you want.
Was this article helpful?
Related articles
Fonts and typography
Choosing fonts, using Google Fonts, and what to do when a font change does not show up.
Editing a screen
The three ways to change a design — chat, edit mode and theming — and when each is the right tool.
My style guide or theme didn't apply
Screens render unstyled or ignore a theme change — what to check and what to send us.