Layout tokens er en type design tokens som brukes til å standardisere og organisere romlige og strukturelle elementer i et designsystem. De hjelper til med å sikre konsistens i hvordan innhold og komponenter plasseres og struktureres på en side eller i en applikasjon. Layout tokens bidrar til et mer harmonisk design og gjør det enklere å skalere designet på tvers av ulike enheter og skjermstørrelser.

Layout tokens kan dekke et bredt spekter av egenskaper, inkludert:

• Avstand (spacing): Definerer marginer og padding, for eksempel spacing.small med verdien "8px", som kan brukes både for å skape luft mellom komponenter og for innvendig avstand i komponenter.
• Størrelse (size): Angir faste eller responsive størrelser på elementer, som size.card.width med verdien "320px" eller size.full.width med verdien "100%".
• Bredde og høyde (width & height): Spesifiserer dimensjoner for komponenter og seksjoner, som width.sidebar eller height.header.
• Grid og layoutsystemer: Tokens som definerer kolonneoppsett, rutenettstrukturer og retningslinjer for hvordan elementer skal justeres og fordeles, for eksempel grid.columns med verdien "12" eller layout.container.max-width med verdien "1440px".
• Posisjonering: Kontrollerer plassering av elementer, som tokens for position, z-index eller justering (alignment).

Akkurat som andre tokens, struktureres layout tokens ofte i flere nivåer. Kjernetokens kan definere grunnleggende verdier som pikseldimensjoner eller prosentbaserte størrelser. Aliastokens kan gi disse verdiene mer kontekst, for eksempel spacing.section.margin eller size.avatar.small. Komponenttokens kan deretter knytte layout tokens direkte til spesifikke UI-komponenter, som modal.padding eller button.margin.

Fordelen med layout tokens er tydelig når det oppstår behov for designendringer. Ved å justere én enkelt token for for eksempel grunnleggende avstand, kan du påvirke hele designet uten å måtte endre hvert enkelt komponent manuelt. Dette gir både designere og utviklere stor fleksibilitet og effektivitet, spesielt i større, skalerbare prosjekter.