hero.midcentury-color-blocks · Colour blocks

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

Rule
Printed colour blocks that touch: an orange block 1–7 holding the headline, a duotone photo 8–12, a teal block 8–10 with the subhead and CTA under it, a mustard half-sun in 11–12.
Slots
eyebrow, headline, heroImage, subhead, cta
Grid areas
block 1-7 · photo 8-12 · note 8-10 · sun 11-12 (12-column grid, 1-based inclusive spans)
Notes
Zero gap between blocks: they butt up like a screen-printed record sleeve. Text on the orange block uses onAccent, on the teal block onAccent2.
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 6

Pattern notes

  • Screen-printed blocks with zero gap between them: an orange block on 1–7 (two rows tall) with the eyebrow and the headline (step 6, heaviest weight, `onAccent`) bottom-aligned inside it; a duotone 4:3 photo on 8–12; under the photo, a teal block on 8–10 with the subhead and a secondary button in `onAccent2`; a mustard half-sun at the bottom of 11–12.

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