hero.hardware-control-surface · Control surface

A hero pattern from Industrial Hardware, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 1. Give the section root data-pattern="hero.hardware-control-surface". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
The product sits in a device bezel in 1–7; 8–12 is the control side: display headline, lead, a 2×2 of raised readout keys and the keys row; a dark LCD strip runs under both.
Slots
eyebrow, meta, heroImage, headline, subhead, stats[4..4], cta, cta2, tagline, facts[3..3]
Grid areas
product 1-7 · controls 8-12 (12-column grid, 1-based inclusive spans)
Notes
The LCD strip is the accent2 (near-black) panel with accent (orange) mono text; it sits under the product in 1–7 and is hidden at phone width. Readout keys get the bevel edge.
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 12-column grid. Columns 1–7: the 4:3 product shot in a device bezel and, under it, the LCD panel (accent2, 16 × 20 px padding): the tagline in orange uppercase mono, then three key / value facts in mono on a 3-column row. Columns 8–12, spaced between top and bottom: a row with the mono eyebrow (link colour) and a muted mono note; the display headline (step 7, weight 600, tight, ≤ 14 ch) and a muted lead; a 2×2 of raised readout keys (surface fill, 1 px seam, bevel, mono label top, value at step 5 bottom); a primary key with arrow and a secondary key. Phone: product, then copy, keys and buttons; the LCD panel and the note are hidden so the hero stays within one and a bit screens.

Strategy and design for companies that make things

Hours

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

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

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.

launches shipped

140+

years independent

12

clients return

9 of 10

average lift in demo requests

31%

