# 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

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.

```html
<div class="bg-card text-card-foreground border-border">
```

## 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

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

Text styles, shadows, breakpoints and motion work the same way. The [Foundations pages](/reference/) list every name and value.

## 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](/contributing/).