pricing.deco-tiered-plaques · Tiered plaques

A pricing pattern from Art Deco, 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.deco-tiered-plaques". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Two or three plans as ruled plaques in one row across 2–11: caps name, price at step 5, a hairline, inclusions, a secondary button; all centred.
Slots
sectionLabel, title, plans[2..3]
Grid areas
header 3-10 · plans 2-11 (12-column grid, 1-based inclusive spans)
Tokens
bg #0E0D0B · text #E8E0CB · heading #E6C676 · accent #C9A24B · accent2 #88660B · Limelight / Josefin Sans · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • A centred header, then two or three plans as ruled plaques in one row across 2–11: plan name in spaced capitals, the price at step 5 in the heading face, a hairline, inclusions in small type, a secondary button — all centred. Recommend a plan only by giving its frame the double rule.

Pricing

Engagements

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
Layout tree (as in design/layout.json)
{
  "pattern": "pricing.deco-tiered-plaques",
  "kind": "pricing",
  "grid": {
    "header": "3-10",
    "plans": "2-11"
  },
  "slots": [
    "sectionLabel",
    "title",
    "plans[2..3]"
  ],
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 6,
    "children": [
      {
        "el": "box",
        "span": "3-10",
        "gap": 3,
        "align": "center",
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "sectionLabel",
            "role": "eyebrow",
            "align": "center",
            "transform": "uppercase",
            "tracking": "wide"
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "align": "center",
            "transform": "uppercase",
            "weight": 400,
            "tracking": "wide",
            "maxCh": 26
          },
          {
            "el": "box",
            "mobile": "keep",
            "dir": "row",
            "gap": 2,
            "align": "center",
            "children": [
              {
                "el": "divider",
                "weight": 1
              },
              {
                "el": "shape",
                "kind": "square",
                "size": "sm",
                "fill": "accent",
                "rotate": 45
              },
              {
                "el": "divider",
                "weight": 1
              }
            ]
          }
        ]
      },
      {
        "el": "repeat",
        "span": "2-11",
        "mobile": "stack",
        "slot": "plans",
        "min": 2,
        "max": 3,
        "layout": "row",
        "gap": 4,
        "of": {
          "el": "box",
          "gap": 3,
          "pad": [
            6,
            4
          ],
          "align": "center",
          "border": "all",
          "children": [
            {
              "el": "text",
              "slot": "title",
              "role": "label",
              "align": "center",
              "transform": "uppercase",
              "tracking": "wide"
            },
            {
              "el": "text",
              "slot": "number",
              "role": "number",
              "step": 5,
              "align": "center",
              "weight": 400
            },
            {
              "el": "divider",
              "weight": 1
            },
            {
              "el": "text",
              "slot": "body",
              "role": "small",
              "align": "center",
              "maxCh": 34
            },
            {
              "el": "button",
              "slot": "cta",
              "variant": "secondary"
            }
          ]
        }
      }
    ]
  }
}

Other patterns in this design

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