Foundations / Spacing
Spacing
A consistent spacing system creates visual harmony and makes layouts easier to scan. Flux uses a 4px base unit — every spacing value is a multiple of 4. This maps cleanly to Tailwind's default scale and ensures predictable, pixel-perfect layouts across all components.
4px base unit
Our spacing system is built around a base unit of 4px. Every space value is a multiple of this unit. The base unit (space.100) represents 4px — or 0.25rem at the default 16px root font size.
Each step = 4px. The scale grows linearly.
Scale
The full space token scale from space.0 (0px) to space.1000 (40px). Each token maps to a Tailwind spacing step for use in padding, margin, and gap utilities.
| Token | Multiplier | REM | Pixels | Visual |
|---|---|---|---|---|
space.0 | 0× | 0rem | 0px | |
space.025 | 0.25× | 0.0625rem | 1px | |
space.050 | 0.5× | 0.125rem | 2px | |
space.075 | 0.75× | 0.1875rem | 3px | |
space.100 | 1× | 0.25rem | 4px | |
space.150 | 1.5× | 0.375rem | 6px | |
space.200 | 2× | 0.5rem | 8px | |
space.250 | 2.5× | 0.625rem | 10px | |
space.300 | 3× | 0.75rem | 12px | |
space.400 | 4× | 1rem | 16px | |
space.500 | 5× | 1.25rem | 20px | |
space.600 | 6× | 1.5rem | 24px | |
space.800 | 8× | 2rem | 32px | |
space.1000 | 10× | 2.5rem | 40px |
Tailwind mapping
The Layout primitives (Box, Stack, Inline) accept a gap /p prop using these named steps. They map to the Tailwind scale directly.
| Name | Tailwind | Pixels | Common usage |
|---|---|---|---|
| xs | gap-1 / p-1 | 4px | Icon gaps, tight stacks |
| sm | gap-2 / p-2 | 8px | Compact groups, badge padding |
| md | gap-4 / p-4 | 16px | Card padding, form field gaps |
| lg | gap-6 / p-6 | 24px | Section gaps, page gutters |
| xl | gap-8 / p-8 | 32px | Loose sections, hero areas |
Spacing usage
Different contexts call for different spacing ranges. Use the right scale for the density of your UI.
Small — 0px to 8px
space.0 → space.200- Gap between icon and label
- Container padding for badges and chips
- Gap between repeating elements (button groups)
- Internal padding for input components
- Gap between trigger and elevated element
Medium — 12px to 24px
space.300 → space.600- Container padding for larger components
- Space between avatar/icon and content
- Vertical spacing between elements in a card
- Spacing in less dense or larger components
- Gap between form fields
Large — 32px to 80px
space.800 → space.1000+- Page-level gutters and section gaps
- Spacing between major layout regions
- Hero section padding
- Empty state vertical padding
- Separation between distinct content blocks
Layout guidelines
Spacing is not just about distance — it communicates meaning. These principles guide how to apply the spacing scale to create layouts that are easy to understand.
Group by similarity
Apply consistent spacing around elements that share the same function or importance. Equal spacing signals equal weight — users will naturally group them together visually.
Group by proximity
Elements placed close together are assumed to be related. Use tighter spacing within a group and larger spacing between groups to create clear visual separation.
Create order and hierarchy
Larger elements deserve more whitespace — it signals importance. Varying space around elements creates visual hierarchy and guides the user's eye through the content.
Heading gets generous top space → body is tighter → cards share equal small gaps
Introduce visual rhythm
Repeating the same spacing between similar elements creates a predictable rhythm. This rhythm helps users scan content faster and builds confidence in the layout. Use gap-4 consistently within a section — don't mix gap-3 andgap-5 for sibling elements.
Consistent rhythm
Broken rhythm
Use optical adjustment
Spacing tokens give you consistency — but human perception isn't mathematically perfect. Sometimes a gap-3 between an icon and text feels better than the “correct” gap-4. Trust your eye. Deviate from the system sparingly and only when it genuinely improves balance.
Mechanical (token)
Optically adjusted
Slightly tighter gap between icon and text often feels more natural than the mathematical step.