Spacing

Our spacing system uses an 8px base unit to create consistent, harmonious layouts. This system ensures visual rhythm and makes designs feel cohesive.

Spacing Scale

All spacing values are multiples of 4px, based on an 8px grid system.

Spacing Values

4px / 0.25rem

8px / 0.5rem

16px / 1rem

24px / 1.5rem

32px / 2rem

2xl

48px / 3rem

3xl

64px / 4rem

4xl

96px / 6rem

5xl

128px / 8rem

Usage Guidelines

When to Use Each Size

Spacing Usage

xs (4px)

Minimal spacing between tightly related elements (icon + text, badge spacing)

sm (8px)

Small gaps between related items (list items, form field groups)

md (16px)

Standard spacing for most UI elements (padding in cards, gaps between components)

lg (24px)

Section spacing within containers (between content blocks in a card)

xl (32px)

Major section separations (between cards, content sections)

2xl - 5xl (48px+)

Large layout spacing (page margins, hero sections, major layout breaks)

Visual Examples

Card with Proper Spacing

Card Title

This card uses md (16px) padding around the content

Buttons use sm (8px) padding and sm (8px) gap between them

Best Practices

Spacing Guidelines

✓

Use the scale consistently: Stick to defined values, avoid arbitrary spacing

✓

Increase spacing for hierarchy: More space = greater separation

✓

Group related elements: Use smaller spacing between related items

✗

Don't use odd numbers: Avoid 5px, 7px, 13px - use the scale

✗

Don't cram elements: Give content room to breathe

Code Reference

CSS Custom Properties

:root {
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4rem;    /* 64px */
  --space-4xl: 6rem;    /* 96px */
  --space-5xl: 8rem;    /* 128px */
}

Tailwind CSS Classes

/* Padding */
.p-1 { padding: 0.25rem; }  /* 4px */
.p-2 { padding: 0.5rem; }   /* 8px */
.p-4 { padding: 1rem; }     /* 16px */
.p-6 { padding: 1.5rem; }   /* 24px */
.p-8 { padding: 2rem; }     /* 32px */

/* Margin */
.m-1 { margin: 0.25rem; }   /* 4px */
.m-2 { margin: 0.5rem; }    /* 8px */
.m-4 { margin: 1rem; }      /* 16px */
.m-6 { margin: 1.5rem; }    /* 24px */
.m-8 { margin: 2rem; }      /* 32px */

/* Gap */
.gap-1 { gap: 0.25rem; }    /* 4px */
.gap-2 { gap: 0.5rem; }     /* 8px */
.gap-4 { gap: 1rem; }       /* 16px */
.gap-6 { gap: 1.5rem; }     /* 24px */
.gap-8 { gap: 2rem; }       /* 32px */