# Design tokens

> Kesko Design Tokens are a tech-agnostic way to store variables. We use tokens instead of hard coded values to ensure a better UI consistency across different platforms.

> Warning: Kesko Design Tokens are in active development and not yet ready for production use. APIs documented may change without notice.

### Installation

To install Kesko Design Tokens as a dependency in your project, run:

```sh [npm]
npm install @kesko/tokens
```

```sh [pnpm]
pnpm add @kesko/tokens
```

```sh [yarn]
yarn add @kesko/tokens
```

```sh [bun]
bun add @kesko/tokens
```

> Warning: Kesko design tokens are in active development phase and not yet ready for production use. We’re currently working on unifying the naming conventions.

### CSS usage

Import the stylesheet once at the root of your application. This exposes all design tokens as CSS custom properties:

```js
import "@kesko/tokens/dist/tokens.css";
```

Or, if you prefer to load it directly from HTML:

```html
<link rel="stylesheet" href="/tokens.css" />
```

Then reference any design token in your CSS:

```css
.selector {
  color: var(--k-color-text-success);
  background: var(--k-color-status-success);
  font-family: var(--k-font-family-sans);
}
```

### SCSS usage

Import the SCSS file at the start of your stylesheet to expose design tokens as `$`-prefixed Sass variables:

```scss
@use "@kesko/tokens/dist/tokens.scss" as *;

.my-button {
  color: $k-color-text-success;
  background: $k-color-status-success;
  font-family: $k-font-family-sans;
}
```

### Less usage

Import the LESS file to expose design tokens as `@`-prefixed variables:

```less
@import "@kesko/tokens/dist/tokens.less";

.my-button {
  color: @k-color-text-success;
  background: @k-color-status-success;
  font-family: @k-font-family-sans;
}
```

### JavaScript usage

Each design token is available as a named export in PascalCase:

```js
import { KColorAccent, KFontFamilySans } from "@kesko/tokens";

element.style.background = KColorAccent;
element.style.fontFamily = KFontFamilySans;
```

For richer metadata, import the ES module instead. Unlike `tokens.js`, the ES module has a single default export with each leaf wrapped in a metadata object:

```js
import tokens from "@kesko/tokens/dist/tokens.esm.js";

console.log(tokens.color.accent);

// Outputs:
//
// {
//   key: "{color.accent}",
//   value: "#f86800",
//   comment: "The primary brand accent color used for theming purposes. Aliases `color.orange.700` in the base Kesko theme.",
//   type: "color",
//   filePath: "src/color/accent.yaml",
//   isSource: true,
//   original: {
//     value: "{color.orange.700}",
//     comment: "The primary brand accent color used for theming purposes. Aliases `color.orange.700` in the base Kesko theme.",
//     type: "color",
//     key: "{color.accent}",
//   },
//   name: "accent",
//   attributes: {},
//   path: ["color", "accent"],
// }
```

### TypeScript usage

Type definitions ship as `tokens.d.ts` and are referenced by the `types` field in `package.json`, so the named exports are typed automatically:

```ts
import { KColorAccent, KFontFamilySans } from "@kesko/tokens";
```

The package also exports a `DesignToken` interface that describes the metadata-rich entries used throughout the JSON and ESM outputs:

```ts
import type { DesignToken } from "@kesko/tokens";

const accent: DesignToken = {
  value: "#f86800",
  type: "color",
  name: "KColorAccent",
};
```

### JSON usage

For tooling, code generation, or non-JavaScript environments, import the full design token tree as JSON. Each entry includes the resolved value, original alias, type, comment, and source file path:

```js
import tokens from "@kesko/tokens/dist/tokens.json";

const accent = tokens.color.accent.value; // "#f86800"
const aliasOf = tokens.color.accent.original.value; // "{color.orange.700}"
```

### iOS usage

The `ios.swift` output exposes the full color palette as `UIColor` static constants on a `KeskoTokens` class. Drop `dist/ios.swift` into your Xcode project and reference design tokens directly:

