/tɔːrbjɔːrn/

UI Library

Internal UI component library and design system documentation

Color scales

Base Colors
--black
--white
Iris Scale
--iris-1
--iris-2
--iris-3
--iris-4
--iris-5
--iris-6
--iris-7
--iris-8
--iris-9
--iris-10
--iris-11
--iris-12
Blue Scale
--blue-1
--blue-2
--blue-3
--blue-4
--blue-5
--blue-6
--blue-7
--blue-8
--blue-9
--blue-10
--blue-11
--blue-12
Green Scale
--green-1
--green-2
--green-3
--green-4
--green-5
--green-6
--green-7
--green-8
--green-9
--green-10
--green-11
--green-12
Orange Scale
--orange-1
--orange-2
--orange-3
--orange-4
--orange-5
--orange-6
--orange-7
--orange-8
--orange-9
--orange-10
--orange-11
--orange-12
Amber Scale
--amber-1
--amber-2
--amber-3
--amber-4
--amber-5
--amber-6
--amber-7
--amber-8
--amber-9
--amber-10
--amber-11
--amber-12
Purple Scale
--purple-1
--purple-2
--purple-3
--purple-4
--purple-5
--purple-6
--purple-7
--purple-8
--purple-9
--purple-10
--purple-11
--purple-12
Teal Scale
--teal-1
--teal-2
--teal-3
--teal-4
--teal-5
--teal-6
--teal-7
--teal-8
--teal-9
--teal-10
--teal-11
--teal-12
Cloud Scale
--cloud-1
--cloud-2
--cloud-3
--cloud-4
--cloud-5
--cloud-6
--cloud-7
--cloud-8
--cloud-9
--cloud-10
--cloud-11
--cloud-12

Color of the Year

Scales are generated from Pantone Color of the Year data and follow the active mode (light/dark).

Color semantics

Text
--text-default
--text-muted
--text-inverse
--text-link
--text-link-hover
--primary-strong
--text-accent (alias)
Background
--surface-page
--surface-default
--surface-elevated
--surface-inverse
--surface-tag
--surface-tag-hover
--surface-headline
Border
--border-subtle
--border-default
--border-strong
Primary, Secondary & Action
--action
--on-action
--primary
--on-primary
--secondary
--secondary-strong
--on-secondary
--brand-container (legacy)
--brand-on-container (legacy)
State Overlays
--state-page-hover
--state-page-active
--state-surface-hover
--state-surface-active
--state-primary-hover
--state-primary-active
--state-focus
--state-selected
Status
Error
--status-error-bg
--status-error-border
--status-error-text
Success
--status-success-bg
--status-success-border
--status-success-text
Warning
--status-warning-bg
--status-warning-border
--status-warning-text
Info
--status-info-bg
--status-info-border
--status-info-text

Typography

Font families

Sans sample

--font-sans

Serif sample

--font-serif

Mono sample

--font-mono

Display sample

--font-display

Heading sample

--font-heading

Body sample

--font-body

UI sample

--font-ui
Type scale

Aa

--text-xs

Aa

--text-sm

Aa

--text-base

Aa

--text-lg

Aa

--text-xl

Aa

--text-2xl

Aa

--text-3xl

Aa

--text-4xl

Aa

--text-5xl

Aa

--text-6xl

Aa

--text-7xl

Aa

--text-8xl

Aa

--text-9xl

Aa

--text-10xl

Aa

--text-11xl

Aa

--text-12xl

Display multiplier

--type-scale-display
Line-height

Line 1
Line 2

--line-height-tighter

Line 1
Line 2

--line-height-tight

Line 1
Line 2

--line-height-normal

Line 1
Line 2

--line-height-wide
Tracking

TRACKING

--tracking-tighter

TRACKING

--tracking-tight

TRACKING

--tracking-normal

TRACKING

--tracking-wide

TRACKING

--tracking-wider

TRACKING

--tracking-widest

DISPLAY

--display-tracking

HEADING

--heading-tracking

HEADLINE

--headline-tracking
Weight

Weight sample

--sans-weight-regular

Weight sample

--sans-weight-bold

Weight sample

--serif-weight-regular

Weight sample

--display-weight

Weight sample

--heading-weight

Spacing

--spacing-2
--spacing-4
--spacing-8
--spacing-12
--spacing-16
--spacing-24
--spacing-32
--spacing-40
--spacing-48
--spacing-64
--spacing-80
--spacing-96
--spacing-160

