tor bjorn.com

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>

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)