Start a projectRead case studies
Layout tree (as in design/layout.json)
{
  "pattern": "hero.hardware-control-surface",
  "kind": "hero",
  "grid": {
    "product": "1-7",
    "controls": "8-12"
  },
  "slots": [
    "eyebrow",
    "meta",
    "heroImage",
    "headline",
    "subhead",
    "stats[4..4]",
    "cta",
    "cta2",
    "tagline",
    "facts[3..3]"
  ],
  "notes": "The LCD strip is the accent2 (near-black) panel with accent (orange) mono text; it sits under the product in 1–7 and is hidden at phone width. Readout keys get the bevel edge.",
  "tree": {
    "el": "grid",
    "gap": 4,
    "rowGap": 5,
    "align": "stretch",
    "children": [
      {
        "el": "box",
        "span": "1-7",
        "gap": 4,
        "children": [
          {
            "el": "media",
            "slot": "heroImage",
            "aspect": "4/3",
            "treatment": "product",
            "frame": "device"
          },
          {
            "el": "box",
            "mobile": "hide",
            "bg": "accent2",
            "gap": 3,
            "pad": [
              4,
              5
            ],
            "children": [
              {
                "el": "text",
                "color": "accent",
                "slot": "tagline",
                "role": "small",
                "transform": "uppercase",
                "font": "mono"
              },
              {
                "el": "repeat",
                "slot": "facts",
                "min": 3,
                "max": 3,
                "layout": "grid",
                "cols": 3,
                "gap": 4,
                "of": {
                  "el": "box",
                  "gap": 1,
                  "children": [
                    {
                      "el": "text",
                      "color": "textMuted",
                      "slot": "label",
                      "role": "label",
                      "font": "mono"
                    },
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "small",
                      "font": "mono"
                    }
                  ]
                }
              }
            ]
          }
        ]
      },
      {
        "el": "box",
        "span": "8-12",
        "gap": 5,
        "justify": "between",
        "children": [
          {
            "el": "box",
            "gap": 3,
            "children": [
              {
                "el": "box",
                "dir": "row",
                "gap": 3,
                "align": "baseline",
                "justify": "between",
                "wrap": true,
                "children": [
                  {
                    "el": "text",
                    "color": "link",
                    "slot": "eyebrow",
                    "role": "label",
                    "font": "mono"
                  },
                  {
                    "el": "text",
                    "mobile": "hide",
                    "color": "textMuted",
                    "slot": "meta",
                    "role": "small",
                    "font": "mono"
                  }
                ]
              },
              {
                "el": "text",
                "slot": "headline",
                "role": "display",
                "step": 7,
                "weight": 600,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 14
              },
              {
                "el": "text",
                "color": "textMuted",
                "slot": "subhead",
                "role": "lead",
                "maxCh": 40
              }
            ]
          },
          {
            "el": "repeat",
            "slot": "stats",
            "min": 4,
            "max": 4,
            "layout": "grid",
            "cols": 2,
            "phoneCols": 2,
            "gap": 3,
            "of": {
              "el": "box",
              "bg": "surface",
              "gap": 4,
              "pad": [
                3,
                4
              ],
              "justify": "between",
              "border": "all",
              "children": [
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "label",
                  "role": "label",
                  "font": "mono"
                },
                {
                  "el": "text",
                  "slot": "number",
                  "role": "number",
                  "step": 5,
                  "weight": 600,
                  "tracking": "tight"
                }
              ]
            }
          },
          {
            "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"
              }
            ]
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.hardware-control-surface.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.hardware-control-surface — Industrial Hardware</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { padding: calc(var(--unit) * 10) 0; row-gap: calc(var(--unit) * 5); }
  .product { grid-column: 1 / 8; display: grid; gap: 12px; align-content: start; }
  .product .screen { aspect-ratio: 4 / 3; }
  .controls .row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .controls { grid-column: 8 / 13; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
  .controls h1 { font-size: var(--step-7); line-height: 0.95; letter-spacing: -0.04em; max-width: 12ch; }
  .controls .lead { font-size: var(--step-1); color: var(--muted); max-width: 40ch; margin-top: 12px; }
  .readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .readouts .key { padding: 12px 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
  .readouts .num { font-size: var(--step-5); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--heading); }
  .keys { display: flex; flex-wrap: wrap; gap: 8px; }
  .strip { display: grid; gap: 12px; padding: 16px 20px; }
  .strip .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .strip .facts span { display: block; }
  .strip .part { color: color-mix(in srgb, var(--on-lcd) 70%, transparent); }
  @media (max-width: 640px) {
    .controls h1 { font-size: var(--step-5); }
    .strip, .controls .row .mono { display: none; }
  }
</style>
</head>
<body>
<section class="wrap">
  <div class="hero grid">
    <div class="product">
      <div class="device"><div class="screen"><img src="https://images.unsplash.com/photo-1545454675-3531b543be5d?w=1200" alt="Portable speaker in warm grey with one orange key"></div></div>
      <div class="strip lcd">
        <span class="value part" style="color: var(--accent)">Disc · Radio · Loop · Bluetooth</span>
        <div class="facts">
          <div><span class="part">Ships</span><span class="small mono">EU · US · JP</span></div>
          <div><span class="part">Warranty</span><span class="small mono">5 years</span></div>
          <div><span class="part">Support</span><span class="small mono">Mon–Fri 9–17</span></div>
        </div>
      </div>
    </div>
    <div class="controls">
      <div>
        <div class="row"><span class="part link">Model OB–4 · Rev C</span><span class="small mono muted">Ships in 3 days</span></div>
        <h1>A radio with one knob.</h1>
        <p class="lead">Four speakers, a 40-hour battery and a tape loop that records the last ten minutes of whatever is playing.</p>
      </div>
      <div class="readouts">
        <div class="key"><span class="part muted">Battery</span><span class="num">40 h</span></div>
        <div class="key"><span class="part muted">Output</span><span class="num">38 W</span></div>
        <div class="key"><span class="part muted">Weight</span><span class="num">2.1 kg</span></div>
        <div class="key"><span class="part muted">Loop</span><span class="num">10 min</span></div>
      </div>
      <div class="keys">
        <a class="btn key signal" href="#order">Order OB–4 <span aria-hidden="true">→</span></a>
        <a class="btn key" href="#specs">Full specs</a>
      </div>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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