hero.bauhaus-quadrants · Quadrants

A hero pattern from Bauhaus, 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.bauhaus-quadrants". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
The hero is four quadrants on halves (1–6 / 7–12): headline, a circle-cropped photo, a yellow field with the lead, and a solid square.
Slots
eyebrow, headline, heroImage, subhead, cta
Grid areas
q1 1-6 · q2 7-12 · q3 1-6 · q4 7-12 (12-column grid, 1-based inclusive spans)
Notes
The two rows are equal height. The photo is grayscale and cropped to a circle.
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #0050CC · accent2 #AF0029 · Jost / Jost · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 4

Pattern notes

  • Split the hero into two equal rows on halves. Top-left (1–6): eyebrow and headline at step 5 (max ~14 characters per line), lowercase, bottom-aligned. Top-right (7–12): a grayscale photograph cropped to a circle on the surface colour. Bottom-left (1–6): a yellow (surfaceAlt) field with the lead paragraph and a primary button. Bottom-right (7–12): one solid accent2 square. No gutter between quadrants. At phone width: headline, photo, yellow field (source order); the square hides.

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