hero.blueprint-elevation-stack · Elevation stack

A hero 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="hero.blueprint-elevation-stack". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A tall 3:4 elevation drawing in a ruled frame on 1–5; on 6–12 the annotation, a condensed-caps headline, the lead, buttons and a ruled specification table of four key/value rows with a three-cell title block under it.
Slots
eyebrow, headline, subhead, cta, cta2, heroImage, caption, facts[4..4], stats[3..3]
Grid areas
drawing 1-5 · message 6-12 (12-column grid, 1-based inclusive spans)
Notes
The elevation is the product standing upright with height and width dimensions; the caption under it is the view name ("ELEVATION A — SCALE 1:10").
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)
Section
vertical padding step 6

Pattern notes

  • A tall 3:4 elevation drawing in a 1 px frame on 1–5 with the view name under it in muted mono capitals (`ELEVATION A — SCALE 1:10`). On 6–12, vertically centred: the annotation, the headline at step 7 in condensed caps (max 16 ch), the lead (max 50 ch), the buttons, a four-row spec table (muted mono key on 4 of 12 columns, mono value on the rest, rules between rows) and a three-cell title block on `surface`.

Corvid Robotics — identity

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Good to know

Booking projects from June 2026

launches shipped

140+

years independent

12

clients return

9 of 10

Layout tree (as in design/layout.json)
{
  "pattern": "hero.blueprint-elevation-stack",
  "kind": "hero",
  "grid": {
    "drawing": "1-5",
    "message": "6-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "heroImage",
    "caption",
    "facts[4..4]",
    "stats[3..3]"
  ],
  "notes": "The elevation is the product standing upright with height and width dimensions; the caption under it is the view name (\"ELEVATION A — SCALE 1:10\").",
  "tree": {
    "el": "grid",
    "gap": 8,
    "align": "stretch",
    "children": [
      {
        "el": "box",
        "span": "1-5",
        "gap": 2,
        "children": [
          {
            "el": "media",
            "slot": "heroImage",
            "aspect": "3/4",
            "treatment": "technical-drawing",
            "frame": "border"
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "caption",
            "role": "label",
            "font": "mono"
          }
        ]
      },
      {
        "el": "box",
        "span": "6-12",
        "gap": 5,
        "justify": "center",
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "eyebrow",
            "role": "label",
            "font": "mono"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 7,
            "transform": "uppercase",
            "weight": 600,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 16
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "subhead",
            "role": "lead",
            "maxCh": 50
          },
          {
            "el": "box",
            "dir": "row",
            "gap": 3,
            "wrap": true,
            "children": [
              {
                "el": "button",
                "slot": "cta",
                "variant": "primary",
                "arrow": true
              },
              {
                "el": "button",
                "slot": "cta2",
                "variant": "ghost"
              }
            ]
          },
          {
            "el": "repeat",
            "slot": "facts",
            "min": 4,
            "max": 4,
            "layout": "list",
            "gap": 2,
            "divider": true,
            "of": {
              "el": "grid",
              "mobile": "keep",
              "cols": 12,
              "gap": 3,
              "children": [
                {
                  "el": "text",
                  "span": "1-4",
                  "color": "textMuted",
                  "slot": "label",
                  "role": "small",
                  "transform": "uppercase",
                  "font": "mono"
                },
                {
                  "el": "text",
                  "span": "5-12",
                  "slot": "title",
                  "role": "small",
                  "weight": 700,
                  "font": "mono"
                }
              ]
            }
          },
          {
            "el": "box",
            "bg": "surface",
            "border": "all",
            "children": [
              {
                "el": "repeat",
                "slot": "stats",
                "min": 3,
                "max": 3,
                "layout": "grid",
                "cols": 3,
                "phoneCols": 3,
                "gap": 0,
                "divider": true,
                "of": {
                  "el": "box",
                  "gap": 1,
                  "pad": [
                    2,
                    3
                  ],
                  "children": [
                    {
                      "el": "text",
                      "color": "textMuted",
                      "slot": "title",
                      "role": "small",
                      "transform": "uppercase",
                      "font": "mono"
                    },
                    {
                      "el": "text",
                      "slot": "number",
                      "role": "h4",
                      "step": 1,
                      "weight": 700,
                      "font": "mono"
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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