gallery.bento-screens · Screens

A gallery pattern from Bento Tech, 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.bento-screens". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Product screens on a bento: a tall screen filling 1–8 over two rows, two 4:3 screens stacked in 9–12, then a caption tile in 1–4 beside a 21:9 screen in 5–12.
Slots
gallery1, gallery2, gallery3, title, caption, gallery4
Grid areas
main 1-8 · side 9-12 · caption 1-4 · wide 5-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #5E65E8 · accent2 #9256C9 · Geist / Geist · radius 20px · space unit 4px (full list in design/tokens.json)

Pattern notes

  • A tall screenshot filling 1–8 over rows 1–2; two 4:3 screenshots stacked in 9–12; row 3: a caption tile in 1–4 (h3 and a line, bottom-aligned) beside a 21:9 screenshot in 5–12. All with the style radius, 12 px gaps.

Selected work

Corvid Robotics — identity