```swift
import UIKit

label.textColor = KeskoTokens.kColorTextBase
view.backgroundColor = KeskoTokens.kColorAccent
```

From SwiftUI, bridge the `UIColor` constants with `Color(uiColor:)`:

```swift
import SwiftUI

Text("Hello")
  .foregroundColor(Color(uiColor: KeskoTokens.kColorTextBase))
  .background(Color(uiColor: KeskoTokens.kColorAccent))
```

### Android usage

The `android.xml` output exposes color resources following standard Android resource naming. Copy `dist/android.xml` into your project’s `res/values/` directory (typically as `colors.xml`) and reference tokens from layouts and styles:

```xml
<TextView
  android:textColor="@color/k_color_text_base"
  android:background="@color/k_color_accent"
  android:text="Hello" />
```

From Kotlin or Java, use the standard resource lookup:

```kotlin
val accent = ContextCompat.getColor(context, R.color.k_color_accent)
```

### Naming

All design tokens are prefixed with `k` to prevent conflicts with other libraries. The exact format varies by platform, as described here:

| Platform         | Format                     | Example                    |
| ---------------- | -------------------------- | -------------------------- |
| CSS              | `--k-{path}`               | `--k-color-accent`         |
| SCSS             | `$k-{path}`                | `$k-color-accent`          |
| LESS             | `@k-{path}`                | `@k-color-accent`          |
| JavaScript / ESM | `K{PascalPath}`            | `KColorAccent`             |
| TypeScript       | `K{PascalPath}`            | `KColorAccent`             |
| JSON             | nested object tree         | `tokens.color.accent`      |
| iOS Swift        | `KeskoTokens.k{camelPath}` | `KeskoTokens.kColorAccent` |
| Android XML      | `k_{snake_path}`           | `k_color_accent`           |

See the [naming guidelines](/naming/) for the complete rules.

### Available formats

The package ships 9 platform-specific formats:

- **CSS Custom Properties:** `@kesko/tokens/dist/tokens.css`
- **SCSS:** `@kesko/tokens/dist/tokens.scss`
- **LESS:** `@kesko/tokens/dist/tokens.less`
- **JavaScript (named exports):** `@kesko/tokens/dist/tokens.js`
- **ES Module (default tree):** `@kesko/tokens/dist/tokens.esm.js`
- **TypeScript declarations:** `@kesko/tokens/dist/tokens.d.ts`
- **JSON:** `@kesko/tokens/dist/tokens.json`
- **iOS Swift:** `@kesko/tokens/dist/ios.swift`
- **Android XML:** `@kesko/tokens/dist/android.xml`

### Design token visualizer

The design token visualizer is an interactive tool for exploring the full Kesko design token tree and understanding how the relationships work between `groups`, `primitives`, `semantics`, `themes`, and `modes`.

Open token visualizer

## Accent color tokens

- `var(--k-color-accent)`: #f86800 — Primary accent color used for interactive elements and theming.
- `var(--k-color-accent-secondary)`: #ffffff — Secondary accent color used as the default background for secondary interactive elements.
- `var(--k-color-accent-disabled)`: #f0f0f0 — Disabled accent color used as the background for disabled controls.


## Background color tokens

- `var(--k-color-bg)`: #ffffff — Base background color used as the default page surface.
- `var(--k-color-bg-subtle)`: #fafafa — Subtle background color used as a slightly recessed surface.
- `var(--k-color-bg-muted)`: #f6f6f6 — Muted background color used as the deepest neutral surface in the color hierarchy.
- `var(--k-color-bg-inverted)`: #282828 — Inverted background color used for high-contrast surfaces.
- `var(--k-color-bg-hover)`: #fcf0e0 — Hover background color used to indicate interactive hover states.
- `var(--k-color-bg-highlight)`: #f5d0d2 — Highlight background color used to draw attention to selected or important content.


