# Colors

var-ui separates **primitive palette** steps from **semantic color** tokens. Components and
recipes reference semantic tokens (e.g. `color.tone.accent.foreground`) so themes can remap roles without
touching component code.

_Interactive widget — see the HTML docs page._

## Using colors

Import token refs from core:

```ts
import { designTokens } from '@var-ui/core';

designTokens.color.palette['sky-7'].var; // var(--var-ui-color-palette-sky-7)
designTokens.color.tone.accent.foreground.var; // var(--var-ui-color-tone-accent-foreground)
```

Override semantic colors in a theme via `createDesignTheme({ tokens, colorMode })`. See
[Customize](/theming/customize) for details.