Branding
Colours, type, logo. This is the fastest way to stop looking like everyone else, and it takes about two minutes.
Sidebar → Your website → Branding
Colours, type, logo. This is the fastest way to stop looking like everyone else, and it takes about two minutes.
Start with a preset
Six palettes, each a complete, tested colour scheme:
| Preset | Character |
|---|---|
| Midnight Violet | Deep purple. The default |
| Deep Ocean | Blues and cyan |
| Ember | Warm oranges |
| Forest | Greens |
| Daylight | Light and bright |
| Carbon | Near-black and restrained |
Click one and everything updates at once. If a preset is close but not quite right, pick it first and adjust from there — it is far quicker than building a palette from nothing.
The seven colours
Each preset sets all seven. Change any of them individually.
| Colour | Where it shows |
|---|---|
| Primary | Buttons, links, the main accent |
| Secondary | Supporting accents and gradients |
| Accent | Highlights and badges |
| Page background | Behind everything |
| Card background | Panels and cards |
| Text | Body text |
| Muted text | Captions, hints, secondary lines |
Use a six-digit hex value, like #7c3aed.
Keep text readable. The single most common mistake is a text colour too close to the background. Check on a phone, not just a large monitor.
Type
Font — seven to choose from: Instrument Sans, Inter, Poppins, Figtree, Space Grotesk, DM Sans, or your visitor's system font. All are loaded by the platform; you do not have to host anything.
Font scale — from 80% to 130%. Nudge everything up or down at once. 110% is kind to an older audience; 90% suits a dense, technical one.
Shape
Corner radius — 0 to 32. Zero is sharp and serious. Sixteen and above is soft and friendly. It applies consistently to buttons, cards and inputs, so one slider changes the personality of the whole site.
Gradient — on by default, adding depth behind headers and hero sections. Turn it off for a flatter, more corporate look.
Logo and favicon
Logo — appears in your header and on your sign-in screens. PNG or SVG with a transparent background works best, up to 2 MB. If you do not upload one, your business name is used, which is a perfectly good unbranded default.
Favicon — the small icon in the browser tab. A square image, up to 512 KB.
Both can be removed later, returning you to the defaults.
Custom CSS
At the bottom, a box for your own CSS. It loads after everything else, so your rules win.
This is for the last five percent — nudging one element, hiding something you do not want. If you find yourself writing a lot of it, check whether a preset plus the colour settings gets you closer first.
Your CSS is scoped to your workspace and cannot affect anyone else's.
Check it before you leave
- Open your storefront on a phone
- Read a full paragraph of body text — is it comfortable?
- Look at a button — does it obviously look pressable?
- Look at muted text — can you read it at arm's length?
If all four are yes, you are done.
Next: Tools and prompts
Something here out of date, or a question this does not answer?
Back to contents