Get up and running in minutes. Install the packages you need, pull in our tokens and fonts, 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 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 #

Two packages are stable and ready to use in production:

  • Icon library (@kesko/iconography). ~400 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.

In active development, expected later this year:

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

Install packages #

Install with your preferred package manager:

npm install @kesko/iconography @kesko/fonts

Your first integration #

Load the typeface and render an icon:

import "@kesko/fonts/dist/fonts.css";
import { IconHome } from "@kesko/iconography/react";

export default function App() {
  return (
    <main className="kesko-app">
      <h1>
        <IconHome size="md" /> Hello world!
      </h1>
    </main>
  );
}

See the Webfonts and Icon library pages for per-package setup, import paths, and more examples.

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.