gallery.blueprint-plate-set · Plate set

A gallery pattern from Blueprint, 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.blueprint-plate-set". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Work as a set of drawing plates: a large 4:3 plate on 1–8 and two 4:3 plates stacked on 9–12, each in a ruled frame with a mono plate number and title strip under it.
Slots
label, title, image1, image2, image3, caption1, caption2, caption3, index
Notes
Plates are drawings or screenshots set as drawings, never a photo in a soft frame.
Tokens
bg #134A86 · text #E6F1FC · heading #FFFFFF · accent #FFFFFF · accent2 #9FDCFF · IBM Plex Sans Condensed / IBM Plex Sans · radius 0px · space unit 4px (full list in design/tokens.json)

Pattern notes

  • The annotation and a step-4 caps title, then plates: a large 4:3 drawing in a 1 px frame on 1–8 with a ruled strip under it (mono plate title in `link` left, muted plate number right), and two 4:3 plates stacked on 9–12, each framed with its mono caption in a ruled strip under the drawing.

Gallery

Selected work

Corvid Robotics — identity

06

Fieldstack — website

Tidewater Labs — naming

Layout tree (as in design/layout.json)
{
  "pattern": "gallery.blueprint-plate-set",
  "kind": "gallery",
  "slots": [
    "label",
    "title",
    "image1",
    "image2",
    "image3",
    "caption1",
    "caption2",
    "caption3",
    "index"
  ],
  "notes": "Plates are drawings or screenshots set as drawings, never a photo in a soft frame.",
  "tree": {
    "el": "box",
    "gap": 6,
    "children": [
      {
        "el": "box",
        "gap": 3,
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "label",
            "role": "label",
            "font": "mono"
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "step": 4,
            "transform": "uppercase",
            "weight": 600,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 28
          }
        ]
      },
      {
        "el": "grid",
        "gap": 6,
        "align": "stretch",
        "children": [
          {
            "el": "box",
            "span": "1-8",
            "border": "all",
            "children": [
              {
                "el": "media",
                "slot": "image1",
                "aspect": "4/3",
                "treatment": "technical-drawing",
                "frame": "none"
              },
              {
                "el": "box",
                "mobile": "keep",
                "dir": "row",
                "pad": [
                  2,
                  3
                ],
                "justify": "between",
                "border": "top",
                "children": [
                  {
                    "el": "text",
                    "color": "link",
                    "slot": "caption1",
                    "role": "small",
                    "transform": "uppercase",
                    "font": "mono"
                  },
                  {
                    "el": "text",
                    "color": "textMuted",
                    "slot": "index",
                    "role": "small",
                    "transform": "uppercase",
                    "font": "mono"
                  }
                ]
              }
            ]
          },
          {
            "el": "box",
            "span": "9-12",
            "gap": 6,
            "children": [
              {
                "el": "box",
                "gap": 0,
                "border": "all",
                "children": [
                  {
                    "el": "media",
                    "slot": "image2",
                    "aspect": "4/3",
                    "treatment": "technical-drawing",
                    "frame": "none"
                  },
                  {
                    "el": "box",
                    "pad": [
                      2,
                      3
                    ],
                    "border": "top",
                    "children": [
                      {
                        "el": "text",
                        "color": "link",
                        "slot": "caption2",
                        "role": "small",
                        "transform": "uppercase",
                        "font": "mono"
                      }
                    ]
                  }
                ]
              },
              {
                "el": "box",
                "gap": 0,
                "border": "all",
                "children": [
                  {
                    "el": "media",
                    "slot": "image3",
                    "aspect": "4/3",
                    "treatment": "technical-drawing",
                    "frame": "none"
                  },
                  {
                    "el": "box",
                    "pad": [
                      2,
                      3
                    ],
                    "border": "top",
                    "children": [
                      {
                        "el": "text",
                        "color": "link",
                        "slot": "caption3",
                        "role": "small",
                        "transform": "uppercase",
                        "font": "mono"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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