design-system

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 design and development phase and not yet ready for production use. The exact values provided will change as we get closer to the production release.

from “macros/tokens.njk” import table, tokenColorRow, tokenFontRow

Primitives

call table() {# Primitive palette — all families in brand order, steps 100–1200 #} for family in tokens.colorPalette for step in family.steps tokenColorRow(step) endfor endfor endcall

Color

call table() {# Flat semantic tokens, e.g. “color.accent” #} for key, item in tokens.color if item.value tokenColorRow(item) endif endfor {# Nested semantic tokens, e.g. “color.status.warning” — skip palette families #} for key, items in tokens.color if key not in tokens.paletteFamilyNames for key, item in items if item.value and item.original tokenColorRow(item) endif endfor endif endfor endcall

Font

call table() for key, item in tokens.font.weight tokenFontRow(item, “font-weight”) endfor for key, item in tokens.font.family tokenFontRow(item, “font-family”) endfor endcall