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
A tall screenshot tile on 1–8 beside two 4:3 tiles on 9–12; below, a caption tile on 1–4 (mono label at the top, title at step 4 and a line at the bottom) and a 21:9 screenshot on 5–12.
Slots
gallery1, gallery2, gallery3, meta, 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 (a mono label in the link colour at the top; the title at step 4 and a muted line at the bottom) beside a 21:9 screenshot in 5–12. All with the style radius, 12 px gaps.

Booking projects from June 2026

Selected work

Corvid Robotics — identity

Layout tree (as in design/layout.json)
{
  "pattern": "gallery.bento-screens",
  "kind": "gallery",
  "grid": {
    "main": "1-8",
    "side": "9-12",
    "caption": "1-4",
    "wide": "5-12"
  },
  "slots": [
    "gallery1",
    "gallery2",
    "gallery3",
    "meta",
    "title",
    "caption",
    "gallery4"
  ],
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 3,
    "align": "stretch",
    "children": [
      {
        "el": "media",
        "span": "1-8",
        "rowSpan": "1-2",
        "slot": "gallery1",
        "treatment": "product",
        "fill": true,
        "frame": "rounded"
      },
      {
        "el": "media",
        "span": "9-12",
        "rowSpan": "1-1",
        "slot": "gallery2",
        "aspect": "4/3",
        "treatment": "product",
        "frame": "rounded"
      },
      {
        "el": "media",
        "span": "9-12",
        "rowSpan": "2-2",
        "slot": "gallery3",
        "aspect": "4/3",
        "treatment": "product",
        "frame": "rounded"
      },
      {
        "el": "box",
        "span": "1-4",
        "rowSpan": "3-3",
        "bg": "surface",
        "gap": 6,
        "pad": [
          6,
          6
        ],
        "justify": "between",
        "border": "all",
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "meta",
            "role": "label",
            "font": "mono"
          },
          {
            "el": "box",
            "gap": 2,
            "children": [
              {
                "el": "text",
                "slot": "title",
                "role": "h3",
                "step": 4,
                "weight": 600,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 16
              },
              {
                "el": "text",
                "color": "textMuted",
                "slot": "caption",
                "role": "body",
                "maxCh": 34
              }
            ]
          }
        ]
      },
      {
        "el": "media",
        "span": "5-12",
        "rowSpan": "3-3",
        "slot": "gallery4",
        "aspect": "21/9",
        "treatment": "product",
        "frame": "rounded"
      }
    ]
  }
}

Other patterns in this design

Whole design · Spec bundle (JSON) · On the style page