Størrelser
For å sikre likt utseende på tvers av løsninger og grensesnitt har vi definert et sett med størrelser og avstander som design tokens.
Grunnleggende
Grunnstørrelser (Base / Size)
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.
| Navn | Verdi | Token |
|---|---|---|
| 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 |
Avstander (Space / 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.
| Navn | Verdi @ mobile | Verdi @ tablet | Verdi @ desktop | Token |
|---|---|---|---|---|
| minimal | --sds-base-size-xxs-value | --sds-base-size-xxs-value | --sds-base-size-xxs-value | --sds-space-padding-minimal |
| tiny | --sds-base-size-xs-value | --sds-base-size-xs-value | --sds-base-size-xs-value | --sds-space-padding-tiny |
| small | --sds-base-size-s-value | --sds-base-size-s-value | --sds-base-size-s-value | --sds-space-padding-small |
| medium | --sds-base-size-s-value | --sds-base-size-s1-value | --sds-base-size-m-value | --sds-space-padding-medium |
| large | --sds-base-size-m-value | --sds-base-size-m1-value | --sds-base-size-l-value | --sds-space-padding-large |
| huge | --sds-base-size-m1-value | --sds-base-size-l-value | --sds-base-size-xl-value | --sds-space-padding-huge |
Mellomrom (Space / 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.
| Navn | Verdi @ mobile | Verdi @ tablet | Verdi @ desktop | Token |
|---|---|---|---|---|
| minimal | --sds-base-size-xxs-value | --sds-base-size-xxs-value | --sds-base-size-xxs-value | --sds-space-gap-minimal |
| tiny | --sds-base-size-xs-value | --sds-base-size-xs-value | --sds-base-size-xs-value | --sds-space-gap-tiny |
| small | --sds-base-size-s-value | --sds-base-size-s-value | --sds-base-size-s-value | --sds-space-gap-small |
| medium | --sds-base-size-m-value | --sds-base-size-m-value | --sds-base-size-m-value | --sds-space-gap-medium |
| large | --sds-base-size-l-value | --sds-base-size-l-value | --sds-base-size-l-value | --sds-space-gap-large |
Linjetykkelse (Space / Border / Weight)
Linjetykkelse brukes til å sette tykkelsen/vekten på linjer og omriss.
| 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 |
Hjørneavrunding (Space / Border / Radius)
Hjørneavrunding setter radiusen på hjørner.
| Navn | Verdi @ mobile | Verdi @ tablet | Verdi @ desktop | Token |
|---|---|---|---|---|
| minimal | --sds-base-size-xxs-value | --sds-base-size-xxs-value | --sds-base-size-xxs-value | --sds-space-border-radius-minimal |
| small | --sds-base-size-xs-value | --sds-base-size-xs-value | --sds-base-size-xs-value | --sds-space-border-radius-small |
| medium | --sds-base-size-s-value | --sds-base-size-s-value | --sds-base-size-s-value | --sds-space-border-radius-medium |
| large | --sds-base-size-m-value | --sds-base-size-m-value | --sds-base-size-m-value | --sds-space-border-radius-large |
| full | 99999px | 99999px | 99999px | --sds-space-border-radius-full |