Gå til innhold

Størrelse og layout

For å sikre likt utseende på tvers av løsninger og grensesnitt har vi definert et sett med størrelser og avstander som design tokens.

Basetokens

For å sikre at vi bruker de samme verdiene er det satt opp en skala med tallverdier som definerer de grunleggende størrelsene og avstandene som er i bruk.

Disse tokensene er kun tilgjengelige i Figma-filen til designsystemet da de ikke skal brukes direkte, men er grunnlaget for de semantiske tokensene.

Designtokens for basetokens
Navn Verdi Token
xxxs 2px --sds-base-size-xxxs
xxs 4px --sds-base-size-xxs
xs 8px --sds-base-size-xs
s 12px --sds-base-size-s
s1 16px --sds-base-size-s1
m 24px --sds-base-size-m
m1 32px --sds-base-size-m1
l 48px --sds-base-size-l
xl 96px --sds-base-size-xl
xxl 192px --sds-base-size-xxl

Padding

Avstander brukes til å sette marginer og padding.

Noen av avstands-tokensene endrer seg ut i fra hvilken enhet man bruker, slik at enkelte elementer tar mindre plass på små skjermer.

Designtokens for padding
Navn Verdi @ mobile Verdi @ tablet Verdi @ desktop Token
infinitesimal base-size-xxxs base-size-xxxs base-size-xxxs --sds-space-padding-infinitesimal
minimal base-size-xxs base-size-xxs base-size-xxs --sds-space-padding-minimal
tiny base-size-xs base-size-xs base-size-xs --sds-space-padding-tiny
small base-size-s base-size-s base-size-s --sds-space-padding-small
medium base-size-s base-size-s1 base-size-m --sds-space-padding-medium
large base-size-m base-size-m1 base-size-l --sds-space-padding-large
huge base-size-m1 base-size-l base-size-xl --sds-space-padding-huge

Gap

Mellomrom brukes til å sette avstander mellom elementer.

Mellomrommene er faste på tvers av enheter da de er knyttet til tekst o.l. for å skape en visuell rytme.

Designtokens for gap
Navn Verdi @ mobile Verdi @ tablet Verdi @ desktop Token
minimal base-size-xxs base-size-xxs base-size-xxs --sds-space-gap-minimal
tiny base-size-xs base-size-xs base-size-xs --sds-space-gap-tiny
small base-size-s base-size-s base-size-s --sds-space-gap-small
medium base-size-m base-size-m base-size-m --sds-space-gap-medium
large base-size-l base-size-l base-size-l --sds-space-gap-large

Border weight

Linjetykkelse brukes til å sette tykkelsen/vekten på linjer og omriss.

Designtokens for border weight
Navn Verdi @ mobile Verdi @ tablet Verdi @ desktop Token
thin 1px 1px 1px --sds-space-border-weight-thin
regular 2px 2px 2px --sds-space-border-weight-regular
bold 4px 4px 4px --sds-space-border-weight-bold

Border radius

Hjørneavrunding setter radiusen på hjørner.

Designtokens for hjørneavrunding
Navn Verdi @ mobile Verdi @ tablet Verdi @ desktop Token
minimal base-size-xxs base-size-xxs base-size-xxs --sds-space-border-radius-minimal
small base-size-xs base-size-xs base-size-xs --sds-space-border-radius-small
medium base-size-s base-size-s base-size-s --sds-space-border-radius-medium
large base-size-m base-size-m base-size-m --sds-space-border-radius-large
full 99999px 99999px 99999px --sds-space-border-radius-full

Breakpoints

Vi har definert forskjellige enhetsstørrelser i designsystemet, mobil, nettbrett, stasjonær datamaskin, og svært brede skjermer (mobile, tablet, desktop, utrawide). Bruddpunktene er verdiene som definerer når grensesnittet bytter mellom de forskjellige størrelsene og enhetene.

Designtokens for breakpoints
Navn Verdi Token
tablet 720px --sds-base-breakpoint-tablet
desktop 1024px --sds-base-breakpoint-desktop
ultrawide 1440px --sds-base-breakpoint-ultrawide