Figma
Design tokens in W3C DTCG format. Open the Veritheme plugin, drop the file on its import zone, and it builds the variable collections and the component canvas.
Colour scales
Pick a base colour and the full scale is generated for you. Add as many scales as your system needs — custom ones inherit the brand curves, so everything stays consistent.
Start from
| Base | Name | Scale |
|---|
Semantic palette
Every role points at a step of one of your scales — click a value to pick another. Rename roles freely: the name is a label, the token underneath keeps driving the components.
Hover, pressed and disabled for neutral, brand and intent actions — always included in exports.
| Name | Light | Dark |
|---|
Shape
The base ladder drives the components. Add your own steps for anything else — they ship in the exports without touching the component contract.
| Name | Token | Value | Preview |
|---|
Border width
One default width every component border reads — inputs, cards, dividers.
Elevation
The shadow ladder for cards, dropdowns and dialogs — from flat to pronounced.
Sizing & spacing
One rem grid under the whole system: padding and gaps, control heights, corners and the type sizes on the next step all land on it. Density scales it at once; individual steps stay editable, and your own steps slot in by value. Figma calls this collection Sizing & Spacing too.
Density
You edit in pixels, but the CSS ships rem — the same as the library, so the system follows the reader's root size. The root is the system's scale: 1rem stays 1rem, and every rem-based size follows it — spacing, radii and type sizes. Figma has no rem, so its variables get the pixel value: at 16px the two match 1:1.
| Step | Token | Value | Scale |
|---|
Typography
Set the same text styles used by components on the web and in Figma.
Text styles
These ten styles are the contract. Components, the CSS export and the Figma text styles all read them. Remove one your system does not need.
Size tokens, read off the styles above. A one-off size in a layout can use these; nothing here is edited on its own, so the two can never disagree.
Components
Each component reads canonical tokens — that is the contract. Rebind any of them to another semantic token (your custom ones included) and the override is scoped to that component alone.
Take it away
Your system, in the two places it has to live: components in Figma and tokens in CSS. Both come out of the same emitters the shipped themes are built with, so what you previewed is what you get.
CSS
Custom properties in rem, exactly as the library ships them. Load it after veritheme.css and every component follows your system.
Your system, ready to use
Source, Figma tokens, CSS, a working demo and AI instructions, with one revision.
Come back to it
Keep the source of your system: this file reloads it here — every scale, curve, role name and rebind — so the next revision starts where you left off, not from scratch.