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
Four photos with four different frames overlap on explicit rows — offset-shadow 3:4 in 1–5, circle in 4–8, bordered 16:9 in 8–12, arch 4:5 in 9–12 — with a tilted title and a triangle in the gaps.
Slots
gallery1, gallery2, gallery3, gallery4, title, caption
Grid areas
a 1-5 · b 4-8 · c 8-12 · d 9-12 · title 1-4 · caption 5-8 · triangle 11-12 (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

  • Four photos, four frames, overlapping on explicit rows: offset-shadow 3:4 in 1–5 (rows 1–3), circle 1:1 in 4–8 (rows 2–5), bordered 16:9 in 8–12 (rows 1–2), arch 4:5 duotone in 9–12 (rows 3–5). The h2 tilted −4° sits in 1–4 on row 6 with a mono caption in 5–8 and an accent2 triangle in 11–12. The title and caption come first in source order, so at phone width the heading leads the stacked photos.

Selected work

Corvid Robotics — identity