Kesko CSS framework ships the full set of the CSS custom properties, Skatta Sans UI typeface, and Tailwind-style utility classes, with optional component classes as an add-on.

Installation #

To install the CSS framework as a dependency in your project, run:

npm install @kesko/css

Usage #

Import the base stylesheet into your project:

@import "@kesko/css/dist/kesko.min.css";

This gives you:

  1. All --k-* custom properties on :root
  2. @font-face declarations for SkattaSansUI (woff2 + woff)
  3. Utility classes for colors, typography, spacing, borders, radius, and shadows

Component classes (optional) #

The component classes that mirror @kesko/components ship as a separate stylesheet. Load it when you need those components in plain HTML:

@import "@kesko/css/dist/kesko.min.css";
@import "@kesko/css/dist/components.min.css";

React consumers do not need this import. @kesko/components pulls in the matching CSS per component automatically.

Applying a brand theme #

To apply a brand theme on top, add a theme override from @kesko/themes:

@import "@kesko/css/dist/kesko.min.css";
@import "@kesko/themes/dist/k-rauta.css";

Because all utility classes reference design token custom properties via var(), they automatically adapt when a theme overrides those properties. There is no need for dark mode utility prefixes; swapping a theme file handles it transparently.

Utility classes #

Utility class names follow Tailwind CSS conventions, prefixed with k-. All directional utilities use CSS logical properties for RTL support.

Text colors #

Set color from semantic text tokens.

The quick brown fox k-text
The quick brown fox k-text-weak
The quick brown fox k-text-accent
The quick brown fox k-text-link
The quick brown fox k-text-disabled
The quick brown fox k-text-inverted
The quick brown fox k-text-on-accent
The quick brown fox k-text-on-error
<p class="k-text">Default text</p>
<p class="k-text-weak">Secondary text</p>
<p class="k-text-accent">Accent text</p>

Background colors #

Set background-color from semantic background, status, fill, and surface tokens.

k-bg
k-bg-muted
k-bg-subtle
k-bg-inverted
k-bg-accent
k-bg-status-error
k-bg-status-success
k-bg-fill
<div class="k-bg">Default background</div>
<div class="k-bg-muted">Muted surface</div>
<div class="k-bg-accent">Accent surface</div>

Borders #

The base .k-border class applies a solid border using --k-size-border width and --k-color-border color. Directional variants use CSS logical properties. Color variants change only the border-color.

k-border
k-border-x
k-border-y
k-border-t
k-border-b
k-border-active
k-border-warning
<div class="k-border">All sides</div>
<div class="k-border-t">Top only</div>
<div class="k-border k-border-active">Active border color</div>

Font sizes #

Set font-size from font size tokens. Uses the text- prefix following Tailwind convention.

The quick brown fox jumps over the lazy dog k-text-3xs
The quick brown fox jumps over the lazy dog k-text-2xs
The quick brown fox jumps over the lazy dog k-text-xs
The quick brown fox jumps over the lazy dog k-text-sm
The quick brown fox jumps over the lazy dog k-text-md
The quick brown fox jumps over the lazy dog k-text-lg
The quick brown fox jumps over the lazy dog k-text-xl
The quick brown fox jumps over the lazy dog k-text-2xl
The quick brown fox jumps over the lazy dog k-text-3xl
<p class="k-text-sm">Small text</p>
<p class="k-text-lg">Large text</p>
<h1 class="k-text-3xl">Heading</h1>

Font weights #

The quick brown fox k-font-normal
The quick brown fox k-font-medium
The quick brown fox k-font-bold
The quick brown fox k-font-black
<span class="k-font-normal">Normal</span>
<span class="k-font-bold">Bold</span>
<span class="k-font-black">Black</span>

Font families #

The quick brown fox jumps over the lazy dog k-font-sans
The quick brown fox jumps over the lazy dog k-font-code
<p class="k-font-sans">Sans-serif text</p>
<code class="k-font-code">Monospace text</code>

Line heights #

Line height xs applied to a longer paragraph that wraps to multiple lines to show the effect of different leading values. k-leading-xs
Line height sm applied to a longer paragraph that wraps to multiple lines to show the effect of different leading values. k-leading-sm
Line height md applied to a longer paragraph that wraps to multiple lines to show the effect of different leading values. k-leading-md
<p class="k-leading-sm">Tight leading</p>
<p class="k-leading-md">Comfortable leading</p>

Padding #

Set padding from space tokens. Directional variants use CSS logical properties.

