cta.blueprint-approval-block · Approval block

A cta pattern from Blueprint, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 8. Give the section root data-pattern="cta.blueprint-approval-block". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A ruled approval panel on surface: a condensed-caps title at step 6 and a line on 1–8 with the buttons; on 9–12, divided by a rule, an inline email form over three ruled approval cells (key over value).
Slots
label, title, body, cta, cta2, newsletter, facts[3..3]
Notes
The right cell is the drawing's APPROVED / CHECKED box: the form is the signature line.
Tokens
bg #134A86 · text #E6F1FC · heading #FFFFFF · accent #FFFFFF · accent2 #9FDCFF · IBM Plex Sans Condensed / IBM Plex Sans · radius 0px · space unit 4px (full list in design/tokens.json)
Section
background surface

Pattern notes

  • A `surface` band split by one vertical rule. On 1–8, padded 8 × 6: the annotation, the title at step 6 in condensed caps (max 18 ch), a muted line (max 52 ch) and the buttons. On 9–12: the inline email form as the signature line, then three key/value rows split by rules (`APPROVED`, `CHECKED`, `DATE` style keys in muted mono, values in bold mono).

Next step

Have a hard thing to explain?

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 projectRead case studies
you@example.com
Subscribe

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Layout tree (as in design/layout.json)
{
  "pattern": "cta.blueprint-approval-block",
  "kind": "cta",
  "slots": [
    "label",
    "title",
    "body",
    "cta",
    "cta2",
    "newsletter",
    "facts[3..3]"
  ],
  "notes": "The right cell is the drawing's APPROVED / CHECKED box: the form is the signature line.",
  "bg": "surface",
  "tree": {
    "el": "grid",
    "gap": 0,
    "align": "stretch",
    "children": [
      {
        "el": "box",
        "span": "1-8",
        "gap": 5,
        "pad": [
          8,
          6
        ],
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "label",
            "role": "label",
            "font": "mono"
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "step": 6,
            "transform": "uppercase",
            "weight": 600,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 18
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "body",
            "role": "body",
            "maxCh": 52
          },
          {
            "el": "box",
            "dir": "row",
            "gap": 3,
            "wrap": true,
            "children": [
              {
                "el": "button",
                "slot": "cta",
                "variant": "primary",
                "arrow": true
              },
              {
                "el": "button",
                "slot": "cta2",
                "variant": "ghost"
              }
            ]
          }
        ]
      },
      {
        "el": "box",
        "span": "9-12",
        "gap": 6,
        "pad": [
          8,
          6
        ],
        "justify": "center",
        "border": "left",
        "children": [
          {
            "el": "form",
            "slot": "newsletter",
            "fields": [
              "email"
            ],
            "inline": true
          },
          {
            "el": "repeat",
            "slot": "facts",
            "min": 3,
            "max": 3,
            "layout": "list",
            "gap": 2,
            "divider": true,
            "of": {
              "el": "box",
              "mobile": "keep",
              "dir": "row",
              "gap": 3,
              "align": "baseline",
              "justify": "between",
              "children": [
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "label",
                  "role": "small",
                  "transform": "uppercase",
                  "font": "mono"
                },
                {
                  "el": "text",
                  "slot": "title",
                  "role": "small",
                  "align": "right",
                  "weight": 700,
                  "font": "mono"
                }
              ]
            }
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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