gallery.constructivist-montage · Montage

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

Rule
A grayscale 4:5 photo on 1–5, a duotone 3:2 photo overlapping it on 4–10 one row lower; the label and a capitals title at step 5 tilted −6° on 7–12, a black bar at −20° and a red circle beside the second photo.
Slots
sectionLabel, title, gallery1, gallery2, caption
Grid areas
photo1 1-5 · title 7-12 · photo2 4-10 (12-column grid, 1-based inclusive spans)
Notes
Photos overlap on purpose (columns 4–5); the second photo sits on top. No frames, no rounded corners.
Tokens
bg #EFE6D2 · text #16130F · heading #16130F · accent #C8102E · accent2 #FF7777 · Anton / Barlow Semi Condensed · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • Overlapping montage: a grayscale 4:5 photo on 1–5 (rows 1–2); on 7–12 in row 1 a spaced-capital label and the section title in capitals at step 5, tilted −6° (max 14 ch); a black bar slashing −20° across 6–12 and a red circle on 11–12 in row 2; a duotone 3:2 photo on 4–10 (rows 2–3) laid over the first photo's lower-right corner; the caption in small capitals climbing column 12. No frames.

Gallery

Selected work

Corvid Robotics — identity