Fieldnote Coffee Roasters — Brutalist Coffee Coffee Page for Divi 5

The layout opens with a full-bleed hero section built on a Pexels coffee photograph covered by a dual-stop gradient overlay at 70% black opacity on both stops. That near-total overlay turns the image into texture rather than subject matter, letting the white H1 type read cleanly at any screen size. "The coffee" is set in Archivo Black at 56px, uppercase, with -1px letter spacing and a 1.12em line height, scaling to 42px on tablet and 32px on phone via explicit breakpoint values encoded in the layout JSON. A Space Mono breadcrumb at 13px / 2px letter spacing anchors the hierarchy above the heading, and a Public Sans body paragraph at 19px / 1.6em line height sits inside a 600px-wide group aligned left. Hero section padding steps from 120px top / 104px bottom on desktop down to 64px / 56px on phone, compressing the section proportionally without losing the editorial breathing room.

The product catalog section is the functional core. A flex header row aligns the H2 "Five coffees we are proud of" (Archivo 44px, weight 900, -1px tracking, uppercase, text-wrap balance) against a ghost CTA button on the opposite end. The button uses a transparent fill, a 4px solid black border, and zero corner radius on all corners, a constraint applied to every interactive element in the layout. Below this header, five coffee cards are arranged in a Divi Group module set to CSS grid with two columns, a 32px column gap, and a 40px row gap. The first card (House Blend) spans both grid columns and carries a 2:1 aspect-ratio image; the other four (Ethiopia Guji, Colombia Huila, Espresso No. 7, Swiss Water Decaf) use 4:3 images. Each card ends with a flavor-note tag, a Divi Group with 4px solid black borders on all sides and zero radius, containing a Space Mono 12px uppercase tasting descriptor. On phone, the grid drops to a single column and row gaps reduce to 32px.

The comparison section uses two equal-height padded Group modules inside a 1/2 + 1/2 equal-columns row. The left panel carries a white (#ffffff) background with a 4px black border; the right panel inverts to solid black (#000000) with the same border treatment. Inside each panel, four rows pair a Font Awesome icon (f00d, an X mark in the white panel; f00c, a check mark in the black panel) with a Public Sans 17px text description at a 14px column gap and 10px vertical row padding. The check icon in the dark panel is colored #e8e4da (the same parchment tone used for section backgrounds) rather than pure white, keeping contrast within the established palette. The dark panel closes with a "Taste the difference" button whose parchment fill inverts to transparent on hover.

The brew guide section places a Divi Accordion against a tall 4:5 portrait image in a two-column flex row. The accordion carries four items (Pour over, French press, Espresso, Cold brew), styled with a bottom-border-only approach: 4px solid black on the bottom edge, zero width on all other sides, no radius. Open and closed toggle states both use the parchment background, keeping the module visually flat rather than inset. A final section closes the page in solid #ff3b00 orange-red, the only chromatic accent in an otherwise parchment-black-white palette. It carries an Archivo 48px H2 in black and a white-fill subscription button with a 4px black border in a flex row with space-between justification. All two-column rows in the layout collapse to single vertical stacks on mobile via explicit flexDirection column overrides set at the row decoration level.