Layout
Layout system
Page anatomy, grids, breakpoints, and structural patterns.
Page anatomy
Navbarh-16 · sticky top-0 z-50 · transparent → solid
Hero100dvh · sticky -z-10 · purple + beams
Canvasrelative z-20 · white · curtain over hero
Sectionssection-v-lg · section-container
Footerpurple bg · multi-column layout
Breakpoints
Mobile0–639px
SM640px+
MD768px+
LG1024px+
XL1280px+
2XL1536px+
Page templates
Homepage/
Navbar → Hero (sticky) → Marquee → About → Solutions → Featured Work → Testimonials → Insights → Newsletter → CTA → Footer
Interior/about, /press
Navbar → PageHeader → Content (page-body) → CTA → Footer
Portfolio/work
Navbar → PageHeader → Portfolio Grid → CTA → Footer
Case Study/work/[slug]
Navbar → Hero Image → Prose Content → Related → CTA → Footer
Form/get-started
Split: Brand Panel (5/12) | Form Wizard (7/12)
Solutions/solutions
Navbar → PageHeader → Pinned Scroll Panels → CTA → Footer
Grid patterns
Bento grid12-col · 1px gap · .editorial-bento-grid
Card gridmd:2-col · lg:3-col · 24–32px gap
Solutions grid3/6/3 col split · .solutions-grid
Split form5/7 col · get-started layout
Custom aspect ratios
21/9
16/10
4/5
4/3
3/4
3/1