tor bjorn.com

UI-bibliotek

Internt UI-komponentbibliotek och designsystemdokumentation

Färger

Basfarger

--black
--white

Färgskalor

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

Semantiska tokens

Text
--text-default
--text-muted
--text-inverse
--text-nav
--text-link
--text-link-hover
--text-accent
--text-disabled
Bakgrund
--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

Typografi

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 används för margins, padding och 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-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>

Buttons

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

Forms

Klasser:
.input, .radio, .checkbox, .select, .form-group, .form-label
Fil:
assets/css/components/form.css
Tokens:
--brand-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

Pagination

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

Newsletter

Klasser:
.newsletter, .newsletter__signup, .newsletter__illustration, .newsletter__submit
Fil:
assets/css/components/newsletter.css
Layout:
12-kolumners grid med responsiv layout
Tokens:
--component-newsletter-bg, --component-newsletter-text, --component-newsletter-button-bg

Newsletter signup-komponent med MailChimp-integration, 12-kolumners grid layout, illustration sektion och validering av formulär.

Newsletter 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:
Klient- och arbetsgivarsidor
Tokens:
--bg-surface, --text-link-hover, --state-on-light-hover

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

Download Card exempel

CV - Torbjörn Hedberg.pdf

Portfolio 2025.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:
Klient- och arbetsgivarsidor
Tokens:
--text-muted, --text-default, --brand-primary, --spacing-4, --spacing-8

Navigeringsmeny för ansökningssidor med länkar till Letter, Portfolio, CV, Download och Contact sektioner.

Table of Contents exempel

Icon Utilities

Fil:
assets/css/utilities/icons.css
Sprite:
static/img/svg/sprite.svg
Storlek:
1.5rem × 1.5rem (default)
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

icon-pdf

icon-download

icon-arrow-left

icon-arrow-right

icon-language

icon-light

icon-dark

icon-system

Användningsexempel

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

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

Direktanvändning med .icon klass:

<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

Fil:
assets/css/utilities/typography.css

Font Size

Storlek appliceras med .text-{size} klasser.

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

Typsnitt appliceras med .font-{family} klasser.

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

Vikt appliceras med .font-{weight} klasser.

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)

Semantiska klasser

Förkonfigurerade typografistilar för konsekventa rubriker och 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

Teckenavstånd appliceras med .tracking-{size} klasser.

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)