Get up and running in minutes. Install the packages you need, pull in our styles and themes, and start shipping intuitive, accessible interfaces that feel consistent across every Kesko product.

How designers use the system #

Until the Figma libraries ship, treat this site as the source of truth. The design tokens, themes, colors, icon library, and naming guidelines can already be referenced and tested today.

Access on Figma #

Bring your Figma concepts to life using Kesko Design System’s Figma toolkit. Currently under development, shipping later this year. Check our roadmap for the latest status.

How engineers use the system #

Kesko Design System is distributed as a set of npm packages under the @kesko scope. Install the packages you need, import them into your project, and you get the same tokens, fonts, and assets every other Kesko product uses.

Packages you can use today #

Stable and ready to use in production:

  • Icon library (@kesko/iconography). Vector icons available as SVG files, ES modules, or tree-shakeable React components.
  • Webfonts (@kesko/fonts). The Skatta Sans UI typeface, shipped as @font-face declarations in CSS, SCSS, or LESS.
  • Color palette (@kesko/color). Color palette is a selection of colors that work together to create consistency in digital products.

Pre-release, can be tested in production:

  • CSS framework (@kesko/css). CSS framework ships everything you need to start building applications.
  • Themes (@kesko/themes). Themes package ships per-brand CSS overrides for styling your application.
  • Design tokens (@kesko/tokens). We use tokens instead of hard coded values to ensure a better UI consistency across different platforms.
  • Components (@kesko/components). React components paired with plain-HTML examples, styled by @kesko/css.

See the roadmap for status updates and releases for the change history.

Install packages #

Install with your preferred package manager:

npm install @kesko/css @kesko/themes @kesko/components

Your first integration #

Import the CSS Framework and a single theme from Themes into your project:

<link rel="stylesheet" href="@kesko/css/dist/kesko.min.css" />
<link rel="stylesheet" href="@kesko/themes/dist/kespro.css" />

This gives you:

Then import the components you need:

import { Button } from "@kesko/components";

export function Toolbar() {
  return <Button onClick={() => save()}>Save</Button>;
}

See the components usage guidelines for React, Next.js and plain HTML setups.

Set up your AI assistant #

If you use an AI coding assistant, install our agent skills so it picks up Kesko Design System’s conventions on naming, tokens, themes, components, iconography, and styles automatically:

npx skills add https://kesko.design

See AI features for the full guidelines, including hosted llms.txt endpoints, hand-off to Claude or ChatGPT, and a drop-in instructions file for agentic IDEs.

Staying up to date #

Each package tracks its own version, so you can upgrade one piece without bumping the rest. Watch the releases page for the full change history and join our Slack channel to get notified when new major features ship.

Resources #

Essential tooling for Kesko Design System: Figma libraries, illustrations, typefaces, brand manuals, and more.

Contact us #

Have a question about integration, or want to request something that isn’t here yet?

  • Browse the FAQ for common topics.
  • Open an issue or start a discussion on GitHub.
  • See the Help page for all support channels.