Spacing & Layout

Spacing Scale

The spacing system uses Tailwind’s default 4px-base scale with no custom overrides. A consistent 4px grid keeps layouts aligned across all screen sizes.

Step	Value	Common Usage
1	4px	Icon padding, tight inline gaps
2	8px	Input padding (sm), badge padding
3	12px	Small button padding (sm)
4	16px	Base card padding, stack gap
5	20px	Section gap (mobile)
6	24px	Card padding (default), grid gap
8	32px	Section gap (tablet)
10	40px	Large button height
12	48px	Section gap (desktop), card vertical padding
16	64px	Hero section padding
20	80px	Between major page sections
24	96px	Large hero vertical padding
32	128px	Max hero padding

Container

The main content container is defined once in the layout and used across all pages:

<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
  …
</div>

Breakpoint	Padding	Notes
Mobile (< sm)	px-4 (16px)	Full-bleed minus safe margin
Tablet (sm+)	px-6 (24px)	Slightly roomier
Desktop (lg+)	px-8 (32px)	Final breathing room

max-w-7xl = 1280px. The site does not use a wider container. Content at max-w-5xl (1024px) or max-w-3xl (768px) is used for reading-optimized sections (bio copy, testimonials).

Grid System

All multi-column layouts use CSS Grid via Tailwind:

2-Column (Features, Testimonials)

<div class="grid grid-cols-1 gap-8 md:grid-cols-2">

3-Column (Services)

<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">

6-Column Asymmetric (Hero with photo)

<div class="grid grid-cols-1 gap-12 lg:grid-cols-[2fr_3fr]">

Section Spacing

Page sections use consistent vertical spacing:

<section class="py-20 lg:py-28">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    …
  </div>
</section>

Context	Class	Value
Standard section	py-20	80px top/bottom
Hero section	py-24 lg:py-32	96px → 128px
Tight section (logos bar)	py-12	48px
Footer	py-16	64px

Z-Index Layers

Layer	Value	Usage
Base content	z-0	Page content
Floating elements	z-10	Sticky nav background
Dropdown menus	z-20	Navigation dropdowns
Modals / overlays	z-50	Modal backdrop + dialog
Toast notifications	z-[100]	Toasts, always on top