gallery.frosted-glass-captions · Glass captions

A gallery pattern from Frosted Glass, 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="gallery.frosted-glass-captions". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A wide rounded image on 1–8 over two rows, a tall image on 9–12, a square below it, and a frosted caption panel overlapping the wide image's lower edge on 6–10.
Slots
title, gallery1, gallery2, gallery3, caption
Grid areas
title 1-7 · wide 1-8 · tall 9-12 · square 9-12 · caption 6-10 (12-column grid, 1-based inclusive spans)
Notes
The caption panel is frosted and sits on top of both the wide image and the square; it must overlap image edges.
Tokens
bg #0A0F1F · text #E4EAF6 · heading #FFFFFF · accent #6E8BFF · accent2 #A67AE8 · Sora / Manrope · radius 22px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • Title (h2) on 1–7 in row 1. A wide 16:9 rounded photo spans 1–8 on rows 2–3; a 4:5 photo spans 9–12 on rows 1–2; a square mesh-gradient tile sits on 9–12 in row 3. A frosted caption panel on 6–10 (row 3, bottom-aligned) overlaps both the wide photo and the square.

Selected work

Corvid Robotics — identity