Spacing

Consistent spacing creates rhythm, establishes relationships between elements, and improves visual hierarchy. This guide covers our spacing system and best practices.

Spacing Scale

Our spacing scale uses a 4px base unit, creating consistent, harmonious spacing:

Class	Value	Common Use
p-0	0px	No spacing
p-1	4px (0.25rem)	Tight inline spacing
p-2	8px (0.5rem)	Related items
p-3	12px (0.75rem)	Compact padding
p-4	16px (1rem)	Standard padding, small gaps
p-5	20px (1.25rem)	Medium padding
p-6	24px (1.5rem)	Comfortable padding
p-8	32px (2rem)	Section gaps
p-10	40px (2.5rem)	Large section gaps
p-12	48px (3rem)	Major sections
p-16	64px (4rem)	Page sections

Spacing Principles

1. Related items should be closer

Group related elements with tighter spacing, separate unrelated items with more space.

Card Title

Description text

Title and description are close (space-y-1), separated from action (mt-6)

2. Use consistent increments

Stick to the scale. Don't use arbitrary values like 18px or 22px.

✓ p-4, p-6, p-8

✗ p-[18px], p-[22px]

3. Larger containers need more padding

Scale padding with container size. A full-page section needs more padding than a small card.

p-2

p-4

p-6

Common Patterns

Card Padding

// Standard card
<div className="p-6">...</div>

// Compact card
<div className="p-4">...</div>

// Card with sections
<div>
  <div className="p-6 border-b">Header</div>
  <div className="p-6">Content</div>
  <div className="p-6 pt-0">Footer</div>
</div>

Form Spacing

// Form fields
<form className="space-y-4">
  <div className="space-y-2">
    <label>Email</label>
    <input />
  </div>
  <div className="space-y-2">
    <label>Password</label>
    <input />
  </div>
  <button className="mt-6">Submit</button>
</form>

Page Sections

// Page with sections
<main>
  <section className="py-12 px-4">
    Hero section
  </section>
  <section className="py-16 px-4">
    Features section
  </section>
  <section className="py-12 px-4">
    Footer
  </section>
</main>

Button Groups

// Horizontal buttons
<div className="flex gap-2">
  <button>Cancel</button>
  <button>Save</button>
</div>

// With more separation
<div className="flex gap-4">
  <button>Delete</button>
  <button>Save</button>
</div>

Gap vs Margin

Prefer gap over margins for layouts:

✓ Using gap

<div className="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Cleaner, works with dynamic content

✗ Using margins

<div className="flex">
  <div className="mr-4">Item 1</div>
  <div className="mr-4">Item 2</div>
  <div>Item 3</div>
</div>

Last item needs different treatment

Quick Reference

Padding

p-4 - Standard card/section
p-6 - Comfortable card
px-4 py-2 - Buttons
px-3 py-1.5 - Small buttons

Gaps

gap-2 - Icon + text, tight items
gap-4 - List items, form fields
gap-6 - Cards in grid
gap-8 - Page sections