hero.neumorphism-control-deck · Control deck

A hero pattern from Neumorphism, 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.neumorphism-control-deck". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Copy in 1–6 (label, display headline, lead, accent primary and raised secondary key, three raised reading pills); a large raised device panel in 7–12 holding a status row, a dial ring beside a big reading, and three round keys.
Slots
eyebrow, headline, subhead, cta, cta2, stats[3..3], meta, number, tagline, features[3..3]
Notes
Every panel and key is the page colour with the paired shadow; only the primary button, the dial ring and the status dot carry the accent.
Tokens
bg #E3E8EF · text #28303B · heading #161C25 · accent #3F5BD9 · accent2 #794EBA · Plus Jakarta Sans / Plus Jakarta Sans · radius 22px · space unit 4px (full list in design/tokens.json)
Section
vertical padding step 8

Pattern notes

  • Two columns, vertically centred, at least 78 vh. Columns 1–6: a wide-tracked uppercase label in the link colour, the display headline at step 7 (weight 700, tight, ≤15 ch), a muted lead and one row with the accent primary key and a raised secondary key (both large). Under them three raised reading pills in a row, each a number at step 3 (700) over a muted caption. Columns 7–12: one large raised device panel (padding 40 px): a status row (muted label left, accent dot right), then an accent dial ring (180 px) beside a reading at step 8 and the short tagline, then three raised keys in a row, each a muted ring over a short name. Phone: copy first, then the device; the pills and keys stay three across.

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

140+

launches shipped

12

years independent

9 of 10

clients return

Booking projects from June 2026

140+

Strategy and design for companies that make things

Positioning

Identity systems

Websites

