Tokens

@kittl/ui-tokens holds the design tokens behind every UI kit component — color, spacing, radius, shadow, typography, motion and layering — as CSS custom properties. They come from Figma and are generated into the package, so the values below always match what ships.

Installation

You rarely need this package directly: @kittl/ui and @kittl/ui-react load it for you. Install it when you want your own styles to use the same values as the components.

npm install @kittl/ui-tokens

Either import the stylesheet through your bundler:

import '@kittl/ui-tokens/styles.css';

or inject it at runtime, once, from anywhere in your app:

import '@kittl/ui-tokens/styleLoader';

Usage

Reference tokens with var() in your own CSS:

.panel {
  padding: var(--spacing-16);
  border-radius: var(--border-radius-8);
  background: var(--color-bg-surface);
  color: var(--color-text);
}

Themes

Themed tokens resolve per theme. Light is the default; set data-theme (or a .theme-light / .theme-dark class) on any ancestor to pick one, and everything beneath it — components included — follows:

<body data-theme="dark">
  …
</body>

Prefer the semantic --color-* tokens over the raw --colors-* palette: semantic tokens change with the theme, palette tokens do not.

Semantic colors

Token	Light	Dark
`--color-avatar-blue`	`var(--colors-blue-45)`	`var(--colors-blue-60)`
`--color-avatar-blue-secondary`	`var(--colors-blue-a-30)`	`var(--colors-blue-a-30)`
`--color-bg-fill`	`var(--colors-gray-100)`	`var(--colors-gray-10)`
`--color-bg-fill-active`	`var(--colors-gray-90)`	`var(--colors-gray-20)`
`--color-bg-fill-brand`	`var(--colors-gray-05)`	`var(--colors-gray-95)`
`--color-bg-fill-brand-active`	`var(--colors-gray-30)`	`var(--colors-gray-70)`
`--color-bg-fill-brand-hover`	`var(--colors-gray-20)`	`var(--colors-gray-90)`
`--color-bg-fill-brand-transparent`	`var(--colors-black-a-15)`	`var(--colors-white-a-15)`
`--color-bg-fill-critical`	`var(--colors-red-60)`	`var(--colors-red-60)`
`--color-bg-fill-critical-active`	`var(--colors-red-45)`	`var(--colors-red-85)`
`--color-bg-fill-critical-hover`	`var(--colors-red-45)`	`var(--colors-red-85)`
`--color-bg-fill-disabled`	`var(--colors-gray-95)`	`var(--colors-gray-25)`
`--color-bg-fill-highlight`	`var(--others-aigreen)`	`var(--others-aigreen)`
`--color-bg-fill-hover`	`var(--colors-gray-95)`	`var(--colors-gray-15)`
`--color-bg-fill-info`	`var(--colors-blue-60)`	`var(--colors-blue-45)`
`--color-bg-fill-info-secondary`	`var(--colors-blue-90)`	`var(--colors-blue-35)`
`--color-bg-fill-secondary`	`var(--colors-gray-95)`	`var(--colors-gray-15)`
`--color-bg-fill-secondary-active`	`var(--colors-blue-a-30)`	`var(--colors-blue-a-30)`
`--color-bg-fill-secondary-hover`	`var(--colors-blue-a-30)`	`var(--colors-blue-a-30)`
`--color-bg-fill-selector`	`var(--colors-blue-a-30)`	`var(--colors-blue-a-30)`
`--color-bg-fill-selector-active`	`var(--colors-blue-60)`	`var(--colors-blue-45)`
`--color-bg-fill-selector-hover`	`var(--colors-blue-80)`	`var(--colors-blue-35)`
`--color-bg-fill-success`	`var(--colors-green-55)`	`var(--colors-green-55)`
`--color-bg-fill-tertiary`	`var(--colors-gray-90)`	`var(--colors-gray-30)`
`--color-bg-fill-theme-agnostic-black`	`var(--colors-gray-05)`	`var(--colors-gray-05)`
`--color-bg-fill-theme-agnostic-gray`	`var(--colors-gray-90)`	`var(--colors-gray-90)`
`--color-bg-fill-theme-agnostic-white`	`var(--colors-gray-100)`	`var(--colors-gray-100)`
`--color-bg-fill-transparent`	`var(--colors-white-a-10)`	`var(--colors-black-a-5)`
`--color-bg-fill-transparent-hover`	`var(--colors-white-a-15)`	`var(--colors-black-a-10)`
`--color-bg-surface`	`var(--colors-gray-100)`	`var(--colors-gray-10)`
`--color-bg-surface-contrast`	`var(--colors-gray-100)`	`var(--colors-gray-25)`
`--color-bg-surface-critical`	`var(--colors-red-85)`	`var(--colors-red-30)`
`--color-bg-surface-highlight`	`var(--others-aigreen)`	`var(--others-aigreen)`
`--color-bg-surface-highlight-secondary`	—	`var(--colors-indigo-80)`
`--color-bg-surface-highlight-tertiary`	—	`var(--colors-indigo-95)`
`--color-bg-surface-playful`	`var(--colors-mint-85)`	`var(--colors-mint-85)`
`--color-bg-surface-secondary`	`var(--colors-gray-95)`	`var(--colors-gray-05)`
`--color-bg-surface-theme-agnostic-violet`	`var(--colors-violet-80)`	`var(--colors-violet-80)`
`--color-bg-surface-theme-agnostic-white`	`var(--colors-gray-100)`	`var(--colors-gray-100)`
`--color-bg-surface-transparent`	`var(--colors-black-a-50)`	`var(--colors-white-a-50)`
`--color-border`	`var(--colors-gray-90)`	`var(--colors-gray-20)`
`--color-border-brand`	`var(--colors-gray-05)`	`var(--colors-gray-95)`
`--color-border-critical`	`var(--colors-red-60)`	`var(--colors-red-60)`
`--color-border-focused`	`var(--colors-blue-60)`	`var(--colors-blue-45)`
`--color-border-highlight`	`var(--colors-indigo-35)`	`var(--colors-indigo-43)`
`--color-border-selector`	`var(--colors-blue-60)`	`var(--colors-blue-60)`
`--color-border-selector-hover`	`var(--colors-blue-80)`	`var(--colors-blue-80)`
`--color-border-selector-inner`	`var(--colors-gray-100)`	`var(--colors-gray-15)`
`--color-border-theme-agnostic-gray`	`var(--colors-gray-70)`	`var(--colors-gray-70)`
`--color-border-theme-agnostic-violet`	`var(--colors-violet-60)`	`var(--colors-violet-50)`
`--color-border-theme-agnostic-white`	`var(--colors-gray-100)`	`var(--colors-gray-100)`
`--color-border-transparent`	`var(--colors-black-a-5)`	`var(--colors-white-a-10)`
`--color-border-transparent-brand`	`var(--colors-white-a-15)`	`var(--colors-black-a-15)`
`--color-icon`	`var(--colors-gray-05)`	`var(--colors-gray-95)`
`--color-icon-active`	`var(--colors-blue-45)`	`var(--colors-blue-60)`
`--color-icon-brand-on-bg`	`var(--colors-gray-100)`	`var(--colors-gray-05)`
`--color-icon-critical`	`var(--colors-red-60)`	`var(--colors-red-60)`
`--color-icon-disabled`	`var(--colors-gray-70)`	`var(--colors-gray-55)`
`--color-icon-secondary`	`var(--colors-gray-45)`	`var(--colors-gray-70)`
`--color-icon-tertiary`	`var(--colors-gray-70)`	`var(--colors-gray-45)`
`--color-icon-theme-agnostic-white`	`var(--colors-gray-100)`	`var(--colors-gray-100)`
`--color-text`	`var(--colors-gray-05)`	`var(--colors-gray-95)`
`--color-text-ai`	`var(--others-aigreen)`	`var(--others-aigreen)`
`--color-text-brand-on-bg`	`var(--colors-gray-100)`	`var(--colors-gray-05)`
`--color-text-critical`	`var(--colors-red-60)`	`var(--colors-red-60)`
`--color-text-disabled`	`var(--colors-gray-70)`	`var(--colors-gray-55)`
`--color-text-highlight`	`var(--colors-indigo-35)`	`var(--colors-indigo-43)`
`--color-text-info`	`var(--colors-blue-45)`	`var(--colors-blue-90)`
`--color-text-link`	`var(--colors-blue-45)`	`var(--colors-blue-60)`
`--color-text-secondary`	`var(--colors-gray-45)`	`var(--colors-gray-70)`
`--color-text-secondary-brand-on-bg`	`var(--colors-gray-70)`	`var(--colors-gray-05)`
`--color-text-secondary-disabled`	`var(--colors-gray-75)`	`var(--colors-gray-45)`
`--color-text-tertiary`	`var(--colors-gray-70)`	`var(--colors-gray-55)`
`--color-text-theme-agnostic-black`	`var(--colors-gray-05)`	`var(--colors-gray-05)`
`--color-text-theme-agnostic-white`	`var(--colors-gray-100)`	`var(--colors-gray-100)`

