stats.hardware-lcd-readouts · LCD readouts

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

Rule
One dark LCD panel (accent2): a mono header row, then four readouts with values in orange mono at step 7 over mono labels, ruled between.
Slots
label, meta, stats[4..4]
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

  • One LCD panel (accent2, 24 px padding, no border): a header row with an orange mono label and a mono note, then four readouts ruled between: value in orange mono at step 6, mono label beneath.

By the numbers

Booking projects from June 2026

140+

launches shipped

12

years independent

9 of 10

clients return

31%

average lift in demo requests

Layout tree (as in design/layout.json)
{
  "pattern": "stats.hardware-lcd-readouts",
  "kind": "stats",
  "slots": [
    "label",
    "meta",
    "stats[4..4]"
  ],
  "tree": {
    "el": "box",
    "bg": "accent2",
    "gap": 6,
    "pad": [
      6,
      6
    ],
    "children": [
      {
        "el": "box",
        "dir": "row",
        "gap": 3,
        "align": "baseline",
        "justify": "between",
        "wrap": true,
        "children": [
          {
            "el": "text",
            "color": "accent",
            "slot": "label",
            "role": "label",
            "font": "mono"
          },
          {
            "el": "text",
            "slot": "meta",
            "role": "small",
            "font": "mono"
          }
        ]
      },
      {
        "el": "repeat",
        "slot": "stats",
        "min": 4,
        "max": 4,
        "layout": "grid",
        "cols": 4,
        "phoneCols": 2,
        "gap": 5,
        "divider": true,
        "of": {
          "el": "box",
          "gap": 2,
          "pad": [
            2,
            0
          ],
          "children": [
            {
              "el": "text",
              "color": "accent",
              "slot": "number",
              "role": "number",
              "step": 6,
              "leading": "tight",
              "font": "mono"
            },
            {
              "el": "text",
              "slot": "label",
              "role": "label",
              "font": "mono"
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/stats.hardware-lcd-readouts.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>stats.hardware-lcd-readouts — Industrial Hardware</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; }
  .lcd { padding: 24px; display: grid; gap: 24px; }
  .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .head .part { color: var(--accent); }
  .readouts { display: grid; grid-template-columns: repeat(4, 1fr); }
  .readouts > div { padding: 8px 20px; display: grid; gap: 8px; border-left: 1px solid color-mix(in srgb, var(--on-lcd) 30%, transparent); }
  .readouts > div:first-child { border-left: 0; padding-left: 0; }
  .readouts .value { font-size: var(--step-7); }
  @media (max-width: 640px) {
    .readouts { grid-template-columns: 1fr 1fr; row-gap: 20px; }
    .readouts > div { border-left: 0; padding-left: 0; } .readouts .value { font-size: var(--step-5); }
  }
</style>
</head>
<body>
<section class="wrap">
  <div class="lcd">
    <div class="head"><span class="part">Measured on unit 0001</span><span class="small mono">Lab report · March 2026</span></div>
    <div class="readouts">
      <div><span class="value">19dB</span><span class="part">Night mode</span></div>
      <div><span class="value">40h</span><span class="part">Battery</span></div>
      <div><span class="value">2.1kg</span><span class="part">Weight</span></div>
      <div><span class="value">05y</span><span class="part">Warranty</span></div>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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