Layout Specification
Reference this skill for every layout decision. Every value is an exact Tailwind class or CSS value.
Spacing System (4px Base Grid)
| Token |
Value |
Tailwind |
Use For |
| space-1 |
4px |
p-1, gap-1 |
Tight internal spacing |
| space-2 |
8px |
p-2, gap-2 |
Icon-to-text gap |
| space-3 |
12px |
p-3, gap-3 |
Badge padding, small gaps |
| space-4 |
16px |
p-4, gap-4 |
Card internal padding, list gaps |
| space-5 |
20px |
p-5, gap-5 |
Panel padding |
| space-6 |
24px |
p-6, gap-6 |
Section internal padding |
| space-8 |
32px |
p-8, gap-8 |
Between content blocks |
| space-10 |
40px |
p-10 |
Large section padding |
| space-12 |
48px |
p-12 |
Section vertical padding |
| space-16 |
64px |
py-16 |
Section breathing room |
| space-20 |
80px |
py-20 |
Major section breaks |
| space-24 |
96px |
py-24 |
Between major sections |
| space-32 |
128px |
py-32 |
Hero/footer separation |
Container Widths
| Token |
Width |
Tailwind |
Use For |
| container-sm |
640px |
max-w-screen-sm |
Forms, narrow content |
| container-md |
768px |
max-w-screen-md |
Blog posts, articles |
| container-lg |
1024px |
max-w-screen-lg |
Standard pages |
| container-xl |
1280px |
max-w-7xl |
Full layouts |
| container-2xl |
1440px |
max-w-[1440px] |
Dashboards, data-dense |
| full |
100% |
max-w-full |
Hero sections (with inner constraint) |
Standard page: max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
Dashboard: max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8
Landing hero content: max-w-6xl mx-auto (1152px)
Section Structure Pattern
Every page is a stack of full-width sections with constrained inner content:
<section className="py-20 md:py-28"> <!-- Section spacing -->
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <!-- Container -->
<!-- Section badge (optional) -->
<!-- Section heading -->
<!-- Section content -->
</div>
</section>
Section spacing by importance:
| Section Type |
Vertical Padding |
Notes |
| Hero |
min-h-screen or py-32 |
Full viewport or very generous |
| Major content |
py-20 md:py-28 |
Standard section |
| Sub-section |
py-12 md:py-16 |
Within a larger section |
| Compact |
py-8 md:py-12 |
Lists, tables, dense content |
| Footer |
py-12 |
Consistent, not huge |
Background alternation: Alternate bg-page, bg-surface/30, bg-page for visual rhythm.
Grid Patterns
Card Grids
| Context |
Grid Classes |
Gap |
| Challenge cards |
grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 |
16px |
| Stat cards |
grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 |
16px |
| Badge grid |
grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-3 |
12px |
| Feature grid |
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 |
24px |
| Stats summary |
grid grid-cols-2 sm:grid-cols-4 gap-4 |
16px |
Dashboard Layouts
Two-column with sidebar:
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
<div className="lg:col-span-8">{/* Main */}</div>
<div className="lg:col-span-4">{/* Sidebar */}</div>
</div>
Settings sidebar:
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
<div className="md:col-span-1">{/* Nav */}</div>
<div className="md:col-span-3">{/* Content */}</div>
</div>
Bento Grid (Asymmetric)
<div className="grid grid-cols-1 md:grid-cols-12 gap-5 md:gap-6">
<div className="md:col-span-7">{/* Large */}</div>
<div className="md:col-span-5">{/* Small */}</div>
<div className="md:col-span-5">{/* Small */}</div>
<div className="md:col-span-7">{/* Large */}</div>
</div>
Z-Index System
| Layer |
z-index |
Elements |
| Background |
z-0 |
Page bg, animated patterns, particles |
| Overlays |
z-[1]–z-[3] |
Video overlays, section dividers |
| Content |
z-10 |
Standard cards, sections |
| Sticky elements |
z-20 |
Sticky filter bars, sticky sidebars |
| Dropdowns |
z-30 |
Dropdown menus, popovers, tooltips |
| Navigation |
z-40 |
Main nav bar |
| Overlays/Sheets |
z-50 |
Mobile nav, bottom sheets, drawers |
| Modal |
z-[60] |
Dialog modals |
| Toast |
z-[70] |
Toast notifications |
| Lightbox |
z-[100] |
Image/video lightbox |
| Loading screen |
z-[9999] |
Full-page loading overlay |
Rule: Never use arbitrary z-index values. Always reference this system.
Responsive Breakpoints
| Breakpoint |
Width |
Tailwind |
Target |
| Default |
0–639px |
(no prefix) |
Phone portrait |
| sm |
640px |
sm: |
Phone landscape, small tablet |
| md |
768px |
md: |
Tablet portrait |
| lg |
1024px |
lg: |
Tablet landscape, laptop |
| xl |
1280px |
xl: |
Standard desktop |
| 2xl |
1536px |
2xl: |
Large desktop, ultrawide |
Testing widths: 375px (phone), 768px (tablet), 1280px (laptop), 1920px (desktop)
Navigation Heights
| Element |
Height |
Platform |
| Desktop nav |
64px (h-16) |
Web |
| Mobile top nav |
56px (h-14) |
Web |
| Mobile bottom nav |
64px (h-16) |
Web |
| iOS nav bar |
44pt + status (54pt) = 98pt |
iOS |
| iOS tab bar |
49pt + home (34pt) = 83pt |
iOS |
Content offset: pt-16 below fixed nav, pb-16 above fixed bottom nav.
Sticky Elements
<!-- Sticky filter bar below nav -->
<div className="sticky top-16 z-20 bg-page/80 backdrop-blur-xl py-4 border-b border-border/30">
{/* filters */}
</div>
<!-- Sticky sidebar -->
<div className="sticky top-20 h-fit">
{/* sidebar nav */}
</div>
Rules
- All spacing from the 4px grid. No arbitrary pixel values.
- Container always has horizontal padding:
px-4 sm:px-6 lg:px-8.
- Grid gap matches content density: 12px for dense (badges), 16px for standard (cards), 24px for spacious (features).
- Mobile: single column unless content is inherently two-column (stats grid stays 2-col).
- Never use horizontal scroll on the main content area (tables are the exception, contained within their card).
- Section padding scales down on mobile:
py-20 md:py-28 → effective ~80px on mobile, ~112px on desktop.
1---2name: layout-specification3description: Spacing system, section structure pattern, grid patterns, z-index system, container widths. All exact Tailwind values. Use when defining page layout, section spacing, grid columns, z-layering, or responsive structure.4---56# Layout Specification78Reference this skill for every layout decision. Every value is an exact Tailwind class or CSS value.910## Spacing System (4px Base Grid)1112| Token | Value | Tailwind | Use For |13|-------|-------|----------|---------|14| space-1 | 4px | `p-1`, `gap-1` | Tight internal spacing |15| space-2 | 8px | `p-2`, `gap-2` | Icon-to-text gap |16| space-3 | 12px | `p-3`, `gap-3` | Badge padding, small gaps |17| space-4 | 16px | `p-4`, `gap-4` | Card internal padding, list gaps |18| space-5 | 20px | `p-5`, `gap-5` | Panel padding |19| space-6 | 24px | `p-6`, `gap-6` | Section internal padding |20| space-8 | 32px | `p-8`, `gap-8` | Between content blocks |21| space-10 | 40px | `p-10` | Large section padding |22| space-12 | 48px | `p-12` | Section vertical padding |23| space-16 | 64px | `py-16` | Section breathing room |24| space-20 | 80px | `py-20` | Major section breaks |25| space-24 | 96px | `py-24` | Between major sections |26| space-32 | 128px | `py-32` | Hero/footer separation |2728---2930## Container Widths3132| Token | Width | Tailwind | Use For |33|-------|-------|----------|---------|34| container-sm | 640px | `max-w-screen-sm` | Forms, narrow content |35| container-md | 768px | `max-w-screen-md` | Blog posts, articles |36| container-lg | 1024px | `max-w-screen-lg` | Standard pages |37| container-xl | 1280px | `max-w-7xl` | Full layouts |38| container-2xl | 1440px | `max-w-[1440px]` | Dashboards, data-dense |39| full | 100% | `max-w-full` | Hero sections (with inner constraint) |4041**Standard page:** `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`42**Dashboard:** `max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8`43**Landing hero content:** `max-w-6xl mx-auto` (1152px)4445---4647## Section Structure Pattern4849Every page is a stack of full-width sections with constrained inner content:5051```html52<section className="py-20 md:py-28"> <!-- Section spacing -->53 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <!-- Container -->54 <!-- Section badge (optional) -->55 <!-- Section heading -->56 <!-- Section content -->57 </div>58</section>59```6061**Section spacing by importance:**6263| Section Type | Vertical Padding | Notes |64|--------------|-----------------|-------|65| Hero | `min-h-screen` or `py-32` | Full viewport or very generous |66| Major content | `py-20 md:py-28` | Standard section |67| Sub-section | `py-12 md:py-16` | Within a larger section |68| Compact | `py-8 md:py-12` | Lists, tables, dense content |69| Footer | `py-12` | Consistent, not huge |7071**Background alternation:** Alternate `bg-page`, `bg-surface/30`, `bg-page` for visual rhythm.7273---7475## Grid Patterns7677### Card Grids7879| Context | Grid Classes | Gap |80|---------|-------------|-----|81| Challenge cards | `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4` | 16px |82| Stat cards | `grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4` | 16px |83| Badge grid | `grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-3` | 12px |84| Feature grid | `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6` | 24px |85| Stats summary | `grid grid-cols-2 sm:grid-cols-4 gap-4` | 16px |8687### Dashboard Layouts8889**Two-column with sidebar:**90```html91<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">92 <div className="lg:col-span-8">{/* Main */}</div>93 <div className="lg:col-span-4">{/* Sidebar */}</div>94</div>95```9697**Settings sidebar:**98```html99<div className="grid grid-cols-1 md:grid-cols-4 gap-6">100 <div className="md:col-span-1">{/* Nav */}</div>101 <div className="md:col-span-3">{/* Content */}</div>102</div>103```104105### Bento Grid (Asymmetric)106107```html108<div className="grid grid-cols-1 md:grid-cols-12 gap-5 md:gap-6">109 <div className="md:col-span-7">{/* Large */}</div>110 <div className="md:col-span-5">{/* Small */}</div>111 <div className="md:col-span-5">{/* Small */}</div>112 <div className="md:col-span-7">{/* Large */}</div>113</div>114```115116---117118## Z-Index System119120| Layer | z-index | Elements |121|-------|---------|----------|122| Background | `z-0` | Page bg, animated patterns, particles |123| Overlays | `z-[1]`–`z-[3]` | Video overlays, section dividers |124| Content | `z-10` | Standard cards, sections |125| Sticky elements | `z-20` | Sticky filter bars, sticky sidebars |126| Dropdowns | `z-30` | Dropdown menus, popovers, tooltips |127| Navigation | `z-40` | Main nav bar |128| Overlays/Sheets | `z-50` | Mobile nav, bottom sheets, drawers |129| Modal | `z-[60]` | Dialog modals |130| Toast | `z-[70]` | Toast notifications |131| Lightbox | `z-[100]` | Image/video lightbox |132| Loading screen | `z-[9999]` | Full-page loading overlay |133134**Rule:** Never use arbitrary z-index values. Always reference this system.135136---137138## Responsive Breakpoints139140| Breakpoint | Width | Tailwind | Target |141|------------|-------|----------|--------|142| Default | 0–639px | (no prefix) | Phone portrait |143| sm | 640px | `sm:` | Phone landscape, small tablet |144| md | 768px | `md:` | Tablet portrait |145| lg | 1024px | `lg:` | Tablet landscape, laptop |146| xl | 1280px | `xl:` | Standard desktop |147| 2xl | 1536px | `2xl:` | Large desktop, ultrawide |148149**Testing widths:** 375px (phone), 768px (tablet), 1280px (laptop), 1920px (desktop)150151---152153## Navigation Heights154155| Element | Height | Platform |156|---------|--------|----------|157| Desktop nav | 64px (`h-16`) | Web |158| Mobile top nav | 56px (`h-14`) | Web |159| Mobile bottom nav | 64px (`h-16`) | Web |160| iOS nav bar | 44pt + status (54pt) = 98pt | iOS |161| iOS tab bar | 49pt + home (34pt) = 83pt | iOS |162163**Content offset:** `pt-16` below fixed nav, `pb-16` above fixed bottom nav.164165---166167## Sticky Elements168169```html170<!-- Sticky filter bar below nav -->171<div className="sticky top-16 z-20 bg-page/80 backdrop-blur-xl py-4 border-b border-border/30">172 {/* filters */}173</div>174175<!-- Sticky sidebar -->176<div className="sticky top-20 h-fit">177 {/* sidebar nav */}178</div>179```180181---182183## Rules184- All spacing from the 4px grid. No arbitrary pixel values.185- Container always has horizontal padding: `px-4 sm:px-6 lg:px-8`.186- Grid gap matches content density: 12px for dense (badges), 16px for standard (cards), 24px for spacious (features).187- Mobile: single column unless content is inherently two-column (stats grid stays 2-col).188- Never use horizontal scroll on the main content area (tables are the exception, contained within their card).189- Section padding scales down on mobile: `py-20 md:py-28` → effective ~80px on mobile, ~112px on desktop.
nickgallick