Fieldnote Coffee Roasters — Brutalist Coffee Subscribe Page for Divi 5

Fieldnote Coffee Roasters Subscribe is a full-page brutalist subscription layout built entirely with native Divi 5 modules. The page opens with a white header section carrying a breadcrumb trail in Space Mono (13px, 2px letter-spacing, uppercase) alongside a 52px Archivo Black h1, then drops immediately into the pricing tier section on a warm parchment ground (#e8e4da). Three plan cards sit in a strict equal-width three-column row, each boxed with a 4px solid black border and zero border-radius — a deliberate brutalist refusal of softness. The center card breaks the monochrome palette with a full #ff3b00 column background and a white "Most popular" pill badge, creating a visual anchor that drives the eye before a single word is read.

Spacing is controlled and intentional throughout. Desktop padding steps down from 72px top on the header to 64px on all interior sections, then compresses to 40px and 32px respectively on phone — the JSON encodes all three breakpoints explicitly, so the layout never relies on Divi defaults. The plan cards use flexGrow/flexShrink on the feature list group to push the subscribe button flush to the bottom of each card regardless of copy length, keeping the three CTAs optically aligned across the row.

The comparison table in section three is a CSS grid group set to four columns with 1px gaps rendered against a black background — the gap itself becomes the border, a classic print-design trick. Alternating #e8e4da and #ffffff cells produce a zebra rhythm without a single border declaration on the cells themselves. Below the table, a full-width "How it works" section uses oversized Archivo numerals (80px, -2px tracking) as step counters, separated by 2px solid black dividers — the kind of editorial typographic scaffolding that communicates craft without imagery.

The FAQ section uses Divi 5 Toggle modules with a thick 4px top rule and 4px bottom rules on each item, keeping the accordion's open/closed states visually grounded in the same brutalist border language used throughout. The page closes on a burnt-orange #ff3b00 CTA band with a horizontal flex group: headline on the left, subscribe button and reassurance copy on the right — collapsing to a stacked column on phone via an explicit flexDirection: column phone breakpoint in the row's layout decoration.