## Border color tokens

- `var(--k-color-border)`: #a4a4a4 — Default border color used for static borders and outlines.
- `var(--k-color-border-active)`: #888888 — Active border color used to indicate the active or selected state of a bordered element.
- `var(--k-color-border-disabled)`: #c0c0c0 — Disabled border color used for the borders of disabled controls.
- `var(--k-color-border-warning)`: #b9161e — Warning border color used to indicate validation errors and warning states.
- `var(--k-color-border-hover)`: #f86800 — Hover border color used to indicate the hover state of a bordered element.
- `var(--k-color-border-focus)`: #295f96 — Focus border color used to indicate keyboard focus on interactive elements.
- `var(--k-color-border-divider)`: #a4a4a4 — Divider border color used to separate content sections and list rows.


## Fill color tokens

- `var(--k-color-fill)`: #f0f0f0 — Default fill color.
- `var(--k-color-fill-secondary)`: #dddddd — Secondary fill color.
- `var(--k-color-fill-tertiary)`: #c0c0c0 — Tertiary fill color.
- `var(--k-color-fill-decorative)`: #330072 — Decorative fill color used.


## Overlay color tokens

- `var(--k-color-overlay)`: rgba(255, 255, 255, 0.05) — Translucent white overlay applied on top of an interactive surface. Stored as a raw rgba value because alpha overlays cannot be expressed via primitive palette aliases.
- `var(--k-color-overlay-dimmed)`: rgba(0, 0, 0, 0.1) — Translucent black overlay applied on top of an interactive surface. Stored as a raw rgba value because alpha overlays cannot be expressed via primitive palette aliases.


## Status color tokens

- `var(--k-color-status-error)`: #b9161e — Background color for solid error messages and badges.
- `var(--k-color-status-error-weak)`: #f9e6e7 — Background color for soft error messages and inline validation surfaces.
- `var(--k-color-status-info)`: #295f96 — Background color for solid informational messages and badges.
- `var(--k-color-status-info-weak)`: #e8f3fb — Background color for soft informational messages and inline notes.
- `var(--k-color-status-warning)`: #fcc10f — Background color for solid warning messages and badges.
- `var(--k-color-status-warning-weak)`: #fff5d2 — Background color for soft warning messages and inline cautions.
- `var(--k-color-status-success)`: #306a17 — Background color for solid success messages and badges.
- `var(--k-color-status-success-weak)`: #ebf4e8 — Background color for soft success messages and confirmation surfaces.


## Text color tokens

- `var(--k-color-text)`: #282828 — Default text color used for the main body content.
- `var(--k-color-text-weak)`: #3e3e3e — Weak text color used for supporting copy and slightly de-emphasized content.
- `var(--k-color-text-weaker)`: #565656 — Weaker text color used for less emphasized supporting content.
- `var(--k-color-text-weakest)`: #757575 — Weakest text color used for muted helper text and metadata.
- `var(--k-color-text-disabled)`: #888888 — Disabled text color used for the lowest-emphasis text such as disabled labels.
- `var(--k-color-text-link)`: #cb4700 — Link text color that is used for links inside paragraph text.
- `var(--k-color-text-accent)`: #cb4700 — Accent text color used for branded text and highlighted inline content.
- `var(--k-color-text-inverted)`: #ffffff — Inverted text color used for text placed on dark or saturated backgrounds.
- `var(--k-color-text-on-error)`: #ffffff — Foreground color used on top of `color.status.bg-error`.
- `var(--k-color-text-on-error-weak)`: #370001 — Foreground color used on top of `color.status.bg-error-light`.
- `var(--k-color-text-on-success)`: #ffffff — Foreground color used on top of `color.status.bg-success`.
- `var(--k-color-text-on-success-weak)`: #0b1a05 — Foreground color used on top of `color.status.bg-success-light`.
- `var(--k-color-text-on-info)`: #ffffff — Foreground color used on top of `color.status.bg-info`.
- `var(--k-color-text-on-info-weak)`: #00143c — Foreground color used on top of `color.status.bg-info-light`.
- `var(--k-color-text-on-warning)`: #211400 — Foreground color used on top of `color.status.bg-warning`.
- `var(--k-color-text-on-warning-weak)`: #211400 — Foreground color used on top of `color.status.bg-warning-light`.
- `var(--k-color-text-on-accent)`: #ffffff — Foreground color used for content placed on top of `color.accent`.
- `var(--k-color-text-on-secondary)`: #f86800 — Foreground color used for content placed on top of `color.accent.secondary`.
- `var(--k-color-text-on-disabled)`: #757575 — Foreground color used on top of `color.status.disabled`.
- `var(--k-color-text-on-decorative)`: #ffffff — Foreground color used for content placed on top of `color.fill.decorative`.


