list.blueprint-parts-schedule · Parts schedule

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

Rule
A bill of materials in a ruled frame: a header strip, then rows split by 1 px rules: mono item number on 1, condensed-caps part name on 2–5, description on 6–10, mono quantity/tag right-aligned on 11–12.
Slots
label, title, meta, items[5..6]
Notes
A parts list (ITEM · PART · DESCRIPTION · QTY). On phones the description stays and the tag drops under the name.
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)

Pattern notes

  • A parts list. Heading row: annotation and a step-4 caps title left, a muted mono note right. Then a 1 px frame of five or six rows split by rules, padded 3 × 4, on one baseline: the mono item number in the accent on 1, the part name in caps at step 1 on 2–5, the muted description on 6–10, a mono tag in `link` right-aligned on 11–12 (quantity, status or price).

Index

Services

Booking projects from June 2026

01

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

2 weeks

02

Positioning workshop

A day with your leadership to agree on one story.

1 day

03

Identity design

Logo, type, colour, motion and a working toolkit.

8 weeks

04

Website

Strategy, copy, design and build in Webflow or Next.js.

10 weeks

05

Launch support

Training, templates and a month of on-call design.

4 weeks

Layout tree (as in design/layout.json)
{
  "pattern": "list.blueprint-parts-schedule",
  "kind": "list",
  "slots": [
    "label",
    "title",
    "meta",
    "items[5..6]"
  ],
  "notes": "A parts list (ITEM · PART · DESCRIPTION · QTY). On phones the description stays and the tag drops under the name.",
  "tree": {
    "el": "box",
    "gap": 6,
    "children": [
      {
        "el": "box",
        "dir": "row",
        "gap": 6,
        "align": "end",
        "justify": "between",
        "wrap": true,
        "children": [
          {
            "el": "box",
            "gap": 3,
            "children": [
              {
                "el": "text",
                "color": "link",
                "slot": "label",
                "role": "label",
                "font": "mono"
              },
              {
                "el": "text",
                "slot": "title",
                "role": "h2",
                "step": 4,
                "transform": "uppercase",
                "weight": 600,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 24
              }
            ]
          },
          {
            "el": "text",
            "mobile": "hide",
            "color": "textMuted",
            "slot": "meta",
            "role": "small",
            "transform": "uppercase",
            "font": "mono"
          }
        ]
      },
      {
        "el": "box",
        "border": "all",
        "children": [
          {
            "el": "repeat",
            "slot": "items",
            "min": 5,
            "max": 6,
            "layout": "list",
            "gap": 0,
            "divider": true,
            "of": {
              "el": "grid",
              "gap": 4,
              "pad": [
                3,
                4
              ],
              "align": "baseline",
              "children": [
                {
                  "el": "text",
                  "span": "1-1",
                  "color": "link",
                  "slot": "number",
                  "role": "label",
                  "weight": 700,
                  "font": "mono"
                },
                {
                  "el": "text",
                  "span": "2-5",
                  "slot": "title",
                  "role": "h4",
                  "step": 1,
                  "transform": "uppercase",
                  "weight": 600
                },
                {
                  "el": "text",
                  "span": "6-10",
                  "color": "textMuted",
                  "slot": "body",
                  "role": "small"
                },
                {
                  "el": "text",
                  "span": "11-12",
                  "color": "link",
                  "slot": "meta",
                  "role": "small",
                  "align": "right",
                  "transform": "uppercase",
                  "font": "mono"
                }
              ]
            }
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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