hero.memphis-sticker-pile · Sticker pile

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-sticker-pile". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

Overlapping outlined panels like a pile of stickers: an accent headline panel on 1–6, a 4:5 illustration with an offset shadow on 6–11 behind it, a tilted label and a lead panel on 3–8.

Slots

eyebrow, heroImage, headline, subhead, cta

Grid areas

image 6-11 · headline 1-6 · label 2-5 · lead 3-8 · star 11-12 (12-column grid, 1-based inclusive spans)

Notes

Panels overlap by one column on purpose; z-order follows source order (image behind, panels in front).

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)

Pattern notes

Row 1: a tilted label sticker (surfaceAlt, rotated 6°) on 2–5. Rows 1–3: a 4:5 illustration with a 3 px outline and a hard black offset shadow on 6–11. Row 2: an accent panel with a 3 px outline on 1–6 holding the headline at step 6, heaviest weight, in onAccent — it overlaps the image by one column. Row 3: a page-colour panel with an outline on 3–8 holding the lead and a primary button, and a star on 11–12. At phone width (source order): label, image, headline panel, lead panel; the star hides.

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 project