Design System - Lloyd Atkinson

Spacing

A consistent spacing scale used for padding, margin, and gap. Values are in rem, relative to a 16px base.

Scale

Each token maps to a fixed rem value. Visualised as horizontal bars.

none

micro

xxx-small

xx-small

x-small

small

medium

moderate

large

x-large

xx-large

xxx-large

spacious

x-spacious

xx-spacious

xxx-spacious

expansive

Gap

Gap between flex children. Each row uses a different gap token.

x-small

medium

x-large