## Brand color tokens



## Font family tokens

- `var(--k-font-family-sans)`: 'SkattaSansUI', 'SkattaSansUI-fallback', system-ui, sans-serif — Skatta Sans UI is the default font family utilized across all Kesko user interfaces.
- `var(--k-font-family-code)`: monospace, monospace — Monospace typeface for code blocks and development purposes.


## Font weight tokens

- `var(--k-font-weight)`: 400 — Default font weight for body text.
- `var(--k-font-weight-medium)`: 500 — Default font weight for medium text.
- `var(--k-font-weight-bold)`: 700 — Default font weight for bold text.
- `var(--k-font-weight-black)`: 900 — Default font weight for black text.


## Font size tokens

- `var(--k-font-size-3xs)`: 0.625rem — 10px font size used for the smallest captions and disclaimers.
- `var(--k-font-size-2xs)`: 0.75rem — 12px font size used for small labels, badges, and metadata.
- `var(--k-font-size-xs)`: 0.8125rem — 13px font size used as a bridge between the small body and small label scales.
- `var(--k-font-size-sm)`: 0.875rem — 14px font size used for compact body copy and secondary controls.
- `var(--k-font-size-md)`: 1rem — 16px font size used as the default body font size across the system.
- `var(--k-font-size-lg)`: 1.125rem — 18px font size used for emphasized body copy and small headings.
- `var(--k-font-size-xl)`: 1.25rem — 20px font size used for sub-section headings.
- `var(--k-font-size-2xl)`: 1.5rem — 24px font size used for section headings.
- `var(--k-font-size-3xl)`: 2rem — 32px font size used for page-level headings.


## Font leading tokens

- `var(--k-font-leading-xs)`: 1 — Extra small line-height. 1× the used font size.
- `var(--k-font-leading-sm)`: 1.25 — Compact line-height. 1.25× the used font size.
- `var(--k-font-leading-md)`: 1.5 — Default body line-height. 1.5× the used font size.


## Layer tokens

- `var(--k-layer-lowest)`: calc(-infinity) — Deep layer used for stacking something behind everything else.
- `var(--k-layer-default)`: 1 — Default layer used for the default in-flow content stacking context.
- `var(--k-layer-masked)`: 50 — Masked layer for masked interface elements.
- `var(--k-layer-mask)`: 100 — Mask layer for masking masked layers.
- `var(--k-layer-sticky)`: 150 — Sticky layer used for elements that should appear above the base content, such as sticky headers.
- `var(--k-layer-overlay)`: 200 — Overlay layer used for floating UI such as modals, popovers, and toast notifications.
- `var(--k-layer-highest)`: calc(infinity) — The highest possibly layer that will always sit on top of everything else.


## Motion duration tokens

- `var(--k-motion-duration-xs)`: 50ms — Extra-small motion duration used for instantaneous micro-feedback such as ripples and tap highlights.
- `var(--k-motion-duration-sm)`: 100ms — Small motion duration used for snappy state changes such as hover and focus transitions.
- `var(--k-motion-duration-md)`: 300ms — Default motion duration used for the majority of UI transitions.
- `var(--k-motion-duration-lg)`: 400ms — Large motion duration used for noticeable transitions such as panel slides and modal entries.
- `var(--k-motion-duration-xl)`: 600ms — Extra-large motion duration used for prominent choreographed sequences.


