Spacing

Micro spacing bruges til tætte relationer mellem elementer, der hører direkte sammen – fx mellem ikon og tekst, label og input eller mindre inline-elementer. Afstanden markerer sammenhørighed og anvendes ikke til strukturel opdeling.

Content spacing ligger over micro spacing og består af større afstande. Kategorien bruges til den interne struktur i komponenter og mindre sektioner samt den strukturelle afstand mellem elementer på samme niveau. Det gælder både vertikalt i stacks og horisontalt mellem elementer, der står side om side.

Layout spacing er afstanden mellem indhold og dets omgivende ramme, fx padding i en container eller luft i siderne af en full-width section. I modsætning til section spacing skaber den ikke hierarki mellem sektioner, men giver indholdet den rette luft og sikrer, at layoutet fungerer på tværs af skærmstørrelser.

Section spacing er afstanden mellem større sektioner på siden. Den skaber pauser og en naturlig rytme i layoutet og er tydeligt større end content spacing, så det er nemt at se, hvor én sektion slutter og en ny begynder. Den bruges kun mellem selvstændige sektioner – ikke inde i komponenter.