---
type: semantic-spacing-tokens
ds-version: "11.4.0"
generated: 2026-11-09
note: These tokens are theme-invariant — same values across all 3RDS themes.
---

## How to use
Use `var(--ds-semantic-spacing-*)` for gaps, padding, and margins.
Use `var(--ds-semantic-sizing-*)` for fixed dimensions (icon sizes, avatar sizes, element heights).
Use `var(--ds-semantic-radius-*)` for border-radius.

Never use `var(--ds-core-size-*)` directly — always prefer the semantic alias.

## Spacing
| Token | Value | Usage |
|---|---|---|
| `--ds-semantic-spacing-xs` | `8px` | Example: buttons, menus, input suffixes — a common starting point inside a control. |
| `--ds-semantic-spacing-3xl` | `48px` |  |
| `--ds-semantic-spacing-2xs` | `6px` |  |
| `--ds-semantic-spacing-4xs` | `2px` | Example: icon or check-mark offset. |
| `--ds-semantic-spacing-3xs` | `4px` | Example: menu row padding. |
| `--ds-semantic-spacing-s` | `12px` |  |
| `--ds-semantic-spacing-m` | `16px` | Example: spacing between stacked form blocks. |
| `--ds-semantic-spacing-l` | `24px` |  |
| `--ds-semantic-spacing-xl` | `32px` |  |
| `--ds-semantic-spacing-2xl` | `40px` |  |
| `--ds-semantic-spacing-4xl` | `64px` |  |
| `--ds-semantic-spacing-5xl` | `80px` |  |
| `--ds-semantic-spacing-6xl` | `120px` |  |

## Sizing
| Token | Value | Usage |
|---|---|---|
| `--ds-semantic-sizing-s` | `16px` | Example: small icons, spinner, badge dots, radio box. |
| `--ds-semantic-sizing-m` | `24px` | Example: icon/radio indicators, nav glyphs. |
| `--ds-semantic-sizing-ml` | `28px` |  |
| `--ds-semantic-sizing-4xl` | `64px` |  |
| `--ds-semantic-sizing-5xl` | `72px` |  |
| `--ds-semantic-sizing-6xl` | `80px` |  |
| `--ds-semantic-sizing-7xl` | `120px` |  |
| `--ds-semantic-sizing-9xl` | `240px` | Example: select width, larger illustrations. |
| `--ds-semantic-sizing-10xl` | `288px` |  |
| `--ds-semantic-sizing-xs` | `12px` |  |
| `--ds-semantic-sizing-20xl` | `1280px` |  |
| `--ds-semantic-sizing-21xl` | `1440px` |  |
| `--ds-semantic-sizing-22xl` | `1600px` |  |
| `--ds-semantic-sizing-sm` | `20px` | Example: tooltip trigger (icon hit area). |
| `--ds-semantic-sizing-l` | `32px` | Example: icon-tile, switch width. |
| `--ds-semantic-sizing-xl` | `40px` | Example: side-nav item, list option (row height). |
| `--ds-semantic-sizing-2xl` | `48px` | Example: tabs, select trigger, larger tiles. |
| `--ds-semantic-sizing-13xl` | `560px` |  |
| `--ds-semantic-sizing-14xl` | `600px` |  |
| `--ds-semantic-sizing-3xs` | `4px` |  |
| `--ds-semantic-sizing-2xs` | `8px` |  |
| `--ds-semantic-sizing-3xl` | `56px` |  |
| `--ds-semantic-sizing-8xl` | `168px` |  |
| `--ds-semantic-sizing-11xl` | `320px` | Example: modal width, dropdown max-width, banner min-width. |
| `--ds-semantic-sizing-12xl` | `440px` |  |
| `--ds-semantic-sizing-14xl-bis` | `672px` |  |
| `--ds-semantic-sizing-15xl` | `768px` |  |
| `--ds-semantic-sizing-16xl` | `896px` |  |
| `--ds-semantic-sizing-17xl` | `960px` |  |
| `--ds-semantic-sizing-18xl` | `1024px` |  |
| `--ds-semantic-sizing-19xl` | `1152px` |  |

## Radius
| Token | Value | Usage |
|---|---|---|
| `--ds-semantic-radius-input` | `4px` | Corner radius for input fields. Example: textarea, input group. |
| `--ds-semantic-radius-default` | `16px` | Standard corner radius for components. Example: menus, chips, nav, callouts. |
| `--ds-semantic-radius-action` | `100px` | Corner radius for action elements (buttons). Example: pill-like chips/tags. |
| `--ds-semantic-radius-elevated` | `24px` | Corner radius for elevated elements (cards, popovers). Example: modals, dropdown panels, notifications, tooltips, listboxes. |
| `--ds-semantic-radius-skeleton` | `100px` | Corner radius for loading states (skeleton) |
| `--ds-semantic-radius-circle` | `100px` | Corner radius for circular elements. Example: avatars, switches, radio dots. |