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.

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