Design tokens Draft, not ready for production use

Copy page

Copy content for LLMs View as Markdown          Open in Claude Open in ChatGPT

Primary accent color used for interactive elements and theming.

Secondary accent color used as the default background for secondary interactive elements.

Base background color used as the default page surface.

Disabled background color used for disabled controls.

Subtle background color used as a slightly recessed surface.

Muted background color used as the deepest neutral surface in the color hierarchy.

Inverted background color used for high-contrast surfaces.

Hover background color used to indicate interactive hover states.

Highlight background color used to draw attention to selected or important content.

Default border color used for static borders and outlines.

Active border color used to indicate the active or selected state of a bordered element.

Disabled border color used for the borders of disabled controls.

Warning border color used to indicate validation errors and warning states.

Hover border color used to indicate the hover state of a bordered element.

Focus border color used to indicate keyboard focus on interactive elements.

Divider border color used to separate content sections and list rows.

Default fill color.

Secondary fill color.

Tertiary fill color.

Decorative fill color used.

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.

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.

Background color for solid error messages and badges.

Background color for soft error messages and inline validation surfaces.

Background color for solid informational messages and badges.

Background color for soft informational messages and inline notes.

Background color for solid warning messages and badges.

Background color for soft warning messages and inline cautions.

Background color for solid success messages and badges.

Background color for soft success messages and confirmation surfaces.

Default text color used for the main body content.

Weak text color used for supporting copy and slightly de-emphasized content.

Weaker text color used for less emphasized supporting content.

Weakest text color used for muted helper text and metadata.

Disabled text color used for the lowest-emphasis text such as disabled labels.

Link text color that is used for links inside paragraph text.

Accent text color used for branded text and highlighted inline content.

Foreground color used on top of color.bg.inverted.

Foreground color used on top of color.status.error.

Foreground color used on top of color.status.error-weak.

Foreground color used on top of color.status.success.

Foreground color used on top of color.status.success-weak.

Foreground color used on top of color.status.info.

Foreground color used on top of color.status.info-weak.

Foreground color used on top of color.status.warning.

Foreground color used on top of color.status.warning-weak.

Foreground color used for content placed on top of color.accent.

Foreground color used for content placed on top of color.accent.secondary.

Foreground color used on top of color.bg.disabled.

Foreground color used for content placed on top of color.fill.decorative.

Kesko brand orange.

Kesko brand orange inverted.

Kesko pure black.

Kesko pure white.

K-Citymarket brand red.

K-Citymarket brand dark red.

K-Citymarket brand warm red.

K-Citymarket brand bright red.

K-Citymarket outlet section background yellow.

K-Supermarket brand blue.

K-Supermarket brand secondary blue.

K-Market brand berry.

K-Market brand burgundy.

K-Rauta brand violet.

K-Rauta brand green.

K-Rauta Procenter brand neutral.

Onninen brand blue.

Onninen brand teal.

K-bygg brand burgundy.

Byggmakker Pro brand neutral.

Byggmakker brand blue.

Byggmakker brand red.

K-Auto brand dark blue.

K-Auto approval peach.

K-Auto campaign neutral.

Kespro brand primary orange.

K-Business brand black.

Quick brown fox

Skatta Sans UI is the default font family utilized across all Kesko user interfaces.

Quick brown fox

Monospace typeface for code blocks and development purposes.

Quick brown fox

Default font weight for body text.

Quick brown fox

Default font weight for body text.

Quick brown fox

Default font weight for medium text.

Quick brown fox

Default font weight for bold text.

Quick brown fox

Default font weight for black text.

Quick brown fox

10px font size used for the smallest captions and disclaimers.

Quick brown fox

12px font size used for small labels, badges, and metadata.

Quick brown fox

13px font size used as a bridge between the small body and small label scales.

Quick brown fox

14px font size used for compact body copy and secondary controls.

Quick brown fox

16px font size used as the default body font size across the system.

Quick brown fox

18px font size used for emphasized body copy and small headings.

Quick brown fox

20px font size used for sub-section headings.

Quick brown fox

24px font size used for section headings.

Quick brown fox

32px font size used for page-level headings.

Quick brown fox
Quick brown fox

Extra small line-height. 1× the used font size.

Quick brown fox
Quick brown fox

Compact line-height. 1.25× the used font size.

Quick brown fox
Quick brown fox

Default body line-height. 1.5× the used font size.

Default layer used for the default in-flow content stacking context.

Deep layer used for stacking something behind everything else.

Masked layer for masked interface elements.

