hero.memphis-pattern-split · Pattern split

A hero pattern from Memphis, 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.memphis-pattern-split". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A full-height Memphis pattern panel (dots, stripes, squiggles) on 1–6 with a black outline; an outlined surfaceAlt panel on 7–12 with the headline, lead, two buttons and a star.
Slots
heroImage, eyebrow, headline, subhead, cta, cta2
Grid areas
pattern 1-6 · panel 7-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #FF5FA2 · accent2 #9AAE00 · Bricolage Grotesque / DM Sans · radius 12px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 4

Pattern notes

  • Two panels with no gap, both with 3 px black outlines. Left (1–6): a pattern fill made from the palette — black dots on accent, accent2 stripes and black squiggles — filling the full hero height. Right (7–12): surfaceAlt fill with the eyebrow, the headline at step 6 heaviest weight, the lead, a primary and a secondary button, and a star (accent) at the bottom right. At phone width the pattern becomes a 160 px band above the panel.

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.

Start a projectRead case studies