# Changelog (/docs/changelog)

## 2026.10.16 [#2026-10-16]

This is the first release of the Kinobi Design System (KDS) docs, with every token from the design team's Figma library:

- **Colour**: [roles](/docs/color#roles) for primary, information, success, warning and danger, and a 50–950 scale for nine colour families
- **Typography**: 27 Lato text styles, in 8 headers, 15 body styles and 4 specials
- **Spacing**: 17 steps from 2 to 64 px, with margin, padding and gap utilities
- **Radius**: 8 sizes, from square corners to fully round
- **Shadow**: 6 elevations, and 3 legacy shadows that match existing screens

The old neutral `black-*` and `white` colours and the `accent-*` colours still work. Each is deprecated, and its deprecation note names the replacement.


# Colour (/docs/color)

## Choosing a colour [#choosing-a-colour]

Choose by role first, then by shade:

1. **Role.** If a semantic token says what the colour is for, use it. When the design team adjusts a role, every screen using it updates.
   - `kds:bg-danger-surface` behind an error message
   - `kds:bg-primary-main` on a primary button
2. **Scale step, when there is no role.** Use a 50–950 step only where no role fits.
   - Neutral, orange and pink have no roles, and sky has only `sky-main`, so their steps are right for greys and accents, such as `kds:text-neutral-700`
   - In a family that has roles, a step like `kds:bg-primary-300` hides why it was chosen, so the next person cannot tell whether to change it
3. **Never a raw value.**
   - No `#0657a9` or `rgb(…)` in a component
   - If no token fits, ask the design team for one

These are working rules until the design team documents colour usage.

## Roles [#roles]

<KdsColorPalette />


# Getting started (/docs)

<DocsAgentPromptCard />

## Load the stylesheet [#load-the-stylesheet]

Each admin app gets the same generated file, `assets/kds/kds.generated.css`. Load it once, globally:

```ts title="nuxt.config.ts"
css: ["~/assets/kds/kds.generated.css"], // [!code highlight]
```

## Use a class [#use-a-class]

Every class starts with `kds:`. Classes read the `--kds-*` variables, so both stay in step.

<DocsExample
  preview={
    <button className="kds:bg-primary-main kds:text-neutral-50 kds:text-button-default kds:px-4 kds:py-2 kds:rounded-sm">
      Save
    </button>
  }
>

```html title="HTML"
<!-- [!code word:kds\:bg-primary-main] -->
<!-- [!code word:kds\:text-neutral-50] -->
<!-- [!code word:kds\:text-button-default] -->
<!-- [!code word:kds\:px-4] -->
<!-- [!code word:kds\:py-2] -->
<!-- [!code word:kds\:rounded-sm] -->
<button class="kds:bg-primary-main kds:text-neutral-50 kds:text-button-default kds:px-4 kds:py-2 kds:rounded-sm">
  Save
</button>
```

</DocsExample>

## Or use a variable [#or-use-a-variable]

When no class fits, read the variable in your own CSS:

<DocsExample
  preview={
    <span className="kds:text-p3 kds:text-neutral-950 inline-flex items-center gap-2">
      <span
        className="kds:rounded-pill inline-block size-3"
        style={{ backgroundColor: "var(--kds-color-success-main)", boxShadow: "var(--kds-shadow-elevation-1)" }}
      />
      Approved
    </span>
  }
>

```css title="CSS"
/* [!code word:var(--kds-color-success-main)] */
/* [!code word:var(--kds-shadow-elevation-1)] */
.status-dot {
  background-color: var(--kds-color-success-main);
  box-shadow: var(--kds-shadow-elevation-1);
}
```

</DocsExample>

## How names map [#how-names-map]

| DS name         | Token                 | CSS variable                | CSS class                |
| --------------- | --------------------- | --------------------------- | ------------------------ |
| Primary / Hover | `color.primary.hover` | `--kds-color-primary-hover` | `kds:bg-primary-hover`   |
| `Header/H6`     | `font.h6`             | `--kds-font-h6`             | `kds:text-h6`            |
| `spacing-4`     | `spacing.4`           | `--kds-spacing-4`           | `kds:mt-4`               |
| `rounded-sm`    | `radius.sm`           | `--kds-radius-sm`           | `kds:rounded-sm`         |
| `elevation-2`   | `shadow.elevation.2`  | `--kds-shadow-elevation-2`  | `kds:shadow-elevation-2` |


# Radius (/docs/radius)

<KdsRadiusScale />


# Shadow (/docs/shadow)

Use `elevation-*` for new screens. `legacy-*` shadows match existing screens and are deprecated.

<KdsShadowScale />


# Spacing (/docs/spacing)

<KdsSpacingScale />


# Typography (/docs/typography)

<KdsTypographyTables />


# KDS token reference



Use these classes and variables instead of raw values. Prefer a current token; a deprecated one names its replacement.



For colour, use a semantic name (color.primary.main, color.danger.surface, color.sky.main) for UI meaning. Use a 50–950 scale step (color.<family>.<step>) only when no semantic name fits; neutral greys have no roles, so use color.neutral.<step> for them. Never use a deprecated token in new code.



Colour roles: primary, information, success, warning and danger each have main (solid fills, coloured text on white), surface (tinted background behind that family's text), border (outline of a surface), hover and pressed (main while hovered or pressed). Only primary has focus (focus ring). Sky has only sky.main; neutral, orange and pink have no roles.



Every colour utility also takes the keywords transparent, current and inherit, such as kds:bg-transparent.



To replace existing code, look up the old value in Also known as: a Vuetify theme colour (for example Vuetify black-80) or a Figma variable or style name maps to the token in that row. radius.pill is fully round.



## font

| Token | Classes | Variable | Value | Usage | Also known as | Status |
| --- | --- | --- | --- | --- | --- | --- |
| `font.family.header` |  | `--kds-font-family-header` | `Lato, sans-serif` | - | Figma font/family/header | current |
| `font.family.body` |  | `--kds-font-family-body` | `Lato, sans-serif` | - | - | current |
| `font.h1` | `kds:text-h1` | `--kds-font-h1` | `700 3rem/1.3 var(--kds-font-family-header)` | Page titles and hero headlines | Figma Header/H1 | current |
| `font.h2` | `kds:text-h2` | `--kds-font-h2` | `700 2rem/1.3 var(--kds-font-family-header)` | Major section headings | Figma Header/H2 | current |
| `font.h3` | `kds:text-h3` | `--kds-font-h3` | `700 1.5rem/1.35 var(--kds-font-family-header)` | Section dividers and content regions | Figma Header/H3 | current |
| `font.h4` | `kds:text-h4` | `--kds-font-h4` | `700 1.25rem/1.4 var(--kds-font-family-header)` | Sub-section and component headings | Figma Header/H4 | current |
| `font.h5` | `kds:text-h5` | `--kds-font-h5` | `700 1rem/1.4 var(--kds-font-family-header)` | Card titles and panel headings | Figma Header/H5 | current |
| `font.h6` | `kds:text-h6` | `--kds-font-h6` | `700 0.875rem/1.4 var(--kds-font-family-header)` | Subheadings and filter group labels | Figma Header/H6 | current |
| `font.h7` | `kds:text-h7` | `--kds-font-h7` | `700 0.75rem/1.4 var(--kds-font-family-header)` | Widget titles and secondary nav headings | Figma Header/H7 | current |
| `font.h8` | `kds:text-h8` | `--kds-font-h8` | `700 0.6875rem/1.4 var(--kds-font-family-header)` | Eyebrows, micro labels, and dense UI | Figma Header/H8 | current |
| `font.p1` | `kds:text-p1` | `--kds-font-p1` | `400 1.25rem/1.4 var(--kds-font-family-body)` | Lead and intro paragraphs | Figma Body/Regular/P1 | current |
| `font.p2` | `kds:text-p2` | `--kds-font-p2` | `400 1rem/1.4 var(--kds-font-family-body)` | Primary body and reading text | Figma Body/Regular/P2 | current |
| `font.p3` | `kds:text-p3` | `--kds-font-p3` | `400 0.875rem/1.4 var(--kds-font-family-body)` | Supporting copy and microcopy | Figma Body/Regular/P3 | current |
| `font.p4` | `kds:text-p4` | `--kds-font-p4` | `400 0.75rem/1.4 var(--kds-font-family-body)` | Captions and helper text | Figma Body/Regular/P4 | current |
| `font.p5` | `kds:text-p5` | `--kds-font-p5` | `400 0.6875rem/1.4 var(--kds-font-family-body)` | Fine print and supplementary labels | Figma Body/Regular/P5 | current |
| `font.i1` | `kds:text-i1` | `--kds-font-i1` | `italic 400 1.25rem/1.4 var(--kds-font-family-body); font-style: italic` | Featured quotes and testimonials | Figma Body/Italic/I1 | current |
| `font.i2` | `kds:text-i2` | `--kds-font-i2` | `italic 400 1rem/1.4 var(--kds-font-family-body); font-style: italic` | Inline emphasis within body text | Figma Body/Italic/I2 | current |
| `font.i3` | `kds:text-i3` | `--kds-font-i3` | `italic 400 0.875rem/1.4 var(--kds-font-family-body); font-style: italic` | Editorial attributions and annotations | Figma Body/Italic/I3 | current |
| `font.i4` | `kds:text-i4` | `--kds-font-i4` | `italic 400 0.75rem/1.4 var(--kds-font-family-body); font-style: italic` | Placeholder text and subtle status labels | Figma Body/Italic/I4 | current |
| `font.i5` | `kds:text-i5` | `--kds-font-i5` | `italic 400 0.6875rem/1.4 var(--kds-font-family-body); font-style: italic` | Inline citations at micro scale | Figma Body/Italic/I5 | current |
| `font.b1` | `kds:text-b1` | `--kds-font-b1` | `700 1.25rem/1.4 var(--kds-font-family-body)` | Emphasized lead text and pricing callouts | Figma Body/Bold/B1 | current |
| `font.b2` | `kds:text-b2` | `--kds-font-b2` | `700 1rem/1.4 var(--kds-font-family-body)` | Key term emphasis within body paragraphs | Figma Body/Bold/B2 | current |
| `font.b3` | `kds:text-b3` | `--kds-font-b3` | `700 0.875rem/1.4 var(--kds-font-family-body)` | Bold inline terms and step labels | Figma Body/Bold/B3 | current |
| `font.b4` | `kds:text-b4` | `--kds-font-b4` | `700 0.75rem/1.4 var(--kds-font-family-body)` | Badge labels and status indicators | Figma Body/Bold/B4 | current |
| `font.b5` | `kds:text-b5` | `--kds-font-b5` | `700 0.6875rem/1.4 var(--kds-font-family-body)` | Bold labels in dense tables and compact UI | Figma Body/Bold/B5 | current |
| `font.all-caps` | `kds:text-all-caps` | `--kds-font-all-caps` | `700 1rem/1.4 var(--kds-font-family-body); letter-spacing: 0.2em; text-transform: uppercase` | Category labels, eyebrows, and status chips | Figma Specials/ALL CAPS | current |
| `font.button.default` | `kds:text-button-default` | `--kds-font-button-default` | `700 0.875rem/1.7 var(--kds-font-family-body); letter-spacing: 0.05em; text-transform: uppercase` | Standard desktop CTA buttons | Figma Specials/Button/Default | current |
| `font.button.mobile` | `kds:text-button-mobile` | `--kds-font-button-mobile` | `700 0.75rem/1.67 var(--kds-font-family-body); letter-spacing: 0.05em; text-transform: uppercase` | Touch-first mobile button labels | Figma Specials/Button/Mobile | current |
| `font.button.navbar` | `kds:text-button-navbar` | `--kds-font-button-navbar` | `700 0.875rem/1.5 var(--kds-font-family-body); letter-spacing: 0.02em; text-transform: capitalize` | Navbar action buttons and header CTAs | Figma Specials/Button/Navbar | current |

## color

| Token | Classes | Variable | Value | Usage | Also known as | Status |
| --- | --- | --- | --- | --- | --- | --- |
| `color.neutral.50` | `kds:bg-neutral-50` `kds:text-neutral-50` `kds:border-neutral-50` `kds:outline-neutral-50` `kds:fill-neutral-50` `kds:stroke-neutral-50` `kds:caret-neutral-50` `kds:accent-neutral-50` `kds:decoration-neutral-50` | `--kds-color-neutral-50` | `#ffffff` | Scale step | Figma Neutral/Black/50 | current |
| `color.neutral.100` | `kds:bg-neutral-100` `kds:text-neutral-100` `kds:border-neutral-100` `kds:outline-neutral-100` `kds:fill-neutral-100` `kds:stroke-neutral-100` `kds:caret-neutral-100` `kds:accent-neutral-100` `kds:decoration-neutral-100` | `--kds-color-neutral-100` | `#f4f4f4` | Scale step | Figma Neutral/Black/100 | current |
| `color.neutral.200` | `kds:bg-neutral-200` `kds:text-neutral-200` `kds:border-neutral-200` `kds:outline-neutral-200` `kds:fill-neutral-200` `kds:stroke-neutral-200` `kds:caret-neutral-200` `kds:accent-neutral-200` `kds:decoration-neutral-200` | `--kds-color-neutral-200` | `#d6d6d6` | Scale step | Figma Neutral/Black/200 | current |
| `color.neutral.300` | `kds:bg-neutral-300` `kds:text-neutral-300` `kds:border-neutral-300` `kds:outline-neutral-300` `kds:fill-neutral-300` `kds:stroke-neutral-300` `kds:caret-neutral-300` `kds:accent-neutral-300` `kds:decoration-neutral-300` | `--kds-color-neutral-300` | `#acacac` | Scale step | Figma Neutral/Black/300 | current |
| `color.neutral.400` | `kds:bg-neutral-400` `kds:text-neutral-400` `kds:border-neutral-400` `kds:outline-neutral-400` `kds:fill-neutral-400` `kds:stroke-neutral-400` `kds:caret-neutral-400` `kds:accent-neutral-400` `kds:decoration-neutral-400` | `--kds-color-neutral-400` | `#9e9e9e` | Scale step | Figma Neutral/Black/400 | current |
| `color.neutral.500` | `kds:bg-neutral-500` `kds:text-neutral-500` `kds:border-neutral-500` `kds:outline-neutral-500` `kds:fill-neutral-500` `kds:stroke-neutral-500` `kds:caret-neutral-500` `kds:accent-neutral-500` `kds:decoration-neutral-500` | `--kds-color-neutral-500` | `#868686` | Scale step | Figma Neutral/Black/500 | current |
| `color.neutral.600` | `kds:bg-neutral-600` `kds:text-neutral-600` `kds:border-neutral-600` `kds:outline-neutral-600` `kds:fill-neutral-600` `kds:stroke-neutral-600` `kds:caret-neutral-600` `kds:accent-neutral-600` `kds:decoration-neutral-600` | `--kds-color-neutral-600` | `#6d6d6d` | Scale step | Figma Neutral/Black/600 | current |
| `color.neutral.700` | `kds:bg-neutral-700` `kds:text-neutral-700` `kds:border-neutral-700` `kds:outline-neutral-700` `kds:fill-neutral-700` `kds:stroke-neutral-700` `kds:caret-neutral-700` `kds:accent-neutral-700` `kds:decoration-neutral-700` | `--kds-color-neutral-700` | `#57595b` | Scale step | Figma Neutral/Black/700 | current |
| `color.neutral.800` | `kds:bg-neutral-800` `kds:text-neutral-800` `kds:border-neutral-800` `kds:outline-neutral-800` `kds:fill-neutral-800` `kds:stroke-neutral-800` `kds:caret-neutral-800` `kds:accent-neutral-800` `kds:decoration-neutral-800` | `--kds-color-neutral-800` | `#3e3e3e` | Scale step | Figma Neutral/Black/800 | current |
| `color.neutral.900` | `kds:bg-neutral-900` `kds:text-neutral-900` `kds:border-neutral-900` `kds:outline-neutral-900` `kds:fill-neutral-900` `kds:stroke-neutral-900` `kds:caret-neutral-900` `kds:accent-neutral-900` `kds:decoration-neutral-900` | `--kds-color-neutral-900` | `#282828` | Scale step | Figma Neutral/Black/900 | current |
| `color.neutral.950` | `kds:bg-neutral-950` `kds:text-neutral-950` `kds:border-neutral-950` `kds:outline-neutral-950` `kds:fill-neutral-950` `kds:stroke-neutral-950` `kds:caret-neutral-950` `kds:accent-neutral-950` `kds:decoration-neutral-950` | `--kds-color-neutral-950` | `#121f2a` | Scale step | Figma Neutral/Black/950 | current |
| `color.neutral.black-100` | `kds:bg-neutral-black-100` `kds:text-neutral-black-100` `kds:border-neutral-black-100` `kds:outline-neutral-black-100` `kds:fill-neutral-black-100` `kds:stroke-neutral-black-100` `kds:caret-neutral-black-100` `kds:accent-neutral-black-100` `kds:decoration-neutral-black-100` | `--kds-color-neutral-black-100` | `#121f2a` | - | Vuetify black-100, Vuetify black | deprecated: Not a role in the design system. Use color.neutral.950. |
| `color.neutral.black-80` | `kds:bg-neutral-black-80` `kds:text-neutral-black-80` `kds:border-neutral-black-80` `kds:outline-neutral-black-80` `kds:fill-neutral-black-80` `kds:stroke-neutral-black-80` `kds:caret-neutral-black-80` `kds:accent-neutral-black-80` `kds:decoration-neutral-black-80` | `--kds-color-neutral-black-80` | `#57595b` | - | Vuetify black-80, Vuetify grey | deprecated: Not a role in the design system. Use color.neutral.700. |
| `color.neutral.black-60` | `kds:bg-neutral-black-60` `kds:text-neutral-black-60` `kds:border-neutral-black-60` `kds:outline-neutral-black-60` `kds:fill-neutral-black-60` `kds:stroke-neutral-black-60` `kds:caret-neutral-black-60` `kds:accent-neutral-black-60` `kds:decoration-neutral-black-60` | `--kds-color-neutral-black-60` | `#acacac` | - | Vuetify black-60, Vuetify light-grey | deprecated: Not a role in the design system. Use color.neutral.300. |
| `color.neutral.black-40` | `kds:bg-neutral-black-40` `kds:text-neutral-black-40` `kds:border-neutral-black-40` `kds:outline-neutral-black-40` `kds:fill-neutral-black-40` `kds:stroke-neutral-black-40` `kds:caret-neutral-black-40` `kds:accent-neutral-black-40` `kds:decoration-neutral-black-40` | `--kds-color-neutral-black-40` | `#d6d6d6` | - | Vuetify black-40 | deprecated: Not a role in the design system. Use color.neutral.200. |
| `color.neutral.black-20` | `kds:bg-neutral-black-20` `kds:text-neutral-black-20` `kds:border-neutral-black-20` `kds:outline-neutral-black-20` `kds:fill-neutral-black-20` `kds:stroke-neutral-black-20` `kds:caret-neutral-black-20` `kds:accent-neutral-black-20` `kds:decoration-neutral-black-20` | `--kds-color-neutral-black-20` | `#f4f4f4` | - | Vuetify black-20, Vuetify grey-surface | deprecated: Not a role in the design system. Use color.neutral.100. |
| `color.neutral.white` | `kds:bg-neutral-white` `kds:text-neutral-white` `kds:border-neutral-white` `kds:outline-neutral-white` `kds:fill-neutral-white` `kds:stroke-neutral-white` `kds:caret-neutral-white` `kds:accent-neutral-white` `kds:decoration-neutral-white` | `--kds-color-neutral-white` | `#ffffff` | - | Vuetify white | deprecated: Not a role in the design system. Use color.neutral.50. |
| `color.primary.50` | `kds:bg-primary-50` `kds:text-primary-50` `kds:border-primary-50` `kds:outline-primary-50` `kds:fill-primary-50` `kds:stroke-primary-50` `kds:caret-primary-50` `kds:accent-primary-50` `kds:decoration-primary-50` | `--kds-color-primary-50` | `#f2f8ff` | Scale step: prefer a semantic name | Figma Primary/Blue/50 | current |
| `color.primary.100` | `kds:bg-primary-100` `kds:text-primary-100` `kds:border-primary-100` `kds:outline-primary-100` `kds:fill-primary-100` `kds:stroke-primary-100` `kds:caret-primary-100` `kds:accent-primary-100` `kds:decoration-primary-100` | `--kds-color-primary-100` | `#e0eefe` | Scale step: prefer a semantic name | Figma Primary/Blue/100 | current |
| `color.primary.200` | `kds:bg-primary-200` `kds:text-primary-200` `kds:border-primary-200` `kds:outline-primary-200` `kds:fill-primary-200` `kds:stroke-primary-200` `kds:caret-primary-200` `kds:accent-primary-200` `kds:decoration-primary-200` | `--kds-color-primary-200` | `#bbdcfc` | Scale step: prefer a semantic name | Figma Primary/Blue/200 | current |
| `color.primary.300` | `kds:bg-primary-300` `kds:text-primary-300` `kds:border-primary-300` `kds:outline-primary-300` `kds:fill-primary-300` `kds:stroke-primary-300` `kds:caret-primary-300` `kds:accent-primary-300` `kds:decoration-primary-300` | `--kds-color-primary-300` | `#8db3d9` | Scale step: prefer a semantic name | Figma Primary/Blue/300 | current |
| `color.primary.400` | `kds:bg-primary-400` `kds:text-primary-400` `kds:border-primary-400` `kds:outline-primary-400` `kds:fill-primary-400` `kds:stroke-primary-400` `kds:caret-primary-400` `kds:accent-primary-400` `kds:decoration-primary-400` | `--kds-color-primary-400` | `#3ba0f5` | Scale step: prefer a semantic name | Figma Primary/Blue/400 | current |
| `color.primary.500` | `kds:bg-primary-500` `kds:text-primary-500` `kds:border-primary-500` `kds:outline-primary-500` `kds:fill-primary-500` `kds:stroke-primary-500` `kds:caret-primary-500` `kds:accent-primary-500` `kds:decoration-primary-500` | `--kds-color-primary-500` | `#1284e5` | Scale step: prefer a semantic name | Figma Primary/Blue/500 | current |
| `color.primary.600` | `kds:bg-primary-600` `kds:text-primary-600` `kds:border-primary-600` `kds:outline-primary-600` `kds:fill-primary-600` `kds:stroke-primary-600` `kds:caret-primary-600` `kds:accent-primary-600` `kds:decoration-primary-600` | `--kds-color-primary-600` | `#0567c4` | Scale step: prefer a semantic name | Figma Primary/Blue/600 | current |
| `color.primary.700` | `kds:bg-primary-700` `kds:text-primary-700` `kds:border-primary-700` `kds:outline-primary-700` `kds:fill-primary-700` `kds:stroke-primary-700` `kds:caret-primary-700` `kds:accent-primary-700` `kds:decoration-primary-700` | `--kds-color-primary-700` | `#0657a9` | Scale step: prefer a semantic name | Figma Primary/Blue/700 | current |
| `color.primary.800` | `kds:bg-primary-800` `kds:text-primary-800` `kds:border-primary-800` `kds:outline-primary-800` `kds:fill-primary-800` `kds:stroke-primary-800` `kds:caret-primary-800` `kds:accent-primary-800` `kds:decoration-primary-800` | `--kds-color-primary-800` | `#05498f` | Scale step: prefer a semantic name | Figma Primary/Blue/800 | current |
| `color.primary.900` | `kds:bg-primary-900` `kds:text-primary-900` `kds:border-primary-900` `kds:outline-primary-900` `kds:fill-primary-900` `kds:stroke-primary-900` `kds:caret-primary-900` `kds:accent-primary-900` `kds:decoration-primary-900` | `--kds-color-primary-900` | `#0a3766` | Scale step: prefer a semantic name | Figma Primary/Blue/900 | current |
| `color.primary.950` | `kds:bg-primary-950` `kds:text-primary-950` `kds:border-primary-950` `kds:outline-primary-950` `kds:fill-primary-950` `kds:stroke-primary-950` `kds:caret-primary-950` `kds:accent-primary-950` `kds:decoration-primary-950` | `--kds-color-primary-950` | `#092548` | Scale step: prefer a semantic name | Figma Primary/Blue/950 | current |
| `color.primary.800-a40` | `kds:bg-primary-800-a40` `kds:text-primary-800-a40` `kds:border-primary-800-a40` `kds:outline-primary-800-a40` `kds:fill-primary-800-a40` `kds:stroke-primary-800-a40` `kds:caret-primary-800-a40` `kds:accent-primary-800-a40` `kds:decoration-primary-800-a40` | `--kds-color-primary-800-a40` | `rgb(5 73 143 / 0.4)` | Scale step: prefer a semantic name | Figma Primary/Blue/800/40 | current |
| `color.primary.main` | `kds:bg-primary-main` `kds:text-primary-main` `kds:border-primary-main` `kds:outline-primary-main` `kds:fill-primary-main` `kds:stroke-primary-main` `kds:caret-primary-main` `kds:accent-primary-main` `kds:decoration-primary-main` | `--kds-color-primary-main` | `#0657a9` | - | Vuetify primary | current |
| `color.primary.surface` | `kds:bg-primary-surface` `kds:text-primary-surface` `kds:border-primary-surface` `kds:outline-primary-surface` `kds:fill-primary-surface` `kds:stroke-primary-surface` `kds:caret-primary-surface` `kds:accent-primary-surface` `kds:decoration-primary-surface` | `--kds-color-primary-surface` | `#f2f8ff` | - | Vuetify primary-surface | current |
| `color.primary.border` | `kds:bg-primary-border` `kds:text-primary-border` `kds:border-primary-border` `kds:outline-primary-border` `kds:fill-primary-border` `kds:stroke-primary-border` `kds:caret-primary-border` `kds:accent-primary-border` `kds:decoration-primary-border` | `--kds-color-primary-border` | `#8db3d9` | - | Vuetify primary-border | current |
| `color.primary.hover` | `kds:bg-primary-hover` `kds:text-primary-hover` `kds:border-primary-hover` `kds:outline-primary-hover` `kds:fill-primary-hover` `kds:stroke-primary-hover` `kds:caret-primary-hover` `kds:accent-primary-hover` `kds:decoration-primary-hover` | `--kds-color-primary-hover` | `#05498f` | - | Vuetify primary-hover | current |
| `color.primary.pressed` | `kds:bg-primary-pressed` `kds:text-primary-pressed` `kds:border-primary-pressed` `kds:outline-primary-pressed` `kds:fill-primary-pressed` `kds:stroke-primary-pressed` `kds:caret-primary-pressed` `kds:accent-primary-pressed` `kds:decoration-primary-pressed` | `--kds-color-primary-pressed` | `#0a3766` | - | Vuetify primary-pressed | current |
| `color.primary.focus` | `kds:bg-primary-focus` `kds:text-primary-focus` `kds:border-primary-focus` `kds:outline-primary-focus` `kds:fill-primary-focus` `kds:stroke-primary-focus` `kds:caret-primary-focus` `kds:accent-primary-focus` `kds:decoration-primary-focus` | `--kds-color-primary-focus` | `rgb(5 73 143 / 0.4)` | - | Vuetify primary-focus | current |
| `color.information.50` | `kds:bg-information-50` `kds:text-information-50` `kds:border-information-50` `kds:outline-information-50` `kds:fill-information-50` `kds:stroke-information-50` `kds:caret-information-50` `kds:accent-information-50` `kds:decoration-information-50` | `--kds-color-information-50` | `#f3f2ff` | Scale step: prefer a semantic name | Figma Semantic/Information/Purple/50 | current |
| `color.information.100` | `kds:bg-information-100` `kds:text-information-100` `kds:border-information-100` `kds:outline-information-100` `kds:fill-information-100` `kds:stroke-information-100` `kds:caret-information-100` `kds:accent-information-100` `kds:decoration-information-100` | `--kds-color-information-100` | `#dde0ff` | Scale step: prefer a semantic name | Figma Semantic/Information/Purple/100 | current |
| `color.information.200` | `kds:bg-information-200` `kds:text-information-200` `kds:border-information-200` `kds:outline-information-200` `kds:fill-information-200` `kds:stroke-information-200` `kds:caret-information-200` `kds:accent-information-200` `kds:decoration-information-200` | `--kds-color-information-200` | `#cdc8ff` | Scale step: prefer a semantic name | Figma Semantic/Information/Purple/200 | current |
| `color.information.300` | `kds:bg-information-300` `kds:text-information-300` `kds:border-information-300` `kds:outline-information-300` `kds:fill-information-300` `kds:stroke-information-300` `kds:caret-information-300` `kds:accent-information-300` `kds:decoration-information-300` | `--kds-color-information-300` | `#9ca1ff` | Scale step: prefer a semantic name | Figma Semantic/Information/Purple/300 | current |
| `color.information.400` | `kds:bg-information-400` `kds:text-information-400` `kds:border-information-400` `kds:outline-information-400` `kds:fill-information-400` `kds:stroke-information-400` `kds:caret-information-400` `kds:accent-information-400` `kds:decoration-information-400` | `--kds-color-information-400` | `#7975ff` | Scale step: prefer a semantic name | Figma Semantic/Information/Purple/400 | current |
| `color.information.500` | `kds:bg-information-500` `kds:text-information-500` `kds:border-information-500` `kds:outline-information-500` `kds:fill-information-500` `kds:stroke-information-500` `kds:caret-information-500` `kds:accent-information-500` `kds:decoration-information-500` | `--kds-color-information-500` | `#6a59ff` | Scale step: prefer a semantic name | Figma Semantic/Information/Purple/500 | current |
| `color.information.600` | `kds:bg-information-600` `kds:text-information-600` `kds:border-information-600` `kds:outline-information-600` `kds:fill-information-600` `kds:stroke-information-600` `kds:caret-information-600` `kds:accent-information-600` `kds:decoration-information-600` | `--kds-color-information-600` | `#584ad4` | Scale step: prefer a semantic name | Figma Semantic/Information/Purple/600 | current |
| `color.information.700` | `kds:bg-information-700` `kds:text-information-700` `kds:border-information-700` `kds:outline-information-700` `kds:fill-information-700` `kds:stroke-information-700` `kds:caret-information-700` `kds:accent-information-700` `kds:decoration-information-700` | `--kds-color-information-700` | `#4d2ad8` | Scale step: prefer a semantic name | Figma Semantic/Information/Purple/700 | current |
| `color.information.800` | `kds:bg-information-800` `kds:text-information-800` `kds:border-information-800` `kds:outline-information-800` `kds:fill-information-800` `kds:stroke-information-800` `kds:caret-information-800` `kds:accent-information-800` `kds:decoration-information-800` | `--kds-color-information-800` | `#3e25ae` | Scale step: prefer a semantic name | Figma Semantic/Information/Purple/800 | current |
| `color.information.900` | `kds:bg-information-900` `kds:text-information-900` `kds:border-information-900` `kds:outline-information-900` `kds:fill-information-900` `kds:stroke-information-900` `kds:caret-information-900` `kds:accent-information-900` `kds:decoration-information-900` | `--kds-color-information-900` | `#352c7f` | Scale step: prefer a semantic name | Figma Semantic/Information/Purple/900 | current |
| `color.information.950` | `kds:bg-information-950` `kds:text-information-950` `kds:border-information-950` `kds:outline-information-950` `kds:fill-information-950` `kds:stroke-information-950` `kds:caret-information-950` `kds:accent-information-950` `kds:decoration-information-950` | `--kds-color-information-950` | `#211650` | Scale step: prefer a semantic name | Figma Semantic/Information/Purple/950 | current |
| `color.information.main` | `kds:bg-information-main` `kds:text-information-main` `kds:border-information-main` `kds:outline-information-main` `kds:fill-information-main` `kds:stroke-information-main` `kds:caret-information-main` `kds:accent-information-main` `kds:decoration-information-main` | `--kds-color-information-main` | `#6a59ff` | - | Vuetify information, Vuetify info | current |
| `color.information.surface` | `kds:bg-information-surface` `kds:text-information-surface` `kds:border-information-surface` `kds:outline-information-surface` `kds:fill-information-surface` `kds:stroke-information-surface` `kds:caret-information-surface` `kds:accent-information-surface` `kds:decoration-information-surface` | `--kds-color-information-surface` | `#f3f2ff` | - | Vuetify information-surface | current |
| `color.information.border` | `kds:bg-information-border` `kds:text-information-border` `kds:border-information-border` `kds:outline-information-border` `kds:fill-information-border` `kds:stroke-information-border` `kds:caret-information-border` `kds:accent-information-border` `kds:decoration-information-border` | `--kds-color-information-border` | `#cdc8ff` | - | Vuetify information-border | current |
| `color.information.hover` | `kds:bg-information-hover` `kds:text-information-hover` `kds:border-information-hover` `kds:outline-information-hover` `kds:fill-information-hover` `kds:stroke-information-hover` `kds:caret-information-hover` `kds:accent-information-hover` `kds:decoration-information-hover` | `--kds-color-information-hover` | `#584ad4` | - | Vuetify information-hover | current |
| `color.information.pressed` | `kds:bg-information-pressed` `kds:text-information-pressed` `kds:border-information-pressed` `kds:outline-information-pressed` `kds:fill-information-pressed` `kds:stroke-information-pressed` `kds:caret-information-pressed` `kds:accent-information-pressed` `kds:decoration-information-pressed` | `--kds-color-information-pressed` | `#352c7f` | - | Vuetify information-pressed | current |
| `color.success.50` | `kds:bg-success-50` `kds:text-success-50` `kds:border-success-50` `kds:outline-success-50` `kds:fill-success-50` `kds:stroke-success-50` `kds:caret-success-50` `kds:accent-success-50` `kds:decoration-success-50` | `--kds-color-success-50` | `#f2fff9` | Scale step: prefer a semantic name | Figma Semantic/Success/Green/50 | current |
| `color.success.100` | `kds:bg-success-100` `kds:text-success-100` `kds:border-success-100` `kds:outline-success-100` `kds:fill-success-100` `kds:stroke-success-100` `kds:caret-success-100` `kds:accent-success-100` `kds:decoration-success-100` | `--kds-color-success-100` | `#d9f1df` | Scale step: prefer a semantic name | Figma Semantic/Success/Green/100 | current |
| `color.success.200` | `kds:bg-success-200` `kds:text-success-200` `kds:border-success-200` `kds:outline-success-200` `kds:fill-success-200` `kds:stroke-success-200` `kds:caret-success-200` `kds:accent-success-200` `kds:decoration-success-200` | `--kds-color-success-200` | `#ace2c7` | Scale step: prefer a semantic name | Figma Semantic/Success/Green/200 | current |
| `color.success.300` | `kds:bg-success-300` `kds:text-success-300` `kds:border-success-300` `kds:outline-success-300` `kds:fill-success-300` `kds:stroke-success-300` `kds:caret-success-300` `kds:accent-success-300` `kds:decoration-success-300` | `--kds-color-success-300` | `#82d99d` | Scale step: prefer a semantic name | Figma Semantic/Success/Green/300 | current |
| `color.success.400` | `kds:bg-success-400` `kds:text-success-400` `kds:border-success-400` `kds:outline-success-400` `kds:fill-success-400` `kds:stroke-success-400` `kds:caret-success-400` `kds:accent-success-400` `kds:decoration-success-400` | `--kds-color-success-400` | `#64ca86` | Scale step: prefer a semantic name | Figma Semantic/Success/Green/400 | current |
| `color.success.500` | `kds:bg-success-500` `kds:text-success-500` `kds:border-success-500` `kds:outline-success-500` `kds:fill-success-500` `kds:stroke-success-500` `kds:caret-success-500` `kds:accent-success-500` `kds:decoration-success-500` | `--kds-color-success-500` | `#46b870` | Scale step: prefer a semantic name | Figma Semantic/Success/Green/500 | current |
| `color.success.600` | `kds:bg-success-600` `kds:text-success-600` `kds:border-success-600` `kds:outline-success-600` `kds:fill-success-600` `kds:stroke-success-600` `kds:caret-success-600` `kds:accent-success-600` `kds:decoration-success-600` | `--kds-color-success-600` | `#06a958` | Scale step: prefer a semantic name | Figma Semantic/Success/Green/600 | current |
| `color.success.700` | `kds:bg-success-700` `kds:text-success-700` `kds:border-success-700` `kds:outline-success-700` `kds:fill-success-700` `kds:stroke-success-700` `kds:caret-success-700` `kds:accent-success-700` `kds:decoration-success-700` | `--kds-color-success-700` | `#058d49` | Scale step: prefer a semantic name | Figma Semantic/Success/Green/700 | current |
| `color.success.800` | `kds:bg-success-800` `kds:text-success-800` `kds:border-success-800` `kds:outline-success-800` `kds:fill-success-800` `kds:stroke-success-800` `kds:caret-success-800` `kds:accent-success-800` `kds:decoration-success-800` | `--kds-color-success-800` | `#03542c` | Scale step: prefer a semantic name | Figma Semantic/Success/Green/800 | current |
| `color.success.900` | `kds:bg-success-900` `kds:text-success-900` `kds:border-success-900` `kds:outline-success-900` `kds:fill-success-900` `kds:stroke-success-900` `kds:caret-success-900` `kds:accent-success-900` `kds:decoration-success-900` | `--kds-color-success-900` | `#152a1c` | Scale step: prefer a semantic name | Figma Semantic/Success/Green/900 | current |
| `color.success.950` | `kds:bg-success-950` `kds:text-success-950` `kds:border-success-950` `kds:outline-success-950` `kds:fill-success-950` `kds:stroke-success-950` `kds:caret-success-950` `kds:accent-success-950` `kds:decoration-success-950` | `--kds-color-success-950` | `#0f1a12` | Scale step: prefer a semantic name | Figma Semantic/Success/Green/950 | current |
| `color.success.main` | `kds:bg-success-main` `kds:text-success-main` `kds:border-success-main` `kds:outline-success-main` `kds:fill-success-main` `kds:stroke-success-main` `kds:caret-success-main` `kds:accent-success-main` `kds:decoration-success-main` | `--kds-color-success-main` | `#06a958` | - | Vuetify success | current |
| `color.success.surface` | `kds:bg-success-surface` `kds:text-success-surface` `kds:border-success-surface` `kds:outline-success-surface` `kds:fill-success-surface` `kds:stroke-success-surface` `kds:caret-success-surface` `kds:accent-success-surface` `kds:decoration-success-surface` | `--kds-color-success-surface` | `#f2fff9` | - | Vuetify success-surface | current |
| `color.success.border` | `kds:bg-success-border` `kds:text-success-border` `kds:border-success-border` `kds:outline-success-border` `kds:fill-success-border` `kds:stroke-success-border` `kds:caret-success-border` `kds:accent-success-border` `kds:decoration-success-border` | `--kds-color-success-border` | `#ace2c7` | - | Vuetify success-border | current |
| `color.success.hover` | `kds:bg-success-hover` `kds:text-success-hover` `kds:border-success-hover` `kds:outline-success-hover` `kds:fill-success-hover` `kds:stroke-success-hover` `kds:caret-success-hover` `kds:accent-success-hover` `kds:decoration-success-hover` | `--kds-color-success-hover` | `#058d49` | - | Vuetify success-hover, Vuetify green | current |
| `color.success.pressed` | `kds:bg-success-pressed` `kds:text-success-pressed` `kds:border-success-pressed` `kds:outline-success-pressed` `kds:fill-success-pressed` `kds:stroke-success-pressed` `kds:caret-success-pressed` `kds:accent-success-pressed` `kds:decoration-success-pressed` | `--kds-color-success-pressed` | `#03542c` | - | Vuetify success-pressed | current |
| `color.warning.50` | `kds:bg-warning-50` `kds:text-warning-50` `kds:border-warning-50` `kds:outline-warning-50` `kds:fill-warning-50` `kds:stroke-warning-50` `kds:caret-warning-50` `kds:accent-warning-50` `kds:decoration-warning-50` | `--kds-color-warning-50` | `#fff8f2` | Scale step: prefer a semantic name | Figma Semantic/Warning/Yellow/50 | current |
| `color.warning.100` | `kds:bg-warning-100` `kds:text-warning-100` `kds:border-warning-100` `kds:outline-warning-100` `kds:fill-warning-100` `kds:stroke-warning-100` `kds:caret-warning-100` `kds:accent-warning-100` `kds:decoration-warning-100` | `--kds-color-warning-100` | `#fff7e0` | Scale step: prefer a semantic name | Figma Semantic/Warning/Yellow/100 | current |
| `color.warning.200` | `kds:bg-warning-200` `kds:text-warning-200` `kds:border-warning-200` `kds:outline-warning-200` `kds:fill-warning-200` `kds:stroke-warning-200` `kds:caret-warning-200` `kds:accent-warning-200` `kds:decoration-warning-200` | `--kds-color-warning-200` | `#ffe7aa` | Scale step: prefer a semantic name | Figma Semantic/Warning/Yellow/200 | current |
| `color.warning.300` | `kds:bg-warning-300` `kds:text-warning-300` `kds:border-warning-300` `kds:outline-warning-300` `kds:fill-warning-300` `kds:stroke-warning-300` `kds:caret-warning-300` `kds:accent-warning-300` `kds:decoration-warning-300` | `--kds-color-warning-300` | `#ffd39a` | Scale step: prefer a semantic name | Figma Semantic/Warning/Yellow/300 | current |
| `color.warning.400` | `kds:bg-warning-400` `kds:text-warning-400` `kds:border-warning-400` `kds:outline-warning-400` `kds:fill-warning-400` `kds:stroke-warning-400` `kds:caret-warning-400` `kds:accent-warning-400` `kds:decoration-warning-400` | `--kds-color-warning-400` | `#ffc56c` | Scale step: prefer a semantic name | Figma Semantic/Warning/Yellow/400 | current |
| `color.warning.500` | `kds:bg-warning-500` `kds:text-warning-500` `kds:border-warning-500` `kds:outline-warning-500` `kds:fill-warning-500` `kds:stroke-warning-500` `kds:caret-warning-500` `kds:accent-warning-500` `kds:decoration-warning-500` | `--kds-color-warning-500` | `#fab403` | Scale step: prefer a semantic name | Figma Semantic/Warning/Yellow/500 | current |
| `color.warning.600` | `kds:bg-warning-600` `kds:text-warning-600` `kds:border-warning-600` `kds:outline-warning-600` `kds:fill-warning-600` `kds:stroke-warning-600` `kds:caret-warning-600` `kds:accent-warning-600` `kds:decoration-warning-600` | `--kds-color-warning-600` | `#ecaa00` | Scale step: prefer a semantic name | Figma Semantic/Warning/Yellow/600 | current |
| `color.warning.700` | `kds:bg-warning-700` `kds:text-warning-700` `kds:border-warning-700` `kds:outline-warning-700` `kds:fill-warning-700` `kds:stroke-warning-700` `kds:caret-warning-700` `kds:accent-warning-700` `kds:decoration-warning-700` | `--kds-color-warning-700` | `#c18c00` | Scale step: prefer a semantic name | Figma Semantic/Warning/Yellow/700 | current |
| `color.warning.800` | `kds:bg-warning-800` `kds:text-warning-800` `kds:border-warning-800` `kds:outline-warning-800` `kds:fill-warning-800` `kds:stroke-warning-800` `kds:caret-warning-800` `kds:accent-warning-800` `kds:decoration-warning-800` | `--kds-color-warning-800` | `#7f5c00` | Scale step: prefer a semantic name | Figma Semantic/Warning/Yellow/800 | current |
| `color.warning.900` | `kds:bg-warning-900` `kds:text-warning-900` `kds:border-warning-900` `kds:outline-warning-900` `kds:fill-warning-900` `kds:stroke-warning-900` `kds:caret-warning-900` `kds:accent-warning-900` `kds:decoration-warning-900` | `--kds-color-warning-900` | `#3c2900` | Scale step: prefer a semantic name | Figma Semantic/Warning/Yellow/900 | current |
| `color.warning.950` | `kds:bg-warning-950` `kds:text-warning-950` `kds:border-warning-950` `kds:outline-warning-950` `kds:fill-warning-950` `kds:stroke-warning-950` `kds:caret-warning-950` `kds:accent-warning-950` `kds:decoration-warning-950` | `--kds-color-warning-950` | `#241700` | Scale step: prefer a semantic name | Figma Semantic/Warning/Yellow/950 | current |
| `color.warning.main` | `kds:bg-warning-main` `kds:text-warning-main` `kds:border-warning-main` `kds:outline-warning-main` `kds:fill-warning-main` `kds:stroke-warning-main` `kds:caret-warning-main` `kds:accent-warning-main` `kds:decoration-warning-main` | `--kds-color-warning-main` | `#ecaa00` | - | Vuetify warning | current |
| `color.warning.surface` | `kds:bg-warning-surface` `kds:text-warning-surface` `kds:border-warning-surface` `kds:outline-warning-surface` `kds:fill-warning-surface` `kds:stroke-warning-surface` `kds:caret-warning-surface` `kds:accent-warning-surface` `kds:decoration-warning-surface` | `--kds-color-warning-surface` | `#fff7e0` | - | Vuetify warning-surface | current |
| `color.warning.border` | `kds:bg-warning-border` `kds:text-warning-border` `kds:border-warning-border` `kds:outline-warning-border` `kds:fill-warning-border` `kds:stroke-warning-border` `kds:caret-warning-border` `kds:accent-warning-border` `kds:decoration-warning-border` | `--kds-color-warning-border` | `#ffe7aa` | - | Vuetify warning-border | current |
| `color.warning.hover` | `kds:bg-warning-hover` `kds:text-warning-hover` `kds:border-warning-hover` `kds:outline-warning-hover` `kds:fill-warning-hover` `kds:stroke-warning-hover` `kds:caret-warning-hover` `kds:accent-warning-hover` `kds:decoration-warning-hover` | `--kds-color-warning-hover` | `#c18c00` | - | Vuetify warning-hover | current |
| `color.warning.pressed` | `kds:bg-warning-pressed` `kds:text-warning-pressed` `kds:border-warning-pressed` `kds:outline-warning-pressed` `kds:fill-warning-pressed` `kds:stroke-warning-pressed` `kds:caret-warning-pressed` `kds:accent-warning-pressed` `kds:decoration-warning-pressed` | `--kds-color-warning-pressed` | `#7f5c00` | - | Vuetify warning-pressed | current |
| `color.danger.50` | `kds:bg-danger-50` `kds:text-danger-50` `kds:border-danger-50` `kds:outline-danger-50` `kds:fill-danger-50` `kds:stroke-danger-50` `kds:caret-danger-50` `kds:accent-danger-50` `kds:decoration-danger-50` | `--kds-color-danger-50` | `#fff4f2` | Scale step: prefer a semantic name | Figma Semantic/Danger/Red/50 | current |
| `color.danger.100` | `kds:bg-danger-100` `kds:text-danger-100` `kds:border-danger-100` `kds:outline-danger-100` `kds:fill-danger-100` `kds:stroke-danger-100` `kds:caret-danger-100` `kds:accent-danger-100` `kds:decoration-danger-100` | `--kds-color-danger-100` | `#fadfdf` | Scale step: prefer a semantic name | Figma Semantic/Danger/Red/100 | current |
| `color.danger.200` | `kds:bg-danger-200` `kds:text-danger-200` `kds:border-danger-200` `kds:outline-danger-200` `kds:fill-danger-200` `kds:stroke-danger-200` `kds:caret-danger-200` `kds:accent-danger-200` `kds:decoration-danger-200` | `--kds-color-danger-200` | `#eeb4b0` | Scale step: prefer a semantic name | Figma Semantic/Danger/Red/200 | current |
| `color.danger.300` | `kds:bg-danger-300` `kds:text-danger-300` `kds:border-danger-300` `kds:outline-danger-300` `kds:fill-danger-300` `kds:stroke-danger-300` `kds:caret-danger-300` `kds:accent-danger-300` `kds:decoration-danger-300` | `--kds-color-danger-300` | `#f29d9a` | Scale step: prefer a semantic name | Figma Semantic/Danger/Red/300 | current |
| `color.danger.400` | `kds:bg-danger-400` `kds:text-danger-400` `kds:border-danger-400` `kds:outline-danger-400` `kds:fill-danger-400` `kds:stroke-danger-400` `kds:caret-danger-400` `kds:accent-danger-400` `kds:decoration-danger-400` | `--kds-color-danger-400` | `#f07b77` | Scale step: prefer a semantic name | Figma Semantic/Danger/Red/400 | current |
| `color.danger.500` | `kds:bg-danger-500` `kds:text-danger-500` `kds:border-danger-500` `kds:outline-danger-500` `kds:fill-danger-500` `kds:stroke-danger-500` `kds:caret-danger-500` `kds:accent-danger-500` `kds:decoration-danger-500` | `--kds-color-danger-500` | `#ee4d45` | Scale step: prefer a semantic name | Figma Semantic/Danger/Red/500 | current |
| `color.danger.600` | `kds:bg-danger-600` `kds:text-danger-600` `kds:border-danger-600` `kds:outline-danger-600` `kds:fill-danger-600` `kds:stroke-danger-600` `kds:caret-danger-600` `kds:accent-danger-600` `kds:decoration-danger-600` | `--kds-color-danger-600` | `#cb3a31` | Scale step: prefer a semantic name | Figma Semantic/Danger/Red/600 | current |
| `color.danger.700` | `kds:bg-danger-700` `kds:text-danger-700` `kds:border-danger-700` `kds:outline-danger-700` `kds:fill-danger-700` `kds:stroke-danger-700` `kds:caret-danger-700` `kds:accent-danger-700` `kds:decoration-danger-700` | `--kds-color-danger-700` | `#bd251c` | Scale step: prefer a semantic name | Figma Semantic/Danger/Red/700 | current |
| `color.danger.800` | `kds:bg-danger-800` `kds:text-danger-800` `kds:border-danger-800` `kds:outline-danger-800` `kds:fill-danger-800` `kds:stroke-danger-800` `kds:caret-danger-800` `kds:accent-danger-800` `kds:decoration-danger-800` | `--kds-color-danger-800` | `#731912` | Scale step: prefer a semantic name | Figma Semantic/Danger/Red/800 | current |
| `color.danger.900` | `kds:bg-danger-900` `kds:text-danger-900` `kds:border-danger-900` `kds:outline-danger-900` `kds:fill-danger-900` `kds:stroke-danger-900` `kds:caret-danger-900` `kds:accent-danger-900` `kds:decoration-danger-900` | `--kds-color-danger-900` | `#410c09` | Scale step: prefer a semantic name | Figma Semantic/Danger/Red/900 | current |
| `color.danger.950` | `kds:bg-danger-950` `kds:text-danger-950` `kds:border-danger-950` `kds:outline-danger-950` `kds:fill-danger-950` `kds:stroke-danger-950` `kds:caret-danger-950` `kds:accent-danger-950` `kds:decoration-danger-950` | `--kds-color-danger-950` | `#2c0604` | Scale step: prefer a semantic name | Figma Semantic/Danger/Red/950 | current |
| `color.danger.main` | `kds:bg-danger-main` `kds:text-danger-main` `kds:border-danger-main` `kds:outline-danger-main` `kds:fill-danger-main` `kds:stroke-danger-main` `kds:caret-danger-main` `kds:accent-danger-main` `kds:decoration-danger-main` | `--kds-color-danger-main` | `#cb3a31` | - | Vuetify danger | current |
| `color.danger.surface` | `kds:bg-danger-surface` `kds:text-danger-surface` `kds:border-danger-surface` `kds:outline-danger-surface` `kds:fill-danger-surface` `kds:stroke-danger-surface` `kds:caret-danger-surface` `kds:accent-danger-surface` `kds:decoration-danger-surface` | `--kds-color-danger-surface` | `#fff4f2` | - | Vuetify danger-surface | current |
| `color.danger.border` | `kds:bg-danger-border` `kds:text-danger-border` `kds:border-danger-border` `kds:outline-danger-border` `kds:fill-danger-border` `kds:stroke-danger-border` `kds:caret-danger-border` `kds:accent-danger-border` `kds:decoration-danger-border` | `--kds-color-danger-border` | `#eeb4b0` | - | Vuetify danger-border | current |
| `color.danger.hover` | `kds:bg-danger-hover` `kds:text-danger-hover` `kds:border-danger-hover` `kds:outline-danger-hover` `kds:fill-danger-hover` `kds:stroke-danger-hover` `kds:caret-danger-hover` `kds:accent-danger-hover` `kds:decoration-danger-hover` | `--kds-color-danger-hover` | `#bd251c` | - | Vuetify danger-hover | current |
| `color.danger.pressed` | `kds:bg-danger-pressed` `kds:text-danger-pressed` `kds:border-danger-pressed` `kds:outline-danger-pressed` `kds:fill-danger-pressed` `kds:stroke-danger-pressed` `kds:caret-danger-pressed` `kds:accent-danger-pressed` `kds:decoration-danger-pressed` | `--kds-color-danger-pressed` | `#731912` | - | Vuetify danger-pressed | current |
| `color.sky.50` | `kds:bg-sky-50` `kds:text-sky-50` `kds:border-sky-50` `kds:outline-sky-50` `kds:fill-sky-50` `kds:stroke-sky-50` `kds:caret-sky-50` `kds:accent-sky-50` `kds:decoration-sky-50` | `--kds-color-sky-50` | `#f4fbff` | Scale step: prefer a semantic name | Figma Accent/Sky/50 | current |
| `color.sky.100` | `kds:bg-sky-100` `kds:text-sky-100` `kds:border-sky-100` `kds:outline-sky-100` `kds:fill-sky-100` `kds:stroke-sky-100` `kds:caret-sky-100` `kds:accent-sky-100` `kds:decoration-sky-100` | `--kds-color-sky-100` | `#def0ff` | Scale step: prefer a semantic name | Figma Accent/Sky/100 | current |
| `color.sky.200` | `kds:bg-sky-200` `kds:text-sky-200` `kds:border-sky-200` `kds:outline-sky-200` `kds:fill-sky-200` `kds:stroke-sky-200` `kds:caret-sky-200` `kds:accent-sky-200` `kds:decoration-sky-200` | `--kds-color-sky-200` | `#8ad3fe` | Scale step: prefer a semantic name | Figma Accent/Sky/200 | current |
| `color.sky.300` | `kds:bg-sky-300` `kds:text-sky-300` `kds:border-sky-300` `kds:outline-sky-300` `kds:fill-sky-300` `kds:stroke-sky-300` `kds:caret-sky-300` `kds:accent-sky-300` `kds:decoration-sky-300` | `--kds-color-sky-300` | `#63c5fe` | Scale step: prefer a semantic name | Figma Accent/Sky/300 | current |
| `color.sky.400` | `kds:bg-sky-400` `kds:text-sky-400` `kds:border-sky-400` `kds:outline-sky-400` `kds:fill-sky-400` `kds:stroke-sky-400` `kds:caret-sky-400` `kds:accent-sky-400` `kds:decoration-sky-400` | `--kds-color-sky-400` | `#3cb6fe` | Scale step: prefer a semantic name | Figma Accent/Sky/400 | current |
| `color.sky.500` | `kds:bg-sky-500` `kds:text-sky-500` `kds:border-sky-500` `kds:outline-sky-500` `kds:fill-sky-500` `kds:stroke-sky-500` `kds:caret-sky-500` `kds:accent-sky-500` `kds:decoration-sky-500` | `--kds-color-sky-500` | `#15a8fe` | Scale step: prefer a semantic name | Figma Accent/Sky/500 | current |
| `color.sky.600` | `kds:bg-sky-600` `kds:text-sky-600` `kds:border-sky-600` `kds:outline-sky-600` `kds:fill-sky-600` `kds:stroke-sky-600` `kds:caret-sky-600` `kds:accent-sky-600` `kds:decoration-sky-600` | `--kds-color-sky-600` | `#007fd3` | Scale step: prefer a semantic name | Figma Accent/Sky/600 | current |
| `color.sky.700` | `kds:bg-sky-700` `kds:text-sky-700` `kds:border-sky-700` `kds:outline-sky-700` `kds:fill-sky-700` `kds:stroke-sky-700` `kds:caret-sky-700` `kds:accent-sky-700` `kds:decoration-sky-700` | `--kds-color-sky-700` | `#0e70a9` | Scale step: prefer a semantic name | Figma Accent/Sky/700 | current |
| `color.sky.800` | `kds:bg-sky-800` `kds:text-sky-800` `kds:border-sky-800` `kds:outline-sky-800` `kds:fill-sky-800` `kds:stroke-sky-800` `kds:caret-sky-800` `kds:accent-sky-800` `kds:decoration-sky-800` | `--kds-color-sky-800` | `#00538c` | Scale step: prefer a semantic name | Figma Accent/Sky/800 | current |
| `color.sky.900` | `kds:bg-sky-900` `kds:text-sky-900` `kds:border-sky-900` `kds:outline-sky-900` `kds:fill-sky-900` `kds:stroke-sky-900` `kds:caret-sky-900` `kds:accent-sky-900` `kds:decoration-sky-900` | `--kds-color-sky-900` | `#064574` | Scale step: prefer a semantic name | Figma Accent/Sky/900 | current |
| `color.sky.950` | `kds:bg-sky-950` `kds:text-sky-950` `kds:border-sky-950` `kds:outline-sky-950` `kds:fill-sky-950` `kds:stroke-sky-950` `kds:caret-sky-950` `kds:accent-sky-950` `kds:decoration-sky-950` | `--kds-color-sky-950` | `#073855` | Scale step: prefer a semantic name | Figma Accent/Sky/950 | current |
| `color.sky.main` | `kds:bg-sky-main` `kds:text-sky-main` `kds:border-sky-main` `kds:outline-sky-main` `kds:fill-sky-main` `kds:stroke-sky-main` `kds:caret-sky-main` `kds:accent-sky-main` `kds:decoration-sky-main` | `--kds-color-sky-main` | `#15a8fe` | Sky accent: highlights and decorative emphasis | - | current |
| `color.orange.50` | `kds:bg-orange-50` `kds:text-orange-50` `kds:border-orange-50` `kds:outline-orange-50` `kds:fill-orange-50` `kds:stroke-orange-50` `kds:caret-orange-50` `kds:accent-orange-50` `kds:decoration-orange-50` | `--kds-color-orange-50` | `#fff7ea` | Scale step | Figma Accent/Orange/50 | current |
| `color.orange.100` | `kds:bg-orange-100` `kds:text-orange-100` `kds:border-orange-100` `kds:outline-orange-100` `kds:fill-orange-100` `kds:stroke-orange-100` `kds:caret-orange-100` `kds:accent-orange-100` `kds:decoration-orange-100` | `--kds-color-orange-100` | `#ffe9c8` | Scale step | Figma Accent/Orange/100 | current |
| `color.orange.200` | `kds:bg-orange-200` `kds:text-orange-200` `kds:border-orange-200` `kds:outline-orange-200` `kds:fill-orange-200` `kds:stroke-orange-200` `kds:caret-orange-200` `kds:accent-orange-200` `kds:decoration-orange-200` | `--kds-color-orange-200` | `#ffdeac` | Scale step | Figma Accent/Orange/200 | current |
| `color.orange.300` | `kds:bg-orange-300` `kds:text-orange-300` `kds:border-orange-300` `kds:outline-orange-300` `kds:fill-orange-300` `kds:stroke-orange-300` `kds:caret-orange-300` `kds:accent-orange-300` `kds:decoration-orange-300` | `--kds-color-orange-300` | `#ffd390` | Scale step | Figma Accent/Orange/300 | current |
| `color.orange.400` | `kds:bg-orange-400` `kds:text-orange-400` `kds:border-orange-400` `kds:outline-orange-400` `kds:fill-orange-400` `kds:stroke-orange-400` `kds:caret-orange-400` `kds:accent-orange-400` `kds:decoration-orange-400` | `--kds-color-orange-400` | `#ffbd59` | Scale step | Figma Accent/Orange/400 | current |
| `color.orange.500` | `kds:bg-orange-500` `kds:text-orange-500` `kds:border-orange-500` `kds:outline-orange-500` `kds:fill-orange-500` `kds:stroke-orange-500` `kds:caret-orange-500` `kds:accent-orange-500` `kds:decoration-orange-500` | `--kds-color-orange-500` | `#fc8813` | Scale step | Figma Accent/Orange/500 | current |
| `color.orange.600` | `kds:bg-orange-600` `kds:text-orange-600` `kds:border-orange-600` `kds:outline-orange-600` `kds:fill-orange-600` `kds:stroke-orange-600` `kds:caret-orange-600` `kds:accent-orange-600` `kds:decoration-orange-600` | `--kds-color-orange-600` | `#ed6c09` | Scale step | Figma Accent/Orange/600 | current |
| `color.orange.700` | `kds:bg-orange-700` `kds:text-orange-700` `kds:border-orange-700` `kds:outline-orange-700` `kds:fill-orange-700` `kds:stroke-orange-700` `kds:caret-orange-700` `kds:accent-orange-700` `kds:decoration-orange-700` | `--kds-color-orange-700` | `#c55109` | Scale step | Figma Accent/Orange/700 | current |
| `color.orange.800` | `kds:bg-orange-800` `kds:text-orange-800` `kds:border-orange-800` `kds:outline-orange-800` `kds:fill-orange-800` `kds:stroke-orange-800` `kds:caret-orange-800` `kds:accent-orange-800` `kds:decoration-orange-800` | `--kds-color-orange-800` | `#9c4010` | Scale step | Figma Accent/Orange/800 | current |
| `color.orange.900` | `kds:bg-orange-900` `kds:text-orange-900` `kds:border-orange-900` `kds:outline-orange-900` `kds:fill-orange-900` `kds:stroke-orange-900` `kds:caret-orange-900` `kds:accent-orange-900` `kds:decoration-orange-900` | `--kds-color-orange-900` | `#7e3610` | Scale step | Figma Accent/Orange/900 | current |
| `color.orange.950` | `kds:bg-orange-950` `kds:text-orange-950` `kds:border-orange-950` `kds:outline-orange-950` `kds:fill-orange-950` `kds:stroke-orange-950` `kds:caret-orange-950` `kds:accent-orange-950` `kds:decoration-orange-950` | `--kds-color-orange-950` | `#441906` | Scale step | Figma Accent/Orange/950 | current |
| `color.pink.50` | `kds:bg-pink-50` `kds:text-pink-50` `kds:border-pink-50` `kds:outline-pink-50` `kds:fill-pink-50` `kds:stroke-pink-50` `kds:caret-pink-50` `kds:accent-pink-50` `kds:decoration-pink-50` | `--kds-color-pink-50` | `#fef0f4` | Scale step | Figma Accent/Pink/50 | current |
| `color.pink.100` | `kds:bg-pink-100` `kds:text-pink-100` `kds:border-pink-100` `kds:outline-pink-100` `kds:fill-pink-100` `kds:stroke-pink-100` `kds:caret-pink-100` `kds:accent-pink-100` `kds:decoration-pink-100` | `--kds-color-pink-100` | `#fde1e8` | Scale step | Figma Accent/Pink/100 | current |
| `color.pink.200` | `kds:bg-pink-200` `kds:text-pink-200` `kds:border-pink-200` `kds:outline-pink-200` `kds:fill-pink-200` `kds:stroke-pink-200` `kds:caret-pink-200` `kds:accent-pink-200` `kds:decoration-pink-200` | `--kds-color-pink-200` | `#fabfcf` | Scale step | Figma Accent/Pink/200 | current |
| `color.pink.300` | `kds:bg-pink-300` `kds:text-pink-300` `kds:border-pink-300` `kds:outline-pink-300` `kds:fill-pink-300` `kds:stroke-pink-300` `kds:caret-pink-300` `kds:accent-pink-300` `kds:decoration-pink-300` | `--kds-color-pink-300` | `#f89fb9` | Scale step | Figma Accent/Pink/300 | current |
| `color.pink.400` | `kds:bg-pink-400` `kds:text-pink-400` `kds:border-pink-400` `kds:outline-pink-400` `kds:fill-pink-400` `kds:stroke-pink-400` `kds:caret-pink-400` `kds:accent-pink-400` `kds:decoration-pink-400` | `--kds-color-pink-400` | `#f776a2` | Scale step | Figma Accent/Pink/400 | current |
| `color.pink.500` | `kds:bg-pink-500` `kds:text-pink-500` `kds:border-pink-500` `kds:outline-pink-500` `kds:fill-pink-500` `kds:stroke-pink-500` `kds:caret-pink-500` `kds:accent-pink-500` `kds:decoration-pink-500` | `--kds-color-pink-500` | `#f5478d` | Scale step | Figma Accent/Pink/500 | current |
| `color.pink.600` | `kds:bg-pink-600` `kds:text-pink-600` `kds:border-pink-600` `kds:outline-pink-600` `kds:fill-pink-600` `kds:stroke-pink-600` `kds:caret-pink-600` `kds:accent-pink-600` `kds:decoration-pink-600` | `--kds-color-pink-600` | `#db2777` | Scale step | Figma Accent/Pink/600 | current |
| `color.pink.700` | `kds:bg-pink-700` `kds:text-pink-700` `kds:border-pink-700` `kds:outline-pink-700` `kds:fill-pink-700` `kds:stroke-pink-700` `kds:caret-pink-700` `kds:accent-pink-700` `kds:decoration-pink-700` | `--kds-color-pink-700` | `#a51b58` | Scale step | Figma Accent/Pink/700 | current |
| `color.pink.800` | `kds:bg-pink-800` `kds:text-pink-800` `kds:border-pink-800` `kds:outline-pink-800` `kds:fill-pink-800` `kds:stroke-pink-800` `kds:caret-pink-800` `kds:accent-pink-800` `kds:decoration-pink-800` | `--kds-color-pink-800` | `#74103c` | Scale step | Figma Accent/Pink/800 | current |
| `color.pink.900` | `kds:bg-pink-900` `kds:text-pink-900` `kds:border-pink-900` `kds:outline-pink-900` `kds:fill-pink-900` `kds:stroke-pink-900` `kds:caret-pink-900` `kds:accent-pink-900` `kds:decoration-pink-900` | `--kds-color-pink-900` | `#430520` | Scale step | Figma Accent/Pink/900 | current |
| `color.pink.950` | `kds:bg-pink-950` `kds:text-pink-950` `kds:border-pink-950` `kds:outline-pink-950` `kds:fill-pink-950` `kds:stroke-pink-950` `kds:caret-pink-950` `kds:accent-pink-950` `kds:decoration-pink-950` | `--kds-color-pink-950` | `#2d0214` | Scale step | Figma Accent/Pink/950 | current |
| `color.background.light-blue` | `kds:bg-background-light-blue` `kds:text-background-light-blue` `kds:border-background-light-blue` `kds:outline-background-light-blue` `kds:fill-background-light-blue` `kds:stroke-background-light-blue` `kds:caret-background-light-blue` `kds:accent-background-light-blue` `kds:decoration-background-light-blue` | `--kds-color-background-light-blue` | `#f8fafc` | - | - | current |
| `color.accent.blue` | `kds:bg-accent-blue` `kds:text-accent-blue` `kds:border-accent-blue` `kds:outline-accent-blue` `kds:fill-accent-blue` `kds:stroke-accent-blue` `kds:caret-accent-blue` `kds:accent-accent-blue` `kds:decoration-accent-blue` | `--kds-color-accent-blue` | `#15a8fe` | - | Vuetify blue-accent, Vuetify secondary | deprecated: Not a role in the design system. Use color.sky.main. |
| `color.accent.orange` | `kds:bg-accent-orange` `kds:text-accent-orange` `kds:border-accent-orange` `kds:outline-accent-orange` `kds:fill-accent-orange` `kds:stroke-accent-orange` `kds:caret-accent-orange` `kds:accent-accent-orange` `kds:decoration-accent-orange` | `--kds-color-accent-orange` | `#ffbd59` | - | Vuetify orange-accent, Vuetify accent | deprecated: Not a role in the design system. Use color.orange.400. |
| `color.accent.cream` | `kds:bg-accent-cream` `kds:text-accent-cream` `kds:border-accent-cream` `kds:outline-accent-cream` `kds:fill-accent-cream` `kds:stroke-accent-cream` `kds:caret-accent-cream` `kds:accent-accent-cream` `kds:decoration-accent-cream` | `--kds-color-accent-cream` | `#fff8e5` | - | Vuetify cream-accent, Vuetify light-accent | deprecated: Not a role in the design system. Use color.legacy.cream. |
| `color.accent.grey-blue` | `kds:bg-accent-grey-blue` `kds:text-accent-grey-blue` `kds:border-accent-grey-blue` `kds:outline-accent-grey-blue` `kds:fill-accent-grey-blue` `kds:stroke-accent-grey-blue` `kds:caret-accent-grey-blue` `kds:accent-accent-grey-blue` `kds:decoration-accent-grey-blue` | `--kds-color-accent-grey-blue` | `#d9dfe8` | - | Vuetify grey-blue-accent, Vuetify footer-background | deprecated: Not a role in the design system. Use color.legacy.grey-blue. |
| `color.legacy.cream` | `kds:bg-legacy-cream` `kds:text-legacy-cream` `kds:border-legacy-cream` `kds:outline-legacy-cream` `kds:fill-legacy-cream` `kds:stroke-legacy-cream` `kds:caret-legacy-cream` `kds:accent-legacy-cream` `kds:decoration-legacy-cream` | `--kds-color-legacy-cream` | `#fff8e5` | Legacy cream, kept for existing screens | - | current |
| `color.legacy.grey-blue` | `kds:bg-legacy-grey-blue` `kds:text-legacy-grey-blue` `kds:border-legacy-grey-blue` `kds:outline-legacy-grey-blue` `kds:fill-legacy-grey-blue` `kds:stroke-legacy-grey-blue` `kds:caret-legacy-grey-blue` `kds:accent-legacy-grey-blue` `kds:decoration-legacy-grey-blue` | `--kds-color-legacy-grey-blue` | `#d9dfe8` | Legacy grey blue, kept for existing screens | - | current |

## spacing

| Token | Classes | Variable | Value | Usage | Also known as | Status |
| --- | --- | --- | --- | --- | --- | --- |
| `spacing.0` | `kds:m-0` `kds:mx-0` `kds:my-0` `kds:mt-0` `kds:mr-0` `kds:mb-0` `kds:ml-0` `kds:p-0` `kds:px-0` `kds:py-0` `kds:pt-0` `kds:pr-0` `kds:pb-0` `kds:pl-0` `kds:gap-0` `kds:gap-x-0` `kds:gap-y-0` | `--kds-spacing-0` | `0.125rem` | - | - | current |
| `spacing.1` | `kds:m-1` `kds:mx-1` `kds:my-1` `kds:mt-1` `kds:mr-1` `kds:mb-1` `kds:ml-1` `kds:p-1` `kds:px-1` `kds:py-1` `kds:pt-1` `kds:pr-1` `kds:pb-1` `kds:pl-1` `kds:gap-1` `kds:gap-x-1` `kds:gap-y-1` | `--kds-spacing-1` | `0.25rem` | - | - | current |
| `spacing.2` | `kds:m-2` `kds:mx-2` `kds:my-2` `kds:mt-2` `kds:mr-2` `kds:mb-2` `kds:ml-2` `kds:p-2` `kds:px-2` `kds:py-2` `kds:pt-2` `kds:pr-2` `kds:pb-2` `kds:pl-2` `kds:gap-2` `kds:gap-x-2` `kds:gap-y-2` | `--kds-spacing-2` | `0.5rem` | - | - | current |
| `spacing.3` | `kds:m-3` `kds:mx-3` `kds:my-3` `kds:mt-3` `kds:mr-3` `kds:mb-3` `kds:ml-3` `kds:p-3` `kds:px-3` `kds:py-3` `kds:pt-3` `kds:pr-3` `kds:pb-3` `kds:pl-3` `kds:gap-3` `kds:gap-x-3` `kds:gap-y-3` | `--kds-spacing-3` | `0.75rem` | - | - | current |
| `spacing.4` | `kds:m-4` `kds:mx-4` `kds:my-4` `kds:mt-4` `kds:mr-4` `kds:mb-4` `kds:ml-4` `kds:p-4` `kds:px-4` `kds:py-4` `kds:pt-4` `kds:pr-4` `kds:pb-4` `kds:pl-4` `kds:gap-4` `kds:gap-x-4` `kds:gap-y-4` | `--kds-spacing-4` | `1rem` | - | - | current |
| `spacing.5` | `kds:m-5` `kds:mx-5` `kds:my-5` `kds:mt-5` `kds:mr-5` `kds:mb-5` `kds:ml-5` `kds:p-5` `kds:px-5` `kds:py-5` `kds:pt-5` `kds:pr-5` `kds:pb-5` `kds:pl-5` `kds:gap-5` `kds:gap-x-5` `kds:gap-y-5` | `--kds-spacing-5` | `1.25rem` | - | - | current |
| `spacing.6` | `kds:m-6` `kds:mx-6` `kds:my-6` `kds:mt-6` `kds:mr-6` `kds:mb-6` `kds:ml-6` `kds:p-6` `kds:px-6` `kds:py-6` `kds:pt-6` `kds:pr-6` `kds:pb-6` `kds:pl-6` `kds:gap-6` `kds:gap-x-6` `kds:gap-y-6` | `--kds-spacing-6` | `1.5rem` | - | - | current |
| `spacing.7` | `kds:m-7` `kds:mx-7` `kds:my-7` `kds:mt-7` `kds:mr-7` `kds:mb-7` `kds:ml-7` `kds:p-7` `kds:px-7` `kds:py-7` `kds:pt-7` `kds:pr-7` `kds:pb-7` `kds:pl-7` `kds:gap-7` `kds:gap-x-7` `kds:gap-y-7` | `--kds-spacing-7` | `1.75rem` | - | - | current |
| `spacing.8` | `kds:m-8` `kds:mx-8` `kds:my-8` `kds:mt-8` `kds:mr-8` `kds:mb-8` `kds:ml-8` `kds:p-8` `kds:px-8` `kds:py-8` `kds:pt-8` `kds:pr-8` `kds:pb-8` `kds:pl-8` `kds:gap-8` `kds:gap-x-8` `kds:gap-y-8` | `--kds-spacing-8` | `2rem` | - | - | current |
| `spacing.9` | `kds:m-9` `kds:mx-9` `kds:my-9` `kds:mt-9` `kds:mr-9` `kds:mb-9` `kds:ml-9` `kds:p-9` `kds:px-9` `kds:py-9` `kds:pt-9` `kds:pr-9` `kds:pb-9` `kds:pl-9` `kds:gap-9` `kds:gap-x-9` `kds:gap-y-9` | `--kds-spacing-9` | `2.25rem` | - | - | current |
| `spacing.10` | `kds:m-10` `kds:mx-10` `kds:my-10` `kds:mt-10` `kds:mr-10` `kds:mb-10` `kds:ml-10` `kds:p-10` `kds:px-10` `kds:py-10` `kds:pt-10` `kds:pr-10` `kds:pb-10` `kds:pl-10` `kds:gap-10` `kds:gap-x-10` `kds:gap-y-10` | `--kds-spacing-10` | `2.5rem` | - | - | current |
| `spacing.11` | `kds:m-11` `kds:mx-11` `kds:my-11` `kds:mt-11` `kds:mr-11` `kds:mb-11` `kds:ml-11` `kds:p-11` `kds:px-11` `kds:py-11` `kds:pt-11` `kds:pr-11` `kds:pb-11` `kds:pl-11` `kds:gap-11` `kds:gap-x-11` `kds:gap-y-11` | `--kds-spacing-11` | `2.75rem` | - | - | current |
| `spacing.12` | `kds:m-12` `kds:mx-12` `kds:my-12` `kds:mt-12` `kds:mr-12` `kds:mb-12` `kds:ml-12` `kds:p-12` `kds:px-12` `kds:py-12` `kds:pt-12` `kds:pr-12` `kds:pb-12` `kds:pl-12` `kds:gap-12` `kds:gap-x-12` `kds:gap-y-12` | `--kds-spacing-12` | `3rem` | - | - | current |
| `spacing.13` | `kds:m-13` `kds:mx-13` `kds:my-13` `kds:mt-13` `kds:mr-13` `kds:mb-13` `kds:ml-13` `kds:p-13` `kds:px-13` `kds:py-13` `kds:pt-13` `kds:pr-13` `kds:pb-13` `kds:pl-13` `kds:gap-13` `kds:gap-x-13` `kds:gap-y-13` | `--kds-spacing-13` | `3.25rem` | - | - | current |
| `spacing.14` | `kds:m-14` `kds:mx-14` `kds:my-14` `kds:mt-14` `kds:mr-14` `kds:mb-14` `kds:ml-14` `kds:p-14` `kds:px-14` `kds:py-14` `kds:pt-14` `kds:pr-14` `kds:pb-14` `kds:pl-14` `kds:gap-14` `kds:gap-x-14` `kds:gap-y-14` | `--kds-spacing-14` | `3.5rem` | - | - | current |
| `spacing.15` | `kds:m-15` `kds:mx-15` `kds:my-15` `kds:mt-15` `kds:mr-15` `kds:mb-15` `kds:ml-15` `kds:p-15` `kds:px-15` `kds:py-15` `kds:pt-15` `kds:pr-15` `kds:pb-15` `kds:pl-15` `kds:gap-15` `kds:gap-x-15` `kds:gap-y-15` | `--kds-spacing-15` | `3.75rem` | - | - | current |
| `spacing.16` | `kds:m-16` `kds:mx-16` `kds:my-16` `kds:mt-16` `kds:mr-16` `kds:mb-16` `kds:ml-16` `kds:p-16` `kds:px-16` `kds:py-16` `kds:pt-16` `kds:pr-16` `kds:pb-16` `kds:pl-16` `kds:gap-16` `kds:gap-x-16` `kds:gap-y-16` | `--kds-spacing-16` | `4rem` | - | - | current |

## radius

| Token | Classes | Variable | Value | Usage | Also known as | Status |
| --- | --- | --- | --- | --- | --- | --- |
| `radius.0` | `kds:rounded-0` | `--kds-radius-0` | `0` | No rounding, sharp, squared corners | - | current |
| `radius.xs` | `kds:rounded-xs` | `--kds-radius-xs` | `0.125rem` | Subtle rounding for compact or dense elements | - | current |
| `radius.sm` | `kds:rounded-sm` | `--kds-radius-sm` | `0.25rem` | Standard rounding | - | current |
| `radius.md` | `kds:rounded-md` | `--kds-radius-md` | `0.5rem` | Moderate rounding for cards and containers | - | current |
| `radius.lg` | `kds:rounded-lg` | `--kds-radius-lg` | `0.75rem` | Moderate rounding for cards and containers | - | current |
| `radius.xl` | `kds:rounded-xl` | `--kds-radius-xl` | `1rem` | Moderate rounding for cards and containers | - | current |
| `radius.2xl` | `kds:rounded-2xl` | `--kds-radius-2xl` | `1.5rem` | Prominent rounding for dialogs and larger surfaces | - | current |
| `radius.pill` | `kds:rounded-pill` | `--kds-radius-pill` | `624.9375rem` | Fully rounded ends, used for tags, badges, and pill buttons | - | current |

## shadow

| Token | Classes | Variable | Value | Usage | Also known as | Status |
| --- | --- | --- | --- | --- | --- | --- |
| `shadow.legacy.card` | `kds:shadow-legacy-card` | `--kds-shadow-legacy-card` | `0 4px 16px 0 rgb(33 33 33 / 0.05)` | Ideal for content containers like cards, panels, or tiles on light backgrounds. | - | deprecated: Legacy effects, kept for existing designs. Use shadow.elevation.* in new work. |
| `shadow.legacy.navbar` | `kds:shadow-legacy-navbar` | `--kds-shadow-legacy-navbar` | `0 2px 40px 0 rgb(0 0 0 / 0.12)` | A stronger, more diffused shadow used to distinguish the navigation bar from the page content below it | - | deprecated: Legacy effects, kept for existing designs. Use shadow.elevation.* in new work. |
| `shadow.legacy.auxiliary` | `kds:shadow-legacy-auxiliary` | `--kds-shadow-legacy-auxiliary` | `0 4px 8px 0 rgb(0 0 0 / 0.05)` | Shadows used for popup elements that appear on top of others such as modal dialogue and dropdown options | - | deprecated: Legacy effects, kept for existing designs. Use shadow.elevation.* in new work. |
| `shadow.elevation.0` | `kds:shadow-elevation-0` | `--kds-shadow-elevation-0` | `0 0 0 0 rgb(0 0 0 / 0)` | No shadow. The component sits completely flat on the surface with no perceived depth. Used for backgrounds, dividers, and non-interactive base elements. | - | current |
| `shadow.elevation.1` | `kds:shadow-elevation-1` | `--kds-shadow-elevation-1` | `0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06)` | Ideal for cards, list items, and low-priority interactive elements that need minimal separation from the background. | - | current |
| `shadow.elevation.2` | `kds:shadow-elevation-2` | `--kds-shadow-elevation-2` | `0 12px 16px -4px rgb(0 0 0 / 0.08), 0 4px 6px -2px rgb(0 0 0 / 0.03), 0 2px 2px -1px rgb(0 0 0 / 0.04)` | Suitable for raised cards, dropdown menus, and secondary containers. | - | current |
| `shadow.elevation.3` | `kds:shadow-elevation-3` | `--kds-shadow-elevation-3` | `0 20px 24px -4px rgb(0 0 0 / 0.08), 0 8px 8px -4px rgb(0 0 0 / 0.03), 0 3px 3px -1.5px rgb(0 0 0 / 0.04)` | Best used for floating action elements, popovers, and sticky components. | - | current |
| `shadow.elevation.4` | `kds:shadow-elevation-4` | `--kds-shadow-elevation-4` | `0 24px 48px -12px rgb(0 0 0 / 0.18), 0 4px 4px -2px rgb(0 0 0 / 0.04)` | Recommended for dialogs, side sheets, and components that demand user attention. | - | current |
| `shadow.elevation.5` | `kds:shadow-elevation-5` | `--kds-shadow-elevation-5` | `0 32px 64px -12px rgb(0 0 0 / 0.14), 0 5px 5px -2.5px rgb(0 0 0 / 0.04)` | Reserved for overlays, modals, and critical UI elements that sit at the very top of the visual stack. | - | current |