hero.bauhaus-bar-poster · Bar poster

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

Rule

A vertical eyebrow runs up column 1; two thick colour bars at different offsets bracket a full-width lowercase headline; a yellow triangle closes 10–12.

Slots

eyebrow, headline, subhead, cta

Grid areas

label 1-1 · bar1 2-9 · headline 2-12 · bar2 5-12 · copy 2-6 · triangle 10-12 (12-column grid, 1-based inclusive spans)

Notes

After Herbert Bayer's posters: bars and type as equal parts of one composition. The eyebrow is rotated -90°.

Tokens

bg #FDF9F4 · text #241E16 · heading #150E06 · accent #0050CC · accent2 #AF0029 · Jost / Jost · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

Column 1 carries the eyebrow rotated -90° reading bottom to top across the whole hero. On the remaining columns, top to bottom: an accent2 bar on 2–9, the headline on 2–12 at step 6 (weight 700, lowercase), an accent bar on 5–12 (offset right of the first), then the lead and an outlined CTA on 2–6 beside a yellow triangle on 10–12. Bars are solid, 24–40 px tall, square ends. At phone width the vertical label hides and the bars run full width.

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