Size

Scale

--size-0

--size-2

--size-4

--size-8

--size-12

--size-16

--size-24

--size-32

--size-40

--size-48

--size-64

--size-80

--size-96

--size-160

Layout

--size-header-height

--size-page-margins

--size-menu-width

--size-menu-width-md

--size-menu-width-lg

--size-menu-width-xl

--size-header-height-neg

Measures

--content-max-width

--content-max-width-narrow

--content-max-width-wide

--measure-narrow

--measure-medium

--measure-wide

--measure-prose

Radius

--radius-2

--radius-4

--radius-8

--radius-16

--radius-24

--radius-32

--radius-pill

Shadows

--shadow-01

10/15/6 multi-layer

--shadow-02

8/20/6 overlay

--shadow-03

1/2 micro

Rings

--ring-focus

Focus indicator

--ring-error

Validation error

--ring-selected

Selected state

--ring-selected-emphasis

Offset + highlight

Motion

Duration

--motion-duration-fast

--motion-duration-base

--motion-duration-slow

--motion-duration-slower

Easing

--motion-ease-standard

--motion-ease-decelerate

--motion-ease-accelerate

--motion-ease-emphasized

Distance & state-layer

--motion-distance-sm

--motion-distance-md

--state-layer-duration

--state-layer-ease

12-Column Grid System

A 12-column subgrid system with flexible column spans and placements.

Full Width (12 columns)

col-span-12
Show HTML
<div class="use-subgrid">
                  <div class="col-span-12">...</div>
                  </div>

50/50 Split (6+6)

col-span-6
col-span-6
Show HTML
<div class="use-subgrid">
                  <div class="col-span-6">...</div>
                  <div class="col-span-6">...</div>
                  </div>

Thirds (4+4+4)

col-span-4
col-span-4
col-span-4
Show HTML
<div class="use-subgrid">
                  <div class="col-span-4">...</div>
                  <div class="col-span-4">...</div>
                  <div class="col-span-4">...</div>
                  </div>

2:1 Ratio (8+4)

col-span-8 (wide)
col-span-4
Show HTML
<div class="use-subgrid">
                  <div class="col-span-8">...</div>
                  <div class="col-span-4">...</div>
                  </div>

Specific Placement

col-start-3 col-span-8
Show HTML
<div class="use-subgrid">
                  <div class="col-start-3 col-span-8">...</div>
                  </div>

Asymmetric Layout

3 cols
6 cols
3 cols
Show HTML
<div class="use-subgrid">
                  <div class="col-span-3">...</div>
                  <div class="col-span-6">...</div>
                  <div class="col-span-3">...</div>
                  </div>

Art-Direction Placement

Placement presets via --col custom property. Each block can be art-directed with a class or inline style="--col: col-start 3 / span 8;".

.place-full (col 1–12)

place-full
Show HTML
<div class="use-subgrid">
                  <div class="place-full">...</div>
                  </div>

.place-wide (col 1–10)

place-wide
Show HTML
<div class="use-subgrid">
                  <div class="place-wide">...</div>
                  </div>

.place-prose (col 1–8)

place-prose
Show HTML
<div class="use-subgrid">
                  <div class="place-prose">...</div>
                  </div>

.place-narrow (col 2–9)

place-narrow
Show HTML
<div class="use-subgrid">
                  <div class="place-narrow">...</div>
                  </div>

.place-article (xl: col 3-10, lg: col 2-11, md: col 1-12)

place-article
Show HTML
<div class="use-subgrid">
                  <div class="place-article">...</div>
                  </div>

.place-aside (col 9–12)

place-aside
Show HTML
<div class="use-subgrid">
                  <div class="place-aside">...</div>
                  </div>

.place-aside-left (col 1–4)

place-aside-left
Show HTML
<div class="use-subgrid">
                  <div class="place-aside-left">...</div>
                  </div>

Inline --col (col 4–9)

style="--col: col-start 4 / span 6;"
Show HTML
<div class="use-subgrid">
                  <div style="--col: col-start 4 / span 6;">...</div>
                  </div>

Combined: prose + aside (same row)

place-prose
place-aside
Show HTML
<div class="use-subgrid">
                  <div class="place-prose" style="--row: 1;">...</div>
                  <div class="place-aside" style="--row: 1;">...</div>
                  </div>

