Spacing

Base Unit

All spacing in the FRAYT Design System snaps to a 4px grid (0.25rem). This creates visual rhythm and ensures consistent alignment across all components and layouts.

Spacing Scale

Usage

Use Tailwind's spacing utilities, which are based on the same 4px grid:

// Padding
<div className="p-4">16px padding</div>
<div className="px-6 py-3">24px horizontal, 12px vertical</div>

// Margin
<div className="mt-8 mb-4">32px top, 16px bottom</div>

// Gap (flexbox/grid)
<div className="flex gap-3">12px gap between items</div>
<div className="grid gap-6">24px grid gap</div>

Guidelines

• Component internal padding: Use p-3 (12px) to p-6 (24px) depending on density
• Section spacing: Use space-y-8 (32px) or space-y-12 (48px) between major sections
• Inline spacing: Use gap-2 (8px) to gap-4 (16px) between related inline elements
• Never use arbitrary spacing values — always snap to the 4px grid