hero.organic-field-notes · Field notes

A hero pattern from Organic Earth, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="hero.organic-field-notes". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A huge soft-serif headline runs across the grid; below it three loose columns: the lead on 1–4, a round illustration on 5–8, and a short list of field notes on 9–12.
Slots
headline, subhead, image, facts[3..4], cta
Grid areas
headline 1-12 · lead 1-4 · image 5-8 · notes 9-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #F3EBDD · text #2E2A22 · heading #2A1F14 · accent #BC572B · accent2 #A56B00 · Fraunces / Karla · radius 28px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 8

Pattern notes

  • A headline across the grid at step 8 weight 400 (max ~18 ch) — the focal point. Below it, three loose columns aligned differently: the lead and primary button on 1–4 (top), a circle illustration on 5–8 (centred), and 3–4 field notes on 9–12 (bottom) — each a serif h4 (weight 400) over a muted line, separated by hairlines.

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512