pricing.desktop-pricing-table · Desktop pricing table

A pricing pattern from Desktop OS, 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.desktop-pricing-table". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Section head, then a spreadsheet-like window: each plan a ruled row (name + mono tag in 1–3, price in 4–5, what is included in 6–9, a bevel button in 10–12) and a footer row with a note and a primary button.
Slots
sectionLabel, title, body, caption, index, plans[3..4], note, cta2
Grid areas
plan 1-3 · price 4-5 · detail 6-9 · action 10-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #E3E5DA · text #272921 · heading #121309 · accent #EDA12F · accent2 #55A9FF · Onest / Onest · radius 8px · space unit 4px (full list in design/tokens.json)

Pattern notes

  • Section head (mono label, h2 at step 5; muted line right). Then a spreadsheet window: each plan a ruled row on the 12-column grid — name (h3, 700) over a mono tag in `link` on 1–3, the price at step 5 on 4–5, what is included (muted) on 6–9, a secondary key on 10–12 — and a footer row with a small muted note and a small primary key. Never three equal plan cards.

Pricing

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.

Corvid Robotics — identity

06

Sprint

For starting out

€18k

Two-week positioning sprint with a written brand platform.

Choose Sprint

Rebrand

Most popular

€85k

Positioning, identity and a launch toolkit over 12 weeks.

Most popular — choose

Partner

For larger teams

€14k/mo

A standing team for product launches and campaigns.

Choose Partner

Booking projects from June 2026

Read case studies
Layout tree (as in design/layout.json)
{
  "pattern": "pricing.desktop-pricing-table",
  "kind": "pricing",
  "grid": {
    "plan": "1-3",
    "price": "4-5",
    "detail": "6-9",
    "action": "10-12"
  },
  "slots": [
    "sectionLabel",
    "title",
    "body",
    "caption",
    "index",
    "plans[3..4]",
    "note",
    "cta2"
  ],
  "tree": {
    "el": "box",
    "gap": 6,
    "children": [
      {
        "el": "box",
        "dir": "row",
        "gap": 6,
        "align": "end",
        "justify": "between",
        "children": [
          {
            "el": "box",
            "gap": 3,
            "children": [
              {
                "el": "text",
                "color": "link",
                "slot": "sectionLabel",
                "role": "label",
                "font": "mono"
              },
              {
                "el": "text",
                "slot": "title",
                "role": "h2",
                "step": 5,
                "weight": 700,
                "tracking": "tight",
                "leading": "tight"
              }
            ]
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "body",
            "role": "body",
            "maxCh": 50
          }
        ]
      },
      {
        "el": "box",
        "bg": "surface",
        "gap": 0,
        "pad": 0,
        "children": [
          {
            "el": "box",
            "dir": "row",
            "gap": 3,
            "pad": [
              2,
              4
            ],
            "align": "center",
            "justify": "between",
            "border": "bottom",
            "children": [
              {
                "el": "text",
                "color": "heading",
                "slot": "caption",
                "role": "label",
                "font": "mono"
              },
              {
                "el": "text",
                "mobile": "hide",
                "color": "textMuted",
                "slot": "index",
                "role": "label",
                "font": "mono"
              }
            ]
          },
          {
            "el": "repeat",
            "slot": "plans",
            "min": 3,
            "max": 4,
            "layout": "list",
            "gap": 0,
            "divider": true,
            "of": {
              "el": "grid",
              "gap": 4,
              "pad": [
                5,
                6
              ],
              "align": "center",
              "children": [
                {
                  "el": "box",
                  "span": "1-3",
                  "gap": 1,
                  "children": [
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "h3",
                      "weight": 700
                    },
                    {
                      "el": "text",
                      "color": "link",
                      "slot": "meta",
                      "role": "label",
                      "font": "mono"
                    }
                  ]
                },
                {
                  "el": "text",
                  "span": "4-5",
                  "slot": "number",
                  "role": "number",
                  "step": 5,
                  "weight": 700,
                  "tracking": "tight"
                },
                {
                  "el": "text",
                  "span": "6-9",
                  "color": "textMuted",
                  "slot": "body",
                  "role": "body"
                },
                {
                  "el": "button",
                  "span": "10-12",
                  "slot": "cta",
                  "variant": "secondary"
                }
              ]
            }
          },
          {
            "el": "box",
            "dir": "row",
            "gap": 4,
            "pad": [
              3,
              6
            ],
            "align": "center",
            "justify": "between",
            "border": "top",
            "children": [
              {
                "el": "text",
                "color": "textMuted",
                "slot": "note",
                "role": "small"
              },
              {
                "el": "button",
                "slot": "cta2",
                "variant": "primary",
                "size": "sm"
              }
            ]
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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