Palette

Token	Value
`--colors-black-a-10`	`#0000001a`
`--colors-black-a-15`	`#00000026`
`--colors-black-a-5`	`#0000000d`
`--colors-black-a-50`	`#00000080`
`--colors-blue-35`	`#0069b2`
`--colors-blue-45`	`#0087e6`
`--colors-blue-60`	`#33aaff`
`--colors-blue-80`	`#99d5ff`
`--colors-blue-90`	`#e0f2ff`
`--colors-blue-a-30`	`#99d5ff4d`
`--colors-gray-05`	`#080b11`
`--colors-gray-10`	`#16181d`
`--colors-gray-100`	`#ffffff`
`--colors-gray-12`	`#1b1e24`
`--colors-gray-15`	`#21252c`
`--colors-gray-20`	`#2c303a`
`--colors-gray-25`	`#373c48`
`--colors-gray-30`	`#444a56`
`--colors-gray-45`	`#676f7e`
`--colors-gray-55`	`#818898`
`--colors-gray-70`	`#a8afbd`
`--colors-gray-75`	`#b8becc`
`--colors-gray-90`	`#e0e4eb`
`--colors-gray-95`	`#f0f2f5`
`--colors-green-55`	`#53c659`
`--colors-indigo-35`	`#3c49dd`
`--colors-indigo-43`	`#4e55fa`
`--colors-indigo-80`	`#8f94f8`
`--colors-indigo-95`	`#e3e4fb`
`--colors-mint-25`	`#134038`
`--colors-mint-40`	`#006655`
`--colors-mint-85`	`#5af2d8`
`--colors-mint-95`	`#b8f9ee`
`--colors-red-30`	`#7c3131`
`--colors-red-45`	`#cf1717`
`--colors-red-60`	`#eb4747`
`--colors-red-85`	`#fdb4b4`
`--colors-red-95`	`#ff57570d`
`--colors-violet-50`	`#9271d9`
`--colors-violet-60`	`#ab84ff`
`--colors-violet-80`	`#dcc5ff`
`--colors-white-a-10`	`#ffffff1a`
`--colors-white-a-15`	`#ffffff26`
`--colors-white-a-5`	`#ffffff0d`
`--colors-white-a-50`	`#ffffff80`
`--colors-white-a-90`	`#ffffffe5`

