Space

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

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

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