Spacing

A consistent spacing system creates visual rhythm. v2 follows TEDI’s preference for generous defaults: 24 px card padding, 40 px page padding on desktop, 24 px grid gutters. The base unit remains 4 px.

Spacing Scale

The scale is built from multiples of 4 px. Use these tokens for margins, padding, and gaps so spacing snaps to the same grid everywhere.

Usage Guidelines

Small spacing (4 px – 12 px)

Use for tight relationships between related elements:

• Gap between icon and text inside a pill button
• Padding inside small components like tags
• Space between list items

Medium spacing (16 px – 32 px)

Use for standard component spacing. TEDI’s default card padding is 24 px:

• Padding inside cards and containers (--card-padding = 24 px)
• Margins between paragraphs
• Grid gaps (--grid-gap = 24 px)

Large spacing (40 px – 96 px)

Use for section-level spacing. v2 follows TEDI’s 40 px page-edge default:

• Page padding on desktop (--container-padding = 40 px at ≥ 1280 px)
• Space between page sections
• Hero section padding

Component Examples

Button Padding

Card Padding

Section Spacing

CSS Variables

/* Spacing Scale (4px base) */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem;   /* 2px */
--space-1: 0.25rem;      /* 4px */
--space-1-5: 0.375rem;   /* 6px */
--space-2: 0.5rem;       /* 8px */
--space-2-5: 0.625rem;   /* 10px */
--space-3: 0.75rem;      /* 12px */
--space-3-5: 0.875rem;   /* 14px */
--space-4: 1rem;         /* 16px */
--space-5: 1.25rem;      /* 20px */
--space-6: 1.5rem;       /* 24px */
--space-7: 1.75rem;      /* 28px */
--space-8: 2rem;         /* 32px */
--space-9: 2.25rem;      /* 36px */
--space-10: 2.5rem;      /* 40px */
--space-11: 2.75rem;     /* 44px */
--space-12: 3rem;        /* 48px */
--space-14: 3.5rem;      /* 56px */
--space-16: 4rem;        /* 64px */
--space-20: 5rem;        /* 80px */
--space-24: 6rem;        /* 96px */