hero.japanese-kakejiku-scroll · Hanging scroll

A hero pattern from Japanese Minimal, 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.japanese-kakejiku-scroll". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A tall, narrow 9:16 image hangs in 2–4 like a kakejiku; the vertical headline stands alone in 6–7; the subhead and a text link sit bottom-right in 9–12.
Slots
heroImage, headline, subhead, cta
Grid areas
scroll 2-4 · headline 6-7 · text 9-12 (12-column grid, 1-based inclusive spans)
Notes
The headline uses writing-mode: vertical-rl. At phone width the image runs the full width, then the headline turns horizontal.
Tokens
bg #F4F1EA · text #2B2925 · heading #1F1D1A · accent #A63A28 · accent2 #D78575 · Shippori Mincho / Zen Kaku Gothic New · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 8

Pattern notes

  • A tall 9:16 grayscale image hangs in columns 2–4 like a hanging scroll. The headline stands alone, vertical, in columns 6–7 (two columns, so it keeps its full size). The subhead and a text link sit at the bottom of 9–12. Columns 5 and 8 stay empty.

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