## Motion easing tokens

- `var(--k-motion-easing-decelerate)`: cubic-bezier(0, 0, 0, 1) — Standard decelerate easing for elements entering the screen or settling into place.
- `var(--k-motion-easing-accelerate)`: cubic-bezier(0.3, 0, 1, 1) — Standard accelerate easing for elements leaving the screen or speeding away.
- `var(--k-motion-easing-decelerate-emphasized)`: cubic-bezier(0.05, 0.7, 0.1, 1) — Emphasized decelerate easing used for prominent entrances and hero transitions.
- `var(--k-motion-easing-accelerate-emphasized)`: cubic-bezier(0.3, 0, 0.8, 0.15) — Emphasized accelerate easing used for prominent exits and dismissive gestures.


## Opacity tokens

- `var(--k-opacity-active)`: 0.9 — Opacity applied to elements in their active (pressed) state.
- `var(--k-opacity-default)`: 1 — Default opacity for fully opaque elements.
- `var(--k-opacity-overlay-dimmed)`: 0.1 — Opacity used for dimmed overlay surfaces such as scrim backgrounds.
- `var(--k-opacity-overlay)`: 0.05 — Opacity used for translucent hover and pressed overlay layers.


## Radius tokens

- `var(--k-radius-button)`: 0.25rem — Corner rounding for buttons.
- `var(--k-radius-input)`: 0.25rem — Corner rounding for text inputs and select controls.
- `var(--k-radius-checkbox)`: 0.125rem — Corner rounding for checkboxes.
- `var(--k-radius-element)`: 0.5rem — Default corner rounding applied to generic elements.
- `var(--k-radius-none)`: 0 — Square corners with no rounding.
- `var(--k-radius-xs)`: 0.125rem — Minimal corner rounding used on fine details and compact elements.
- `var(--k-radius-sm)`: 0.25rem — Subtle corner rounding used on tags and small inline controls.
- `var(--k-radius-md)`: 0.5rem — Default corner rounding used on most controls and cards.
- `var(--k-radius-lg)`: 0.75rem — Large corner rounding used for larger surfaces.
- `var(--k-radius-xl)`: 1rem — Extra large corner rounding used on prominent containers and modals.
- `var(--k-radius-pill)`: 999px — Rounded corners used on pills and fully rounded buttons.
- `var(--k-radius-circle)`: 50% — Rounded corners used on circular items such as avatars.


## Shadow tokens

- `var(--k-shadow)`: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.12) — Subtle elevation used for resting cards, list items, and toolbars.
- `var(--k-shadow-float)`: 0 8px 24px 2px rgba(0, 0, 0, 0.04), 0 2px 28px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.08) — Low floating elevation used for hovered cards and lightly raised surfaces.
- `var(--k-shadow-float-high)`: 0 20px 32px 2px rgba(0, 0, 0, 0.08), 0 4px 36px rgba(0, 0, 0, 0.04), 0 8px 12px rgba(0, 0, 0, 0.12) — Medium floating elevation used for popovers, dropdowns, and menus.
- `var(--k-shadow-float-higher)`: 0 24px 36px 4px rgba(0, 0, 0, 0.12), 0 8px 44px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.16) — High floating elevation used for modals, dialogs, and overlays.
- `var(--k-shadow-popover)`: 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.1) — popover shadow.
- `var(--k-shadow-switch)`: 0 4px 2px 0 rgba(0, 0, 0, 0.1) — toggle switch knob shadow.


## Size tokens

- `var(--k-size-border)`: 0.0625rem — Default border width for interface elements.
- `var(--k-size-border-button)`: 0.125rem — Border width for interface buttons.
- `var(--k-size-border-badge)`: 0.0625rem — Border width for interface badges.


