features.hardware-keypad · Keypad

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

Rule
Intro in 1–4 (part label, h2, line, secondary key); six features as raised keys in a 3×2 keypad across 5–12, mono index top, title and line bottom.
Slots
label, title, body, cta2, features[6..6]
Grid areas
intro 1-4 · keys 5-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)

Pattern notes

  • Columns 1–4, spaced between: part label, h2 at step 5, a muted line; a secondary key with arrow at the bottom. Columns 5–12: six features as raised keys in a 3×2 keypad (gap 12 px): a mono index (muted) and a mono tag (link colour) at the top, the title at step 1 (600) and one muted line at the bottom. Two keys per row on phones.

What you get

What we do

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Read case studies

01

Included

Positioning

Find the one sentence your best customers already believe.

02

New

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

03

Built in

Websites

Fast, editable sites built on the CMS your team already knows.

04

Standard

Sales enablement

Decks, one-pagers and demos your reps actually use.

05

Optional

Product naming

Names that survive trademark search and a noisy trade show.

06

Always on

Brand governance

Guidelines as a living site, not a forgotten PDF.

Layout tree (as in design/layout.json)
{
  "pattern": "features.hardware-keypad",
  "kind": "features",
  "grid": {
    "intro": "1-4",
    "keys": "5-12"
  },
  "slots": [
    "label",
    "title",
    "body",
    "cta2",
    "features[6..6]"
  ],
  "tree": {
    "el": "grid",
    "gap": 6,
    "align": "stretch",
    "children": [
      {
        "el": "box",
        "span": "1-4",
        "gap": 5,
        "justify": "between",
        "children": [
          {
            "el": "box",
            "gap": 3,
            "children": [
              {
                "el": "text",
                "color": "link",
                "slot": "label",
                "role": "label",
                "font": "mono"
              },
              {
                "el": "text",
                "slot": "title",
                "role": "h2",
                "step": 5,
                "weight": 600,
                "tracking": "tight",
                "leading": "tight"
              },
              {
                "el": "text",
                "color": "textMuted",
                "slot": "body",
                "role": "body",
                "maxCh": 40
              }
            ]
          },
          {
            "el": "button",
            "slot": "cta2",
            "variant": "secondary",
            "arrow": true
          }
        ]
      },
      {
        "el": "repeat",
        "span": "5-12",
        "slot": "features",
        "min": 6,
        "max": 6,
        "layout": "grid",
        "cols": 3,
        "phoneCols": 2,
        "gap": 3,
        "of": {
          "el": "box",
          "bg": "surface",
          "gap": 6,
          "pad": [
            4,
            4
          ],
          "justify": "between",
          "border": "all",
          "children": [
            {
              "el": "box",
              "mobile": "keep",
              "dir": "row",
              "gap": 2,
              "justify": "between",
              "children": [
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "number",
                  "role": "label",
                  "font": "mono"
                },
                {
                  "el": "text",
                  "color": "link",
                  "slot": "meta",
                  "role": "label",
                  "font": "mono"
                }
              ]
            },
            {
              "el": "box",
              "gap": 1,
              "children": [
                {
                  "el": "text",
                  "slot": "title",
                  "role": "h4",
                  "step": 1,
                  "weight": 600,
                  "leading": "tight"
                },
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "body",
                  "role": "small"
                }
              ]
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/features.hardware-keypad.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.hardware-keypad — Industrial Hardware</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; }
  .intro { grid-column: 1 / 5; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
  .intro h2 { font-size: var(--step-5); margin: 8px 0 12px; }
  .intro .btn { align-self: flex-start; }
  .pad { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .pad .key { padding: 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 168px; }
  .pad .top { display: flex; justify-content: space-between; }
  .pad h4 { font-size: var(--step-1); line-height: 1.15; margin-bottom: 4px; }
  @media (max-width: 640px) { .pad { grid-template-columns: 1fr; } .pad .key { min-height: 0; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="grid">
    <div class="intro">
      <div><span class="part link">Section 02 — Controls</span><h2>Six keys. Nothing hidden.</h2><p class="muted">Every function has its own key and its own light. No menus, no long-press, no app.</p></div>
      <a class="btn key" href="#manual">Read the manual <span aria-hidden="true">→</span></a>
    </div>
    <div class="pad">
      <div class="key"><div class="top"><span class="part muted">01</span><span class="part link">Disc</span></div><div><h4>Slot-loading CD</h4><p class="small muted">Reads CD-R and CD-RW, resumes where you stopped.</p></div></div>
      <div class="key"><div class="top"><span class="part muted">02</span><span class="part link">FM/DAB</span></div><div><h4>Radio, tuned by hand</h4><p class="small muted">One knob, 12 presets, no scanning beeps.</p></div></div>
      <div class="key"><div class="top"><span class="part muted">03</span><span class="part link">Loop</span></div><div><h4>Ten-minute tape loop</h4><p class="small muted">Always recording; press to keep the last ten minutes.</p></div></div>
      <div class="key"><div class="top"><span class="part muted">04</span><span class="part link">BT 5.3</span></div><div><h4>Bluetooth in and out</h4><p class="small muted">Stream to it, or pair two units as a stereo pair.</p></div></div>
      <div class="key"><div class="top"><span class="part muted">05</span><span class="part link">USB-C</span></div><div><h4>Charges anything</h4><p class="small muted">60 W out, so your laptop lives on the shelf too.</p></div></div>
      <div class="key"><div class="top"><span class="part muted">06</span><span class="part link">Line</span></div><div><h4>3.5 mm in and out</h4><p class="small muted">For the turntable you already own.</p></div></div>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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