# Design tokens

<!-- Generated by `scripts/gen-tokens-json.mjs` — do not edit by hand. -->

Every `--ui-*` primitive in `src/styles/tokens.css`, which is the single source
of truth for the kit's raw design values.

**Do not reference these from component code.** Components use the semantic
layer in `theme.css` (`bg-background`, `text-primary`, …); that indirection is
what lets the whole kit be rebranded by rewriting one file. The exceptions are
`--ui-duration-*`, `--ui-ease-*` and `--ui-z-*`, which have no semantic layer
above them.

The same data ships as JSON at `<pkg>/tokens.json` for non-web targets.

138 tokens in 8 groups.

## color

| Token | Value | Hex |
| --- | --- | --- |
| `--ui-color-neutral-0` | `oklch(1 0 0)` | `#FFFFFF` |
| `--ui-color-neutral-50` | `oklch(0.982 0 0)` | `#F9F9F9` |
| `--ui-color-neutral-100` | `oklch(0.955 0 0)` | `#F0F0F0` |
| `--ui-color-neutral-200` | `oklch(0.922 0 0)` | `#E5E5E5` |
| `--ui-color-neutral-300` | `oklch(0.87 0 0)` | `#D4D4D4` |
| `--ui-color-neutral-400` | `oklch(0.715 0 0)` | `#A3A3A3` |
| `--ui-color-neutral-500` | `oklch(0.573 0 0)` | `#787878` |
| `--ui-color-neutral-600` | `oklch(0.398 0 0)` | `#474747` |
| `--ui-color-neutral-700` | `oklch(0.321 0 0)` | `#333333` |
| `--ui-color-neutral-800` | `oklch(0.252 0 0)` | `#222222` |
| `--ui-color-neutral-900` | `oklch(0.205 0 0)` | `#171717` |
| `--ui-color-neutral-950` | `oklch(0.145 0 0)` | — |
| `--ui-color-neutral-1000` | `oklch(0 0 0)` | `#000000` |
| `--ui-color-brand-50` | `oklch(0.968 0.012 231.7)` | `#EDF6FB` |
| `--ui-color-brand-100` | `oklch(0.925 0.025 229.1)` | `#D6EAF4` |
| `--ui-color-brand-200` | `oklch(0.851 0.05 229.7)` | `#ADD5E9` |
| `--ui-color-brand-300` | `oklch(0.762 0.075 230.7)` | `#7FBBD9` |
| `--ui-color-brand-400` | `oklch(0.668 0.097 231.9)` | `#4F9FC6` |
| `--ui-color-brand-500` | `oklch(0.392 0.098 244.9)` | `#004976` |
| `--ui-color-brand-600` | `oklch(0.356 0.091 245.6)` | `#003F68` |
| `--ui-color-brand-700` | `oklch(0.319 0.083 246.5)` | `#00355A` |
| `--ui-color-brand-800` | `oklch(0.278 0.073 247.3)` | `#002A4A` |
| `--ui-color-brand-900` | `oklch(0.233 0.062 247.5)` | `#001F39` |
| `--ui-color-brand-950` | `oklch(0.165 0.046 247.5)` | — |
| `--ui-color-secondary-50` | `oklch(0.972 0.018 184.3)` | `#E9FAF7` |
| `--ui-color-secondary-100` | `oklch(0.937 0.038 182.4)` | `#CFF3EC` |
| `--ui-color-secondary-200` | `oklch(0.883 0.069 180)` | `#A6E8DA` |
| `--ui-color-secondary-300` | `oklch(0.836 0.096 179.7)` | `#7DDECB` |
| `--ui-color-secondary-400` | `oklch(0.793 0.112 180.7)` | `#5AD3BF` |
| `--ui-color-secondary-500` | `oklch(0.756 0.112 181.9)` | `#4BC7B5` |
| `--ui-color-secondary-600` | `oklch(0.71 0.106 182.5)` | `#43B7A7` |
| `--ui-color-secondary-700` | `oklch(0.555 0.097 186.5)` | `#00857C` |
| `--ui-color-secondary-800` | `oklch(0.374 0.066 184.4)` | `#004C45` |
| `--ui-color-secondary-900` | `oklch(0.352 0.046 186.7)` | `#1A433F` |
| `--ui-color-tertiary-50` | `oklch(0.955 0.023 220.7)` | `#E0F4FB` |
| `--ui-color-tertiary-100` | `oklch(0.884 0.054 225)` | `#B3E1F4` |
| `--ui-color-tertiary-200` | `oklch(0.806 0.086 224.3)` | `#80CCE9` |
| `--ui-color-tertiary-300` | `oklch(0.792 0.114 226.2)` | `#5FCAF3` |
| `--ui-color-tertiary-400` | `oklch(0.683 0.126 229.2)` | `#26A7D7` |
| `--ui-color-tertiary-500` | `oklch(0.575 0.127 237.5)` | `#0082BA` |
| `--ui-color-tertiary-600` | `oklch(0.59 0.116 230.2)` | `#0889B5` |
| `--ui-color-tertiary-700` | `oklch(0.485 0.095 230)` | `#06688A` |
| `--ui-color-tertiary-800` | `oklch(0.396 0.07 219.1)` | `#044F60` |
| `--ui-color-tertiary-900` | `oklch(0.289 0.049 214.4)` | `#02313A` |
| `--ui-color-third-50` | `var(--ui-color-tertiary-50)` | `#E0F4FB` |
| `--ui-color-third-100` | `var(--ui-color-tertiary-100)` | `#B3E1F4` |
| `--ui-color-third-200` | `var(--ui-color-tertiary-200)` | `#80CCE9` |
| `--ui-color-third-300` | `var(--ui-color-tertiary-300)` | `#5FCAF3` |
| `--ui-color-third-400` | `var(--ui-color-tertiary-400)` | `#26A7D7` |
| `--ui-color-third-500` | `var(--ui-color-tertiary-500)` | `#0082BA` |
| `--ui-color-third-600` | `var(--ui-color-tertiary-600)` | `#0889B5` |
| `--ui-color-third-700` | `var(--ui-color-tertiary-700)` | `#06688A` |
| `--ui-color-third-800` | `var(--ui-color-tertiary-800)` | `#044F60` |
| `--ui-color-third-900` | `var(--ui-color-tertiary-900)` | `#02313A` |
| `--ui-color-red-50` | `oklch(0.971 0.013 17.4)` | `#FEF2F2` |
| `--ui-color-red-100` | `oklch(0.936 0.031 17.7)` | `#FEE2E2` |
| `--ui-color-red-200` | `oklch(0.885 0.059 18.3)` | `#FECACA` |
| `--ui-color-red-300` | `oklch(0.808 0.103 19.6)` | `#FCA5A5` |
| `--ui-color-red-400` | `oklch(0.711 0.166 22.2)` | `#F87171` |
| `--ui-color-red-500` | `oklch(0.637 0.208 25.3)` | `#EF4444` |
| `--ui-color-red-600` | `oklch(0.6 0.246 29.2)` | `#F00000` |
| `--ui-color-red-700` | `oklch(0.442 0.163 27.1)` | `#991919` |
| `--ui-color-red-800` | `oklch(0.291 0.095 25.3)` | `#511111` |
| `--ui-color-red-900` | `oklch(0.216 0.059 23.4)` | `#300C0C` |
| `--ui-color-green-50` | `oklch(0.982 0.018 155.8)` | `#F0FDF4` |
| `--ui-color-green-100` | `oklch(0.962 0.043 156.7)` | `#DCFCE7` |
| `--ui-color-green-200` | `oklch(0.925 0.081 156)` | `#BBF7D0` |
| `--ui-color-green-300` | `oklch(0.871 0.136 154.4)` | `#86EFAC` |
| `--ui-color-green-400` | `oklch(0.8 0.182 151.7)` | `#4ADE80` |
| `--ui-color-green-500` | `oklch(0.723 0.192 149.6)` | `#22C55E` |
| `--ui-color-green-600` | `oklch(0.627 0.17 149.2)` | `#16A34A` |
| `--ui-color-green-700` | `oklch(0.458 0.117 150.3)` | `#116932` |
| `--ui-color-green-800` | `oklch(0.364 0.082 152.6)` | `#124A28` |
| `--ui-color-green-900` | `oklch(0.242 0.055 154.1)` | `#042713` |
| `--ui-color-yellow-50` | `oklch(0.98 0.018 86.1)` | `#FEF8EB` |
| `--ui-color-yellow-100` | `oklch(0.973 0.069 103.2)` | `#FEF9C3` |
| `--ui-color-yellow-200` | `oklch(0.917 0.095 93.3)` | `#F9E39A` |
| `--ui-color-yellow-300` | `oklch(0.888 0.13 94.9)` | `#F5D96E` |
| `--ui-color-yellow-400` | `oklch(0.85 0.142 89.8)` | `#F2C952` |
| `--ui-color-yellow-500` | `oklch(0.851 0.103 78.1)` | `#F3C67F` |
| `--ui-color-yellow-600` | `oklch(0.762 0.114 81.5)` | `#D6AA57` |
| `--ui-color-yellow-700` | `oklch(0.725 0.136 83.1)` | `#CF9D2B` |
| `--ui-color-yellow-800` | `oklch(0.516 0.087 72.9)` | `#865F28` |
| `--ui-color-yellow-900` | `oklch(0.389 0.068 75)` | `#5A3F15` |
| `--ui-color-yellow-surface` | `var(--ui-color-yellow-500)` | `#F3C67F` |
| `--ui-color-yellow-ink` | `var(--ui-color-yellow-800)` | `#865F28` |
| `--ui-color-danger-100` | `var(--ui-color-red-100)` | `#FEE2E2` |
| `--ui-color-danger-300` | `var(--ui-color-red-300)` | `#FCA5A5` |
| `--ui-color-danger-500` | `var(--ui-color-red-500)` | `#EF4444` |
| `--ui-color-danger-700` | `var(--ui-color-red-700)` | `#991919` |
| `--ui-color-danger-900` | `var(--ui-color-red-900)` | `#300C0C` |
| `--ui-color-success-100` | `var(--ui-color-green-100)` | `#DCFCE7` |
| `--ui-color-success-300` | `var(--ui-color-green-300)` | `#86EFAC` |
| `--ui-color-success-500` | `var(--ui-color-green-500)` | `#22C55E` |
| `--ui-color-success-700` | `var(--ui-color-green-700)` | `#116932` |
| `--ui-color-success-900` | `var(--ui-color-green-900)` | `#042713` |
| `--ui-color-warning-100` | `var(--ui-color-yellow-100)` | `#FEF9C3` |
| `--ui-color-warning-300` | `var(--ui-color-yellow-300)` | `#F5D96E` |
| `--ui-color-warning-500` | `var(--ui-color-yellow-500)` | `#F3C67F` |
| `--ui-color-warning-700` | `var(--ui-color-yellow-700)` | `#CF9D2B` |
| `--ui-color-warning-900` | `var(--ui-color-yellow-900)` | `#5A3F15` |
| `--ui-color-chart-1` | `var(--ui-color-brand-400)` | `#4F9FC6` |
| `--ui-color-chart-2` | `var(--ui-color-secondary-600)` | `#43B7A7` |
| `--ui-color-chart-3` | `var(--ui-color-green-500)` | `#22C55E` |
| `--ui-color-chart-4` | `var(--ui-color-yellow-600)` | `#D6AA57` |
| `--ui-color-chart-5` | `var(--ui-color-red-500)` | `#EF4444` |

