list.neumorphism-scene-rows · Scene rows

A list pattern from Neumorphism, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="list.neumorphism-scene-rows". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Header row; six raised scene rows in two columns: a numbered round key, the title and a line, and a round toggle key on the right.
Slots
sectionLabel, title, body, items[6..6]
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

  • Header row, then six raised rows in two columns (one on phones): a numbered round key (number in the link colour), the title at step 1 (600) and a muted line, and a round toggle key with an accent dot on the right.

Index

Services

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.

01

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

02

Positioning workshop

A day with your leadership to agree on one story.

03

Identity design

Logo, type, colour, motion and a working toolkit.

04

Website

Strategy, copy, design and build in Webflow or Next.js.

05

Launch support

Training, templates and a month of on-call design.

06

Retainer

A senior designer embedded two days a week.

Layout tree (as in design/layout.json)
{
  "pattern": "list.neumorphism-scene-rows",
  "kind": "list",
  "slots": [
    "sectionLabel",
    "title",
    "body",
    "items[6..6]"
  ],
  "tree": {
    "el": "box",
    "gap": 10,
    "children": [
      {
        "el": "box",
        "dir": "row",
        "gap": 8,
        "align": "end",
        "justify": "between",
        "wrap": true,
        "children": [
          {
            "el": "box",
            "gap": 3,
            "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": 42
          }
        ]
      },
      {
        "el": "repeat",
        "slot": "items",
        "min": 6,
        "max": 6,
        "layout": "grid",
        "cols": 2,
        "phoneCols": 1,
        "gap": 6,
        "of": {
          "el": "box",
          "mobile": "keep",
          "bg": "surface",
          "dir": "row",
          "gap": 5,
          "pad": [
            5,
            6
          ],
          "align": "center",
          "justify": "between",
          "children": [
            {
              "el": "box",
              "mobile": "keep",
              "dir": "row",
              "gap": 5,
              "align": "center",
              "children": [
                {
                  "el": "box",
                  "bg": "surface",
                  "dir": "row",
                  "pad": [
                    3,
                    3
                  ],
                  "align": "center",
                  "justify": "center",
                  "children": [
                    {
                      "el": "text",
                      "color": "link",
                      "slot": "number",
                      "role": "number",
                      "step": 0,
                      "weight": 700
                    }
                  ]
                },
                {
                  "el": "box",
                  "gap": 1,
                  "children": [
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "h4",
                      "step": 1,
                      "weight": 600
                    },
                    {
                      "el": "text",
                      "color": "textMuted",
                      "slot": "body",
                      "role": "small",
                      "maxCh": 38
                    }
                  ]
                }
              ]
            },
            {
              "el": "box",
              "mobile": "keep",
              "bg": "surface",
              "dir": "row",
              "pad": 2,
              "align": "center",
              "children": [
                {
                  "el": "shape",
                  "kind": "circle",
                  "size": "sm",
                  "fill": "accent"
                }
              ]
            }
          ]
        }
      }
    ]
  }
}

Other patterns in this design

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