## Space tokens

- `var(--k-space-button)`: 0.75rem — Button spacing used to calculate inline and block padding for buttons.
- `var(--k-space-4xs)`: 0.125rem — 2px spacing used for the finest hairline gaps.
- `var(--k-space-3xs)`: 0.25rem — 4px spacing used for tightly packed inline elements.
- `var(--k-space-2xs)`: 0.5rem — 8px spacing used between closely related elements.
- `var(--k-space-xs)`: 0.625rem — 10px spacing used between small adjacent elements and inside compact controls.
- `var(--k-space-sm)`: 0.75rem — 12px spacing used between small adjacent elements and inside compact controls.
- `var(--k-space-md)`: 1rem — 16px default spacing used as the base spacing unit across the system.
- `var(--k-space-lg)`: 1.5rem — 24px spacing used between sections within a card or panel.
- `var(--k-space-xl)`: 2rem — 32px spacing used between major content blocks on a page.
- `var(--k-space-2xl)`: 2.5rem — 40px spacing used as a generous separator between distinct page sections.
- `var(--k-space-3xl)`: 3rem — 48px spacing used as the largest standard layout gap.


## Primitive color tokens


### Neutral

- `var(--k-color-neutral-100)`: #ffffff — Neutral 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-200)`: #f0f0f0 — Neutral 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-300)`: #dddddd — Neutral 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-400)`: #cdcdcd — Neutral 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-500)`: #c0c0c0 — Neutral 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-600)`: #a4a4a4 — Neutral 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-700)`: #888888 — Neutral 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-800)`: #757575 — Neutral 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-900)`: #565656 — Neutral 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-1000)`: #3e3e3e — Neutral 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-1100)`: #282828 — Neutral 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-1200)`: #000000 — Neutral 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.


### Neutral-dark

- `var(--k-color-neutral-dark-100)`: #1b1b1b — Neutral Dark 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-dark-200)`: #262626 — Neutral Dark 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-dark-300)`: #333333 — Neutral Dark 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-dark-400)`: #3d3d3d — Neutral Dark 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-dark-500)`: #464646 — Neutral Dark 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-dark-600)`: #5a5a5a — Neutral Dark 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-dark-700)`: #717171 — Neutral Dark 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-dark-800)`: #848484 — Neutral Dark 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-dark-900)`: #a9a9a9 — Neutral Dark 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-dark-1000)`: #cbcbcb — Neutral Dark 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-dark-1100)`: #ededed — Neutral Dark 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-neutral-dark-1200)`: #ffffff — Neutral Dark 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.


### Beige

- `var(--k-color-beige-100)`: #fcf8f5 — Beige 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-beige-200)`: #f6f1ed — Beige 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-beige-300)`: #ede5dd — Beige 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-beige-400)`: #dacbbc — Beige 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-beige-500)`: #c9b6a1 — Beige 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-beige-600)`: #b9a38c — Beige 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-beige-700)`: #a7917a — Beige 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-beige-800)`: #83705c — Beige 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-beige-900)`: #6a5a4a — Beige 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-beige-1000)`: #5c4e40 — Beige 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-beige-1100)`: #2b241e — Beige 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-beige-1200)`: #191612 — Beige 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.


### Red

- `var(--k-color-red-100)`: #fdf7f7 — Red 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-red-200)`: #fbeeef — Red 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-red-300)`: #f9e6e7 — Red 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-red-400)`: #f5d0d2 — Red 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-red-500)`: #eda6aa — Red 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-red-600)`: #e88d92 — Red 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-red-700)`: #e27378 — Red 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-red-800)`: #d13c44 — Red 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-red-900)`: #b9161e — Red 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-red-1000)`: #a40910 — Red 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-red-1100)`: #540001 — Red 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-red-1200)`: #370001 — Red 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.


### Orange