Presence colors

Token	Value
`--presence-primary-01`	`#8845f5`
`--presence-primary-01-text`	`#ffffff`
`--presence-primary-02`	`#ee3900`
`--presence-primary-02-text`	`#ffffff`
`--presence-primary-03`	`#ffcf24`
`--presence-primary-03-text`	`#080b11`
`--presence-primary-04`	`#40a700`
`--presence-primary-04-text`	`#ffffff`
`--presence-primary-05`	`#e632b4`
`--presence-primary-05-text`	`#ffffff`
`--presence-primary-06`	`#3f5dfb`
`--presence-primary-06-text`	`#ffffff`
`--presence-secondary-01`	`#ceb1fc`
`--presence-secondary-01-text`	`#080b11`
`--presence-secondary-02`	`#66dfe7`
`--presence-secondary-02-text`	`#080b11`
`--presence-secondary-03`	`#bce83d`
`--presence-secondary-03-text`	`#080b11`
`--presence-secondary-04`	`#ff9dbb`
`--presence-secondary-04-text`	`#080b11`
`--presence-secondary-05`	`#ffa800`
`--presence-secondary-05-text`	`#080b11`
`--presence-secondary-06`	`#b7cffe`
`--presence-secondary-06-text`	`#080b11`
`--presence-tertiary-01`	`#80483b`
`--presence-tertiary-01-text`	`#ffffff`
`--presence-tertiary-02`	`#15728f`
`--presence-tertiary-02-text`	`#ffffff`
`--presence-tertiary-03`	`#8b8604`
`--presence-tertiary-03-text`	`#ffffff`
`--presence-tertiary-04`	`#e9c570`
`--presence-tertiary-04-text`	`#080b11`
`--presence-tertiary-05`	`#c3ccd5`
`--presence-tertiary-05-text`	`#080b11`
`--presence-tertiary-06`	`#666666`
`--presence-tertiary-06-text`	`#080b11`

Spacing

