Space

Full documentation: https://webawesome.com/docs/tokens/space

Design Tokens Space

Space tokens create predictable rhythm and meaningful proximity. They use rem units so that spacing scales proportionately with the root font size.

Use --wa-space-scale to increase or decrease all spacing at once.

Custom Property	Description
`–wa-space-scale`	Global multiplier applied to all space tokens
`–wa-space-3xs`	Smallest space, for hairline gaps and nudges
`–wa-space-2xs`	Near-smallest space, for text or icon gaps
`–wa-space-xs`	Extra-small space, for closely related elements
`–wa-space-s`	Small space, for inner padding in small components
`–wa-space-m`	Base space, the most common padding and gap size
`–wa-space-l`	Large space, for inner padding in larger components
`–wa-space-xl`	Extra-large space, for padding between or around groups
`–wa-space-2xl`	2× extra-large space
`–wa-space-3xl`	3× extra-large space
`–wa-space-4xl`	4× extra-large space
`–wa-space-5xl`	Largest space, for ultra-breathable spacing
`–wa-content-spacing`	Semantic alias for the default spacing between top-level blocks