hero.claymorphism-candy-stage · Candy stage

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

Rule
Copy on the page ground in 1–6 (pill eyebrow, display headline at step 7, lead, pill buttons, two stat chips); a surfaceAlt clay platter in 7–12 holding a 1:1 clay object, a blob sticker and a floating clay toast.
Slots
eyebrow, headline, subhead, cta, cta2, stats[2..2], heroImage, caption, meta
Grid areas
copy 1-6 · platter 7-12 (12-column grid, 1-based inclusive spans)
Notes
The platter is one clay card (radius 32–40 px, clay shadow). The toast card floats over the platter's bottom-left corner; the blob sticks out over its top-right. Text never sits on a blob.
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 6

Pattern notes

  • Two halves, vertically centred, at least 82 vh. Columns 1–6 on the page ground: a white pill chip with the eyebrow, the display headline at step 7 (weight 700, ≤15 ch), a muted lead (≤42 ch), primary and secondary pill buttons, and two white stat chips side by side (number at step 4, small muted label). Columns 7–12: a surfaceAlt clay platter (padding 48 px) holding a 1:1 clay object, an accent blob sticking out over the top-right corner, a small accent2 dot on the left edge and a white toast card (dot, bold caption, muted line) floating over the platter's bottom-left. Phone: copy first, platter below, blob hidden.

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

Corvid Robotics — identity

Booking projects from June 2026

Layout tree (as in design/layout.json)
{
  "pattern": "hero.claymorphism-candy-stage",
  "kind": "hero",
  "grid": {
    "copy": "1-6",
    "platter": "7-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "stats[2..2]",
    "heroImage",
    "caption",
    "meta"
  ],
  "notes": "The platter is one clay card (radius 32–40 px, clay shadow). The toast card floats over the platter's bottom-left corner; the blob sticks out over its top-right. Text never sits on a blob.",
  "tree": {
    "el": "grid",
    "gap": 8,
    "align": "center",
    "minVh": 0.82,
    "children": [
      {
        "el": "box",
        "span": "1-6",
        "rowSpan": "1-1",
        "gap": 4,
        "align": "start",
        "justify": "center",
        "children": [
          {
            "el": "box",
            "bg": "surface",
            "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": 15
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "subhead",
            "role": "lead",
            "maxCh": 42
          },
          {
            "el": "box",
            "dir": "row",
            "gap": 3,
            "wrap": true,
            "children": [
              {
                "el": "button",
                "slot": "cta",
                "variant": "primary",
                "size": "lg"
              },
              {
                "el": "button",
                "slot": "cta2",
                "variant": "secondary",
                "size": "lg",
                "arrow": true
              }
            ]
          },
          {
            "el": "repeat",
            "slot": "stats",
            "min": 2,
            "max": 2,
            "layout": "grid",
            "cols": 2,
            "phoneCols": 2,
            "gap": 3,
            "of": {
              "el": "box",
              "bg": "surface",
              "gap": 0,
              "pad": [
                3,
                5
              ],
              "children": [
                {
                  "el": "text",
                  "slot": "number",
                  "role": "number",
                  "step": 4,
                  "weight": 700,
                  "tracking": "tight"
                },
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "title",
                  "role": "small"
                }
              ]
            }
          }
        ]
      },
      {
        "el": "box",
        "span": "7-12",
        "rowSpan": "1-1",
        "bg": "surfaceAlt",
        "pad": [
          6,
          6
        ],
        "children": [
          {
            "el": "grid",
            "cols": 12,
            "gap": 3,
            "children": [
              {
                "el": "media",
                "span": "1-12",
                "rowSpan": "1-3",
                "slot": "heroImage",
                "aspect": "1/1",
                "treatment": "clay",
                "frame": "none"
              },
              {
                "el": "shape",
                "span": "10-12",
                "rowSpan": "1-1",
                "alignSelf": "start",
                "kind": "blob",
                "size": "md",
                "fill": "accent",
                "rotate": -12
              },
              {
                "el": "shape",
                "span": "1-2",
                "rowSpan": "2-2",
                "alignSelf": "center",
                "kind": "circle",
                "size": "sm",
                "fill": "accent2"
              },
              {
                "el": "box",
                "span": "1-7",
                "rowSpan": "3-3",
                "mobile": "keep",
                "bg": "surface",
                "alignSelf": "end",
                "dir": "row",
                "gap": 3,
                "pad": [
                  3,
                  4
                ],
                "align": "center",
                "children": [
                  {
                    "el": "shape",
                    "kind": "circle",
                    "size": "sm",
                    "fill": "accent2"
                  },
                  {
                    "el": "box",
                    "gap": 0,
                    "children": [
                      {
                        "el": "text",
                        "slot": "caption",
                        "role": "label",
                        "weight": 700
                      },
                      {
                        "el": "text",
                        "color": "textMuted",
                        "slot": "meta",
                        "role": "small",
                        "maxCh": 26
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.claymorphism-candy-stage.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.claymorphism-candy-stage — Claymorphism</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: 64px 0; }
  .stage { align-items: center; min-height: 82vh; gap: 64px; }
  .copy { grid-column: 1 / 7; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
  .copy h1 { font-size: clamp(44px, 7vw, var(--step-8)); max-width: 13ch; line-height: 1; }
  .copy .lead { font-size: var(--step-1); max-width: 42ch; }
  .actions, .stats { display: flex; gap: 16px; flex-wrap: wrap; }
  .stat { padding: 16px 28px; }
  .stat .num { font-size: var(--step-4); display: block; }
  .platter { grid-column: 7 / 13; position: relative; padding: 48px; aspect-ratio: 1; }
  .platter .blob.a { width: 140px; height: 120px; background: var(--accent); top: -36px; right: -28px; rotate: -12deg; }
  .platter .dot { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-2); left: -16px; top: 46%; }
  .toast { position: absolute; left: -32px; bottom: 40px; display: flex; gap: 12px; align-items: center; padding: 16px 24px; }
  .toast i { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-2); flex: none; }
  @media (max-width: 640px) { .stage { min-height: 0; gap: 40px; } .platter { padding: 24px; } .toast { position: static; margin-top: 16px; } .platter .dot { display: none; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="grid stage">
    <div class="copy">
      <span class="chip clay">New: savings jars for kids</span>
      <h1>Pocket money that grows.</h1>
      <p class="lead muted">Jarjar turns allowance into goals your kids can see, squeeze and celebrate. Parents set the rules; kids do the saving.</p>
      <div class="actions"><a class="btn clay" href="#start">Start saving</a><a class="btn clay secondary" href="#how">See how it works →</a></div>
      <div class="stats">
        <div class="clay stat"><span class="num">4.9</span><span class="small muted">App Store rating</span></div>
        <div class="clay stat"><span class="num">210k</span><span class="small muted">jars filled</span></div>
      </div>
    </div>
    <div class="clay alt slab platter">
      <img class="clay-object" src="clay-piggy-bank.webp" alt="A pink clay piggy bank with three gold coins">
      <span class="blob a" aria-hidden="true"></span><span class="dot" aria-hidden="true"></span>
      <div class="clay toast"><i aria-hidden="true"></i><div><strong>+£5 saved</strong><p class="small muted">Mia hit her bike goal</p></div></div>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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