Layout tree (as in design/layout.json)
{
  "pattern": "hero.neumorphism-control-deck",
  "kind": "hero",
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "stats[3..3]",
    "meta",
    "number",
    "tagline",
    "features[3..3]"
  ],
  "notes": "Every panel and key is the page colour with the paired shadow; only the primary button, the dial ring and the status dot carry the accent.",
  "tree": {
    "el": "grid",
    "gap": 8,
    "align": "center",
    "minVh": 0.78,
    "children": [
      {
        "el": "box",
        "span": "1-6",
        "gap": 6,
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "eyebrow",
            "role": "label",
            "transform": "uppercase",
            "tracking": "wide"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 7,
            "weight": 700,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 15
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "subhead",
            "role": "lead",
            "maxCh": 44
          },
          {
            "el": "box",
            "dir": "row",
            "gap": 5,
            "align": "center",
            "wrap": true,
            "children": [
              {
                "el": "button",
                "slot": "cta",
                "variant": "primary",
                "size": "lg"
              },
              {
                "el": "button",
                "slot": "cta2",
                "variant": "secondary",
                "size": "lg"
              }
            ]
          },
          {
            "el": "repeat",
            "slot": "stats",
            "min": 3,
            "max": 3,
            "layout": "grid",
            "cols": 3,
            "phoneCols": 3,
            "gap": 5,
            "of": {
              "el": "box",
              "bg": "surface",
              "gap": 1,
              "pad": [
                4,
                4
              ],
              "children": [
                {
                  "el": "text",
                  "slot": "number",
                  "role": "number",
                  "step": 3,
                  "weight": 700,
                  "tracking": "tight"
                },
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "body",
                  "role": "small"
                }
              ]
            }
          }
        ]
      },
      {
        "el": "box",
        "span": "7-12",
        "bg": "surface",
        "gap": 8,
        "pad": [
          10,
          10
        ],
        "children": [
          {
            "el": "box",
            "mobile": "keep",
            "dir": "row",
            "gap": 4,
            "align": "center",
            "justify": "between",
            "children": [
              {
                "el": "text",
                "color": "textMuted",
                "slot": "meta",
                "role": "label",
                "transform": "uppercase",
                "tracking": "wide"
              },
              {
                "el": "shape",
                "kind": "circle",
                "size": "sm",
                "fill": "accent"
              }
            ]
          },
          {
            "el": "box",
            "mobile": "keep",
            "dir": "row",
            "gap": 8,
            "align": "center",
            "children": [
              {
                "el": "shape",
                "kind": "ring",
                "size": "lg",
                "fill": "accent"
              },
              {
                "el": "box",
                "gap": 2,
                "children": [
                  {
                    "el": "text",
                    "slot": "number",
                    "role": "number",
                    "step": 8,
                    "weight": 700,
                    "tracking": "tight",
                    "leading": "tight"
                  },
                  {
                    "el": "text",
                    "color": "textMuted",
                    "slot": "tagline",
                    "role": "small",
                    "maxCh": 24
                  }
                ]
              }
            ]
          },
          {
            "el": "repeat",
            "slot": "features",
            "min": 3,
            "max": 3,
            "layout": "grid",
            "cols": 3,
            "phoneCols": 3,
            "gap": 5,
            "of": {
              "el": "box",
              "bg": "surface",
              "gap": 3,
              "pad": [
                5,
                3
              ],
              "align": "center",
              "children": [
                {
                  "el": "shape",
                  "kind": "ring",
                  "size": "sm",
                  "fill": "textMuted"
                },
                {
                  "el": "text",
                  "slot": "title",
                  "role": "small",
                  "align": "center",
                  "weight": 600,
                  "maxCh": 14
                }
              ]
            }
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.neumorphism-control-deck.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.neumorphism-control-deck — Neumorphism</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: 32px 0 var(--section); }
  .deck { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: center; min-height: 78vh; }
  .copy { grid-column: 1 / 7; display: flex; flex-direction: column; gap: 24px; }
  .copy h1 { font-size: clamp(44px, 5.5vw, var(--step-7)); max-width: 15ch; }
  .copy .lead { font-size: var(--step-1); max-width: 44ch; color: var(--muted); line-height: 1.45; }
  .actions { display: flex; gap: 20px; flex-wrap: wrap; }
  .pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .pills .panel { padding: 16px; } .pills .num { font-size: var(--step-3); }
  .device { grid-column: 7 / 13; padding: 40px; display: flex; flex-direction: column; gap: 32px; }
  .status { display: flex; justify-content: space-between; align-items: center; }
  .reading { display: flex; align-items: center; gap: 32px; }
  .reading .ring { width: 180px; height: 180px; flex: none; }
  .reading .num { font-size: var(--step-8); }
  .keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .keys .panel { padding: 20px 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-weight: 600; font-size: 14px; }
  .keys .ring { width: 40px; height: 40px; border-width: 7px; border-color: var(--muted); box-shadow: none; }
  @media (max-width: 860px) { .copy, .device { grid-column: 1 / -1; } .device { padding: 24px; } .reading .ring { width: 108px; height: 108px; border-width: 10px; } .reading .num { font-size: var(--step-6); } }
</style>
</head>
<body>
<section class="wrap">
  <div class="deck">
    <div class="copy">
      <span class="label">Hearth 2 · now shipping</span>
      <h1>Every room, one quiet dial.</h1>
      <p class="lead">Heating, light and air for the whole home in one calm panel that learns your week and never shouts.</p>
      <div class="actions"><a class="btn btn-primary" href="#buy">Order Hearth</a><a class="btn" href="#tour">Take the tour</a></div>
      <div class="pills">
        <div class="panel"><div class="num">−23%</div><div class="small muted">energy use</div></div>
        <div class="panel"><div class="num">6 min</div><div class="small muted">to install</div></div>
        <div class="panel"><div class="num">4.9</div><div class="small muted">app rating</div></div>
      </div>
    </div>
    <div class="panel device" aria-label="Living room controls">
      <div class="status"><span class="label" style="color:var(--muted)">Living room</span><span class="dot" aria-label="Online"></span></div>
      <div class="reading"><div class="ring" aria-hidden="true"></div><div><div class="num">21.5°</div><p class="small muted">Holding until 22:00</p></div></div>
      <div class="keys">
        <button class="panel btn" style="height:auto" aria-pressed="true"><span class="ring" aria-hidden="true"></span>Heat</button>
        <button class="panel btn" style="height:auto"><span class="ring" aria-hidden="true"></span>Light</button>
        <button class="panel btn" style="height:auto"><span class="ring" aria-hidden="true"></span>Air</button>
      </div>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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