pricing.claymorphism-plan-stack · Plan stack

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

Rule
h2 at step 6 and a line on one row; two surface plan cards in 1–8 (pill plan label, name and price at step 7 on top; line and primary pill button at the bottom) and an accent2 family/school card in 9–12 with a statement, a clay object and a secondary button.
Slots
title, body, plans[2..2], statement, image, cta
Grid areas
plans 1-8 · family 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

  • h2 at step 6 in 1–7 and a muted line in 8–12. Two white plan cards in 1–8: a surfaceAlt pill with the plan label, the plan name at step 3 and the price at step 7 pinned to the top; a muted line and a primary pill button pinned to the bottom. An accent2 family / school card in 9–12: a statement at step 2 (≤26 ch), a 4:3 clay object and a secondary pill button.

Engagements

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.

For starting out

Sprint

€18k

Two-week positioning sprint with a written brand platform.

Choose Sprint

Most popular

Rebrand

€85k

Positioning, identity and a launch toolkit over 12 weeks.

Most popular — choose

Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "pricing.claymorphism-plan-stack",
  "kind": "pricing",
  "grid": {
    "plans": "1-8",
    "family": "9-12"
  },
  "slots": [
    "title",
    "body",
    "plans[2..2]",
    "statement",
    "image",
    "cta"
  ],
  "tree": {
    "el": "box",
    "gap": 8,
    "children": [
      {
        "el": "grid",
        "gap": 5,
        "children": [
          {
            "el": "text",
            "span": "1-7",
            "slot": "title",
            "role": "h2",
            "step": 6,
            "weight": 700,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 18
          },
          {
            "el": "text",
            "span": "8-12",
            "color": "textMuted",
            "alignSelf": "end",
            "slot": "body",
            "role": "body",
            "maxCh": 40
          }
        ]
      },
      {
        "el": "grid",
        "gap": 5,
        "align": "stretch",
        "children": [
          {
            "el": "repeat",
            "span": "1-8",
            "slot": "plans",
            "min": 2,
            "max": 2,
            "layout": "grid",
            "cols": 2,
            "gap": 5,
            "of": {
              "el": "box",
              "bg": "surface",
              "gap": 6,
              "pad": [
                8,
                6
              ],
              "justify": "between",
              "children": [
                {
                  "el": "box",
                  "gap": 3,
                  "children": [
                    {
                      "el": "box",
                      "bg": "surfaceAlt",
                      "alignSelf": "start",
                      "dir": "row",
                      "pad": [
                        1,
                        3
                      ],
                      "children": [
                        {
                          "el": "text",
                          "slot": "meta",
                          "role": "label",
                          "weight": 700
                        }
                      ]
                    },
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "h3",
                      "step": 3,
                      "weight": 700
                    },
                    {
                      "el": "text",
                      "slot": "number",
                      "role": "number",
                      "step": 7,
                      "weight": 700,
                      "tracking": "tight"
                    }
                  ]
                },
                {
                  "el": "box",
                  "gap": 4,
                  "align": "start",
                  "children": [
                    {
                      "el": "text",
                      "color": "textMuted",
                      "slot": "body",
                      "role": "small",
                      "maxCh": 30
                    },
                    {
                      "el": "button",
                      "slot": "cta",
                      "variant": "primary"
                    }
                  ]
                }
              ]
            }
          },
          {
            "el": "box",
            "span": "9-12",
            "bg": "accent2",
            "gap": 4,
            "pad": [
              6,
              6
            ],
            "justify": "between",
            "children": [
              {
                "el": "text",
                "slot": "statement",
                "role": "h3",
                "step": 2,
                "weight": 700,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 26
              },
              {
                "el": "media",
                "slot": "image",
                "aspect": "4/3",
                "treatment": "clay",
                "frame": "none"
              },
              {
                "el": "button",
                "slot": "cta",
                "variant": "secondary",
                "arrow": true
              }
            ]
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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