# Getting started

Umia DS is the design system behind the hub, the admin and the website. Its tokens are CSS variables set on `:root`, so you can use them through Tailwind classes or directly with `var(--color-…)`.

## Add it to an app

Import the stylesheet straight after Tailwind v4, and before your app's own `@theme` block:

```css
@import "tailwindcss";
@import "@umia/design/styles.css";

@theme inline {
  /* only app-local names, for example the hub's shell tokens */
}
```

Tailwind classes now use Umia DS values, so `bg-surface-raised`, `text-muted-foreground`, `rounded-card` and `p-4` work as you'd expect. The `dark:` variant turns on when `<html>` has the `dark` class or `data-theme="dark"`.

## Use roles, not raw colours

A role is a token named after its job, like `bg-card`, `text-text-secondary` or `border-border`. A raw colour is one fixed step on a scale, like `bg-neutral-100`.

Use roles in components. They change on their own for dark mode and for the color-blind setting. Raw colours never change.

## What to read next

- [How tokens work](/how-tokens-work/) shows where each kind of token comes from.
- The [Foundations overview](/reference/) lists a few gotchas to know before you build a component.