features.neumorphism-toggle-panel · Toggle panel

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

Rule
Intro in 1–5 (label, h2, line, a raised product well); one large raised panel in 6–12 listing five features, each row a title and line with a round toggle key on the right.
Slots
sectionLabel, title, body, image, features[5..5]
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)

Pattern notes

  • Columns 1–5: label, h2 at step 5 (700, ≤18 ch), a muted line and a raised well with a rounded 4:3 product shot. Columns 6–12: one large raised panel (padding 32 px) listing five features; each row is the title at step 1 (600) and a muted line on the left, a round raised toggle key on the right whose accent knob shows it is on (in code: a 64 × 34 px pressed track with the knob at its right end), 24 px between rows. No dividers: the spacing separates the rows.

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.

Positioning

Find the one sentence your best customers already believe.

Identity systems

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

Websites

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

Sales enablement

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

Product naming

Names that survive trademark search and a noisy trade show.

Layout tree (as in design/layout.json)
{
  "pattern": "features.neumorphism-toggle-panel",
  "kind": "features",
  "slots": [
    "sectionLabel",
    "title",
    "body",
    "image",
    "features[5..5]"
  ],
  "tree": {
    "el": "grid",
    "gap": 8,
    "align": "start",
    "children": [
      {
        "el": "box",
        "span": "1-5",
        "gap": 5,
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "sectionLabel",
            "role": "label",
            "transform": "uppercase",
            "tracking": "wide"
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "step": 5,
            "weight": 700,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 18
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "body",
            "role": "body",
            "maxCh": 46
          },
          {
            "el": "box",
            "bg": "surface",
            "pad": 4,
            "children": [
              {
                "el": "media",
                "slot": "image",
                "aspect": "4/3",
                "treatment": "product",
                "frame": "rounded"
              }
            ]
          }
        ]
      },
      {
        "el": "box",
        "span": "6-12",
        "bg": "surface",
        "gap": 2,
        "pad": [
          8,
          8
        ],
        "children": [
          {
            "el": "repeat",
            "slot": "features",
            "min": 5,
            "max": 5,
            "layout": "list",
            "gap": 6,
            "of": {
              "el": "box",
              "mobile": "keep",
              "dir": "row",
              "gap": 6,
              "align": "center",
              "justify": "between",
              "children": [
                {
                  "el": "box",
                  "gap": 1,
                  "children": [
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "h4",
                      "step": 1,
                      "weight": 600
                    },
                    {
                      "el": "text",
                      "color": "textMuted",
                      "slot": "body",
                      "role": "small",
                      "maxCh": 48
                    }
                  ]
                },
                {
                  "el": "box",
                  "mobile": "keep",
                  "bg": "surface",
                  "dir": "row",
                  "pad": 2,
                  "align": "center",
                  "children": [
                    {
                      "el": "shape",
                      "kind": "circle",
                      "size": "sm",
                      "fill": "accent"
                    }
                  ]
                }
              ]
            }
          }
        ]
      }
    ]
  }
}
Component example: reference/features.neumorphism-toggle-panel.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.neumorphism-toggle-panel — Neumorphism</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; }
  .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: start; }
  .intro { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 20px; }
  .intro h2 { font-size: var(--step-5); max-width: 18ch; }
  .intro .panel { padding: 16px; } .intro img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
  .list { grid-column: 6 / 13; display: flex; flex-direction: column; gap: 24px; }
  .row { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
  .row h3 { font-size: var(--step-1); font-weight: 600; }
  @media (max-width: 860px) { .intro, .list { grid-column: 1 / -1; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="grid">
    <div class="intro">
      <span class="label">Automations</span>
      <h2>Set it once. Feel it every day.</h2>
      <p class="muted">Five routines ship switched on. Turn any of them off from the panel or the app.</p>
      <div class="panel"><img src="https://images.unsplash.com/photo-1558002038-1055907df827?w=900" alt="Hearth thermostat on a pale wall"></div>
    </div>
    <div class="panel list">
      <div class="row"><div><h3>Away mode</h3><p class="small muted">Drops to 16° when the last phone leaves the house.</p></div><button class="toggle" role="switch" aria-checked="true" aria-label="Away mode"></button></div>
      <div class="row"><div><h3>Morning warm-up</h3><p class="small muted">Reaches your set point the minute your alarm goes off.</p></div><button class="toggle" role="switch" aria-checked="true" aria-label="Morning warm-up"></button></div>
      <div class="row"><div><h3>Open-window pause</h3><p class="small muted">Stops heating when the room cools fast.</p></div><button class="toggle" role="switch" aria-checked="false" aria-label="Open-window pause"></button></div>
      <div class="row"><div><h3>Night dimming</h3><p class="small muted">Lights fall to 20% warm white after 22:30.</p></div><button class="toggle" role="switch" aria-checked="true" aria-label="Night dimming"></button></div>
      <div class="row"><div><h3>Air quality alert</h3><p class="small muted">A gentle chime when CO₂ passes 1,000 ppm.</p></div><button class="toggle" role="switch" aria-checked="false" aria-label="Air quality alert"></button></div>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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