gallery.bauhaus-geometric-frames · Geometric frames

A gallery pattern from Bauhaus, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 4. Give the section root data-pattern="gallery.bauhaus-geometric-frames". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Photographs cropped to geometry: a circle on 1–5, a wide 16:9 on 6–12, then a yellow half-circle on 6–8 beside a square photo on 9–12.
Slots
title, gallery1, gallery2, gallery3
Grid areas
title 1-6 · circle 1-5 · wide 6-12 · shape 6-8 · square 9-12 (12-column grid, 1-based inclusive spans)
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

  • Title (h2 at step 5, weight 700, lowercase) on 1–6. Photo 1 is cropped to a circle on 1–5 across two rows; photo 2 is 16:9 on 6–12; under it a yellow half-circle on 6–8 and a square photo on 9–12. Photos are grayscale or full colour, never filtered with colour overlays. At phone width: circle, wide, square; the half-circle hides.

Selected work