hero.bauhaus-color-fields · Three colour fields

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

Rule
Three full-height colour fields side by side — 1–4 accent2, 5–8 yellow, 9–12 accent — headline in the middle field, bottom-aligned.
Slots
eyebrow, headline, subhead, cta
Grid areas
field1 1-4 · field2 5-8 · field3 9-12 (12-column grid, 1-based inclusive spans)
Notes
Bleeds edge to edge. Each field carries one job: a shape and the eyebrow, the headline, then the lead and CTA. Text on fills uses the matching on-colour.
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
full-bleed · vertical padding step 0

Pattern notes

  • Bleed the hero edge to edge and split it into three equal colour fields with no gutter. Field 1 (1–4, accent2) holds one large yellow circle at the top and the lowercase eyebrow at the bottom in onAccent2. Field 2 (5–8, yellow / surfaceAlt) holds the headline at step 5, lowercase, weight 700, bottom-aligned, max ~9 characters per line. Field 3 (9–12, accent) holds the lead paragraph and an underlined CTA in onAccent at the bottom. Every field is the full hero height (min 88vh). At phone width the fields stack as three bands and field 1 shrinks to a short band.

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