Størrelse og layout
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.
| 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.
| Navn | Verdi @ mobile | Verdi @ tablet | Verdi @ desktop | Token |
|---|---|---|---|---|
| infinitesimal | base-size-xxxs-value | base-size-xxxs-value | base-size-xxxs-value | --sds-space-padding-infinitesimal |
| minimal | base-size-xxs-value | base-size-xxs-value | base-size-xxs-value | --sds-space-padding-minimal |
| tiny | base-size-xs-value | base-size-xs-value | base-size-xs-value | --sds-space-padding-tiny |
| small | base-size-s-value | base-size-s-value | base-size-s-value | --sds-space-padding-small |
| medium | base-size-s-value | base-size-s1-value | base-size-m-value | --sds-space-padding-medium |
| large | base-size-m-value | base-size-m1-value | base-size-l-value | --sds-space-padding-large |
| huge | base-size-m1-value | base-size-l-value | base-size-xl-value | --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.
| Navn | Verdi @ mobile | Verdi @ tablet | Verdi @ desktop | Token |
|---|---|---|---|---|
| minimal | base-size-xxs-value | base-size-xxs-value | base-size-xxs-value | --sds-space-gap-minimal |
| tiny | base-size-xs-value | base-size-xs-value | base-size-xs-value | --sds-space-gap-tiny |
| small | base-size-s-value | base-size-s-value | base-size-s-value | --sds-space-gap-small |
| medium | base-size-m-value | base-size-m-value | base-size-m-value | --sds-space-gap-medium |
| large | base-size-l-value | base-size-l-value | base-size-l-value | --sds-space-gap-large |
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 |
Border radius
Hjørneavrunding setter radiusen på hjørner.
| Navn | Verdi @ mobile | Verdi @ tablet | Verdi @ desktop | Token |
|---|---|---|---|---|
| minimal | base-size-xxs-value | base-size-xxs-value | base-size-xxs-value | --sds-space-border-radius-minimal |
| small | base-size-xs-value | base-size-xs-value | base-size-xs-value | --sds-space-border-radius-small |
| medium | base-size-s-value | base-size-s-value | base-size-s-value | --sds-space-border-radius-medium |
| large | base-size-m-value | base-size-m-value | base-size-m-value | --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.
| Navn | Verdi | Token |
|---|---|---|
| tablet | 720px | --sds-base-breakpoint-tablet |
| desktop | 1024px | --sds-base-breakpoint-desktop |
| ultrawide | 1440px | --sds-base-breakpoint-ultrawide |