Design Tokens & Theme Editor
How Sellrn's design token system works — colors, typography, spacing, and radius — and how to use the Theme Editor to style your entire storefront at once.
Sellrn uses a design token system — a set of named values for color, typography, spacing, and radius that apply globally across every page and every brick in your storefront. Change a token once and it updates everywhere.
What are design tokens?
Instead of setting the color of each button individually, Sellrn stores a single value for "primary color" (called --primary) and every button in the system uses that token. If you change the token, all buttons update instantly — no hunting through pages.
Tokens exist for:
- Colors — background, foreground, primary, secondary, accent, destructive, muted, border, and their foreground counterparts.
- Typography — font families for headings and body text, base font size.
- Radius — corner rounding for buttons, cards, and inputs (from square to fully pill-shaped).
- Spacing — section padding presets (compact / default / relaxed).
Opening the Theme Editor
There are two ways to open the Theme Editor:
- In the Page Builder, click the Theme tab in the right-hand Inspector panel.
- From the Dashboard, go to Settings → Theme.
Choosing a preset
Sellrn ships with several built-in theme presets (e.g. Slate, Zinc, Stone, Rose, Orange). Selecting a preset sets all color tokens at once. You can then fine-tune individual tokens on top of the preset.
Light and dark mode
Every color token has a light and dark value. When your customer's browser or OS is set to dark mode, Sellrn automatically switches to your dark token values. You can preview both modes using the sun/moon toggle in the Theme Editor.
If you want to disable dark mode entirely, set the dark values to match the light values — or turn off the dark mode toggle in Settings → Storefront.
Typography settings
| Setting | What it controls |
|---|---|
| Heading font | Font family used for all <h1>–<h4> elements across your storefront. |
| Body font | Font family used for paragraphs, buttons, labels, and UI text. |
| Base size | Root font size (default 16 px). Scaling this up or down scales the entire typographic scale proportionally. |
Radius and shape
The Radius slider controls how rounded buttons, cards, and form inputs appear. Options range from 0 (sharp corners) to 1rem (fully rounded). Most themes use 0.5rem by default.
Saving and publishing your theme
Click Save theme in the Theme Editor. The new tokens are saved to your store and compiled into CSS variables that are injected on every page of your storefront. No build step or deployment is needed — the change is live immediately.
Custom CSS (advanced)
For cases the token system does not cover, you can add custom CSS in Settings → Advanced → Custom CSS. Custom CSS is injected after the token variables, so you can override or extend anything.