Spacing
A 4px-base scale, mirroring Tailwind defaults so existing app code keeps working without rewrites.
One rhythm across every product is Valor: consistent breathing room that gives each screen the same calm, durable feel.
| Token | Value | Use |
|---|---|---|
spacing.1 | 4px | Hairline gap |
spacing.2 | 8px | Tight inline gap |
spacing.3 | 12px | Compact inline gap |
spacing.4 | 16px | Default (1× rhythm) |
spacing.6 | 24px | Section gap |
spacing.8 | 32px | Card padding / layout gap |
spacing.12 | 48px | Large layout gap |
spacing.16 | 64px | Page padding (mobile) |
spacing.24 | 96px | Hero padding |
In Tailwind
<div class="p-4 gap-6"> <!-- padding 16px, gap 24px -->The Tailwind preset wires the full scale. you can use any of p-0.5 (2px) up to p-32 (128px).
Don’t
- Don’t introduce odd values (
p-[14px],p-[5]). they break the rhythm. - Don’t fight the scale. If
gap-4is too tight andgap-6too loose, the answer is notgap-5. pick one and adjust the surrounding layout.