# Primitive Token Index

Every `--tui-*` custom property the system emits, read **live from the loaded
stylesheet** — host overrides and new tokens show up here without doc edits.
Values shown are light-mode defaults.

These are the theme contract: consuming them directly
(`var(--tui-spacing-md)`, `var(--tui-theme-primary-base)`) keeps your DOM
free of utility classes and your styles responsive to host theming. Names
follow the `--tui-{category}-{axis}-{step}` grammar — see
[Naming](https://storybook-tangible-ui.pages.dev/docs/system-naming.md).

For per-category guidance, see the Tokens section:
[Colors](https://storybook-tangible-ui.pages.dev/docs/tokens-colors.md), [Spacing](https://storybook-tangible-ui.pages.dev/docs/tokens-spacing.md),
[Typography](https://storybook-tangible-ui.pages.dev/docs/tokens-typography.md).

191 tokens. Dark values are listed only where dark mode remaps the token; empty means the light value applies. Snapshot of the compiled stylesheet of @tangible/ui 0.2.29, generated at build time.

| Token | Light | Dark | Category |
| - | - | - | - |
| `--tui-border-width` | `1px` | | border |
| `--tui-border-width-bold` | `2px` | | border |
| `--tui-color-bg` | `#fff` | `#0c121f` | color |
| `--tui-color-bg-elevated` | `#fff` | `#111928` | color |
| `--tui-color-bg-inverted` | `#111928` | `#F9FAFB` | color |
| `--tui-color-bg-muted` | `#F3F4F6` | `#111928` | color |
| `--tui-color-bg-overlay` | `rgba(0, 0, 0, var(--tui-opacity-backdrop))` | `rgba(0, 0, 0, 0.7)` | color |
| `--tui-color-bg-surface` | `#fafafa` | `#080d17` | color |
| `--tui-color-border` | `#D1D5DB` | `#2b3443` | color |
| `--tui-color-border-control` | `#838a97` | `#6B7280` | color |
| `--tui-color-divider` | `#E5E7EB` | `#202836` | color |
| `--tui-color-fg` | `#111928` | `#F9FAFB` | color |
| `--tui-color-fg-inverted` | `#fafafa` | `#111928` | color |
| `--tui-color-fg-muted` | `#6B7280` | `#9CA3AF` | color |
| `--tui-color-fg-on-accent` | `#fff` | `#fff` | color |
| `--tui-color-fg-secondary` | `#4B5563` | `#D1D5DB` | color |
| `--tui-color-fill` | `#E5E7EB` | `#2b3443` | color |
| `--tui-color-fill-strong` | `#9CA3AF` | `#4B5563` | color |
| `--tui-color-fill-subtle` | `#F3F4F6` | `#202836` | color |
| `--tui-color-focus-ring` | `var(--tui-focus-ring-color)` | | color |
| `--tui-focus-ring-color` | `#2563eb` | `#3858e9` | focus-ring |
| `--tui-focus-ring-offset` | `2px` | | focus-ring |
| `--tui-focus-ring-width` | `2px` | | focus-ring |
| `--tui-generative-amber` | `oklch(0.78 0.14 88)` | | generative |
| `--tui-generative-amber-fg` | `#111928` | | generative |
| `--tui-generative-amber-interact` | `oklch(0.73 0.14 88)` | | generative |
| `--tui-generative-amber-strong` | `oklch(0.4 0.11 88)` | `oklch(0.82 0.1 88)` | generative |
| `--tui-generative-amber-subtle` | `oklch(0.94 0.045 88)` | `oklch(0.3 0.055 88)` | generative |
| `--tui-generative-amber-subtle-interact` | `oklch(0.9 0.06 88)` | `oklch(0.34 0.065 88)` | generative |
| `--tui-generative-blue` | `oklch(0.52 0.13 262)` | | generative |
| `--tui-generative-blue-fg` | `#fff` | | generative |
| `--tui-generative-blue-interact` | `oklch(0.47 0.13 262)` | | generative |
| `--tui-generative-blue-strong` | `oklch(0.4 0.11 262)` | `oklch(0.82 0.1 262)` | generative |
| `--tui-generative-blue-subtle` | `oklch(0.94 0.045 262)` | `oklch(0.3 0.055 262)` | generative |
| `--tui-generative-blue-subtle-interact` | `oklch(0.9 0.06 262)` | `oklch(0.34 0.065 262)` | generative |
| `--tui-generative-coral` | `oklch(0.52 0.13 25)` | | generative |
| `--tui-generative-coral-fg` | `#fff` | | generative |
| `--tui-generative-coral-interact` | `oklch(0.47 0.13 25)` | | generative |
| `--tui-generative-coral-strong` | `oklch(0.4 0.11 25)` | `oklch(0.82 0.1 25)` | generative |
| `--tui-generative-coral-subtle` | `oklch(0.94 0.045 25)` | `oklch(0.3 0.055 25)` | generative |
| `--tui-generative-coral-subtle-interact` | `oklch(0.9 0.06 25)` | `oklch(0.34 0.065 25)` | generative |
| `--tui-generative-cyan` | `oklch(0.78 0.14 218)` | | generative |
| `--tui-generative-cyan-fg` | `#111928` | | generative |
| `--tui-generative-cyan-interact` | `oklch(0.73 0.14 218)` | | generative |
| `--tui-generative-cyan-strong` | `oklch(0.4 0.11 218)` | `oklch(0.82 0.1 218)` | generative |
| `--tui-generative-cyan-subtle` | `oklch(0.94 0.045 218)` | `oklch(0.3 0.055 218)` | generative |
| `--tui-generative-cyan-subtle-interact` | `oklch(0.9 0.06 218)` | `oklch(0.34 0.065 218)` | generative |
| `--tui-generative-emerald` | `oklch(0.52 0.13 162)` | | generative |
| `--tui-generative-emerald-fg` | `#fff` | | generative |
| `--tui-generative-emerald-interact` | `oklch(0.47 0.13 162)` | | generative |
| `--tui-generative-emerald-strong` | `oklch(0.4 0.11 162)` | `oklch(0.82 0.1 162)` | generative |
| `--tui-generative-emerald-subtle` | `oklch(0.94 0.045 162)` | `oklch(0.3 0.055 162)` | generative |
| `--tui-generative-emerald-subtle-interact` | `oklch(0.9 0.06 162)` | `oklch(0.34 0.065 162)` | generative |
| `--tui-generative-lime` | `oklch(0.78 0.14 125)` | | generative |
| `--tui-generative-lime-fg` | `#111928` | | generative |
| `--tui-generative-lime-interact` | `oklch(0.73 0.14 125)` | | generative |
| `--tui-generative-lime-strong` | `oklch(0.4 0.11 125)` | `oklch(0.82 0.1 125)` | generative |
| `--tui-generative-lime-subtle` | `oklch(0.94 0.045 125)` | `oklch(0.3 0.055 125)` | generative |
| `--tui-generative-lime-subtle-interact` | `oklch(0.9 0.06 125)` | `oklch(0.34 0.065 125)` | generative |
| `--tui-generative-orange` | `oklch(0.78 0.14 60)` | | generative |
| `--tui-generative-orange-fg` | `#111928` | | generative |
| `--tui-generative-orange-interact` | `oklch(0.73 0.14 60)` | | generative |
| `--tui-generative-orange-strong` | `oklch(0.4 0.11 60)` | `oklch(0.82 0.1 60)` | generative |
| `--tui-generative-orange-subtle` | `oklch(0.94 0.045 60)` | `oklch(0.3 0.055 60)` | generative |
| `--tui-generative-orange-subtle-interact` | `oklch(0.9 0.06 60)` | `oklch(0.34 0.065 60)` | generative |
| `--tui-generative-pink` | `oklch(0.52 0.13 350)` | | generative |
| `--tui-generative-pink-fg` | `#fff` | | generative |
| `--tui-generative-pink-interact` | `oklch(0.47 0.13 350)` | | generative |
| `--tui-generative-pink-strong` | `oklch(0.4 0.11 350)` | `oklch(0.82 0.1 350)` | generative |
| `--tui-generative-pink-subtle` | `oklch(0.94 0.045 350)` | `oklch(0.3 0.055 350)` | generative |
| `--tui-generative-pink-subtle-interact` | `oklch(0.9 0.06 350)` | `oklch(0.34 0.065 350)` | generative |
| `--tui-generative-teal` | `oklch(0.52 0.13 192)` | | generative |
| `--tui-generative-teal-fg` | `#fff` | | generative |
| `--tui-generative-teal-interact` | `oklch(0.47 0.13 192)` | | generative |
| `--tui-generative-teal-strong` | `oklch(0.4 0.11 192)` | `oklch(0.82 0.1 192)` | generative |
| `--tui-generative-teal-subtle` | `oklch(0.94 0.045 192)` | `oklch(0.3 0.055 192)` | generative |
| `--tui-generative-teal-subtle-interact` | `oklch(0.9 0.06 192)` | `oklch(0.34 0.065 192)` | generative |
| `--tui-generative-violet` | `oklch(0.52 0.13 300)` | | generative |
| `--tui-generative-violet-fg` | `#fff` | | generative |
| `--tui-generative-violet-interact` | `oklch(0.47 0.13 300)` | | generative |
| `--tui-generative-violet-strong` | `oklch(0.4 0.11 300)` | `oklch(0.82 0.1 300)` | generative |
| `--tui-generative-violet-subtle` | `oklch(0.94 0.045 300)` | `oklch(0.3 0.055 300)` | generative |
| `--tui-generative-violet-subtle-interact` | `oklch(0.9 0.06 300)` | `oklch(0.34 0.065 300)` | generative |
| `--tui-input-chevron` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 11 10'%3E%3Cpath fill='%23111928' d='M5.511 7.5a.939.939 0 0 1-.636-.244l-3.6-3.326a.833.833 0 0 1-.202-.27.778.778 0 0 1-.006-.643.83.83 0 0 1 .197-.273.909.909 0 0 1 .295-.182.965.965 0 0 1 .696.006c.11.043.21.106.292.186l2.964 2.738 2.964-2.738a.94.94 0 0 1 .633-.234c.236.002.462.09.628.244a.801.801 0 0 1 .264.58.8.8 0 0 1-.253.586l-3.6 3.326a.939.939 0 0 1-.636.244Z'/%3E%3C/svg%3E")` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 11 10'%3E%3Cpath fill='%23F9FAFB' d='M5.511 7.5a.939.939 0 0 1-.636-.244l-3.6-3.326a.833.833 0 0 1-.202-.27.778.778 0 0 1-.006-.643.83.83 0 0 1 .197-.273.909.909 0 0 1 .295-.182.965.965 0 0 1 .696.006c.11.043.21.106.292.186l2.964 2.738 2.964-2.738a.94.94 0 0 1 .633-.234c.236.002.462.09.628.244a.801.801 0 0 1 .264.58.8.8 0 0 1-.253.586l-3.6 3.326a.939.939 0 0 1-.636.244Z'/%3E%3C/svg%3E")` | input |
| `--tui-layer-elevated` | `2` | | layer |
| `--tui-layer-modal` | `1000` | | layer |
| `--tui-layer-overlay` | `100` | | layer |
| `--tui-layer-surface` | `0` | | layer |
| `--tui-layer-top` | `9999` | | layer |
| `--tui-motion-duration` | `200ms` | | motion |
| `--tui-motion-timing` | `ease-in-out` | | motion |
| `--tui-opacity-backdrop` | `0.5` | | opacity |
| `--tui-opacity-disabled` | `0.75` | | opacity |
| `--tui-palette-color-black` | `#000` | | palette |
| `--tui-palette-color-white` | `#fff` | | palette |
| `--tui-palette-spacing-1` | `calc(var(--tui-spacing-base) * 1)` | | palette |
| `--tui-palette-spacing-10` | `calc(var(--tui-spacing-base) * 10)` | | palette |
| `--tui-palette-spacing-12` | `calc(var(--tui-spacing-base) * 12)` | | palette |
| `--tui-palette-spacing-16` | `calc(var(--tui-spacing-base) * 16)` | | palette |
| `--tui-palette-spacing-2` | `calc(var(--tui-spacing-base) * 2)` | | palette |
| `--tui-palette-spacing-20` | `calc(var(--tui-spacing-base) * 20)` | | palette |
| `--tui-palette-spacing-24` | `calc(var(--tui-spacing-base) * 24)` | | palette |
| `--tui-palette-spacing-3` | `calc(var(--tui-spacing-base) * 3)` | | palette |
| `--tui-palette-spacing-30` | `calc(var(--tui-spacing-base) * 30)` | | palette |
| `--tui-palette-spacing-4` | `calc(var(--tui-spacing-base) * 4)` | | palette |
| `--tui-palette-spacing-40` | `calc(var(--tui-spacing-base) * 40)` | | palette |
| `--tui-palette-spacing-5` | `calc(var(--tui-spacing-base) * 5)` | | palette |
| `--tui-palette-spacing-50` | `calc(var(--tui-spacing-base) * 50)` | | palette |
| `--tui-palette-spacing-6` | `calc(var(--tui-spacing-base) * 6)` | | palette |
| `--tui-palette-spacing-8` | `calc(var(--tui-spacing-base) * 8)` | | palette |
| `--tui-radius-full` | `9999px` | | radius |
| `--tui-radius-lg` | `12px` | | radius |
| `--tui-radius-md` | `8px` | | radius |
| `--tui-radius-sm` | `4px` | | radius |
| `--tui-radius-xl` | `16px` | | radius |
| `--tui-radius-xs` | `2px` | | radius |
| `--tui-shadow-color` | `0, 0, 0` | `0, 0, 0` | shadow |
| `--tui-shadow-dropdown` | `0 4px 12px rgba(var(--tui-shadow-color), 0.15)` | | shadow |
| `--tui-shadow-lg` | `0 10px 15px rgba(var(--tui-shadow-color), 0.1),
                    0 4px 6px rgba(var(--tui-shadow-color), 0.05)` | | shadow |
| `--tui-shadow-md` | `0 4px 6px rgba(var(--tui-shadow-color), 0.1),
                    0 2px 4px rgba(var(--tui-shadow-color), 0.06)` | | shadow |
| `--tui-shadow-sm` | `0 1px 3px rgba(var(--tui-shadow-color), 0.1),
                    0 1px 2px rgba(var(--tui-shadow-color), 0.06)` | | shadow |
| `--tui-shadow-xs` | `0 1px 2px rgba(var(--tui-shadow-color), 0.05)` | | shadow |
| `--tui-spacing-base` | `4px` | | spacing |
| `--tui-spacing-lg` | `var(--tui-palette-spacing-6)` | | spacing |
| `--tui-spacing-md` | `var(--tui-palette-spacing-4)` | | spacing |
| `--tui-spacing-sm` | `var(--tui-palette-spacing-3)` | | spacing |
| `--tui-spacing-xl` | `var(--tui-palette-spacing-8)` | | spacing |
| `--tui-spacing-xs` | `var(--tui-palette-spacing-2)` | | spacing |
| `--tui-spacing-xxl` | `var(--tui-palette-spacing-16)` | | spacing |
| `--tui-spacing-xxs` | `var(--tui-palette-spacing-1)` | | spacing |
| `--tui-theme-danger-base` | `#d63638` | `#e65054` | theme |
| `--tui-theme-danger-soft` | `#f86368` | `#d63638` | theme |
| `--tui-theme-danger-strong` | `#b32d2e` | `#f86368` | theme |
| `--tui-theme-danger-stronger` | `#8a2424` | `#ff8085` | theme |
| `--tui-theme-danger-strongest` | `#451313` | `#ffabaf` | theme |
| `--tui-theme-danger-subtle` | `#facfd2` | `#691c1c` | theme |
| `--tui-theme-danger-subtlest` | `#fce3e5` | `#451313` | theme |
| `--tui-theme-info-base` | `#2942d1` | `#3858e9` | theme |
| `--tui-theme-info-soft` | `#7b93ff` | `#2942d1` | theme |
| `--tui-theme-info-strong` | `#1d35b4` | `#5879f9` | theme |
| `--tui-theme-info-stronger` | `#1b2398` | `#7b93ff` | theme |
| `--tui-theme-info-strongest` | `#090949` | `#a0b5fe` | theme |
| `--tui-theme-info-subtle` | `#c7d6ff` | `#101375` | theme |
| `--tui-theme-info-subtlest` | `#e2e9ff` | `#090949` | theme |
| `--tui-theme-primary-base` | `#2942d1` | `#3858e9` | theme |
| `--tui-theme-primary-soft` | `#7b93ff` | `#2942d1` | theme |
| `--tui-theme-primary-strong` | `#1d35b4` | `#5879f9` | theme |
| `--tui-theme-primary-stronger` | `#1b2398` | `#7b93ff` | theme |
| `--tui-theme-primary-strongest` | `#090949` | `#a0b5fe` | theme |
| `--tui-theme-primary-subtle` | `#c7d6ff` | `#101375` | theme |
| `--tui-theme-primary-subtlest` | `#e2e9ff` | `#090949` | theme |
| `--tui-theme-secondary-base` | `#6B7280` | `#9CA3AF` | theme |
| `--tui-theme-secondary-soft` | `#9CA3AF` | `#4B5563` | theme |
| `--tui-theme-secondary-strong` | `#374151` | `#D1D5DB` | theme |
| `--tui-theme-secondary-stronger` | `#202836` | `#E5E7EB` | theme |
| `--tui-theme-secondary-strongest` | `#111928` | `#F3F4F6` | theme |
| `--tui-theme-secondary-subtle` | `#E5E7EB` | `#374151` | theme |
| `--tui-theme-secondary-subtlest` | `#F3F4F6` | `#202836` | theme |
| `--tui-theme-success-base` | `#008a20` | `#00a32a` | theme |
| `--tui-theme-success-soft` | `#00ba37` | `#008a20` | theme |
| `--tui-theme-success-strong` | `#007017` | `#00ba37` | theme |
| `--tui-theme-success-stronger` | `#005c12` | `#1ed14b` | theme |
| `--tui-theme-success-strongest` | `#003008` | `#68de7c` | theme |
| `--tui-theme-success-subtle` | `#b7e7be` | `#00450c` | theme |
| `--tui-theme-success-subtlest` | `#d8f3dc` | `#003008` | theme |
| `--tui-theme-warning-base` | `#996800` | `#bd8600` | theme |
| `--tui-theme-warning-soft` | `#dba617` | `#996800` | theme |
| `--tui-theme-warning-strong` | `#755100` | `#dba617` | theme |
| `--tui-theme-warning-stronger` | `#614200` | `#f0c33c` | theme |
| `--tui-theme-warning-strongest` | `#362400` | `#f2d675` | theme |
| `--tui-theme-warning-subtle` | `#f5e6ab` | `#4a3200` | theme |
| `--tui-theme-warning-subtlest` | `#f9f1d2` | `#362400` | theme |
| `--tui-typography-color-base` | `currentColor` | | typography |
| `--tui-typography-color-contrast-high` | `var(--tui-color-fg)` | | typography |
| `--tui-typography-color-contrast-low` | `var(--tui-color-fg-muted)` | | typography |
| `--tui-typography-color-headings` | `var(--tui-color-fg)` | | typography |
| `--tui-typography-font-family` | `inherit` | | typography |
| `--tui-typography-line-height` | `1.4` | | typography |
| `--tui-typography-line-height-tight` | `1.25` | | typography |
| `--tui-typography-size` | `16px` | | typography |
| `--tui-typography-size-lg` | `calc(20 * var(--tui-typography-size-multiplier, calc(1rem / 16)))` | | typography |
| `--tui-typography-size-md` | `calc(16 * var(--tui-typography-size-multiplier, calc(1rem / 16)))` | | typography |
| `--tui-typography-size-multiplier` | `calc(1rem / 16)` | | typography |
| `--tui-typography-size-sm` | `calc(14 * var(--tui-typography-size-multiplier, calc(1rem / 16)))` | | typography |
| `--tui-typography-size-xl` | `calc(24 * var(--tui-typography-size-multiplier, calc(1rem / 16)))` | | typography |
| `--tui-typography-size-xs` | `calc(12 * var(--tui-typography-size-multiplier, calc(1rem / 16)))` | | typography |
| `--tui-typography-size-xxl` | `calc(32 * var(--tui-typography-size-multiplier, calc(1rem / 16)))` | | typography |
| `--tui-typography-weight-bold` | `700` | | typography |
| `--tui-typography-weight-medium` | `500` | | typography |
| `--tui-typography-weight-normal` | `400` | | typography |
| `--tui-typography-weight-semibold` | `600` | | typography |

## In practice

Components resolve to these primitives, so overriding one on `.tui-interface`
re-themes everything at once — no per-component work. `SearchInput`'s field
radius falls through `--tui-input-radius` → `--tui-radius-md`, so bumping that
one primitive pills the field (and every other control would follow):

```jsx
<div className="tui-interface" style={{ "--tui-radius-md": "var(--tui-radius-full)", maxWidth: "22rem" }}>
  <SearchInput defaultValue="Foundations" aria-label="Search courses" />
</div>
```

Live example: [interactive page](https://storybook-tangible-ui.pages.dev/?path=/docs/reference-primitive-tokens--docs).

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/reference-primitive-tokens--docs