# Kesko Design System > Kesko Design System is a modular design infrastructure for Kesko Oyj's internal product teams. It ships design tokens, a color palette generator, 345+ SVG icons (with React components), and the SkattaSansUI typeface — all as installable npm packages. The system is framework-agnostic, built on web standards, and treats LLM-friendliness as a first-class requirement alongside accessibility and code quality. ## Status Kesko Design System is in active alpha. APIs and token values may change before stable release. Icons and fonts packages are at release candidate stage and ready for piloting. ## Packages - `@kesko/iconography` — 345+ SVG icons as ES modules and React components. Install: `pnpm add @kesko/iconography` - `@kesko/tokens` — Design tokens (color, font) compiled from YAML via Style Dictionary to CSS, SCSS, LESS, JS, TS, JSON, iOS, Android, Compose. Install: `pnpm add @kesko/tokens` - `@kesko/color` — Contrast-based color palette generator. 9 families × 12 steps (100–1200). Feeds into `@kesko/tokens`. - `@kesko/fonts` — SkattaSansUI typeface as `@font-face` declarations (CSS, SCSS, LESS) with woff2/woff files. Install: `pnpm add @kesko/fonts` - `@kesko/components`, `@kesko/css`, `@kesko/themes` — Planned, not yet available. ## Naming conventions Everything uses the `k-` prefix. Lowercase ASCII and hyphens only. - CSS custom properties: `--k-{component}-{property}` (e.g. `--k-button-border-radius`) - Design tokens: `k-{category}-{name}-{variant}` (e.g. `k-color-text-accent`, `k-font-size-md`) - CSS classes: `.k-{name}-{modifier}` (e.g. `.k-button-outline`) - Components: `` (e.g. ``) - Sizes use the t-shirt scale: `3xs`, `2xs`, `xs`, `sm`, **`md`** (default), `lg`, `xl`, `2xl`, `3xl` ## Architecture - Components are standards-based Custom Elements, compatible with Next.js, React, Vue, Angular, and vanilla JS. - CSS uses logical properties (`inline-size` not `width`, `block-size` not `height`). Colors, font sizes, and other values must use CSS custom properties — no raw values. - Versioning follows Semantic Versioning. See the [changelog](https://kesko.design/changelog.md) for release history. ## Docs - [Design tokens](https://kesko.design/tokens.md): Complete reference and usage guide for @kesko/tokens. Covers installation and usage across all platform formats (CSS, SCSS, LESS, JavaScript, ES module, TypeScript, JSON, iOS Swift, Android XML). Token categories: accent colors, background colors, border colors, fill colors, overlay colors, status colors, text colors, brand colors (Kesko, K-Citymarket, K-Supermarket, K-Market, K-Rauta, K-Auto, Kespro, and more), font families, font weights, font sizes, font leading, layers (z-index), motion durations, motion easing curves, opacity, border radius, shadows, sizes, spacing, and 120 primitive color palette tokens (10 families × 12 contrast-based steps, including neutral-dark for dark mode). Tokens are defined as YAML and compiled by Style Dictionary. - [Themes](https://kesko.design/themes.md): Planned section for Kesko brand themes (@kesko/themes). Not yet available. - [Webfonts](https://kesko.design/webfonts.md): How to install and use the @kesko/fonts package, which ships the SkattaSansUI typeface as @font-face declarations in CSS, SCSS, and LESS. Covers all 8 font variants (Regular, RegularItalic, Medium, MediumItalic, Bold, Black, BoldNarrow, BlackNarrow), configurable SCSS/LESS variables for font path and font-display, and integration examples. - [Naming](https://kesko.design/naming.md): The following set of principles guide our team when naming things in the system. These principles are loosely based on the guidelines from Brad Frost’s CSS Architecture for Design Systems. - [Color palette](https://kesko.design/colors.md): How to install and use the @kesko/color package, a contrast-based color palette generator built on D3 color and Adobe Leonardo. Covers installation, the 9 brand color families (neutral, beige, red, orange, yellow, green, teal, blue, purple) with 12 contrast-based steps each (100-1200), the neutral-dark palette for dark mode (inverse of neutral, calculated against a dark background), light-to-dark mode color mapping using palette symmetry, the keskoPalette() and keskoTheme() helper APIs for building and extending palettes, the prebuilt named exports, and the WCAG contrast step scale. - [Roadmap](https://kesko.design/roadmap.md): The roadmap of Kesko Design System, based on our future planned design and development path. Subject to change based on user needs and feedback. - [Core principles](https://kesko.design/principles.md): These principles form the foundation of Kesko Design System. They guide our team when working on different parts of the system and help us do better and more informed decisions. - [Our goals](https://kesko.design/goals.md): Includes a list of primary goals for the Kesko Design System which are based on challenges we found in organization wide user research. - [Introduction](https://kesko.design.md): Landing page for Kesko Design System. Provides an overview of the system’s purpose, links to getting started, and FAQs explaining what a design system is and why Kesko has one. - [Icon library](https://kesko.design/icons.md): Complete reference for @kesko/iconography. Lists all 360+ SVG icons with categories, tags, and import paths for React, JavaScript ES modules, and raw SVG. Covers installation, React component API (size, label, color props), JavaScript usage, SVG usage, accessibility guidelines, TypeScript types, and metadata. Tested with React 17, 18, 19, and Next.js. - [Support](https://kesko.design/help.md): Support channels and contact information for Kesko Design System. Covers Slack channels, bi-weekly office hours, monthly updates, email support, contribution model, and how to file bug reports or feature requests via GitHub. - [Guidelines](https://kesko.design/guidelines.md): Guidelines section covering naming conventions, color palette, webfonts, and other design and development standards for Kesko Design System. - [Getting started](https://kesko.design/start.md): Entry point for onboarding to Kesko Design System. Links to core principles, goals, and the project roadmap. - [Figma toolkit](https://kesko.design/figma.md): Planned section for Kesko Design System's Figma toolkit. Not yet ready for piloting. - [FAQ](https://kesko.design/faq.md): Frequently asked questions about Kesko Design System and its usage. - [Downloads](https://kesko.design/downloads.md): Planned downloads page for Kesko Design System assets. Not yet available. - [CSS framework](https://kesko.design/css.md): Planned section for Kesko CSS framework (@kesko/css). Not yet available. - [Components](https://kesko.design/components.md): Planned section for Kesko Design System web components (@kesko/components). Not yet available. - [Changelog](https://kesko.design/changelog.md): Release history for all Kesko Design System packages: @kesko/iconography, @kesko/fonts, @kesko/tokens, and @kesko/color. Documents each version's changes, new features, and bug fixes.