Bold Studio Landing Page for Divi 5: Motion and Brand Design

The layout opens on an off-white canvas (#f2f2f0) with a white hero group framed on all four sides by a 4px solid black border. Inside it, an H1 set in Archivo Black at 104px — tight 0.98em line height, -1px letter spacing, forced uppercase — presses the studio name into a single dense editorial mass. Immediately below, three numbered service cards sit in a CSS grid that runs three columns on desktop and collapses to a single stack on phone. Each card shares the same border treatment and the same type pairing: a Space Mono index label (01, 02, 03) in 14px uppercase with 2px letter spacing sets the sequence, then an 18px Work Sans line names the discipline. The primary CTA is an orange-red (#ff3b00) button with a 4px black border and 0px radius; hover inverts fill and label, making the interaction visible on a fast scroll.

The portfolio section runs five projects through a disciplined grid. A heading row pairs a Space Mono eyebrow with an Archivo Black H2 and a ghost outline button pushed to the opposite end of the row. Below it, a CSS grid opens with a full-width 2:1 featured case — Northern Reel Festival, spanning both columns — then drops into four 4:3 cards: Vantage Bikes, Mono Radio, Fieldwork Books, and Tallow Coffee. Each card carries a project name in Archivo Black 22px and a small bordered discipline tag in Space Mono uppercase. On phone the grid collapses to one column and row gap tightens from 40px to 32px, keeping the sequence intact without horizontal scroll.

The stats section builds a black outer container — 1px black interior gaps, #f2f2f0 cells — that reads more like a printed table than a dashboard. The four figures (48, 4.9, 71%, 3x) render in Archivo Black at 64px with -2px letter spacing. Each label runs in 13px Space Mono uppercase beneath the number. Tablet and phone both switch to a 2×2 grid so all four cells remain visible without scroll. The testimonial section that follows takes a Pexels photograph and applies a 70% opaque black gradient to both sides, then sets an Archivo Black quote at 42px white across a 760px constrained column — signed off by a 4px white divider hairline and two attribution text lines in Work Sans.

The back half of the page covers process, team, reasoning, FAQ, and a live contact form. The process section uses an 80px Archivo Black counter on the right column, with 2px solid black dividers separating each of the three phases. The team section places four 1:1 square B&W portraits in a four-column grid; each portrait gets a top-only 4px black border before the name and role. A split accordion-plus-image section follows, then a centered FAQ accordion with six items and full-perimeter 4px black borders. The closing section pairs three icon-and-text benefit rows with a contact form card — Name and Email fields, white on off-white, the same 4px black border system, and the orange-red submit button — so the studio can receive briefs the moment the page goes live.