gallery.deco-arcade · Arcade

A gallery pattern from Art Deco, 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.deco-arcade". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Three arched images side by side: a wide 1:1 arch in the centre (4–9) flanked by two 3:4 arches (1–3, 10–12), all bottom-aligned; caption centred under the middle arch.
Slots
sectionLabel, title, gallery1, gallery2, gallery3, caption
Grid areas
header 3-10 · left 1-3 · centre 4-9 · right 10-12 · caption 4-9 (12-column grid, 1-based inclusive spans)
Tokens
bg #0E0D0B · text #E8E0CB · heading #E6C676 · accent #C9A24B · accent2 #88660B · Limelight / Josefin Sans · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • A centred header on 3–10, then three arches side by side, bottom-aligned: a 3:4 duotone arch on 1–3, a wide 1:1 arch in the centre on 4–9 (the one full-colour photo), a 3:4 duotone arch on 10–12. The caption sits centred under the middle arch. At phone width only the centre arch and its caption remain; the side arches hide.

Gallery

Selected work

Corvid Robotics — identity

Layout tree (as in design/layout.json)
{
  "pattern": "gallery.deco-arcade",
  "kind": "gallery",
  "grid": {
    "header": "3-10",
    "left": "1-3",
    "centre": "4-9",
    "right": "10-12",
    "caption": "4-9"
  },
  "slots": [
    "sectionLabel",
    "title",
    "gallery1",
    "gallery2",
    "gallery3",
    "caption"
  ],
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 4,
    "align": "end",
    "children": [
      {
        "el": "box",
        "span": "2-11",
        "rowSpan": "1-1",
        "gap": 2,
        "align": "center",
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "sectionLabel",
            "role": "eyebrow",
            "align": "center",
            "transform": "uppercase",
            "tracking": "wide"
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "step": 5,
            "align": "center",
            "transform": "uppercase",
            "weight": 400,
            "tracking": "wide",
            "maxCh": 26
          }
        ]
      },
      {
        "el": "media",
        "span": "1-3",
        "rowSpan": "2-2",
        "mobile": "hide",
        "alignSelf": "end",
        "slot": "gallery1",
        "aspect": "3/4",
        "treatment": "duotone",
        "frame": "arch"
      },
      {
        "el": "media",
        "span": "4-9",
        "rowSpan": "2-2",
        "alignSelf": "end",
        "slot": "gallery2",
        "aspect": "1/1",
        "treatment": "photo",
        "frame": "arch"
      },
      {
        "el": "media",
        "span": "10-12",
        "rowSpan": "2-2",
        "mobile": "hide",
        "alignSelf": "end",
        "slot": "gallery3",
        "aspect": "3/4",
        "treatment": "duotone",
        "frame": "arch"
      },
      {
        "el": "text",
        "span": "4-9",
        "rowSpan": "3-3",
        "color": "textMuted",
        "slot": "caption",
        "role": "small",
        "align": "center"
      }
    ]
  }
}

Other patterns in this design

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