Spacing

Overview

Spacing is Create UI's scale for gaps, padding, and margins. A consistent set of tokens creates visual rhythm across every component, list, card, and layout, with static tokens for fixed steps and responsive tokens that scale across breakpoints.

When should you use them?

Use spacing tokens whenever you set a gap, padding, or margin, instead of typing a raw pixel value. They keep spacing consistent across the system, so every component and layout shares the same rhythm and updates together when a token changes.

How should you use them?

• Use a spacing token for every gap, padding, and margin, not a hardcoded pixel value.
• Follow the scale's steps rather than inventing in-between values, so the rhythm stays consistent.
• Use larger steps to separate unrelated sections and smaller steps to group related elements.
• Use responsive spacing tokens for layout and section gaps, so spacing steps down cleanly on tablet and mobile.
• Reference static space tokens through responsive tokens, keeping a single source of truth.
• Keep enough spacing around interactive elements so touch targets stay comfortable and accessible.