Mask layer for masking masked layers.

Sticky layer used for elements that should appear above the base content, such as sticky headers.

Overlay layer used for floating UI such as modals, popovers, and toast notifications.

The highest possibly layer that will always sit on top of everything else.

Extra-small motion duration used for instantaneous micro-feedback such as ripples and tap highlights.

Small motion duration used for snappy state changes such as hover and focus transitions.

Default motion duration used for the majority of UI transitions.

Large motion duration used for noticeable transitions such as panel slides and modal entries.

Extra-large motion duration used for prominent choreographed sequences.

XX-large motion duration used for loading animations.

Standard decelerate easing for elements entering the screen or settling into place.

Standard accelerate easing for elements leaving the screen or speeding away.

Emphasized decelerate easing used for prominent entrances and hero transitions.

Emphasized accelerate easing used for prominent exits and dismissive gestures.

Default opacity for fully opaque elements.

Opacity applied to elements in their active (pressed) state.

Opacity used for dimmed overlay surfaces such as scrim backgrounds.

Opacity used for translucent hover and pressed overlay layers.

Corner rounding for buttons.

Corner rounding for text inputs and select controls.

Corner rounding for checkboxes.

Default corner rounding applied to generic elements.

Square corners with no rounding.

Minimal corner rounding used on fine details and compact elements.

Subtle corner rounding used on tags and small inline controls.

Default corner rounding used on most controls and cards.

Large corner rounding used for larger surfaces.

Extra large corner rounding used on prominent containers and modals.

Rounded corners used on pills and fully rounded buttons.

Rounded corners used on circular items such as avatars.

Subtle elevation used for resting cards, list items, and toolbars.

Low floating elevation used for hovered cards and lightly raised surfaces.

Medium floating elevation used for popovers, dropdowns, and menus.

High floating elevation used for modals, dialogs, and overlays.

popover shadow.

toggle switch knob shadow.

Default border width for interface elements.

Border width for interface buttons.

Border width for interface badges.

Small size for interface loading spinners.

Default size for interface loading spinners.

Large size for interface loading spinners.

Extra large size for interface loading spinners.

XXL size for interface loading spinners.

Extra small size for icons that renders them in 16×16px.

Small size for icons that renders them in 20×20px.

Medium size for icons that renders them in 24×24px.

Large size for icons that renders them in 32×32px.

Extra large size for icons that renders them in 48×48px.

Button spacing used to calculate inline and block padding for buttons.

2px spacing used for the finest hairline gaps.

4px spacing used for tightly packed inline elements.

8px spacing used between closely related elements.

10px spacing used between small adjacent elements and inside compact controls.

12px spacing used between small adjacent elements and inside compact controls.

16px default spacing used as the base spacing unit across the system.

24px spacing used between sections within a card or panel.

32px spacing used between major content blocks on a page.

40px spacing used as a generous separator between distinct page sections.

48px spacing used as the largest standard layout gap.

Neutral 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral Dark 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral Dark 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral Dark 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral Dark 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral Dark 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral Dark 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral Dark 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral Dark 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral Dark 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral Dark 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral Dark 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Neutral Dark 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Beige 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Beige 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Beige 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Beige 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Beige 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Beige 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Beige 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Beige 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Beige 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Beige 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Beige 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Beige 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Red 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Red 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Red 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Red 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Red 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Red 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Red 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Red 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Red 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Red 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Red 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Red 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Orange 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Orange 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Orange 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Orange 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Orange 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Orange 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Orange 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Orange 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Orange 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Orange 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Orange 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Orange 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Yellow 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Yellow 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Yellow 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Yellow 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Yellow 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Yellow 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Yellow 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Yellow 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Yellow 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Yellow 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Yellow 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Yellow 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Green 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Green 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Green 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Green 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Green 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Green 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Green 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Green 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Green 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Green 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Green 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Green 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Teal 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Teal 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Teal 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Teal 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Teal 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Teal 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Teal 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Teal 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Teal 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Teal 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Teal 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Teal 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Blue 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Blue 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Blue 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Blue 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Blue 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Blue 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Blue 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Blue 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Blue 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Blue 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Blue 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Blue 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Purple 100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Purple 200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Purple 300 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Purple 400 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Purple 500 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Purple 600 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Purple 700 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Purple 800 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Purple 900 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Purple 1000 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Purple 1100 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.

Purple 1200 (generated by @kesko/color). In most cases, you should not use this primitive directly, but use the semantic colors instead that define purpose & intent.