Centrim Design System — a token-first, accessible React component system.
Spacing
Spacing is the primary tool for hierarchy in this system. Because we avoid nesting cards inside cards, distance is what tells a person where one idea ends and the next begins.
What is this?
A single 4px-based scale, space-0 through space-64, exposed as --ds-space-* tokens and consumed through Tailwind spacing utilities. Every gap, pad and margin in the system resolves to one of these steps.
When to use it
- Padding inside any control, card or panel
- Gaps between items in a stack, grid or toolbar
- Vertical rhythm between page sections
How to use it
- Pick the smallest step that separates the idea clearly
- Keep one step per relationship: tighter inside a group, looser between groups
- Use layout primitives (Stack, Grid, PageLayout) so spacing stays declarative
What to avoid
- Arbitrary values such as p-[13px] or margin fixes on individual elements
- Using the same gap inside and between groups — hierarchy disappears
- Adding a card or border where extra space would have been enough
The scale
4px foundation; no arbitrary values.
Which step to use
| Step | Value | Use for |
|---|---|---|
| space-1 – space-2 | 4 – 8px | Icon-to-label, badge padding, chip internals |
| space-3 | 12px | Compact control padding, dense table cells |
| space-4 | 16px | Default gap between related controls; card padding on mobile |
| space-6 | 24px | Card and panel padding; gap between fields in a form |
| space-8 | 32px | Gap between blocks inside a section, e.g. chart → callout |
| space-12 | 48px | Between major page sections |
| space-16 + | 64px + | Page top padding, empty-state breathing room, hero rhythm |
Do & don't
Do
- Group related content with a tighter gap than the gap that separates groups.
- Let a section own its outer spacing; components stay spacing-neutral outside themselves.
- Use Stack/Grid gap props instead of margins on children.
- Increase space before adding a border or a surface.
Don't
- Do not mix ad-hoc margins with layout gaps on the same axis.
- Do not use padding to fake alignment — align to the content grid instead.
- Do not tighten spacing to fit more in; recompose or paginate instead.
- Do not add spacing tokens outside the 4px scale.
Why it is designed this way
A single 4px scale keeps every surface on the same vertical rhythm, which is what makes composed screens feel deliberate even when they are assembled from independent components. Restricting the set of legal values also makes review fast: an unusual gap is visible in code, not just in a screenshot.