hero.isometric-drawing-first · Drawing first

A hero pattern from Isometric Line, 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.isometric-drawing-first". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A 1:1 isometric drawing fills 1–6; 7–12 holds the eyebrow, a display headline (≤14 ch), the lead, an inline email form and a three-figure row on hairline dividers.
Slots
heroImage, eyebrow, headline, subhead, newsletter, stats[3..3]
Grid areas
drawing 1-6 · message 7-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #FF5A2C · accent2 #00ABC9 · Space Grotesk / Space Grotesk · radius 2px · space unit 4px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • The drawing leads: a 1:1 isometric drawing in 1–6, vertically centred with the message in 7–12 — mono eyebrow, display headline at step 7 (≤14 ch), muted lead, an inline email form and a row of three figures (number at step 4, muted caption) on hairline dividers. At least 80 vh.

Brand & product studio

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.

you@example.com
Subscribe

140+

launches shipped

12

years independent

9 of 10

clients return