Token	Value
`--spacing-0`	`0rem (0px)`
`--spacing-10`	`0.625rem (10px)`
`--spacing-12`	`0.75rem (12px)`
`--spacing-16`	`1rem (16px)`
`--spacing-2`	`0.125rem (2px)`
`--spacing-20`	`1.25rem (20px)`
`--spacing-24`	`1.5rem (24px)`
`--spacing-32`	`2rem (32px)`
`--spacing-36`	`2.25rem (36px)`
`--spacing-4`	`0.25rem (4px)`
`--spacing-40`	`2.5rem (40px)`
`--spacing-48`	`3rem (48px)`
`--spacing-6`	`0.375rem (6px)`
`--spacing-64`	`4rem (64px)`
`--spacing-8`	`0.5rem (8px)`

Border radius

Token	Value
`--border-radius-0`	`0rem (0px)`
`--border-radius-10`	`0.625rem (10px)`
`--border-radius-12`	`0.75rem (12px)`
`--border-radius-2`	`0.125rem (2px)`
`--border-radius-24`	`1.5rem (24px)`
`--border-radius-4`	`0.25rem (4px)`
`--border-radius-6`	`0.375rem (6px)`
`--border-radius-7`	`0.4375rem (7px)`
`--border-radius-8`	`0.5rem (8px)`
`--border-radius-full`	`625rem (10000px)`

Shadows

Token	Light	Dark
`--shadow-l`	`0px 36px 98px rgba(0, 0, 0, 0.17), 0px 13px 36px rgba(0, 0, 0, 0.2), 0px 7px 18px rgba(0, 0, 0, 0.14), 0px 3px 9px rgba(0, 0, 0, 0.12), 0px 1px 4px rgba(0, 0, 0, 0.1217)`	`0px 36px 98px rgba(0, 0, 0, 0.17), 0px 13px 36px rgba(0, 0, 0, 0.2), 0px 7px 18px rgba(0, 0, 0, 0.14), 0px 3px 9px rgba(0, 0, 0, 0.12), 0px 1px 4px rgba(0, 0, 0, 0.1217)`
`--shadow-m`	`0px 36px 98px 0px rgba(0, 0, 0, 0.07), 0px 13px 36px 0px rgba(0, 0, 0, 0.05), 0px 6px 18px 0px rgba(0, 0, 0, 0.04), 0px 3px 8px 0px rgba(0, 0, 0, 0.03), 0px 2px 4px 0px rgba(0, 0, 0, 0.02)`	`0px 36px 98px 0px rgba(0, 0, 0, 0.07), 0px 13px 36px 0px rgba(0, 0, 0, 0.05), 0px 6px 18px 0px rgba(0, 0, 0, 0.04), 0px 3px 8px 0px rgba(0, 0, 0, 0.03), 0px 2px 4px 0px rgba(0, 0, 0, 0.02)`
`--shadow-small-focus`	`0px 2px 2px -1px rgba(0, 0, 0, 0.08)`	`0px 2px 2px -1px rgba(0, 0, 0, 0.08)`
`--shadow-small-heavy`	`1px 1px 3px 0 rgba(0, 0, 0, 0.25)`	`1px 1px 3px 0 rgba(0, 0, 0, 0.25)`
`--shadow-soft`	`0 12px 32px 0 rgba(0, 0, 0, 0.05), 0 6px 15px 0 rgba(0, 0, 0, 0.04), 0 3px 7px 0 rgba(0, 0, 0, 0.03), 0 1px 3px 0 rgba(0, 0, 0, 0.02)`	`var(--shadow-l)`

Drop shadows

Token	Light	Dark
`--drop-shadow-l`	`drop-shadow(0px 36px 98px rgba(0, 0, 0, 0.17)) drop-shadow(0px 13px 36px rgba(0, 0, 0, 0.2)) drop-shadow(0px 7px 18px rgba(0, 0, 0, 0.14)) drop-shadow(0px 3px 9px rgba(0, 0, 0, 0.12)) drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1217))`	`drop-shadow(0px 36px 98px rgba(0, 0, 0, 0.17)) drop-shadow(0px 13px 36px rgba(0, 0, 0, 0.2)) drop-shadow(0px 7px 18px rgba(0, 0, 0, 0.14)) drop-shadow(0px 3px 9px rgba(0, 0, 0, 0.12)) drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1217))`
`--drop-shadow-m`	`drop-shadow(0px 36px 98px 0px rgba(0, 0, 0, 0.07)) drop-shadow(0px 13px 36px 0px rgba(0, 0, 0, 0.05)) drop-shadow(0px 6px 18px 0px rgba(0, 0, 0, 0.04)) drop-shadow(0px 3px 8px 0px rgba(0, 0, 0, 0.03)) drop-shadow(0px 2px 4px 0px rgba(0, 0, 0, 0.02))`	`drop-shadow(0px 36px 98px 0px rgba(0, 0, 0, 0.07)) drop-shadow(0px 13px 36px 0px rgba(0, 0, 0, 0.05)) drop-shadow(0px 6px 18px 0px rgba(0, 0, 0, 0.04)) drop-shadow(0px 3px 8px 0px rgba(0, 0, 0, 0.03)) drop-shadow(0px 2px 4px 0px rgba(0, 0, 0, 0.02))`

