Spacing & Layout

The spacing scale, border radius tokens, layout widths, and grid patterns that create consistent spatial rhythm throughout the application.

Spacing Scale

Tailwind's default spacing scale used for padding, margin, gap, and sizing. Values shown with pixel equivalents.

0.5
2px / 0.125rem
1
4px / 0.25rem
1.5
6px / 0.375rem
2
8px / 0.5rem
2.5
10px / 0.625rem
3
12px / 0.75rem
4
16px / 1rem
5
20px / 1.25rem
6
24px / 1.5rem
8
32px / 2rem
10
40px / 2.5rem
12
48px / 3rem
16
64px / 4rem

Common Usage

gap-2 Icon + text inline
gap-3 Nav items, badges
gap-4 Grid gaps, card spacing
p-4 Compact card padding
p-6 Standard card padding
space-y-6 Page section spacing

Border Radius Tokens

Custom radius scale built from the base --radius token (0.625rem / 10px).

--radius-sm 6px

Small buttons, badges, chips

--radius-md 8px

Inputs, selects, buttons

--radius-lg 10px (base)

Default / cards, dialogs

--radius-xl 14px

Large cards, panels

--radius-2xl 18px

Feature cards, modals

--radius-3xl 22px

Marketing sections

--radius-4xl 26px

Hero images, pills

rounded-full 9999px

Avatars, status dots

Layout Widths

Standard maximum widths for page content containers. All use mx-auto centering.

max-w-2xl 42rem / 672px
Feed
max-w-3xl 48rem / 768px
Settings
max-w-4xl 56rem / 896px
Detail / Form
max-w-6xl 72rem / 1152px
Dashboard / List

Page Layout Pattern

The standard layout structure used on every authenticated page.

Code Pattern 
<div class="max-w-6xl mx-auto space-y-6">
  <div>
    <h1 class="text-3xl font-bold
         tracking-tight">
      Page Title
    </h1>
    <p class="text-muted-foreground">
      Page description text.
    </p>
  </div>

  <!-- Content sections -->
  <section>...</section>
</div>
Live Preview
space-y-6 (24px)
space-y-6 (24px)

Grid Patterns

Common responsive grid layouts used throughout the app for stats, cards, and forms.

Stats Grid

grid gap-4 sm:grid-cols-2 lg:grid-cols-4
Dashboard

24

New Leads

18

Responses

156

Active Clients

4.9

Avg Rating

Cards Grid

grid gap-4 sm:grid-cols-2 lg:grid-cols-3
Programs

12-Week Strength

Progressive overload program

$49.99 Intermediate

HIIT Fat Burner

High intensity interval training

$29.99 Beginner

Yoga Fundamentals

Flexibility and mobility

$19.99 Beginner

Form Grid

grid gap-6 sm:grid-cols-2
Settings / Forms
John
Doe
john@example.com
(555) 123-4567