Stepped Text (Staircase)

Text blocks that shift horizontally across the grid. Each element is placed in its own row and offset by a fixed number of columns.

.stepped-3-3 ( offset 3, span 3 )

Step 1
Step 2
Step 3
Step 4
Show HTML
<div class="use-subgrid stepped-3-3">
                  <p>Step 1</p>
                  <p>Step 2</p>
                  <p>Step 3</p>
                  <p>Step 4</p>
                  </div>

.stepped-2-4 ( offset 2, span 4, overlapping )

Step 1
Step 2
Step 3
Step 4
Step 5
Show HTML
<div class="use-subgrid stepped-2-4">
                  <p>Step 1</p>
                  <p>Step 2</p>
                  <p>Step 3</p>
                  <p>Step 4</p>
                  <p>Step 5</p>
                  </div>

.stepped-4-4 ( offset 4, span 4, three steps )

Step 1
Step 2
Step 3
Show HTML
<div class="use-subgrid stepped-4-4">
                  <p>Step 1</p>
                  <p>Step 2</p>
                  <p>Step 3</p>
                  </div>

.stepped-1-6 ( offset 1, span 6, slow drift )

Step 1
Step 2
Step 3
Step 4
Step 5
Show HTML
<div class="use-subgrid stepped-1-6">
                  <p>Step 1</p>
                  <p>Step 2</p>
                  <p>Step 3</p>
                  <p>Step 4</p>
                  <p>Step 5</p>
                  </div>

.stepped-6-6 ( offset 6, span 6, two-block diagonal )

Block 1 (col 1–6)
Block 2 (col 7–12)

Responsive: widens to 8 col at tablet (md), full width at mobile (sm).

Show HTML
<div class="use-subgrid stepped-6-6">
                  <div>Block 1</div>
                  <div>Block 2</div>
                  </div>

                  <!-- Responsive behaviour (built-in):
                  Desktop: 6+6 cols, diagonal
                  Tablet: 8+8 cols, overlapping
                  Mobile: full width, stacked -->

Accordion

File:
assets/css/components/accordion.css
Classes:
.accordion, .accordion__trigger, .accordion__content, .accordion-nested
Tokens:
--state-page-hover, --state-surface-hover, --state-layer-duration, --border-default
Accordion example

First section

This is the content of the first section.

Second section

Closed by default.

Feedback & overlays

File:
assets/css/components/toast.css, assets/css/components/chord-hud.css
Classes:
.toast, .chord-hud
Tokens:
--state-focus, --surface-default, --text-default, --border-default, --primary
Toast
Palette saved
Chord HUD
Palette + 1 2 3 4

Tabs

File:
assets/css/components/tabs.css, assets/js/tabs.js
Classes:
.tabs-nav, .tab-button, .tab-panel, .is-active
Hook:
data-js="tabs", data-tab, data-panel, data-tabs-storage-key
Tabs example

First panel with content.

Second panel with content.

Gallery

File:
layouts/shortcodes/gallery.html, assets/css/components/gallery.css
API:
layout (internal structure), place (AD placement)
Classes:
.gallery, .gallery--full, .gallery--1-1, .gallery--2x2, .use-subgrid, .place-*
Layout + placement

`layout` controls internal gallery structure. `place` controls placement in the art-direction grid.

full + place-full
1+1 / wide
1+1 / wide
2x2 / prose
2x2 / prose
2x2 / prose
2x2 / prose
Show shortcode
{{< gallery layout="full" place="full" >}}
                  ![Alt](image-1.webp)
                  {{< /gallery >}}

                  {{< gallery layout="1+1" place="wide" >}}
                  ![Alt](image-1.webp) ![Alt](image-2.webp)
                  {{< /gallery >}}

                  {{< gallery layout="2x2" place="prose" >}}
                  ![Alt](image-1.webp) ![Alt](image-2.webp) ![Alt](image-3.webp)
                  ![Alt](image-4.webp) {{< /gallery >}}

Typography

Classes:
.type-display-1, .type-display-2, .type-headline-1..5, .type-headline-small, .type-preamble, .type-body, .type-lead, .type-body-sm, .type-information
File:
assets/css/utilities/typography.css
Tokens:
--font-display, --font-heading, --font-body, --display-weight, --heading-weight, --display-tracking, --headline-tracking, --line-height-*
Typography scale

