Prism’s spacing system is built on an 8px base unit — a consistent measurement that brings rhythm and structure to every layer of our interface, from component padding to full-page layouts.
From this base, we define a spacing scale: a limited set of values that are multiples of the base unit. The scale ranges from 0px to 80px, striking a balance between flexibility and consistency.
Creating relationships
When elements are placed close together, users perceive them as being connected. The tighter the spacing, the stronger the relationship. As space increases, that connection weakens — and that’s intentional. (Long distance relationships hardly ever work 😔).
Creating visual hierarchy
Elements that are set close to each other can be easily overlooked. Users may see the grouping but not process each individual item. Giving key elements a bit more space helps them stand out and draws the user's attention.
Embracing negative space
Negative space — also called white space — isn’t wasted space. It’s what gives your design structure, rhythm, and clarity. It separates content into digestible sections and gives users visual breaks, making complex interfaces feel approachable. Use it deliberately to balance density and focus.
Usage guidance
Small values
space-0 to space-200 (0px – 16px)
Best for compact UI elements and tight groupings.
- Gap between icons and text
- Padding inside small components (e.g. badges, inputs, buttons)
- Gap between stacked items (e.g. button groups, lists)
- Vertical rhythm between text elements (e.g. a title or label and description)
Medium values
space-100 to space-400 (8px – 32px)
Great for mid-sized components and comfortable layouts.
- Padding inside larger buttons or tiles
- Gaps between sections within a component
- Space between repeated UI blocks
Large values
space-300 to space-600 (24px – 64px)
Use these for structural spacing across your layout.
- Space between sections of a page
- Gaps around major content blocks
- Margins between header, body and footer elements
Consistent, intentional spacing makes interfaces feel more polished and easier to understand. Use the Prism spacing scale to guide your layouts and maintain visual harmony across products.