The Design System holds reusable CSS variables (color/number/text/image/multi) and global classes. Change a token once and every element using it updates.
Where: Right sidebar → Design System section (Variables / Colors / Components tabs) — Open the Design System section, or "Create Class" from a styled element
Key ideas
- Variable types: Auto-detected: color, number (with units / calc / clamp), text, image (url(...)), and multi (space-separated, e.g. shadows).
- Global classes: Reusable style bundles. Editing a styled element that has a class edits the class, updating every element using it.
- Property source colors: Blue = inline value, Orange = inherited from a class, Yellow = mixed/overridden.
- State + breakpoint aware: A class carries :hover/:focus/:active and per-breakpoint overrides in one place.
Steps
- Open the Design System section and the Variables tab; click + and pick a type.
- Name and set the variable; reference it in any field by typing var(-- to autocomplete.
- To make a class, style an element and click "Create Class"; name it.
- Apply the class elsewhere via the class selector; edit it by restyling any element that uses it.