How tokens work
Every token starts in the Umia Foundations file in Figma. Figma groups its variables into collections, and each collection becomes one set of CSS variables and Tailwind classes.
Colours
Section titled “Colours”Colours come from the Semantic collection. Each colour there is a role, like background, foreground, primary or border, and it points to a step on a raw scale such as green-700 or neutral-100.
Use the role in components, never the raw step. Each role has a light and a dark value, so one class works in both themes.
<div class="bg-card text-card-foreground border-border">Radius and sizes
Section titled “Radius and sizes”Corner radius and sizes come from the Dimension collection. For corners, use the named classes rounded-card, rounded-field and rounded-control rather than raw steps. Sizes set the height of controls and the size of icons and avatars. For example, control-md is 40px.
Spacing
Section titled “Spacing”Spacing comes from the Primitive collection and replaces Tailwind’s default spacing scale. Classes like p-3, gap-4 and mt-6 work the way you’re used to, with Umia DS values behind them.
Type, shadows and layout
Section titled “Type, shadows and layout”Text styles, shadows, breakpoints and motion work the same way. The Foundations pages list every name and value.
Where the values live
Section titled “Where the values live”The Foundations pages are built from tokens.json, which is made from the Figma export. Don’t edit those files by hand. To change a token, change it in Figma and follow the steps in Contributing.