Styling & Design
Brand kit & design tokens
Set your colors, fonts, and corner style once in the Brand Kit, and have your whole site follow — the fastest way to look consistent and re-theme in one click.
Last updated 2026-06-29
The Brand Kit is the single most useful styling feature for staying consistent. Instead of picking the same blue and the same font on every element, you set them once and every page follows. Change them later and your whole site re-themes instantly. You'll find it in the Brand Kit tab (the Theme tab) of the left panel.
What is a design token?
A design token is a named setting — like "your primary color" or "your heading font" — that elements refer to instead of hard-coding a value. When a button uses the primary color token rather than a fixed #2563eb, changing the token later updates that button (and every other element using it) automatically.
You don't have to think about tokens directly. Just know this: anything that uses your Brand Kit updates everywhere when you edit the Brand Kit. That's the magic.
What's in the Brand Kit
| Setting | What it controls |
|---|---|
| Colors | Your palette — a primary color, an accent, plus dark, light, and muted tones used for text and backgrounds. |
| Fonts | A heading font and a body font, used across the site. |
| Roundness | A corner style — Sharp, Soft, Rounded, or Round — applied to buttons, cards, and inputs. |
A live preview shows your choices applied to sample elements as you adjust them.
Set your brand
- Open the Brand Kit tab.
- Click each color swatch to set your palette. Pick a primary that represents your brand, and make sure your dark/light tones contrast well for readable text.
- Choose your heading and body fonts. Need more options? Use Add fonts to install Google Fonts, or Upload font for your own — see Adding fonts.
- Pick a roundness that matches your style — sharp for serious/corporate, rounded for friendly.
Use Reset to defaults if you want to start over.
How it flows through your site
- Color pickers across the editor show your brand colors first, so it's easy to stay on-palette.
- Elements and templates that reference brand tokens update automatically when you change the Brand Kit — recolor your entire site by changing the primary color once.
- The AI assistant reads your Brand Kit and styles new sections with your colors and fonts, so AI-generated content matches the rest of your site.
Starting from a template? The Brand Kit edits that template's own colors and fonts, so changing the primary color re-themes the whole template at once — a fast way to make a ready-made design feel like yours.
A good workflow
Set your Brand Kit first, before styling individual elements. With your palette and fonts locked in, everything you build afterward inherits them and looks coherent with almost no effort.
Where to go next
- Adding fonts — get the right fonts into your kit.
- Colors & backgrounds — use your palette on individual elements.