content.midcentury-story-offset · Story with boomerang

A content pattern from Mid-Century Modern, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 3; about page, section 1. Give the section root data-pattern="content.midcentury-story-offset". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A rounded duotone photo on 1–6, an orange boomerang triangle in column 7 pointing at the text, the story on 8–12: label, h2, paragraph, underlined link.
Slots
image, sectionLabel, title, body, cta
Grid areas
photo 1-6 · boomerang 7-7 · story 8-12 (12-column grid, 1-based inclusive spans)
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)

Pattern notes

  • A rounded duotone photo (4:3) on 1–6, an orange boomerang triangle in column 7 pointing right at the text, and the story on 8–12: label, h2 (step 5), a lead paragraph (max 40 ch), underlined link.

About

How we think

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Start a project