Changing it
Design and theming
Every colour, radius, type size and layout metric in the editor lives in one token sheet. Restyling the whole app is an edit to that file — components never hardcode a colour, so there is nowhere else for one to hide.
One file
The sheet is styles/tokens.css. Everything else — panels, the timeline, the template cards, these docs pages — reads from it through var(--token). If a change needs touching a component to recolour something, that component has a bug.
| Group | Governs |
|---|---|
| Surfaces | The stage and its dot grid, panels, input wells, card backgrounds, hairlines |
| Text | The gray scale: active, body, labels, values, muted, faint |
| Inverse | The dark-on-light pairs — Export button, play button, active segment |
| Radii | Cards, controls, segments, chips. All 0px today |
| Type scale | Label, UI, meta, eyebrow and micro sizes with their line heights |
| Spacing and layout | Panel padding, row gaps, and the fixed column widths of the editor grid |
| Motion | The single UI transition duration |
Two examples
Round the corners. The design is square on purpose, and that is expressed as tokens rather than as an absence: the radius tokens are all 0px. Set them to 6px and every card, control, segment and chip rounds together, in both themes, with no component edited.
Change the palette. The surface and text tokens are one block each. Replace their values and the whole editor moves, including the parts you did not think about — the timeline lanes, the thumbnail backdrops, the docs.
The dark theme is the same tokens
Dark is not a second stylesheet. It redefines the same token names under :root[data-theme="dark"], so anything built from tokens is already themed. The theme is written on the root element before first paint from the stored preference, so there is no flash of the wrong theme, and the toggle in the editor and the one in these docs write to the same place.
The practical rule when adding UI: never give a colour its only definition outside the token sheet. A literal hex in a component is invisible in light mode review and wrong in dark mode.
There is no accent colour
This palette has none, and that is a decision, not an omission. “Selected” and “on” are said with --fg — the active template card border, the segmented thumb, a favourited heart, the marker beside the current page in this sidebar. A single hue introduced for one state would be the only colour in the interface and would read as an error rather than as emphasis.
The one exception is the 3D view gizmo, whose red, green and blue axes are the established convention for X, Y and Z, and which sits on a user-set background rather than on a themed surface.