Larkfield Day School — Editorial Education About Page for Divi 5

The Larkfield layout is structured as six sequential sections, each with a distinct background and editorial role that builds an institutional story from introduction through to a tour booking CTA. The opening hero sits on a near-black #1c1a17 ground with a centered H1 in Playfair Display at 60px desktop (scaling to 34px on mobile via three explicit breakpoints), a 13px uppercase Source Sans 3 eyebrow above it, and a 72px centered divider rule below. A curve-shaped section divider in warm cream #faf7f2 transitions the hero into the body content at 100px tall on desktop, stepping down to 44px on mobile, creating an organic bottom edge rather than a flat cut.

The palette stays consistent across all six sections: near-black ink (#1c1a17) and warm cream (#faf7f2) alternate as section backgrounds, with pure white (#ffffff) reserved exclusively for the principal's letter section, giving that content additional visual isolation. A terracotta accent (#9a3b1f) appears only on the final CTA button. The history section uses a full-bleed photograph covered by a uniform 72% dark overlay applied at both gradient stops, so the dimming is even across the entire frame rather than directional, keeping Playfair year numerals (48px, #fbf6ec) legible at any viewport width. The closing section also uses a full-bleed photo but carries no overlay at all, relying instead on a floating white card with 48px internal padding and a 1px #e3dccf border to hold the CTA copy.

Typography does most of the compositional work throughout. Section label lines are consistently set in Source Sans 3 at 13px, 2px letter-spacing, and uppercase, an editorial grammar that marks each new topic without adding decorative icons or graphic elements. The four-column milestone timeline uses Playfair Display at 48px for the year numerals and 20px for the event titles, each card separated from its label by a 2px top border rather than a container box, keeping the grid open and print-like. The values section near the end uses numbered rows (01 through 04) separated by 2px horizontal dividers across the full column width, a format that gives four core principles the structure of a printed manifesto rather than a standard bullet list.

Every section carries explicit responsive overrides at tablet and phone, set directly in each module's decoration rather than inherited from Divi's global settings. The staff portrait grid drops from four columns to two on tablet and one on mobile with rowGap adjusted at each step. Section padding is specified independently at all three breakpoints throughout: the hero runs 112px top on desktop and compresses to 64px on mobile. Font sizes, flex direction, and grid column counts all have mobile-specific values, so the layout renders predictably at any screen width without relying on theme defaults.