## duration

| Token | Value | Hex |
| --- | --- | --- |
| `--ui-duration-fast` | `120ms` | — |
| `--ui-duration-base` | `180ms` | — |
| `--ui-duration-slow` | `280ms` | — |

## ease

| Token | Value | Hex |
| --- | --- | --- |
| `--ui-ease-standard` | `cubic-bezier(0.2, 0, 0, 1)` | — |
| `--ui-ease-emphasized` | `cubic-bezier(0.05, 0.7, 0.1, 1)` | — |

## font

| Token | Value | Hex |
| --- | --- | --- |
| `--ui-font-sans` | `'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | — |
| `--ui-font-mono` | `ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace` | — |

## radius

| Token | Value | Hex |
| --- | --- | --- |
| `--ui-radius-none` | `0` | — |
| `--ui-radius-2xs` | `0.125rem` | — |
| `--ui-radius-xs` | `0.25rem` | — |
| `--ui-radius-sm` | `0.375rem` | — |
| `--ui-radius-md` | `0.5rem` | — |
| `--ui-radius-lg` | `0.75rem` | — |
| `--ui-radius-xl` | `1rem` | — |
| `--ui-radius-2xl` | `1.25rem` | — |
| `--ui-radius-3xl` | `1.5rem` | — |
| `--ui-radius-4xl` | `2rem` | — |
| `--ui-radius-full` | `9999px` | — |
| `--ui-radius` | `var(--ui-radius-lg)` | — |

## shadow

| Token | Value | Hex |
| --- | --- | --- |
| `--ui-shadow-xs` | `0 1px 2px 0 oklch(0.145 0 0 / 0.05)` | — |
| `--ui-shadow-sm` | `0 1px 2px -1px oklch(0.145 0 0 / 0.1), 0 1px 3px 0 oklch(0.145 0 0 / 0.1)` | — |
| `--ui-shadow-md` | `0 2px 4px -2px oklch(0.145 0 0 / 0.1), 0 4px 6px -1px oklch(0.145 0 0 / 0.1)` | — |
| `--ui-shadow-lg` | `0 4px 6px -4px oklch(0.145 0 0 / 0.1), 0 10px 15px -3px oklch(0.145 0 0 / 0.1)` | — |
| `--ui-shadow-xl` | `0 8px 10px -6px oklch(0.145 0 0 / 0.1), 0 20px 25px -5px oklch(0.145 0 0 / 0.1)` | — |

## space

| Token | Value | Hex |
| --- | --- | --- |
| `--ui-space-base` | `0.25rem` | — |

## z

| Token | Value | Hex |
| --- | --- | --- |
| `--ui-z-dropdown` | `1000` | — |
| `--ui-z-sticky` | `1100` | — |
| `--ui-z-overlay` | `1200` | — |
| `--ui-z-modal` | `1300` | — |
| `--ui-z-popover` | `1400` | — |
| `--ui-z-toast` | `1500` | — |
| `--ui-z-tooltip` | `1600` | — |