hero.type-vertical · Vertical headline

A hero pattern from the hero library, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 1. Give the section root data-pattern="hero.type-vertical". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
The headline runs vertically up the left edge (columns 1–4) for the full hero height; the image fills 5–9; eyebrow sits top-right and subhead, CTA and meta sit bottom-right in 10–12.
Slots
headline, heroImage, eyebrow, subhead, cta, meta
Grid areas
headline 1-4 · image 5-9 · aside 10-12 (12-column grid, 1-based inclusive spans)
Notes
The headline is set vertically (vertical: up = writing-mode: vertical-rl turned 180deg, reading bottom to top), not a rotated block that breaks layout. It is 1–3 words, uppercase, sized so it runs most of the hero height. At phone width it turns horizontal above the image.
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)

Do

  • Run the headline vertically (writing-mode: vertical-rl, rotated to read bottom-to-top) in columns 1–4, running most of the hero height.
  • Fill columns 5–9 with the image at full hero height.
  • Put the eyebrow at the top of 10–12 and subhead, CTA, rule and meta at the bottom of 10–12.

Don't

  • Don't use more than three words in the vertical headline.
  • Don't rotate any other text.
  • Don't use the pattern for long, sentence-style headlines.

Phone width

  • Turn the headline horizontal at step 6 above the image; image at 4:5; then subhead, CTA and meta.
  • Never keep vertical text at 375 px.

We make complicated companies simple to choose

Brand & product studio

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

Booking projects from June 2026