/tɔːrbjɔːrn/

UI Library

Internal UI component library and design system documentation

Colors

Base Colors

--black
--white

Color Scales

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

Semantic Tokens

Text
--text-default
--text-muted
--text-inverse
--text-nav
--text-link
--text-link-hover
--text-accent
--text-disabled
Background
--bg-page
--bg-surface
--bg-elevated
--bg-inverse
--bg-nav
--bg-tag
--bg-tag-hover
--bg-section-headline
--bg-disabled
Border
--border-subtle
--border-default
--border-strong
--border-disabled
--outline-neutral
Brand
--brand-primary
--brand-on-primary
--brand-container
--brand-on-container
State Overlays
--state-on-light-hover
--state-on-light-active
--state-on-dark-hover
--state-on-dark-active
--state-focus
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 Sizes

Headline 1
.type-headline-1
Headline 2
.type-headline-2
Display 1
.type-display-1
Subheading
.type-subheading
Body Large
.type-body-large
Body (default)
Default body text
Body Small
.type-body-small

Spacing

Spacing Scale

Spacing used for margins, padding, and gap.

4px mt-4, mb-4, gap-4
8px mt-8, mb-8, gap-8
16px mt-16, mb-16, gap-16
24px mt-24, mb-24, gap-24
32px mt-32, mb-32, gap-32
48px mt-48, mb-48, gap-48
64px mt-64, mb-64, gap-64

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-inset (col 3–10)

place-inset
Show HTML
<div class="use-subgrid">
  <div class="place-inset">...</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 -->

Grid Overlay

Visual overlay showing the 12-column grid on top of the page. Toggle via the theme panel or keyboard shortcut.

Toggle

Keyboard shortcut: Ctrl+G. Setting persists in localStorage.

Show info
/* Activate via data attribute on html */
html[data-grid-overlay] .grid-overlay { display: grid; }

/* Toggle with JS */
document.documentElement.toggleAttribute('data-grid-overlay');

/* Or keyboard shortcut: Ctrl+G */

Buttons

Classes:
.button, .button--primary, .button--secondary, .button--tertiary, .button--icon
File:
assets/css/components/button.css
Tokens:
--brand-primary, --brand-on-primary, --text-default, --border-default, --state-on-brand-hover
Default Button
Primary Button (Brand)
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:
--brand-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

Pagination

Classes:
.pagination, .pagination__link, .pagination__icon, .pagination__status
File:
assets/css/components/pagination.css
Tokens:
--spacing-12, --spacing-32, --state-on-light-hover, --text-default, --text-muted, --outline-neutral
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:
--bg-tag, --bg-tag-hover, --text-muted, --spacing-8
Tag examples

Newsletter

Classes:
.newsletter, .newsletter__signup, .newsletter__illustration, .newsletter__submit
File:
assets/css/components/newsletter.css
Layout:
12-column grid with responsive layout
Tokens:
--component-newsletter-bg, --component-newsletter-text, --component-newsletter-button-bg

Newsletter signup component with MailChimp integration, 12-column grid layout, illustration section, and form validation.

Newsletter example

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:
Client and employer pages
Tokens:
--bg-surface, --text-link-hover, --state-on-light-hover

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

Download Card example

Resume - Torbjörn Hedberg.pdf

Portfolio 2025.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:
Client and employer pages
Tokens:
--text-muted, --text-default, --brand-primary, --spacing-4, --spacing-8

Navigation menu for application pages with links to Letter, Portfolio, CV, Download, and Contact sections.

Table of Contents example

Icon Utilities

File:
assets/css/utilities/icons.css
Sprite:
static/img/svg/sprite.svg
Size:
1.5rem × 1.5rem (default)
Usage:
SVG sprite system

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

Available icons

icon-pdf

icon-download

icon-arrow-left

icon-arrow-right

icon-language

icon-light

icon-dark

icon-system

Usage examples

With legacy container (for backward compatibility):

<div class="pdf-icon">
  <svg><use href="https://www.tor-bjorn.com/img/svg/sprite.svg#icon-pdf"></use></svg>
</div>

Direct usage with .icon class:

<svg class="icon">
  <use href="https://www.tor-bjorn.com/img/svg/sprite.svg#icon-pdf"></use>
</svg>

<!-- Med storleksvarianter -->
<svg class="icon icon--sm"><use href="https://www.tor-bjorn.com/img/svg/sprite.svg#icon-pdf"></use></svg>
<svg class="icon icon--lg"><use href="https://www.tor-bjorn.com/img/svg/sprite.svg#icon-pdf"></use></svg>

Typography Utilities

File:
assets/css/utilities/typography.css

Font Size

Size applied with .text-{size} classes.

The quick brown fox .text-xs (--text-xs)
The quick brown fox .text-sm (--text-sm)
The quick brown fox .text-base (--text-base)
The quick brown fox .text-lg (--text-lg)
The quick brown fox .text-xl (--text-xl)
The quick brown fox .text-2xl (--text-3xl)
The quick brown fox .text-3xl (--text-5xl)
The quick brown fox .text-4xl (--text-6xl)
The quick brown fox .text-5xl (--text-8xl)

Font Family

Font family applied with .font-{family} classes.

The quick brown fox jumps over the lazy dog .font-sans (--font-sans)
The quick brown fox jumps over the lazy dog .font-serif (--font-serif)
The quick brown fox jumps over the lazy dog .font-mono (--font-mono)

Font Weight

Weight applied with .font-{weight} classes.

The quick brown fox .font-thin (100)
The quick brown fox .font-light (300)
The quick brown fox .font-normal (400)
The quick brown fox .font-medium (500)
The quick brown fox .font-semibold (600)
The quick brown fox .font-bold (700)
The quick brown fox .font-black (900)

Semantic Classes

Pre-configured typography styles for consistent headings and text.

Type Display 1 .type-display-1 (serif, 6xl, 400)
Type Display 2 .type-display-2 (serif, 5xl, 400)
Type Headline 1 .type-headline-1 (sans, 5xl, bold)
Type Headline 2 .type-headline-2 (sans, 4xl, bold)
Type Headline 3 .type-headline-3 (sans, 1.5xl, bold)
Type Headline 4 .type-headline-4 (sans, xl, bold)
Type Headline Small .type-headline-small (sans, xs, uppercase)
Type Preamble .type-preamble (serif, 3xl)
Type Body .type-body (serif, lg)
Type Lead .type-lead (serif, xl)
Type Body Small .type-body-sm (serif, sm)
Type Information .type-information (sans, xs)

Letter Spacing

Letter spacing applied with .tracking-{size} classes.

The quick brown fox .tracking-tighter (--tracking-tighter)
The quick brown fox .tracking-tight (--tracking-tight)
The quick brown fox .tracking-normal (--tracking-normal)
The quick brown fox .tracking-wide (--tracking-wide)
The quick brown fox .tracking-wider (--tracking-wider)
The quick brown fox .tracking-widest (--tracking-widest)