/toːrbjœːrn/

UI-bibliotek

Internt UI-komponentbibliotek och designsystemdokumentation

Färgskalor

Basfärger
--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
Blå skala
--blue-1
--blue-2
--blue-3
--blue-4
--blue-5
--blue-6
--blue-7
--blue-8
--blue-9
--blue-10
--blue-11
--blue-12
Grön skala
--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 skala
--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 skala
--amber-1
--amber-2
--amber-3
--amber-4
--amber-5
--amber-6
--amber-7
--amber-8
--amber-9
--amber-10
--amber-11
--amber-12
Lila skala
--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 skala
--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 skala
--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

Skalor genereras från Pantone Color of the Year-data och följer aktivt läge (light/dark).

Färgsemantik

Text
--text-default
--text-muted
--text-inverse
--text-link
--text-link-hover
--primary-strong
--text-accent (alias)
Bakgrund
--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

Typografi

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

Storlek

Skala

--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

Mått

--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

Fokusindikator

--ring-error

Valideringsfel

--ring-selected

Valt tillstånd

--ring-selected-emphasis

Offset + markering

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-kolumns Grid System

Ett 12-kolumns subgrid-system med flexibla kolumnspanningar och placeringar.

Full bredd (12 kolumner)

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

50/50 Split (6+6)

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

Tredjedel delar (4+4+4)

col-span-4
col-span-4
col-span-4
Visa 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
Visa HTML
<div class="use-subgrid">
                  <div class="col-span-8">...</div>
                  <div class="col-span-4">...</div>
                  </div>

Specifik placering

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

Asymmetrisk layout

3 cols
6 cols
3 cols
Visa 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 Placering

Placeringspresets via --col custom property. Varje block kan art-directedas med en klass eller inline style="--col: col-start 3 / span 8;".

.place-full (col 1–12)

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

.place-wide (col 1–10)

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

.place-prose (col 1–8)

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

.place-narrow (col 2–9)

place-narrow
Visa 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
Visa HTML
<div class="use-subgrid">
                  <div class="place-article">...</div>
                  </div>

.place-aside (col 9–12)

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

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

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

Inline --col (col 4–9)

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

Kombinerat: prose + aside (samma rad)

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

Stegad text (Tripp-trapp-trull)

Textsteg som flyttas horisontellt genom gridet. Varje element placeras i en egen rad och förskjuts med ett fast antal kolumner.

.stepped-3-3 ( förskjutning 3, spann 3 )

Steg 1
Steg 2
Steg 3
Steg 4
Visa 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 ( förskjutning 2, spann 4, överlappning )

Steg 1
Steg 2
Steg 3
Steg 4
Steg 5
Visa 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 ( förskjutning 4, spann 4, tre steg )

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

.stepped-1-6 ( förskjutning 1, spann 6, långsam drift )

Steg 1
Steg 2
Steg 3
Steg 4
Steg 5
Visa 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 ( förskjutning 6, spann 6, diagonal tvåblock )

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

Responsivt: breddas till 8 col vid tablet (md), full bredd vid mobil (sm).

Visa 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

Fil:
assets/css/components/accordion.css
Klasser:
.accordion, .accordion__trigger, .accordion__content, .accordion-nested
Tokens:
--state-page-hover, --state-surface-hover, --state-layer-duration, --border-default
Accordion exempel

Första sektionen

Detta är innehållet i den första sektionen.

Andra sektionen

Stängd som default.

Feedback & overlays

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

Tabs

Fil:
assets/css/components/tabs.css, assets/js/tabs.js
Klasser:
.tabs-nav, .tab-button, .tab-panel, .is-active
Hook:
data-js="tabs", data-tab, data-panel, data-tabs-storage-key
Tabs exempel

Första panelen med innehåll.

Andra panelen med innehåll.

Gallery

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

`layout` styr intern gallery-struktur. `place` styr placering i art-direction-griden.

full + place-full
1+1 / wide
1+1 / wide
2x2 / prose
2x2 / prose
2x2 / prose
2x2 / prose
Visa 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 >}}

Typografi

Klasser:
.type-display-1, .type-display-2, .type-headline-1..5, .type-headline-small, .type-preamble, .type-body, .type-lead, .type-body-sm, .type-information
Fil:
assets/css/utilities/typography.css
Tokens:
--font-display, --font-heading, --font-body, --display-weight, --heading-weight, --display-tracking, --headline-tracking, --line-height-*
Typografisk skala

Display 2

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5

Headline small

Preamble introducerar längre innehåll med något större grad och luftigare rytm.

Brödtext används för längre löpande innehåll och ska vara lättläst i flera stycken.

Lead används för att lyfta viktiga rader i innehållet.

Body small för sekundär text och hjälpinformation.

Information för labels, metadata och tekniska texter.

Buttons

Klasser:
.button, .button--primary, .button--secondary, .button--tertiary, .button--icon
Fil:
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 med ikon

Forms

Klasser:
.input, .radio, .checkbox, .select, .form-group, .form-label
Fil:
assets/css/components/form.css
Tokens:
--primary, --border-default, --text-default, --text-muted, --iris-4, --orange-9
Text Inputs
Detta fält innehåller fel
Textarea
Minst 10 tecken
Radio Buttons
Checkboxes
Select Dropdown
Toggle switch

Pagination

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

Breadcrumb

Klasser:
.application-breadcrumb
Fil:
assets/css/components/breadcrumb.css
Tokens:
--spacing-8, --text-muted
Breadcrumb exempel

Tags

Klasser:
.tag, .tag-list, .tag-list__items, .tag-list__item, .tag-list__link
Fil:
assets/css/components/tags.css
Tokens:
--surface-tag, --surface-tag-hover, --text-muted, --spacing-8
Tag exempel

Tooltip

Klasser:
.tooltip, .tooltiptext
Fil:
assets/css/components/tooltip.css
Positioner:
top, bottom, top-start, top-end, bottom-start, bottom-end
Tooltip exempel
Hover mig (top) Tooltip text! Hover mig (bottom) Tooltip text! Hover mig (top-start) Tooltip text!

Download Card

Klasser:
.download-card, .download-card__item, .download-list
Fil:
assets/css/components/download-card.css
Användning:
Dokument- och resurslistor
Tokens:
--surface-default, --text-link-hover, --state-surface-hover

Nedladdningskort för filer och resurser med hover states och texttrunkering.

Download Card exempel

Designsystem - Riktlinjer.pdf

Projektöversikt 2026.pdf

Hover över korten för att se interaktionen.

Table of Contents

Klasser:
.toc, .toc__header, .toc__item
Fil:
assets/css/components/table-of-contents.css
Användning:
Långa innehållssidor med ankarsektioner
Tokens:
--text-muted, --text-default, --component-toc-active-indicator, --spacing-4, --spacing-8

Navigeringsmeny för längre sidor med länkar till centrala sektioner.

Table of Contents exempel

Ikon

Fil:
assets/css/utilities/icons.css
Sprite:
static/img/svg/sprite.svg
Storlek:
.icon (1.5rem), .icon--xs (10px), .icon--sm (1rem), .icon--lg (2rem), .icon--xl (2.5rem)
Användning:
SVG sprite system

Ikoner via SVG sprite för enkel återanvändning och minimal kodduplicering. Sprites är cachebara och lättare att underhålla.

Tillgängliga ikoner (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

Mikroikoner (10px)

icon-arrow-right-micro

icon-grid-micro

icon-home-micro

icon-language-micro

icon-mode-micro

icon-palette-micro

Användningsexempel

Med legacy container (för bakåtkompatibilitet):

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

Direktanvändning med .icon klass:

<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>