Kilden

Størrelser

Designsystemet bruker en beregnet størrelsesskala basert på en grunnverdi. Verdiene er responsive og tilpasser seg mellom desktop og mobil via data-size-attributtet.

Størrelsesskala

Skalaen går fra 0 til 86, med noen ekstra steg for spesielle størrelser. Hver verdi beregnes ut fra en fast formel, noe som gir en konsistent og harmonisk skala.

VisueltTokenCSS-variabel
dimension.0--dimension-0
dimension.1--dimension-1
dimension.2--dimension-2
dimension.3--dimension-3
dimension.4--dimension-4
dimension.5--dimension-5
dimension.6--dimension-6
dimension.7--dimension-7
dimension.8--dimension-8
dimension.9--dimension-9
dimension.10--dimension-10
dimension.11--dimension-11
dimension.12--dimension-12
dimension.13--dimension-13
dimension.14--dimension-14
dimension.15--dimension-15
dimension.18--dimension-18
dimension.22--dimension-22
dimension.26--dimension-26
dimension.30--dimension-30
dimension.32--dimension-32
dimension.34--dimension-34
dimension.38--dimension-38
dimension.42--dimension-42
dimension.46--dimension-46
dimension.50--dimension-50
dimension.54--dimension-54
dimension.58--dimension-58
dimension.62--dimension-62
dimension.66--dimension-66
dimension.74--dimension-74
dimension.86--dimension-86

Spesielle størrelser

I tillegg til den numeriske skalaen finnes det to navngitte tokens for innholdsbredde:

TokenCSS-variabelBeskrivelse
dimension.minWidth--dimension-min-widthMinimum innholdsbredde
dimension.maxWidth--dimension-max-widthMaksimum innholdsbredde

Responsivitet

Størrelsene endrer seg basert på data-size-attributtet på et overliggende element:

  • desktop — Større verdier (base: 21px figma-font-size)
  • mobile — Mindre verdier (base: 16px figma-font-size)

Bruk i CSS

.card {
  padding: var(--dimension-4);
  gap: var(--dimension-2);
}
 
.container {
  max-width: var(--dimension-max-width);
  min-width: var(--dimension-min-width);
}

Bruk i TypeScript

import { tokens } from "@kilden/design-tokens";
 
const spacing = tokens.dimension[4];
// → "var(--dimension-4)"