Building

Variables

Named values that become real custom properties, and the picker that finds them.

A variable is a named value the whole project shares: a brand colour, a radius, a font stack. It is not a builder-only concept — it emits as a real custom property on :root, readable in devtools and usable from hand-written CSS.

:root {
  --brand-blue: #0a84ff;
  --card-radius: 14px;
  --font-display: 'Inter', system-ui, sans-serif;
}

Name and slug are separate

What you read ("Brand Blue") and what the CSS says (--brand-blue) are two fields on purpose. Renaming the first must not silently break every var(--brand-blue) already written into a rule.

Types and groups

The type is what it holds: color, size, number, text or shadow.

The group is what it is for: Color, Spacing, Typography, Sizing, Effects, Other. Type alone cannot answer "should this be offered on a padding field" — spacing steps and font sizes are both sizes — so the group is what style fields filter on. A padding box suggests your spacing scale; a font-size box suggests your type scale.

Using one

Any value field has a braces button. Bind it and the field turns magenta and shows the variable's name instead of var(--…); hover to see the notation, because that is what the CSS says.

The picker is a panel, not a menu — a menu cannot hold a search field, and the first thing you do in a project with a design system is look for a name. So:

1. Search, at the top.
2. New variable, directly under it.
3. Your variables that suit this field.
4. The design system's tokens.
5. Everything else.

One flat list underneath, so ↑ ↓ and ⏎ walk it without knowing about the bands.

Variables vs design-system tokens

If you find yourself typing the same literal into a third rule, it wants to be a variable. If you find yourself building a scale of them, look at whether the design system already has that scale.