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

Mobile

0–639px

640px+

768px+

1024px+

1280px+

2XL

1536px+

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

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

21/9

16/10

4/5

4/3

3/4

3/1