- `var(--k-color-orange-100)`: #fdf7f0 — Orange 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-orange-200)`: #fcf0e0 — Orange 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-orange-300)`: #fae2c4 — Orange 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-orange-400)`: #f9c48c — Orange 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-orange-500)`: #fba656 — Orange 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-orange-600)`: #fd8726 — Orange 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-orange-700)`: #f86800 — Orange 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-orange-800)`: #cb4700 — Orange 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-orange-900)`: #a53900 — Orange 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-orange-1000)`: #903100 — Orange 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-orange-1100)`: #451700 — Orange 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-orange-1200)`: #2b0e00 — Orange 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.


### Yellow

- `var(--k-color-yellow-100)`: #fff9e5 — Yellow 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-yellow-200)`: #fff5d2 — Yellow 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-yellow-300)`: #ffeaa2 — Yellow 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-yellow-400)`: #ffe075 — Yellow 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-yellow-500)`: #ffd23f — Yellow 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-yellow-600)`: #fcc10f — Yellow 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-yellow-700)`: #e19e00 — Yellow 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-yellow-800)`: #ab6f00 — Yellow 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-yellow-900)`: #935d00 — Yellow 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-yellow-1000)`: #734600 — Yellow 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-yellow-1100)`: #372100 — Yellow 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-yellow-1200)`: #211400 — Yellow 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.


### Green

- `var(--k-color-green-100)`: #f5f9f3 — Green 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-green-200)`: #ebf4e8 — Green 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-green-300)`: #daead3 — Green 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-green-400)`: #b6d7a9 — Green 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-green-500)`: #99c586 — Green 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-green-600)`: #7eb567 — Green 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-green-700)`: #66a44c — Green 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-green-800)`: #408225 — Green 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-green-900)`: #306a17 — Green 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-green-1000)`: #275c12 — Green 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-green-1100)`: #122b07 — Green 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-green-1200)`: #0b1a05 — Green 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.


### Teal

- `var(--k-color-teal-100)`: #f3f9fa — Teal 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-teal-200)`: #e6f3f6 — Teal 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-teal-300)`: #d2eaef — Teal 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-teal-400)`: #a3d6df — Teal 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-teal-500)`: #7ec4d2 — Teal 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-teal-600)`: #5db2c3 — Teal 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-teal-700)`: #40a1b4 — Teal 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-teal-800)`: #1b7e91 — Teal 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-teal-900)`: #106677 — Teal 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-teal-1000)`: #0b5868 — Teal 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-teal-1100)`: #042a32 — Teal 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-teal-1200)`: #03191e — Teal 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.


### Blue

- `var(--k-color-blue-100)`: #eff8ff — Blue 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-blue-200)`: #e8f3fb — Blue 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-blue-300)`: #d9e8f4 — Blue 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-blue-400)`: #b9d0e3 — Blue 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-blue-500)`: #9fbcd6 — Blue 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-blue-600)`: #88aaca — Blue 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-blue-700)`: #7298be — Blue 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-blue-800)`: #4676a6 — Blue 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-blue-900)`: #295f96 — Blue 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-blue-1000)`: #18528c — Blue 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-blue-1100)`: #001f5a — Blue 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-blue-1200)`: #00143c — Blue 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.


### Purple

- `var(--k-color-purple-100)`: #f9f7fb — Purple 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-purple-200)`: #f4f1f7 — Purple 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-purple-300)`: #e9e4f0 — Purple 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-purple-400)`: #d4c9e1 — Purple 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-purple-500)`: #c3b3d5 — Purple 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-purple-600)`: #b29ec9 — Purple 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-purple-700)`: #a28bbe — Purple 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-purple-800)`: #8565aa — Purple 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-purple-900)`: #704c9c — Purple 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-purple-1000)`: #643c93 — Purple 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-purple-1100)`: #330072 — Purple 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.
- `var(--k-color-purple-1200)`: #20004c — Purple 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the [semantic colors](#color) instead that define purpose & intent.