Layout and surfaces — Digital Agency

The website uses full-width sections with a shared responsive horizontal gutter:

--gutter: clamp(24px, 4.4vw, 88px);

Desktop sections use 100px top / 110px bottom padding. At widths of at least 1700px, both become 140px. At widths up to 640px, the shared section padding becomes 70px vertically. The contact section has a desktop bottom-padding override of 90px.

Pattern	Website reference
Intro grid	`1.25fr 1fr`, gap `7vw`; supporting copy capped at 470px
Approach grid	`1.15fr 1fr`, gap `6vw`
Service row	`50px 150px 1fr 60px`, gap 40px, 48px vertical padding
Mobile service row	`24px 1fr 44px`, gap 12px, 32px vertical padding; symbol hidden
Section label to content	84px gap on desktop; 48px on mobile
Image study	Rectangular 4:5 crop; square on mobile

At widths up to 1000px, grids tighten. At widths up to 640px, intro and approach stack into one column, desktop navigation and secondary micro-labels hide, and decoration is reduced. The mobile media selection threshold is separately 767px; it is not the layout breakpoint.

Surfaces are mostly flat. Use whitespace and 1px rules to separate content. Keep editorial imagery rectangular. Reserve circular shapes for arrow controls and pill shapes for the strongest CTA; avoid applying large rounded cards or shadows to every region.

For future products, preserve this hierarchy and restraint while adapting gutters and density to the content. Do not copy the marketing site's large section spacing into a table, form, or dashboard by default.

Guidelines & specifications