Spacing

Spacing tokens keep layouts consistent and prevent arbitrary padding values. All components reference these tokens — never raw pixel values.

Scale

The spacing scale is based on a 4px grid. Each step is a multiple of 4px, giving layouts a consistent rhythm.

--space-14px

--space-28px

--space-312px

--space-416px

--space-520px

--space-624px

--space-832px

--space-1040px

--space-1248px

Usage rules

Always use tokens

Never use raw pixel values for spacing. Reference a token instead — this keeps layouts consistent and makes future updates easier.

Component padding

Use --space-3 and --space-4 for internal component padding. Use --space-6 and above for section and layout spacing.

Gap and margin

Use --space-2 for tight groupings like icon and label pairs. Use --space-4 for related items. Use --space-8 and above to separate distinct sections.

Usage

Reference spacing tokens in CSS via var(--space-*) or inline in JSX via style={{ gap: "var(--space-4)" }}. Avoid hardcoding pixel values — if a value isn't in the scale, check whether an adjacent token would work instead.