📐

Dimension / Spacing Tokens

DTCG Type: dimension

Dimension tokens control spacing, sizing, and layout measurements. They establish a consistent spatial rhythm across your entire UI — from micro-spacing between elements to macro-spacing between sections.

Token Examples

Token Name	Value
`spacing.xs`	`0.25rem`
`spacing.sm`	`0.5rem`
`spacing.md`	`1rem`
`spacing.lg`	`1.5rem`
`spacing.xl`	`2rem`
`spacing.2xl`	`3rem`

CSS Properties

These CSS properties typically consume dimension / spacing tokens:

marginpaddinggapwidthheighttop/right/bottom/leftmax-widthmin-height

Use Cases

✓

Component internal padding

✓

Stack and grid gaps

✓

Section margins and padding

✓

Container max-widths

✓

Icon and avatar sizing

✓

Touch target minimum sizes (44px mobile)

Usage Example

:root {
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
  --spacing-2xl: 3rem;    /* 48px */
}

.card {
  padding: var(--spacing-md);
  gap: var(--spacing-sm);
}

.section {
  padding: var(--spacing-2xl) var(--spacing-lg);
}

Available in Presets

Full Brand System

Complete 3-tier system with light/dark modes

Simple

Lightweight global-only tokens

Product / SaaS

Interactive product UI with semantic modes

Landing Page

Bold marketing with gradients and drama

Dashboard / Admin

Data-dense panels with chart colors

Mobile App

Touch-friendly native-feeling values

Email Template

Email-safe px units + web-safe fonts

Minimal

Under 20 tokens, bare essentials

Naming Convention

// Token name format: {category}.{group}.{variant}
// Examples:
// spacing.xs → 0.25rem
// spacing.sm → 0.5rem
// spacing.md → 1rem
// spacing.lg → 1.5rem
// spacing.xl → 2rem
// spacing.2xl → 3rem

// CSS custom property:
// --spacing-xs: 0.25rem;
// --spacing-sm: 0.5rem;

// Token set hierarchy:
// global/         → Raw primitive values
// semantic/light/ → Light mode semantic mapping
// semantic/dark/  → Dark mode semantic mapping
// component/      → Component-specific overrides