---
url: "https://vueda.dev/v3/reference/theming/tokens/semantic-spacing-tokens.md"
title: "Semantic spacing tokens"
---

# Semantic spacing tokens

Condensed 4px grid. Tighter than shadcn defaults.
Not mapped through @theme. Components reference these as arbitrary values:
gap-[var(--vueda-gap-sm)], p-[var(--vueda-section-padding)], etc.
Semantic spacing tokens provide the published 4px, 8px, and 12px steps.

| Name | Light | Dark | Description | Tailwind utility |
| --- | --- | --- | --- | --- |
| `--vueda-gap-sm` | `0.25rem` |  | 4px — inside-control gap (icon to label, segment to segment). |  |
| `--vueda-gap-md` | `0.5rem` |  | 8px — between controls in a row. |  |
| `--vueda-gap-lg` | `0.75rem` |  | 12px — between groups within a section. |  |
| `--vueda-section-padding` | `0.75rem` |  | 12px — card / panel interior padding. |  |
| `--vueda-control-px` | `var(         --vueda-control-px-md     )` |  | legacy alias for --vueda-control-px-md (12px); retained for consumers that predate the sm / md / lg ladder. Prefer the size-specific token. |  |
| `--vueda-control-py` | `0.25rem` |  | 4px — legacy vertical padding constant; prefer the height-paired tokens above. |  |

## Tokens

<a id="css-token-vueda-gap-sm"></a>

### --vueda-gap-sm

| Field | Value |
| --- | --- |
| Light | `0.25rem` |
| Source | `client/lib/theme/vueda-tailwind/base.css:595` |

4px — inside-control gap (icon to label, segment to segment).

<a id="css-token-vueda-gap-md"></a>

### --vueda-gap-md

| Field | Value |
| --- | --- |
| Light | `0.5rem` |
| Source | `client/lib/theme/vueda-tailwind/base.css:596` |

8px — between controls in a row.

<a id="css-token-vueda-gap-lg"></a>

### --vueda-gap-lg

| Field | Value |
| --- | --- |
| Light | `0.75rem` |
| Source | `client/lib/theme/vueda-tailwind/base.css:597` |

12px — between groups within a section.

<a id="css-token-vueda-section-padding"></a>

### --vueda-section-padding

| Field | Value |
| --- | --- |
| Light | `0.75rem` |
| Source | `client/lib/theme/vueda-tailwind/base.css:598` |

12px — card / panel interior padding.

<a id="css-token-vueda-control-px"></a>

### --vueda-control-px

| Field | Value |
| --- | --- |
| Light | `var(         --vueda-control-px-md     )` |
| Source | `client/lib/theme/vueda-tailwind/base.css:600` |

legacy alias for --vueda-control-px-md (12px); retained for consumers that predate the sm / md / lg ladder. Prefer the size-specific token.

<a id="css-token-vueda-control-py"></a>

### --vueda-control-py

| Field | Value |
| --- | --- |
| Light | `0.25rem` |
| Source | `client/lib/theme/vueda-tailwind/base.css:603` |

4px — legacy vertical padding constant; prefer the height-paired tokens above.