Spacing

Spacing scale for margins, padding, and gaps

Spacing Scale

Consistent spacing tokens for margins, padding, and gaps. All values use rem units for accessibility and scale with the base font size.

128
32rem 512px
32rem
--spacing-dg-128 *-dg-128
xs
0.25rem 4px
0.25rem
--spacing-dg-xs *-dg-xs
sm
0.5rem 8px
0.5rem
--spacing-dg-sm *-dg-sm
md
1rem 16px
1rem
--spacing-dg-md *-dg-md
lg
1.5rem 24px
1.5rem
--spacing-dg-lg *-dg-lg
xl
2rem 32px
2rem
--spacing-dg-xl *-dg-xl
2xl
3rem 48px
3rem
--spacing-dg-2xl *-dg-2xl

Usage

Use spacing tokens with CSS custom properties or Tailwind utility classes.

CSS Custom Properties

padding: var(--spacing-dg-md); gap: var(--spacing-dg-sm); margin-bottom: var(--spacing-dg-xl);

Tailwind Utilities

class="p-dg-md" class="gap-dg-sm" class="mb-dg-xl"
xs Tight spacing between related elements (icon + label, inline badges)
sm Standard internal padding (card padding, form field gaps)
md Section padding, spacing between grouped elements
lg Spacious padding, gaps between card grids
xl Large section margins, hero padding
2xl Major section breaks, page-level spacing