hero.midcentury-mobile-sculpture · Mobile sculpture

A hero pattern from Mid-Century Modern, 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.midcentury-mobile-sculpture". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A row of four flat shapes hangs like a Calder mobile across 2–11 over a 2px wire; the bold headline sits under it on 1–9, the lead on 1–6 and the CTA bottom-right on 8–10.
Slots
headline, subhead, cta
Grid areas
mobile 2-11 · wire 2-11 · headline 1-9 · subhead 1-6 · cta 8-10 (12-column grid, 1-based inclusive spans)
Notes
Each shape hangs at a different height (end / start / centre / end). With expressive motion allowed, the shapes may sway slowly on hover; respect prefers-reduced-motion.
Tokens
bg #F3E9D6 · text #2B231B · heading #2B231B · accent #C9552A · accent2 #0099BE · League Spartan / Jost · radius 20px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 8

Pattern notes

  • A Calder mobile: four flat shapes (orange circle, teal half-circle upside-down, ink blob, small orange triangle tilted −20°) spread across 2–11, each hanging at a different height, above a 2 px "wire" rule on 2–11. Below: the headline (step 6, heaviest weight) on 1–9, the lead on 1–6 and a large primary button with an arrow bottom-aligned on 8–10. The shapes may sway gently on hover when motion is allowed.

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