# Spacing

An 8-point base grid keeps rhythm consistent across every component and layout. All values are multiples of 4px. Reference tokens as `Scale.*` — never hardcode pixel values.

<Tabs>
<Tab title="Overview">

## Grid rhythm

```dh-strip
kind: spacing
desc: Dense range (4–16px) grows in 4px steps for precise component internals. Above 16px the scale shifts to 8px steps to govern layout-level spacing.
4 | 4
8 | 8
12 | 12
16 | 16
24 | 24
32 | 32
48 | 48
64 | 64
```

```dh-principles
#006aff | 8-point base grid | The core rhythm is 8px. Every layout spacing value is a multiple of 8. This keeps vertical rhythm consistent across components and pages.
#189f60 | 4px for precision | The 4px subdivisions handle tight internal spacing — icon gaps, input padding, inline label offsets — without breaking the larger rhythm.
#ff9900 | Context governs density | Compact UI elements (4–12px), comfortable containers (16–24px), page-level layout (32px+). Density is intentional, not arbitrary.
```

## Density in practice

```dh-principles
#006aff | Compact | Badges, chips, tags, inline icons — 8px padding, 4px gaps.
#189f60 | Comfortable | Buttons, cards, inputs, modals — 16px padding, 8px gaps.
#820ad1 | Spacious | Page sections, hero areas — 32px padding, 16px gaps.
```

</Tab>
<Tab title="Scale">

```dh-scale
kind: spacing
none | Scale.0 | 0 | --scale-0
2 | Scale.2 | 2 | --scale-2
4 | Scale.4 | 4 | --scale-4
8 | Scale.8 | 8 | --scale-8
12 | Scale.12 | 12 | --scale-12
16 | Scale.16 | 16 | --scale-16
20 | Scale.20 | 20 | --scale-20
24 | Scale.24 | 24 | --scale-24
32 | Scale.32 | 32 | --scale-32
40 | Scale.40 | 40 | --scale-40
48 | Scale.48 | 48 | --scale-48
56 | Scale.56 | 56 | --scale-56
64 | Scale.64 | 64 | --scale-64
72 | Scale.72 | 72 | --scale-72
80 | Scale.80 | 80 | --scale-80
88 | Scale.88 | 88 | --scale-88
96 | Scale.96 | 96 | --scale-96
104 | Scale.104 | 104 | --scale-104
120 | Scale.120 | 120 | --scale-120
128 | Scale.128 | 128 | --scale-128
200 | Scale.200 | 200 | --scale-200
```

</Tab>
<Tab title="Usage">

```dh-usage
group: Compact — 4–12px | #006aff
Icon-to-label gap | Scale.4–8 | Gap between an icon and its adjacent label text. | Scale.4, Scale.8
Inline element padding | Scale.8–12 | Horizontal padding inside badges, chips, and tag elements. | Scale.8, Scale.12
Input helper text offset | Scale.4 | Margin between an input and its helper or error text. | Scale.4
group: Comfortable — 16–24px | #189f60
Button padding | Scale.16 | Horizontal padding inside primary, secondary, and tertiary buttons. | Scale.16
Card internal padding | Scale.16–24 | Padding inside card and panel components. | Scale.16, Scale.24
Form field gap | Scale.16 | Vertical gap between stacked form fields. | Scale.16
Modal padding | Scale.24 | Internal padding for dialog and bottom-sheet containers. | Scale.24
group: Layout — 32–64px | #820ad1
Section vertical margin | Scale.32–40 | Vertical space between major page sections. | Scale.32, Scale.40
Page horizontal gutter | Scale.24–40 | Left/right padding on the main content container. | Scale.24, Scale.40
```

</Tab>
</Tabs>