# Quick start

> 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](/colors/), [icon library](/icons/), and [naming guidelines](/naming/) 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](/roadmap/) for the latest status.

> Note: We’ll reach out to product teams once the Figma toolkit is ready for testing and feedback. In the meantime, feel free to ask a question.

---

## 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](/icons/)** (`@kesko/iconography`). ~400 vector icons, available as SVG files, ES modules, or tree-shakeable React components.
- **[Webfonts](/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:

- **[Design tokens](/tokens/)** (`@kesko/tokens`)
- **[Color palette](/colors/)** (`@kesko/color`)
- **[Themes](/themes/)** (`@kesko/themes`)
- **[CSS framework](/css/)** (`@kesko/css`)
- **[Components](/components/)** (`@kesko/components`)

See the [roadmap](/roadmap/) for status updates and [releases](/releases/) for the change history.

### Install packages

Install with your preferred package manager:

```sh [npm]
npm install @kesko/iconography @kesko/fonts
```

```sh [pnpm]
pnpm add @kesko/iconography @kesko/fonts
```

```sh [yarn]
yarn add @kesko/iconography @kesko/fonts
```

```sh [bun]
bun add @kesko/iconography @kesko/fonts
```

### Your first integration

Load the typeface and render an icon:

```tsx
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](/webfonts/) and [Icon library](/icons/) 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:

```sh
npx skills add https://kesko.design
```

See [AI features](/ai/) 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](/releases/) page for the full change history and join our [Slack channel](/help/#slack-channels) 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](/faq/) for common topics.
- Open an issue or start a discussion on [GitHub](https://github.com/kesko-dev/design-system).
- See the [Help](/help/) page for all support channels.