Display 2

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5

Headline small

Preamble introduces long-form content with a slightly larger size and calmer rhythm.

Body text is used for longer running content and should remain readable across multiple paragraphs.

Lead is used to elevate key lines in content.

Body small for secondary copy and helper text.

Information for labels, metadata, and technical copy.

Buttons

Classes:
.button, .button--primary, .button--secondary, .button--tertiary, .button--icon
File:
assets/css/components/button.css
Tokens:
--action, --on-action, --primary, --on-primary, --text-default, --border-default, --state-primary-hover
Default Button
Primary Button
Secondary Button (Outlined)
Tertiary Button (Text Only)
Button with Icon

Forms

Classes:
.input, .radio, .checkbox, .select, .form-group, .form-label
File:
assets/css/components/form.css
Tokens:
--primary, --border-default, --text-default, --text-muted, --iris-4, --orange-9
Text Inputs
This field contains an error
Textarea
Minimum 10 characters
Radio Buttons
Checkboxes
Select Dropdown
Toggle switch

Pagination

Classes:
.pagination, .pagination__link, .pagination__icon, .pagination__status
File:
assets/css/components/pagination.css
Tokens:
--spacing-12, --spacing-32, --state-surface-hover, --text-default, --text-muted, --border-subtle
Pagination example

Breadcrumb

Classes:
.application-breadcrumb
File:
assets/css/components/breadcrumb.css
Tokens:
--spacing-8, --text-muted
Breadcrumb example

Tags

Classes:
.tag, .tag-list, .tag-list__items, .tag-list__item, .tag-list__link
File:
assets/css/components/tags.css
Tokens:
--surface-tag, --surface-tag-hover, --text-muted, --spacing-8
Tag examples

Tooltip

Classes:
.tooltip, .tooltiptext
File:
assets/css/components/tooltip.css
Positions:
top, bottom, top-start, top-end, bottom-start, bottom-end
Tooltip examples
Hover me (top) Tooltip text! Hover me (bottom) Tooltip text! Hover me (top-start) Tooltip text!

Download Card

Classes:
.download-card, .download-card__item, .download-list
File:
assets/css/components/download-card.css
Usage:
Document and resource lists
Tokens:
--surface-default, --text-link-hover, --state-surface-hover

Download cards for files and resources with hover states and text truncation.

Download Card example

Design System - Guidelines.pdf

Project Overview 2026.pdf

Hover over the cards to see the interaction.

Table of Contents

Classes:
.toc, .toc__header, .toc__item
File:
assets/css/components/table-of-contents.css
Usage:
Long-form pages with anchor sections
Tokens:
--text-muted, --text-default, --component-toc-active-indicator, --spacing-4, --spacing-8

Navigation menu for long-form pages with links to key sections.

Table of Contents example

Icon

File:
assets/css/utilities/icons.css
Sprite:
static/img/svg/sprite.svg
Size:
.icon (1.5rem), .icon--xs (10px), .icon--sm (1rem), .icon--lg (2rem), .icon--xl (2.5rem)
Usage:
SVG sprite system

Icons via SVG sprite for easy reuse and minimal code duplication. Sprites are cacheable and easier to maintain.

Available icons (24px)

icon-arrow-left

icon-arrow-right

icon-curl

icon-dark

icon-download

icon-home

icon-language

icon-light

icon-new-window

icon-pdf

icon-profile-male

icon-settings

icon-system

icon-theme-palette

Micro icons (10px)

icon-arrow-right-micro

icon-grid-micro

icon-home-micro

icon-language-micro

icon-mode-micro

icon-palette-micro

Usage examples

With legacy container (for backward compatibility):

<div class="pdf-icon">
                  <svg><use href="/img/svg/sprite.svg?v=20260211b#icon-pdf"></use></svg>
                  </div>

Direct usage with .icon class:

<svg class="icon">
                  <use href="/img/svg/sprite.svg?v=20260211b#icon-pdf"></use>
                  </svg>

                  <!-- Med storleksvarianter -->
                  <svg class="icon icon--sm"><use href="/img/svg/sprite.svg?v=20260211b#icon-pdf"></use></svg>
                  <svg class="icon icon--lg"><use href="/img/svg/sprite.svg?v=20260211b#icon-pdf"></use></svg>