hero.hardware-spec-plate · Spec plate

A hero pattern from Industrial Hardware, 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.hardware-spec-plate". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A nameplate row (orange model chip + mono note), a display headline across 1–8 with the lead and keys in 9–12, then a 16:9 product shot in a device bezel beside a ruled spec table.
Slots
eyebrow, meta, headline, subhead, cta, cta2, heroImage, label, items[6..6]
Grid areas
headline 1-8 · intro 9-12 · product 1-8 · specs 9-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #E5E3DE · text #262522 · heading #111110 · accent #FF5B14 · accent2 #1C1C1A · Archivo / Archivo · radius 6px · space unit 4px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • A nameplate row: an orange chip (accent fill, 6 px corners, onAccent mono model name) beside a muted mono note. The display headline across 1–8 (step 8, weight 700, ≤ 16 ch); the body line and keys in 9–12, bottom-aligned with it. Below: a 16:9 product shot in a device bezel in 1–8 and, in 9–12, a raised surface spec table: a mono part label over five or six ruled rows (name 600 left, value in mono right).

Brand & product studio

Booking projects from June 2026

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

Introducing

Discovery sprint

2 weeks

Positioning workshop

1 day

Identity design

8 weeks

Website

10 weeks

Launch support

4 weeks

Retainer

Ongoing

Layout tree (as in design/layout.json)
{
  "pattern": "hero.hardware-spec-plate",
  "kind": "hero",
  "grid": {
    "headline": "1-8",
    "intro": "9-12",
    "product": "1-8",
    "specs": "9-12"
  },
  "slots": [
    "eyebrow",
    "meta",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "heroImage",
    "label",
    "items[6..6]"
  ],
  "tree": {
    "el": "box",
    "gap": 6,
    "children": [
      {
        "el": "grid",
        "gap": 4,
        "align": "end",
        "children": [
          {
            "el": "box",
            "span": "1-8",
            "gap": 4,
            "children": [
              {
                "el": "box",
                "dir": "row",
                "gap": 3,
                "align": "center",
                "wrap": true,
                "children": [
                  {
                    "el": "box",
                    "bg": "accent",
                    "dir": "row",
                    "pad": [
                      1,
                      2
                    ],
                    "radius": "sm",
                    "children": [
                      {
                        "el": "text",
                        "color": "onAccent",
                        "slot": "eyebrow",
                        "role": "label",
                        "font": "mono"
                      }
                    ]
                  },
                  {
                    "el": "text",
                    "color": "textMuted",
                    "slot": "meta",
                    "role": "small",
                    "font": "mono"
                  }
                ]
              },
              {
                "el": "text",
                "slot": "headline",
                "role": "display",
                "step": 8,
                "weight": 700,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 16
              }
            ]
          },
          {
            "el": "box",
            "span": "9-12",
            "gap": 4,
            "children": [
              {
                "el": "text",
                "slot": "subhead",
                "role": "body",
                "maxCh": 42
              },
              {
                "el": "box",
                "dir": "row",
                "gap": 2,
                "wrap": true,
                "children": [
                  {
                    "el": "button",
                    "slot": "cta",
                    "variant": "primary",
                    "size": "md",
                    "arrow": true
                  },
                  {
                    "el": "button",
                    "slot": "cta2",
                    "variant": "secondary",
                    "size": "md"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "el": "grid",
        "gap": 4,
        "align": "stretch",
        "children": [
          {
            "el": "media",
            "span": "1-8",
            "slot": "heroImage",
            "aspect": "16/9",
            "treatment": "product",
            "frame": "device"
          },
          {
            "el": "box",
            "span": "9-12",
            "bg": "surface",
            "gap": 3,
            "pad": [
              4,
              4
            ],
            "border": "all",
            "children": [
              {
                "el": "text",
                "color": "link",
                "slot": "label",
                "role": "label",
                "font": "mono"
              },
              {
                "el": "repeat",
                "slot": "items",
                "min": 6,
                "max": 6,
                "layout": "list",
                "divider": true,
                "of": {
                  "el": "box",
                  "mobile": "keep",
                  "dir": "row",
                  "gap": 3,
                  "pad": [
                    3,
                    0
                  ],
                  "align": "baseline",
                  "justify": "between",
                  "children": [
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "small",
                      "weight": 600
                    },
                    {
                      "el": "text",
                      "color": "textMuted",
                      "slot": "meta",
                      "role": "small",
                      "align": "right",
                      "font": "mono"
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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