Token

Spacing

A consistent spacing scale for creating harmonious layouts with predictable padding, margins, and gaps.

Overview

Our spacing system uses a pixel-based naming convention with rem values under the hood. Token names match pixel values for easy reference (e.g., --size-16 = 16px = 1rem). This makes it intuitive while maintaining scalability.

Base Unit

The spacing scale is built on a 4px base unit. Most values are multiples of 4, creating visual harmony across the interface.

Spacing Scale

The complete spacing scale from 0 to 160 pixels. Use these tokens for all spacing needs.

Token Value Pixels Preview

--size-0 0rem 0px

--size-2 0.125rem 2px

--size-4 0.25rem 4px

--size-6 0.375rem 6px

--size-8 0.5rem 8px

--size-10 0.625rem 10px

--size-12 0.75rem 12px

--size-14 0.875rem 14px

--size-16 1rem 16px

--size-18 1.125rem 18px

--size-20 1.25rem 20px

--size-24 1.5rem 24px

--size-28 1.75rem 28px

--size-32 2rem 32px

--size-40 2.5rem 40px

--size-48 3rem 48px

--size-56 3.5rem 56px

--size-64 4rem 64px

--size-80 5rem 80px

--size-96 6rem 96px

--size-112 7rem 112px

--size-128 8rem 128px

--size-160 10rem 160px

Usage

Use spacing tokens for padding, margins, gaps, and fixed dimensions.

Padding & Margins

.card {
  padding: var(--size-24);
  margin-bottom: var(--size-16);
}

.button {
  padding: var(--size-8) var(--size-16);
}

Flexbox & Grid Gaps

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--size-12);
}

.grid {
  display: grid;
  gap: var(--size-20);
}

Fixed Dimensions

.icon {
  width: var(--size-24);
  height: var(--size-24);
}

.avatar {
  width: var(--size-40);
  height: var(--size-40);
}

Guidelines

Choosing the Right Size

Micro (2-6px)

Fine adjustments, icon padding, tight text spacing

--size-2, --size-4, --size-6

Small (8-12px)

Button padding, card internal spacing, list gaps

--size-8, --size-10, --size-12

Medium (16-24px)

Section padding, card padding, component gaps

--size-16, --size-20, --size-24

Large (32-64px)

Page margins, section spacing, large gaps

--size-32, --size-48, --size-64

Extra Large (80+px)

Hero sections, major layout divisions

--size-80, --size-96, --size-128

Best Practices

Always use spacing tokens instead of hardcoded pixel values
Use consistent spacing within similar contexts (all cards should have same padding)
Prefer smaller increments for dense UIs, larger for spacious layouts
Use gap property with flexbox/grid instead of margins where possible