Design System

Introduction

The design system has two main parts. The css framework and the components. The css framework consists of the following parts:

All the css framework parts are in different layers and documentation for them can be found on this page. Layers follow the same order as above.

@layer reset, foundations, semantics, base, components, layouts, utils;

The component system is a collection of webcomponents There is some overlap between the two. For example there is a css-component called card as well as a webcomponent called card.

Colors

Our color system uses a three-layer architecture that separates foundation colors from semantic meaning, enabling consistent theming across light and dark modes.

Color Architecture

The system is built on three layers:

Foundation Layer - Base HSL values (hue, saturation) without lightness:

Semantic Layer - Purpose-driven tokens that reference foundation colors:

Theme Layer - Lightness values that change between light and dark modes. Each theme adjusts only the lightness value while maintaining the same hue and saturation from the foundation layer.

Color Reference

All color tokens are available as CSS custom properties. Click any token name to copy it to your clipboard.

Definitions

Softer
Soft
Mid
Loud
Louder

Fills

Softer

Strokes

Text on

Text

Text colors provide hierarchy through strength levels (default, weak, weaker, weakest) and semantic meaning for links and status messages.

  • var(--color-text)
    Default text color. Used as the main text color throughout the UI. Provides good and legible contrast for our content.
  • var(--color-text-weak)
    Weak text color. Used for e.g. introduction paragraphs and help texts that are coupled with form elements.
  • var(--color-text-weaker)
    Weaker text color. Used for e.g. disabled buttons, footers, table headings, captions and placeholder texts.
  • var(--color-text-weakest)
    Weakest text color. Used for e.g. disabled input text and placeholder text in focused inputs.
  • var(--color-text-link)
    Default link text color. Used for all paragraph level links in an user interface.

Backgrounds & Surfaces

Background colors define the base canvas, while surface colors create layered depth through raised and lowered variants.

  • var(--color-background)
    Default application background color. Should be set to either html or body element.
  • var(--color-surface)
    Default application surface color. Use this for e.g. card backgrounds.
  • var(--color-surface-raised)
    Default raised surface color. Use this when you need to separate a specific layer from the surface color, e.g. table headers.

Borders

Border colors define boundaries and interactive states. Use the default border for most cases, strong borders for emphasis, and semantic borders for status indicators.

  • var(--color-stroke)
    Default stroke color
  • var(--color-stroke-strong)
    Strong stroke color for highlighting specific parts in the user interface.
  • var(--color-stroke-hover)
    Default stroke hover color.

Interactive Elements

Specialized colors for buttons and icons ensure consistent interactive states.

  • var(--color-button-hover)
    Default button hover background color.
  • var(--color-button-active)
    Default button active background color.
  • var(--color-icon)
    Default icon color
  • var(--color-icon-hover)
    Default icon hover color

Typography

Our typography system uses monospace fonts for a technical, precise aesthetic.

Font Families

IBM Plex Mono

Primary font for body text and UI elements

Aa

Regular

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Xx Yy Zz Åå Ää Öö

Medium

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Xx Yy Zz Åå Ää Öö

Bold

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Xx Yy Zz Åå Ää Öö

Departure Mono

Display font for headings and emphasis

Aa

Regular

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Xx Yy Zz Åå Ää Öö

Bold

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Xx Yy Zz Åå Ää Öö

Type Scale

The type scale provides consistent sizing across all text elements:

Heading 1

2rem bold / 1.1 (Departure Mono)

Heading 2

1.5rem medium / 1.1 (IBM Plex Mono)

Body text for paragraphs and general content.

1rem regular / 1.4 (IBM Plex Mono)

Small text for captions and secondary information.

0.875rem regular / 1.4 (IBM Plex Mono)

Typesetting container

The .typesetting class is used for long-form written content like articles, blog posts, and documentation. It automatically manages vertical rhythm and spacing between text elements.

Without .typesetting

Article Title

Introduction

This is a paragraph without the typesetting class. Notice how the spacing feels inconsistent and elements appear cramped together.

Main Content

Another paragraph here to show the spacing issues when not using the typesetting utility.

 With .typesetting

Article Title

Introduction

This is a paragraph with the typesetting class applied. The spacing is consistent and creates a natural reading rhythm.

Main Content

Another paragraph demonstrating the improved vertical rhythm and breathing room between elements.

CSS Utilities

Utility classes for spacing, borders, and layout. All utilities use logical properties for better internationalization support.

Directional Suffixes

Utilities support directional variants using logical property naming:

Size Tokens

Most utilities support these size scales:

Borders

Border utilities add borders to elements using the [data-border] attribute. Combine with [data-variant] for different looks.

Default

[data-border]

Inline

[data-border=“i”]
[data-border=“is”]
[data-border=“ie”]

Block

[data-border=“b”]
[data-border=“bs”]
[data-border=“be”]

Border Variants

Use [data-variant] to apply different border styles:

[data-border] [data-variant=“strong”]

[data-border] [data-variant=“accent”]

Available variants: strong, accent, danger, success, neutral, info, warning

Backgrounds

Background utilities apply background colors using the [data-background] attribute. Use [data-text] for text colors on accent fills.

[data-background]

[data-background=“surface”]

[data-background=“surface-raised”]

[data-background=“accent-softer”] [data-text=“on-accent-soft”]

[data-background=“accent-soft”] [data-text=“on-accent-soft”]

[data-background=“accent-mid”] [data-text=“on-accent-mid”]

[data-background=“accent-loud”] [data-text=“on-accent-loud”]

[data-background=“accent-louder”] [data-text=“on-accent-loud”]

