Om kategorien
Formål
Delt avstandsskala for gap, padding og margin i UI-krom, bevisst uttrykt i relative em- og lh-enheter. --space-* følger skriftstørrelsen, mens tekstnære avstander heller kan bruke lh direkte.
Egner seg for
- Padding, gap og andre avstander i knapper, inputs, merkelapper og lignende UI-krom som skal skalere med teksten.
- Standard avstand mellom relaterte elementer og mellom tydelig atskilte grupper eller seksjoner.
Egner seg ikke for
- Ikke for avstander som konseptuelt følger høyden på en tekstlinje, som avsnitts- og listemarger; bruk
lhdirekte. - Ikke for ikonstørrelser, hjørneavrunding eller annen geometri som ikke beskriver mellomrom.
Tokens
| Token | Verdi | Beskrivelse |
|---|---|---|
--space-2xs | 0.2em | Svært tett mellomrom for ikonpadding og kompakte merkelapper der luft må holdes på et minimum. |
--space-xs | 0.4em | Tett mellomrom for vertikal knapp- og inputpadding og små avstander i tag-lignende elementer. |
--space-small | 0.6em | Kompakt standardsteg for knapp- og inputpadding og gap mellom tett relaterte elementer. |
--space-medium | 1em | Normal grunnavstand mellom relaterte elementer i samme gruppe eller seksjon. |
--space-large | 1.5em | Romsligere avstand mellom seksjoner og tydelig atskilte grupper. |
Detaljer
--space-*bruker bevisstem, fordi skalaen primært styrer UI-krom som knapp- og tag-padding og derfor skal følge skriftstørrelsen.- Når avstanden egentlig betyr "en brøkdel av en tekstlinje", brukes
lh-verdier som0.5lheller1lhdirekte i stedet for en egen token.