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.
Loading…
Design systems
Your systems are stored locally
They live in this browser on this device only. Clearing site data removes them — use Download JSON on a system to keep a copy.
Couldn’t load your systems
Color scales
Pick a base color 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.
| Name | Light | Dark |
|---|
Shape
Every role is a step on the rem grid. The ladder keeps its order: a role is never rounder than the one above it.
Based on
| Name | Value |
|---|
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
Padding, gaps and control heights all sit on this rem grid. A step stays between its neighbors.
Based on
| Name | Value | Scale |
|---|
Typography
Set the same text styles used by components on the web and in Figma.
Text styles
These eleven 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.
Install
Nothing matches — try another word.
Releases live in your account
A release is a numbered version of the system that Figma and a pull request can take. Sign in and this system moves into your account.
Releases aren’t available
This system may have been deleted, or it belongs to another account.
No releases yet
A release fixes the current draft as a numbered version you can pull into Figma and open as a pull request. Press Release at the top of this page.
Compare
→
Code
Install the Veritheme app on the repository that should receive releases. GitHub brings you back here once it is installed.
No live preview yet
Couldn’t open this system
Changed in another tab
Edits here are paused so they don’t overwrite that tab’s work. Reload to continue with the latest version.