Gaps

Gap utilities control spacing between flex or grid items. Works with any layout container that supports the gap property.

data-gap=“3”
data-gap=“3”
data-gap=“3”
data-gap=“fluid-3”
data-gap=“fluid-3”
data-gap=“fluid-3”

Available sizes: 000, 00, 1-15, fluid-1 through fluid-10

Margin

Margin utilities add space outside elements using the [data-margin] attribute. Supports all directional variants and includes auto for centering.

All Sides

[data-margin=“1”]

[data-margin=“fluid-5”]

Inline

[data-margin=“i-2”] (left & right)
[data-margin=“is-3”] (left)
[data-margin=“ie-3”] (right)
[data-margin=“i-fluid-3”]

Block

[data-margin=“b-2”] (top & bottom)
[data-margin=“bs-3”] (top)
[data-margin=“be-3”] (bottom)
[data-margin=“b-fluid-3”]

Available sizes: 000, 00, 1-15, fluid-1 through fluid-10, auto

Padding

Padding utilities add space inside elements using the [data-padding] attribute.

All Sides

[data-padding=“1”]
[data-padding=“fluid-5”]

Inline

[data-padding=“i-2”] (left & right)
[data-padding=“is-3”] (left)
[data-padding=“ie-3”] (right)
[data-padding=“i-fluid-3”]

Block

[data-padding=“b-2”] (top & bottom)
[data-padding=“bs-3”] (top)
[data-padding=“be-3”] (bottom)
[data-padding=“b-fluid-3”]

Available sizes: 000, 00, 1-15, fluid-1 through fluid-10

Stack

Stack components create flex layouts for arranging items vertically or horizontally.

Combine with [data-gap], [data-align], and [data-justify] attributes for spacing and alignment.

.stack

.stack

.stack [data-gap=“3”]

.stack [data-gap=“3”]

.stack [data-direction=“row”]

.stack [data-direction=“row”]

.stack [data-direction=“row”] [data-gap=“3”]

.stack [data-direction=“row”] [data-gap=“3”]


more content

.stack [data-direction=“row”] [data-align=“start”]

.stack [data-direction=“row”] [data-align=“start”]


more content

.stack [data-direction=“row”] [data-align=“end”]

.stack [data-direction=“row”] [data-align=“end”]


more content

.stack [data-direction=“row”] [data-justify=“center”]

.stack [data-direction=“row”] [data-justify=“center”]


more content

.stack [data-direction=“row”] [data-align=“stretch”] [data-gap=“3”]

.stack [data-direction=“row”] [data-align=“stretch”] [data-gap=“3”]


more content

Stack2 (Grid-based)

Grid-based alternative to Stack. Uses display: grid with grid-auto-flow instead of flexbox.

Combine with [data-gap], [data-align], and [data-justify] attributes for spacing and alignment.

.stack2

.stack2

.stack2 [data-gap=“3”]

.stack2 [data-gap=“3”]

.stack2 [data-direction=“row”]

.stack2 [data-direction=“row”]

.stack2 [data-direction=“row”] [data-gap=“3”]

.stack2 [data-direction=“row”] [data-gap=“3”]


more content

.stack2 [data-direction=“row”] [data-align=“start”]

.stack2 [data-direction=“row”] [data-align=“start”]


more content

.stack2 [data-direction=“row”] [data-align=“end”]

.stack2 [data-direction=“row”] [data-align=“end”]


more content

.stack2 [data-direction=“row”] [data-justify=“center”]

.stack2 [data-direction=“row”] [data-justify=“center”]


more content

.stack2 [data-direction=“row”] [data-align=“stretch”] [data-gap=“3”]

.stack2 [data-direction=“row”] [data-align=“stretch”] [data-gap=“3”]


more content

Align

Alignment utilities for controlling justify-content and align-items using data attributes.

Justify Content

Controls main-axis alignment (horizontal in row, vertical in column).

Align Items

Controls cross-axis alignment (vertical in row, horizontal in column).

Typesetting

The .typesetting class creates consistent vertical rhythm for text-heavy content using CSS Grid.

Use Cases

Apply .typesetting to containers with:

Without .typesetting

Article Title

Introduction

This is a paragraph without the typesetting class. Notice how the spacing feels inconsistent and elements appear cramped together.

Main Content

Another paragraph here to show the spacing issues when not using the typesetting utility.

 With .typesetting

Article Title

Introduction

This is a paragraph with the typesetting class applied. The spacing is consistent and creates a natural reading rhythm.

Main Content

Another paragraph demonstrating the improved vertical rhythm and breathing room between elements.

Components

Reusable components ensure consistency and accelerate development.

Buttons

Buttons trigger actions and come in multiple variants for different contexts.

Forms

Form elements follow consistent styling patterns and provide clear feedback states.

Navigation components help users move through the interface efficiently.

Cards

Cards group related content and actions in a contained, scannable format.

Card Element Title

This is the main content of the card element.

It uses web components with shadow DOM.

Card element footer
Outline Variant

This card element has a outline variant.

Footer info
Card Element with Title Only

This card element has a title but no footer.

Card Element with Content Only

No title or footer, just content.

Card Elements in a .collection

Card Element 1

This is the main content.

Using web components.

More text

Footer info
Card Element 2

This is the main content.

Using web components.

Footer info
Card Element 3

Shorter content.

Footer info
Card Element 4

Another card.

Footer info

Tabs

Tab containers provide accessible navigation between related content panels.

Content for tab 1

For full documentation, see the official tab-container-element docs.

Documentation

All components are documented with usage examples, props, and accessibility considerations.