Spacing & Shadows

Consistent spacing scale for padding, margins, and borders. Includes shadow values for depth, border-radius tokens, and z-index stacking order.

Spacing Scale

Tailwind-based spacing scale. Use for padding, margins, gaps, and sizes. Values in rem (16px base).

Visual Scale

p-0.5 / 0.125rem / 2px

(Extra tight spacing)

p-1 / 0.25rem / 4px

(Tight spacing)

p-2 / 0.5rem / 8px

(Compact spacing)

p-4 / 1rem / 16px

(Standard spacing)

p-6 / 1.5rem / 24px

(Comfortable spacing)

p-8 / 2rem / 32px

(Generous spacing)

p-12 / 3rem / 48px

(Section spacing)

Common Spacing Classes

/* Padding (p-*, px-*, py-*) */
.p-0        /* 0px */
.p-1        /* 4px */
.p-2        /* 8px */
.p-3        /* 12px */
.p-4        /* 16px */      ← Standard
.p-6        /* 24px */      ← Comfortable
.p-8        /* 32px */      ← Generous
.p-12       /* 48px */      ← Sections
.p-16       /* 64px */
.p-20       /* 80px */

/* Margin (m-*, mx-*, my-*) */
.m-4        /* 16px margin all sides */
.mx-auto    /* Horizontal centering */
.my-6       /* Top + bottom margin */

/* Gap (between flex/grid items) */
.gap-4      /* 16px gap */
.gap-6      /* 24px gap */

/* Width/Height */
.w-4        /* 16px width */
.h-8        /* 32px height */

Border Radius

Rounded corner values for different component types.

Radius Tokens

rounded-none

0px

rounded-sm

2px

rounded

4px

rounded-md

6px

rounded-lg

8px

rounded-xl

12px

rounded-2xl

16px

rounded-3xl

24px

rounded-full

50%

Usage Guide

/* Component-specific radius */
.rounded-none    /* Sharp corners (rare) */
.rounded-sm      /* Minimal curve (input focus rings) */
.rounded         /* Standard curve (badges) */
.rounded-md      /* Medium curve (buttons) */
.rounded-lg      /* Large curve (cards, alerts) */
.rounded-xl      /* Extra large (modals) */
.rounded-full    /* Circle (avatars, icons) */

/* Usage Pattern */
<!-- Buttons -->
<button class="rounded-lg">...</button>

<!-- Cards -->
<div class="rounded-xl">...</div>

<!-- Badges -->
<span class="rounded">...</span>

<!-- Avatar -->
<img class="rounded-full">

Shadows

Shadow values for depth and elevation. Larger shadow values for components higher in stacking order.

Shadow Depth

shadow-sm

Subtle elevation

shadow-md

Standard (cards)

shadow-lg

Prominent (modals)

Shadow Classes

/* Depth ordering */
.shadow-xs     /* Minimal depth (hover states) */
.shadow-sm     /* Light elevation (input focus) */
.shadow        /* Default (cards, buttons) */
.shadow-md     /* Medium (card hover) */
.shadow-lg     /* High elevation (modals, dropdowns) */
.shadow-xl     /* Very high (modals) */
.shadow-2xl    /* Extreme (full-page modals) */

/* Variations */
.shadow-inner  /* Inner shadow (inset) */
.shadow-none   /* Remove shadow */

/* With hover */
.shadow-md hover:shadow-lg transition-shadow

Z-Index Stacking Order

Consistent stacking context for overlapping elements. Higher numbers appear on top.

Stacking Order (lowest to highest)

z-auto / z-0 Default stacking (no override)

z-10 Sticky headers, dropdowns

z-20 Fixed navigation, sidebars

z-30 Floating buttons, notifications

z-40 Modal overlay background

z-50 Modal dialog box

z-60 Toast notifications

z-70 Tooltips (highest)

Z-Index Reference

/* Stacking Context */
.z-auto        /* 0 (default) */
.z-10          /* Sticky headers, dropdowns */
.z-20          /* Fixed navbar, sidebars */
.z-30          /* Floating action buttons */
.z-40          /* Modal backdrops (semi-transparent overlay) */
.z-50          /* Modal dialog boxes */
.z-60          /* Toast notifications */
.z-70          /* Tooltips (always on top) */

/* Example: Modal Pattern */
<!-- Backdrop (z-40) -->
<div class="fixed inset-0 z-40 bg-black/50"></div>

<!-- Modal (z-50) -->
<div class="fixed z-50 bg-white rounded-lg">...</div>

<!-- Tooltip in modal (z-60) -->
<div class="absolute z-60">...</div>

Spacing Guidelines

✓ Do: Use consistent spacing scale (p-4, p-6, p-8 are common)

✓ Do: Use gap for flex/grid spacing instead of negative margins

✓ Do: Add shadow-md to cards for depth

✓ Do: Use rounded-lg for buttons and form inputs

✗ Don't: Mix spacing scales (avoid p-3 and p-7 together)

✗ Don't: Use negative margins—use gap or flexbox instead

✗ Don't: Override z-index without documented reason