features.claymorphism-toy-shelf · Toy shelf

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

Rule
An accent intro card in 1–4 over two rows (pill label, h2 at step 5, line, clay object, secondary button) beside four surface clay cards in a 2×2 on 5–12, each with a big number at the top and title plus line at the bottom.
Slots
sectionLabel, title, body, image, cta, features[4..4]
Grid areas
intro 1-4 · cards 5-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

  • An accent intro card in 1–4 over two rows: white pill label, h2 at step 5 (≤16 ch), a line, a 4:3 clay object and a secondary pill button at the bottom. In 5–12 a 2×2 of white clay cards: a big number at step 6 in the link colour with a small accent2 blob on the right at the top; title at step 2 and a muted line at the bottom.

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.

Start a project

01

Positioning

Find the one sentence your best customers already believe.

02

Identity systems

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

03

Websites

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

04

Sales enablement

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

Layout tree (as in design/layout.json)
{
  "pattern": "features.claymorphism-toy-shelf",
  "kind": "features",
  "grid": {
    "intro": "1-4",
    "cards": "5-12"
  },
  "slots": [
    "sectionLabel",
    "title",
    "body",
    "image",
    "cta",
    "features[4..4]"
  ],
  "tree": {
    "el": "grid",
    "gap": 5,
    "rowGap": 5,
    "align": "stretch",
    "children": [
      {
        "el": "box",
        "span": "1-4",
        "rowSpan": "1-2",
        "bg": "accent",
        "gap": 4,
        "pad": [
          8,
          6
        ],
        "justify": "between",
        "children": [
          {
            "el": "box",
            "bg": "surface",
            "alignSelf": "start",
            "dir": "row",
            "pad": [
              1,
              3
            ],
            "align": "center",
            "children": [
              {
                "el": "text",
                "slot": "sectionLabel",
                "role": "label",
                "weight": 700
              }
            ]
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "step": 5,
            "weight": 700,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 16
          },
          {
            "el": "text",
            "slot": "body",
            "role": "body",
            "maxCh": 34
          },
          {
            "el": "media",
            "slot": "image",
            "aspect": "4/3",
            "treatment": "clay",
            "frame": "none"
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "secondary",
            "arrow": true
          }
        ]
      },
      {
        "el": "repeat",
        "span": "5-12",
        "rowSpan": "1-2",
        "slot": "features",
        "min": 4,
        "max": 4,
        "layout": "grid",
        "cols": 2,
        "gap": 5,
        "of": {
          "el": "box",
          "bg": "surface",
          "gap": 6,
          "pad": [
            6,
            6
          ],
          "justify": "between",
          "children": [
            {
              "el": "box",
              "mobile": "keep",
              "dir": "row",
              "align": "start",
              "justify": "between",
              "children": [
                {
                  "el": "text",
                  "color": "link",
                  "slot": "number",
                  "role": "number",
                  "step": 6,
                  "weight": 700
                },
                {
                  "el": "shape",
                  "kind": "blob",
                  "size": "sm",
                  "fill": "accent2"
                }
              ]
            },
            {
              "el": "box",
              "gap": 1,
              "children": [
                {
                  "el": "text",
                  "slot": "title",
                  "role": "h3",
                  "step": 2,
                  "weight": 700,
                  "tracking": "tight"
                },
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "body",
                  "role": "small",
                  "maxCh": 34
                }
              ]
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/features.claymorphism-toy-shelf.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.claymorphism-toy-shelf — Claymorphism</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; }
  .shelf { grid-auto-rows: minmax(240px, auto); }
  .intro { grid-column: 1 / 5; grid-row: 1 / 3; padding: 64px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; align-items: flex-start; }
  .intro h2 { font-size: var(--step-5); max-width: 16ch; }
  .intro img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
  .cards { grid-column: 5 / 13; grid-row: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
  .card { padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
  .card .top { display: flex; justify-content: space-between; align-items: flex-start; }
  .card .num { font-size: var(--step-6); color: var(--link); }
  .card .top i { width: 40px; height: 36px; background: var(--accent-2); border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; }
  .card h3 { font-size: var(--step-2); }
  @media (max-width: 640px) { .cards { grid-template-columns: 1fr; } .intro, .card { padding: 32px 24px; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="grid shelf">
    <div class="clay accent slab intro">
      <span class="chip clay">Why kids love it</span>
      <h2>Saving you can squeeze.</h2>
      <p>Every goal is a jar that fills up as they save — and wobbles when they spend.</p>
      <img class="clay-object" src="clay-jars.webp" alt="Three soft clay jars, half full of coins">
      <a class="btn clay secondary" href="#tour">Take the tour →</a>
    </div>
    <div class="cards">
      <article class="clay card"><div class="top"><span class="num">01</span><i aria-hidden="true"></i></div><div><h3>Goal jars</h3><p class="small muted">Name it, picture it, watch it fill.</p></div></article>
      <article class="clay card"><div class="top"><span class="num">02</span><i aria-hidden="true"></i></div><div><h3>Chore rewards</h3><p class="small muted">Tick a chore, top up a jar.</p></div></article>
      <article class="clay card"><div class="top"><span class="num">03</span><i aria-hidden="true"></i></div><div><h3>Parent rules</h3><p class="small muted">Limits and approvals in one tap.</p></div></article>
      <article class="clay card"><div class="top"><span class="num">04</span><i aria-hidden="true"></i></div><div><h3>Interest boost</h3><p class="small muted">A little bonus for every week saved.</p></div></article>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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