cta.claymorphism-candy-slab · Candy slab

A cta pattern from Claymorphism, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 9. Give the section root data-pattern="cta.claymorphism-candy-slab". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
One accent clay slab: h2 at step 7 in 1–7, a line and an inline email form; a surface card with a 1:1 clay object in 9–12 and a blob sticker over its corner.
Slots
title, body, newsletter, image
Grid areas
copy 1-7 · object 9-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #F2EDFF · text #2B2340 · heading #1E1733 · accent #FF64AC · accent2 #00C09F · Fredoka / Nunito · radius 32px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • One accent clay slab (radius 40 px, padding 96 × 80 px): h2 at step 7 (≤16 ch), a lead and an inline email form in 1–7; a white card holding a 1:1 clay object in 9–12 with an accent2 blob over its top-right corner.

Have a hard thing to explain?

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.

you@example.com
Subscribe
Layout tree (as in design/layout.json)
{
  "pattern": "cta.claymorphism-candy-slab",
  "kind": "cta",
  "grid": {
    "copy": "1-7",
    "object": "9-12"
  },
  "slots": [
    "title",
    "body",
    "newsletter",
    "image"
  ],
  "tree": {
    "el": "box",
    "bg": "accent",
    "pad": [
      12,
      10
    ],
    "children": [
      {
        "el": "grid",
        "gap": 6,
        "align": "center",
        "children": [
          {
            "el": "box",
            "span": "1-7",
            "rowSpan": "1-2",
            "gap": 5,
            "justify": "center",
            "children": [
              {
                "el": "text",
                "slot": "title",
                "role": "h2",
                "step": 7,
                "weight": 700,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 16
              },
              {
                "el": "text",
                "slot": "body",
                "role": "lead",
                "maxCh": 40
              },
              {
                "el": "form",
                "slot": "newsletter",
                "fields": [
                  "email"
                ],
                "inline": true
              }
            ]
          },
          {
            "el": "box",
            "span": "9-12",
            "rowSpan": "1-2",
            "bg": "surface",
            "pad": [
              4,
              4
            ],
            "children": [
              {
                "el": "media",
                "slot": "image",
                "aspect": "1/1",
                "treatment": "clay",
                "frame": "none"
              }
            ]
          },
          {
            "el": "shape",
            "span": "11-12",
            "rowSpan": "1-1",
            "mobile": "hide",
            "alignSelf": "start",
            "kind": "blob",
            "size": "md",
            "fill": "accent2",
            "rotate": 18
          }
        ]
      }
    ]
  }
}
Component example: reference/cta.claymorphism-candy-slab.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.claymorphism-candy-slab — Claymorphism</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; }
  .slab { padding: 96px 80px; }
  .slab .grid { align-items: center; }
  .copy { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 32px; }
  .copy h2 { font-size: var(--step-7); max-width: 16ch; }
  .copy .lead { font-size: var(--step-1); max-width: 40ch; }
  form { display: flex; gap: 12px; flex-wrap: wrap; }
  form input { flex: 1 1 240px; }
  .btn.dark { --fill: var(--heading); color: var(--bg); }
  .object { grid-column: 9 / 13; position: relative; padding: 32px; aspect-ratio: 1; }
  .object .blob { width: 96px; height: 84px; background: var(--accent-2); top: -28px; right: -24px; rotate: 18deg; }
  @media (max-width: 640px) { .slab { padding: 48px 24px; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="clay accent slab">
    <div class="grid">
      <div class="copy">
        <h2>Start their first jar today.</h2>
        <p class="lead">Free for one child, forever. Add the family when you're ready.</p>
        <form><label class="sr-only" for="e" hidden>Email</label><input id="e" class="pill" type="email" placeholder="you@family.com" aria-label="Email"><button class="btn clay dark" type="submit">Get the app</button></form>
      </div>
      <div class="clay object hide-phone"><img class="clay-object" src="clay-coin-stack.webp" alt="A stack of chunky clay coins"><span class="blob" aria-hidden="true"></span></div>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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