k-p-xs
content
k-p-sm
content
k-p-md
content
k-p-lg
content
k-p-xl
content
k-px-lg k-py-sm
content
<div class="k-p-md">16px padding on all sides</div>
<div class="k-px-lg k-py-sm">24px inline, 12px block</div>
<div class="k-pt-xl">32px padding at block-start</div>

Available suffixes: k-p, k-px, k-py, k-ps, k-pe, k-pt, k-pb. Available sizes: 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl.

Margin #

Same directional pattern as padding (k-m, k-mx, k-my, k-ms, k-me, k-mt, k-mb), plus auto helpers for centering.

k-mx-auto
<div class="k-m-md">16px margin on all sides</div>
<div class="k-mx-auto" style="width: 20rem">Centered block</div>

Gap #

Set gap from space tokens, used with flexbox or grid layouts.

k-gap-xs
A
B
C
k-gap-md
A
B
C
k-gap-xl
A
B
C
<div class="k-gap-md" style="display: flex">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Border radius #

Set border-radius from radius scale tokens. k-rounded with no size suffix maps to md (the system default).

k-rounded-none
k-rounded-xs
k-rounded-sm
k-rounded
k-rounded-lg
k-rounded-xl
k-rounded-pill
k-rounded-circle
<div class="k-rounded">Default radius (md)</div>
<div class="k-rounded-lg">Large radius</div>
<div class="k-rounded-pill">Pill shape</div>

Box shadows #

k-shadow
k-shadow-float
k-shadow-float-high
k-shadow-float-higher
k-shadow-popover
k-shadow-switch
<div class="k-shadow">Subtle shadow</div>
<div class="k-shadow-float">Floating card</div>
<div class="k-shadow-popover">Popover shadow</div>

Component classes #

For every component in @kesko/components, the framework also ships a matching set of CSS classes, so non-React consumers can apply the same look and feel with plain HTML. Use these for static markup or server-rendered views; for interactive behavior (loading states, keyboard handling, ARIA wiring), reach for @kesko/components instead.

Button #

Base class .k-button. Stack a variant and size modifier on top.

  • Variants: .k-button-primary, .k-button-secondary, .k-button-plain, .k-button-text, .k-button-inverted
  • Sizes: .k-button-sm, .k-button-lg (default is md)
  • Modifiers: .k-button-expand, .k-button-transparent, .k-button-icon-only
<button class="k-button k-button-primary">Primary</button>
<button class="k-button k-button-secondary k-button-lg">Large secondary</button>
<button class="k-button k-button-text">Text</button>
<button class="k-button" disabled>Disabled</button>

Each button exposes a public theming API via --k-button-* custom properties (-bg, -text, -border, -radius, and matching -hover / -active variants). Set them on :root or any scoped selector to override defaults for a single instance, a section, or the whole app.

Spinner #

.k-spinner wraps four <span> children that animate as bouncing dots.

Sizes: .k-spinner-sm, .k-spinner-lg, .k-spinner-xl, .k-spinner-2xl. The default size inherits from the current font size, which makes the spinner compose cleanly inside buttons and other text contexts.

<span class="k-spinner" role="status" aria-label="Loading">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</span>

Theming: --k-spinner-color, --k-spinner-size.

Stack #

.k-stack is a flex layout primitive with a md gap by default.

  • Direction: .k-stack-row
  • Wrap: .k-stack-wrap
  • Alignment: .k-stack-align-center, .k-stack-align-end, .k-stack-align-stretch
  • Gap: .k-stack-gap-3xs through .k-stack-gap-3xl (omit for the default md)
<div class="k-stack k-stack-row k-stack-gap-sm k-stack-align-center">
  <button class="k-button">A</button>
  <button class="k-button">B</button>
</div>

Visually hidden #

.k-visually-hidden removes an element visually while keeping it available to assistive technologies. Used for screen-reader-only labels.

<button class="k-button">
  <svg aria-hidden="true">…</svg>
  <span class="k-visually-hidden">Close dialog</span>
</button>

Example #

Combining utilities and component classes to build a card:

Card title

Supporting text with muted color and compact size.

<div class="k-bg k-p-lg k-rounded-lg k-shadow">
  <h2 class="k-text k-text-2xl k-font-bold k-mb-sm">Card title</h2>
  <p class="k-text-weak k-text-sm k-leading-md k-mb-md">Supporting text with muted color and compact size.</p>
  <button class="k-button k-button-primary">Action</button>
</div>