# Design Tokens

> Source: https://design.nanatec.co.ke/guides/design-tokens/
> The color, spacing, radius, shadow, typography, z-index, and transition scales that every Nana UI component is built from.

Every component is built from a shared set of **design tokens** — CSS custom
properties (prefixed `--nana-`) for color, spacing, radius, shadow, typography, z-index, and transition.
Override them at any scope to re-theme without touching component internals.

Import the token foundation once in your app's global stylesheet:

```css
@import "@nana-tec/ui-themes/base";
```

This pulls in `@nana-tec/ui-tokens/css` (the raw scales below) plus the surface
semantics and dark-mode overrides.

## Using tokens

Reference any token directly, or scope an override to re-theme a subtree:

```css
.checkout {
  --nana-color-primary-600: #2563eb;
  --nana-radius-md: 9999px;
}
```

See [Theming](/guides/theming/) for surface semantics (`--nana-surface-*`) and
dark mode.