tokens

Spacing

Spacing scale tokens built on a 4px base unit. These tokens are used for padding, margins, gaps, and other spatial relationships to ensure consistent rhythm and density across all components and layouts.

Usage Guidance

When to use

+Apply consistent spacing values from the 4px base unit scale.
+Use CSS custom properties (--brz-spacing-*) for padding, margins, and gaps.
+Reference token values when creating custom layouts.

When not to use

−Don't use arbitrary pixel values when a spacing token exists.
−Don't mix spacing systems.

Examples

Code Samples

Spacing Scale

The complete spacing scale from 4px to 64px. Each step is visualised as a horizontal bar with its pixel value and common usage.

<div style="display: flex; flex-direction: column; gap: 12px;">
  <div style="display: flex; align-items: center; gap: 12px;">
    <span style="font-size: 12px; font-weight: 500; color: #6B7280; min-width: 32px; text-align: right;">4px</span>
    <div style="width: 4px; height: 24px; background: #2563EB; border-radius: 2px;"></div>
    <span style="font-size: 12px; color: #9CA3AF;">spacing-1 -- Tight inline spacing, icon gaps</span>
  </div>
  <div style="display: flex; align-items: center; gap: 12px;">
    <span style="font-size: 12px; font-weight: 500; color: #6B7280; min-width: 32px; text-align: right;">8px</span>
    <div style="width: 8px; height: 24px; background: #2563EB; border-radius: 2px;"></div>
    <span style="font-size: 12px; color: #9CA3AF;">spacing-2 -- Compact element spacing, small padding</span>
  </div>
  <div style="display: flex; align-items: center; gap: 12px;">
    <span style="font-size: 12px; font-weight: 500; color: #6B7280; min-width: 32px; text-align: right;">12px</span>
    <div style="width: 12px; height: 24px; background: #2563EB; border-radius: 2px;"></div>
    <span style="font-size: 12px; color: #9CA3AF;">spacing-3 -- Input padding, button padding</span>
  </div>
  <div style="display: flex; align-items: center; gap: 12px;">
    <span style="font-size: 12px; font-weight: 500; color: #6B7280; min-width: 32px; text-align: right;">16px</span>
    <div style="width: 16px; height: 24px; background: #2563EB; border-radius: 2px;"></div>
    <span style="font-size: 12px; color: #9CA3AF;">spacing-4 -- Card padding, standard gap</span>
  </div>
  <div style="display: flex; align-items: center; gap: 12px;">
    <span style="font-size: 12px; font-weight: 500; color: #6B7280; min-width: 32px; text-align: right;">24px</span>
    <div style="width: 24px; height: 24px; background: #2563EB; border-radius: 2px;"></div>
    <span style="font-size: 12px; color: #9CA3AF;">spacing-6 -- Section padding, larger gaps</span>
  </div>
  <div style="display: flex; align-items: center; gap: 12px;">
    <span style="font-size: 12px; font-weight: 500; color: #6B7280; min-width: 32px; text-align: right;">32px</span>
    <div style="width: 32px; height: 24px; background: #2563EB; border-radius: 2px;"></div>
    <span style="font-size: 12px; color: #9CA3AF;">spacing-8 -- Page gutters, section spacing</span>
  </div>
  <div style="display: flex; align-items: center; gap: 12px;">
    <span style="font-size: 12px; font-weight: 500; color: #6B7280; min-width: 32px; text-align: right;">48px</span>
    <div style="width: 48px; height: 24px; background: #2563EB; border-radius: 2px;"></div>
    <span style="font-size: 12px; color: #9CA3AF;">spacing-12 -- Large section separation</span>
  </div>
  <div style="display: flex; align-items: center; gap: 12px;">
    <span style="font-size: 12px; font-weight: 500; color: #6B7280; min-width: 32px; text-align: right;">64px</span>
    <div style="width: 64px; height: 24px; background: #2563EB; border-radius: 2px;"></div>
    <span style="font-size: 12px; color: #9CA3AF;">spacing-16 -- Page-level separation, hero spacing</span>
  </div>
</div>