Appearance
Theme & styling
Every FlowRunner page carries a theme — a small set of design tokens for colour, type, spacing, corners, and shadows. Components reference these tokens instead of hard-coded values, so changing the theme restyles the whole page at once. This page explains the tokens and how per-node overrides layer on top.
Why tokens matter
When you drop a block, its heading isn't coloured #4f46e5 — it's coloured palette.primary. Its padding isn't 24px — it's the lg spacing token. Because everything points at named tokens, re-theming is instant: change palette.primary from indigo to your brand green and every button, accent, and highlight that referenced it updates together, across every block and page.
The token set
The theme has six groups. These are the defaults every page starts from:
Palette
| Token | Default | Use |
|---|---|---|
primary | #4f46e5 | Buttons, links, accents |
secondary | #0ea5e9 | Secondary actions |
accent | #f59e0b | Highlights |
background | #ffffff | Page background |
foreground | #18181b | Body text |
success / warning / error | green / amber / red | Status colours |
neutral.50 … neutral.900 | greys | Surfaces, borders, muted text |
Typography
headingFontandbodyFont(both default to Inter with a system fallback).- A size scale:
display56,h140,h232,h324,h420,h518,body16,small14,caption12. - Weights:
regular400,medium500,semibold600,bold700.
Spacing, radius, and shadow
- Spacing — a 4px unit with named steps
0,xs(4),sm(8),md(16),lg(24),xl(32),2xl(48),3xl(64),4xl(96),5xl(128). Section padding and node margins reference these names. - Radius —
none0,sm4,md8,lg16,full9999 (a pill). - Shadow —
none,sm,md,lg, from a hairline to a lifted card.
Re-theming a page
A page stores its own theme overlay — you don't have to accept the defaults. Set a new primary, swap the heading font, or nudge a neutral, and FlowRunner merges your overlay onto the base theme: anything you set wins, anything you leave alone keeps the default. Because the overlay only stores colours and fonts, your spacing/radius/shadow scales stay consistent.
TIP
Set your brand palette once, early. Everything you build afterwards inherits it, and every block you drop arrives already on-brand.
Per-node style overrides
Tokens set the page's overall look; sometimes one element needs to differ. Select any node and give it theme references — token-aware overrides that still resolve through the theme, so they move with a re-theme:
| Override | Draws from |
|---|---|
color, backgroundColor | palette / neutral tokens |
padding* / margin* (all sides or per-side) | spacing token names |
radius | radius scale |
shadow | shadow scale |
fontSize, fontWeight | typography scale / weights |
fontFamily | heading or body font |
hoverBackgroundColor, hoverColor | palette / neutral, applied on hover |
For example, a heading node with fontSize: display, fontWeight: bold, and color: palette.primary renders large, heavy, and in your brand colour — and still tracks the theme if you change any of those tokens later.
NOTE
Overrides that reference tokens (like color: palette.primary) survive a re-theme. If you ever type a raw hex value into a node's own CSS instead, that value is fixed and won't move with the theme — prefer tokens unless you specifically want a one-off.
Beyond token references, each node also has raw CSS style slots — and these can differ per breakpoint (desktop / tablet / mobile), so you can, say, shrink a heading only on phones.