Typography

Token	Value
`--font-family-default`	`var(--font-family-inter)`
`--font-family-inter`	`"Inter", -apple-system, blinkmacsystemfont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`
`--font-weight-bold`	`700`
`--font-weight-medium`	`500`
`--font-weight-regular`	`400`
`--font-weight-semi-bold`	`600`

Motion

Token	Value
`--motion-duration-100`	`100ms`
`--motion-duration-200`	`200ms`
`--motion-duration-300`	`300ms`

Layering

Token	Value
`--z-index-default`	`0`
`--z-index-floating-panel`	`10`
`--z-index-global-indicator`	`10000`
`--z-index-negative`	`-1`
`--z-index-overlay`	`100`
`--z-index-pre-overlay`	`99`
`--z-index-s1`	`1`
`--z-index-s2`	`2`
`--z-index-s3`	`3`
`--z-index-s4`	`4`
`--z-index-s5`	`5`
`--z-index-s6`	`6`
`--z-index-s7`	`7`
`--z-index-s8`	`8`
`--z-index-s9`	`9`
`--z-index-toast`	`100000`
`--z-index-tooltip`	`1000`

Legacy colors

Token	Light	Dark
`--legacy-colors-background-alt`	`var(--colors-gray-100)`	`var(--colors-gray-15)`
`--legacy-colors-blue-light`	`var(--colors-blue-a-30)`	`var(--colors-blue-a-30)`
`--legacy-colors-blue-main`	`var(--colors-blue-45)`	`var(--colors-blue-60)`
`--legacy-colors-blue-medium`	`var(--colors-blue-60)`	`var(--colors-blue-45)`
`--legacy-colors-brand-light`	`var(--colors-mint-95)`	`var(--colors-mint-95)`
`--legacy-colors-brand-main`	`var(--colors-mint-85)`	`var(--colors-mint-85)`
`--legacy-colors-green-main`	`var(--colors-green-55)`	`var(--colors-green-55)`
`--legacy-colors-highlight`	`var(--colors-indigo-35)`	`var(--colors-indigo-43)`
`--legacy-colors-ink-light`	`var(--colors-gray-90)`	`var(--colors-gray-25)`
`--legacy-colors-ink-main`	`var(--colors-gray-05)`	`var(--colors-gray-95)`
`--legacy-colors-ink-medium`	`var(--colors-gray-45)`	`var(--colors-gray-70)`
`--legacy-colors-ink-medium-light`	`var(--colors-gray-70)`	`var(--colors-gray-55)`
`--legacy-colors-ink-super-light`	`var(--colors-gray-95)`	`var(--colors-gray-25)`
`--legacy-colors-red-light`	`var(--colors-red-85)`	`var(--colors-red-45)`
`--legacy-colors-red-main`	`var(--colors-red-45)`	`var(--colors-red-85)`
`--legacy-colors-red-medium`	`var(--colors-red-60)`	`var(--colors-red-60)`
`--legacy-colors-red-super-light`	`var(--colors-red-95)`	`var(--colors-red-95)`
`--legacy-colors-transparent-main-10`	`var(--colors-black-a-10)`	`var(--colors-white-a-10)`
`--legacy-colors-transparent-main-15`	`var(--colors-black-a-15)`	`var(--colors-white-a-15)`
`--legacy-colors-transparent-main-5`	`var(--colors-black-a-5)`	`var(--colors-white-a-5)`
`--legacy-colors-violet`	`var(--colors-violet-60)`	`var(--colors-violet-50)`

Other

Token	Light	Dark
`--box-shadow-default`	`var(--shadow-m)`	`var(--shadow-l)`
`--others-aigreen`	`#dfff00`	`#dfff00`
`--others-gradientfull`	`#191b1e`	`#191b1e`
`--others-gradientfullalt`	`#101b2c`	`#101b2c`
`--others-gradienthalf`	`#ffffff00`	`#ffffff00`
`--scrollbar-width-default`	`12px`	`12px`

Installation​

Usage​

Themes​

Semantic colors​

Palette​

Presence colors​

Spacing​

Border radius​

Shadows​

Drop shadows​

Typography​

Motion​

Layering​

Legacy colors​

Other​