Foundations
Spacing
DS0 uses a 4px base unit spacing scale for consistent layouts across all components.
Philosophy
All spacing in DS0 is based on a 4px grid. Every margin, padding, and gap aligns to multiples of 4px, creating visual rhythm and consistency.
Scale
00px
Px1px
052px
14px
156px
28px
2510px
312px
3514px
416px
520px
624px
728px
832px
936px
1040px
1144px
1248px
1456px
1664px
2080px
2496px
28112px
32128px
36144px
40160px
44176px
48192px
52208px
56224px
60240px
64256px
72288px
80320px
96384px
Usage
// Tailwind utility classes map to spacing tokens
<div className="p-4">16px padding</div>
<div className="gap-3">12px gap</div>
<div className="mt-6">24px top margin</div>
// Spacing tokens are also available as CSS variables
.custom {
padding: var(--ds0-spacing-4); /* 16px */
gap: var(--ds0-spacing-3); /* 12px */
}Density Modes
DS0 supports three density modes for different contexts:
| Mode | Padding X | Padding Y | Gap | Best For |
|---|---|---|---|---|
| Compact | 8px | 4px | 6px | Data-dense UIs, dashboards |
| Comfortable | 16px | 8px | 8px | Default — most applications |
| Spacious | 24px | 12px | 12px | Marketing, landing pages |
// Apply density via data attribute
<div data-density="compact">Dense layout</div>
<div data-density="spacious">Airy layout</div>