Spacing

Consistent spacing creates visual rhythm and hierarchy. The design system uses a systematic spacing scale based on Tailwind CSS utilities.

Tailwind Configuration

The design system uses Tailwind's default spacing scale. No additional configuration is required in tailwind.config.js for spacing utilities.

// Spacing is included by default in Tailwind CSS
// Use utilities like: p-4, m-6, gap-2, space-y-4, etc.

// Standard Tailwind spacing scale:
// 1 = 0.25rem (4px)
// 2 = 0.5rem (8px)
// 3 = 0.75rem (12px)
// 4 = 1rem (16px)
// 5 = 1.25rem (20px)
// 6 = 1.5rem (24px)
// 8 = 2rem (32px)
// 10 = 2.5rem (40px)
// 12 = 3rem (48px)
// ... and more

These spacing values are used for margins (m-*), padding (p-*), gaps (gap-*), and space between elements (space-*).

Usage Examples

// Padding
<div className="p-4">           {/* padding: 1rem */}
<div className="px-6 py-3">    {/* padding-x: 1.5rem, padding-y: 0.75rem */}

// Margin
<div className="m-8">           {/* margin: 2rem */}
<div className="mt-4 mb-6">     {/* margin-top: 1rem, margin-bottom: 1.5rem */}

// Gap (Flexbox/Grid)
<div className="flex gap-4">    {/* gap: 1rem */}
<div className="grid gap-6">    {/* gap: 1.5rem */}

// Space Between (Flexbox)
<div className="flex flex-col space-y-4">  {/* vertical spacing: 1rem */}
<div className="flex space-x-2">           {/* horizontal spacing: 0.5rem */}

Spacing Scale

Standard spacing units for margins, padding, and gaps.

1 (0.25rem / 4px)

w-1 h-12

2 (0.5rem / 8px)

w-2 h-12

3 (0.75rem / 12px)

w-3 h-12

4 (1rem / 16px)

w-4 h-12

5 (1.25rem / 20px)

w-5 h-12

6 (1.5rem / 24px)

w-6 h-12

8 (2rem / 32px)

w-8 h-12

10 (2.5rem / 40px)

w-10 h-12

12 (3rem / 48px)

w-12 h-12

16 (4rem / 64px)

w-16 h-12

20 (5rem / 80px)

w-20 h-12

24 (6rem / 96px)

w-24 h-12

Margin Utilities

Apply margins to elements for external spacing.

mt-4 (margin-top: 1rem)
mb-4 (margin-bottom: 1rem)
ml-8 (margin-left: 2rem)
mr-8 (margin-right: 2rem)

Padding Utilities

Apply padding to elements for internal spacing.

p-2 (padding: 0.5rem)
p-4 (padding: 1rem)
p-6 (padding: 1.5rem)
p-8 (padding: 2rem)

Gap Utilities (Flexbox/Grid)

Control spacing between flex or grid items.

gap-2 (0.5rem spacing)

gap-4 (1rem spacing)

gap-6 (1.5rem spacing)

Border Radius

Consistent corner rounding for UI elements.

rounded-none
rounded-sm
rounded
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-full