hero.claymorphism-wallet-widget · Wallet widget

A hero pattern from Claymorphism, 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="hero.claymorphism-wallet-widget". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Copy in 1–7 (pill eyebrow, display at step 7, lead, inline email form); in 8–12 a surface clay widget: label, a giant balance number, two surfaceAlt stat pills and a 16:9 clay object; a row of client pills underneath.
Slots
eyebrow, headline, subhead, newsletter, label, price, stats[2..2], heroImage, clients[4..5]
Grid areas
copy 1-7 · widget 8-12 · clients 1-12 (12-column grid, 1-based inclusive spans)
Notes
The widget is one clay card with nested clay pills (two levels deep at most). The balance number is the biggest thing on the page after the headline.
Tokens
bg #F2EDFF · text #2B2340 · heading #1E1733 · accent #FF64AC · accent2 #00C09F · Fredoka / Nunito · radius 32px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 8

Pattern notes

  • For fintech and apps. Columns 1–7: a surfaceAlt pill eyebrow, display at step 7 (≤14 ch), muted lead and an inline email form with a pill input and pill button. Columns 8–12: a white clay widget card: a muted label, a giant balance number at step 8, two surfaceAlt stat pills side by side and a 16:9 clay object in a rounded frame. Row 2: four or five client names as white clay pills (scrolls sideways on phones).

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.

you@example.com
Subscribe

Introducing

€18k

140+

launches shipped

12

years independent

Corvid Robotics

Fieldstack

Tidewater Labs

Arklow Valves

Layout tree (as in design/layout.json)
{
  "pattern": "hero.claymorphism-wallet-widget",
  "kind": "hero",
  "grid": {
    "copy": "1-7",
    "widget": "8-12",
    "clients": "1-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "newsletter",
    "label",
    "price",
    "stats[2..2]",
    "heroImage",
    "clients[4..5]"
  ],
  "notes": "The widget is one clay card with nested clay pills (two levels deep at most). The balance number is the biggest thing on the page after the headline.",
  "tree": {
    "el": "grid",
    "gap": 8,
    "rowGap": 8,
    "align": "center",
    "children": [
      {
        "el": "box",
        "span": "1-7",
        "rowSpan": "1-1",
        "gap": 5,
        "align": "stretch",
        "justify": "center",
        "children": [
          {
            "el": "box",
            "bg": "surfaceAlt",
            "alignSelf": "start",
            "dir": "row",
            "pad": [
              1,
              3
            ],
            "align": "center",
            "children": [
              {
                "el": "text",
                "slot": "eyebrow",
                "role": "label",
                "weight": 700
              }
            ]
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 7,
            "weight": 700,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 14
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "subhead",
            "role": "lead",
            "maxCh": 44
          },
          {
            "el": "form",
            "slot": "newsletter",
            "fields": [
              "email"
            ],
            "inline": true
          }
        ]
      },
      {
        "el": "box",
        "span": "8-12",
        "rowSpan": "1-1",
        "bg": "surface",
        "gap": 4,
        "pad": [
          6,
          6
        ],
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "label",
            "role": "label",
            "weight": 700
          },
          {
            "el": "text",
            "slot": "price",
            "role": "number",
            "step": 8,
            "weight": 700,
            "tracking": "tight"
          },
          {
            "el": "repeat",
            "slot": "stats",
            "min": 2,
            "max": 2,
            "layout": "grid",
            "cols": 2,
            "phoneCols": 2,
            "gap": 3,
            "of": {
              "el": "box",
              "bg": "surfaceAlt",
              "gap": 0,
              "pad": [
                3,
                4
              ],
              "children": [
                {
                  "el": "text",
                  "slot": "number",
                  "role": "number",
                  "step": 3,
                  "weight": 700
                },
                {
                  "el": "text",
                  "slot": "title",
                  "role": "small"
                }
              ]
            }
          },
          {
            "el": "media",
            "slot": "heroImage",
            "aspect": "16/9",
            "treatment": "clay",
            "frame": "rounded"
          }
        ]
      },
      {
        "el": "repeat",
        "span": "1-12",
        "rowSpan": "2-2",
        "mobile": "scroll-x",
        "slot": "clients",
        "min": 4,
        "max": 5,
        "layout": "row",
        "gap": 3,
        "of": {
          "el": "box",
          "bg": "surface",
          "pad": [
            2,
            5
          ],
          "children": [
            {
              "el": "text",
              "slot": "title",
              "role": "label",
              "weight": 700
            }
          ]
        }
      }
    ]
  }
}

Other patterns in this design

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