pricing.bento-plan-tiles · Plan tiles

A pricing pattern from Bento Tech, 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="pricing.bento-plan-tiles". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Title in 1–6 and a line in 8–12; two plan tiles side by side in 1–8 and a surfaceAlt enterprise tile in 9–12 — never three equal cards.
Slots
title, body, plans[2..2], statement, body2, cta2
Grid areas
title 1-6 · line 8-12 · plans 1-8 · enterprise 9-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #5E65E8 · accent2 #9256C9 · Geist / Geist · radius 20px · space unit 4px (full list in design/tokens.json)

Pattern notes

  • h2 at step 5 in 1–6 with a muted line bottom-aligned in 8–12. Two plan tiles side by side in 1–8 (mono plan name and price at step 6 at the top, one line and the primary button at the bottom) and a surfaceAlt enterprise tile in 9–12 with a statement at step 3, a line and a secondary button. Never three equal plan cards.

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.

Sprint

€18k

Two-week positioning sprint with a written brand platform.

Choose Sprint

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.

We hand over everything — source files, a living brand system and a website your team can edit without calling us.

Read case studies
Layout tree (as in design/layout.json)
{
  "pattern": "pricing.bento-plan-tiles",
  "kind": "pricing",
  "grid": {
    "title": "1-6",
    "line": "8-12",
    "plans": "1-8",
    "enterprise": "9-12"
  },
  "slots": [
    "title",
    "body",
    "plans[2..2]",
    "statement",
    "body2",
    "cta2"
  ],
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 4,
    "align": "stretch",
    "children": [
      {
        "el": "text",
        "span": "1-6",
        "slot": "title",
        "role": "h2",
        "step": 5,
        "weight": 600,
        "tracking": "tight",
        "leading": "tight",
        "maxCh": 20
      },
      {
        "el": "text",
        "span": "8-12",
        "color": "textMuted",
        "alignSelf": "end",
        "slot": "body",
        "role": "body",
        "maxCh": 40
      },
      {
        "el": "repeat",
        "span": "1-8",
        "slot": "plans",
        "min": 2,
        "max": 2,
        "layout": "grid",
        "cols": 2,
        "gap": 3,
        "of": {
          "el": "box",
          "bg": "surface",
          "gap": 3,
          "pad": [
            6,
            6
          ],
          "justify": "between",
          "border": "all",
          "children": [
            {
              "el": "text",
              "slot": "title",
              "role": "label",
              "font": "mono"
            },
            {
              "el": "text",
              "slot": "number",
              "role": "number",
              "step": 6,
              "weight": 600,
              "tracking": "tight"
            },
            {
              "el": "text",
              "slot": "body",
              "role": "small"
            },
            {
              "el": "button",
              "slot": "cta",
              "variant": "primary"
            }
          ]
        }
      },
      {
        "el": "box",
        "span": "9-12",
        "bg": "surfaceAlt",
        "gap": 3,
        "pad": [
          6,
          6
        ],
        "justify": "between",
        "border": "all",
        "children": [
          {
            "el": "text",
            "slot": "statement",
            "role": "h4",
            "step": 3,
            "weight": 600,
            "tracking": "tight",
            "leading": "tight"
          },
          {
            "el": "text",
            "slot": "body2",
            "role": "small"
          },
          {
            "el": "button",
            "slot": "cta2",
            "variant": "secondary"
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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