gallery.collage-overlap-stack · Overlap stack

A gallery pattern from Maximalist Collage, 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.collage-overlap-stack". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A tilted h2 on 1–7 over four overlapping photos in four frames on explicit rows, with a mono caption on 9–12 and an accent2 triangle tucked bottom-left.
Slots
gallery1, gallery2, gallery3, gallery4, title, caption
Grid areas
a 1-5 · b 4-8 · c 8-12 · d 9-12 · title 1-7 · caption 9-12 · triangle 1-2 (12-column grid, 1-based inclusive spans)
Notes
Overlaps are intentional; later items sit on top. On phones the photos stack at full width and the triangle hides.
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #FF5A1F · accent2 #00B671 · Abril Fatface / Syne · radius 4px · space unit 6px (full list in design/tokens.json)

Pattern notes

  • A tilted (−4°) h2 at step 4 in 1–7 on row 1, a mono caption (body size) bottom-aligned in 9–12 on the same row. Then four photos, four frames, overlapping on explicit rows: offset-shadow 3:4 in 1–5 (rows 2–4), circle 1:1 in 4–8 (rows 3–6), bordered 16:9 in 8–12 (rows 2–3), arch 4:5 duotone in 9–12 (rows 4–6), and a large accent2 triangle in 1–2 at the bottom (rows 5–6, under the first photo). The title and caption come first in source order, so at phone width the heading leads the stacked photos.

Selected work

Corvid Robotics — identity