Components

The furniture around charts: titles, sources, KPI cards, status chips, callouts. Same role contract, same determinism, composable into recipes.

CP-CAL-01

INSIGHT CALLOUT

A short so-what box beside a visual: lead line in ink, supporting lines in body, primary-colored bar on the left edge.

DL-02
Slippage steady since May. Recovery plan due Wednesday with the logistics contractor.
DL-03
Slippage steady since May. Recovery plan due Wednesday with the logistics contractor.
DL-08
Slippage steady since May. Recovery plan due Wednesday with the logistics contractor.
  • first line is the lead (ink, weight 600); the rest support it
  • a callout states a consequence or an ask, never repeats the chart title
  • one callout per visual maximum
CP-CAL-02

EXCEPTION ROW

One exception, one line: status bar + dot, bold claim, owner and due date right. Stacked into exception lists on one-pagers.

DL-02
Docs on-time missed target by 14 points DOC CONTROL . FRI 12:00
DL-03
Docs on-time missed target by 14 points DOC CONTROL . FRI 12:00
DL-08
Docs on-time missed target by 14 points DOC CONTROL . FRI 12:00
  • one exception per row; the claim carries a number
  • owner and due in caps, right-aligned: every exception is owned
  • status colors the bar and dot only, never the whole row
CP-KPI-01

KPI CARD

One number that matters, with its label and week-over-week delta. Used in strips of 5 maximum.

DL-02
DELIVERED 1,284 +179 vs W27
DL-03
DELIVERED 1,284 +179 vs W27
DL-08
DELIVERED 1,284 +179 vs W27
  • value in tabular figures; delta always signed and always named against its reference
  • tone (positive/negative/neutral) is semantic, set by the data, not by the sign
  • maximum 5 cards per strip; more means the page has no message
CP-KPI-02

BIG NUMBER

The one number a page exists for: caps label, display-size value, one context line. One per page maximum.

DL-02
SCOPE COMPLETE 62% +4 points vs last week
DL-03
SCOPE COMPLETE 62% +4 points vs last week
DL-08
SCOPE COMPLETE 62% +4 points vs last week
  • one big number per page; two big numbers mean no message
  • the context line names the reference, always
  • value in the display font, primary role
CP-LAB-01

LEADER-LINE ANNOTATION

The standalone annotation: dot on the fact, elbow leader, italic note. The house style for pointing at evidence.

DL-02
gap widens from April
DL-03
gap widens from April
DL-08
gap widens from April
  • the dot sits ON the fact; the leader never crosses other marks
  • italic body role: annotations comment, they do not shout
  • anchor start or end, chosen so text grows away from the chart
CP-STA-01

STATUS CHIP

A status marker that survives color-blindness and bad projectors: outlined chip, status-colored dot, the status word in ink.

DL-02
WATCH . CUSTOMS
DL-03
WATCH . CUSTOMS
DL-08
WATCH . CUSTOMS
  • the word is mandatory; the dot and border alone are never a status
  • text in ink on the page background, so contrast never depends on the status color
  • width is set by the caller (deterministic), not measured from text
CP-STA-02

OUTLINED STAMP

Blueprint-register stamp: double-outlined CAPS word for document-grade statuses (ISSUED, HOLD, SUPERSEDED).

DL-02
ISSUED FOR REVIEW
DL-03
ISSUED FOR REVIEW
DL-08
ISSUED FOR REVIEW
  • tone is semantic (positive, negative, neutral), set by the data
  • letter-spaced caps, centered; the double outline is the signature
  • never rotated: legibility beats theater
CP-STR-01

HEADER BAND

Full-width page header: title left, meta (date, page, reference) right, ruled base.

DL-02
Weekly progress review WEEK 28 . PAGE 1 OF 6
DL-03
Weekly progress review WEEK 28 . PAGE 1 OF 6
DL-08
Weekly progress review WEEK 28 . PAGE 1 OF 6
  • meta in caps, right-aligned, letter-spaced
  • the primary rule anchors the band to the page
  • title in the display font
CP-STR-02

DRAWING TITLE BLOCK

Engineering-register block: labeled rows (project, document, revision, date) in a framed grid, bottom-right of technical pages.

DL-02
PROJECT Sample program DOCUMENT Weekly readiness board REVISION C . issued for review DATE 2026-07-12
DL-03
PROJECT Sample program DOCUMENT Weekly readiness board REVISION C . issued for review DATE 2026-07-12
DL-08
PROJECT Sample program DOCUMENT Weekly readiness board REVISION C . issued for review DATE 2026-07-12
  • labels caps 8px, values below; the frame is ink, rows hairline
  • revision rows name the revision letter AND its status
  • bottom-right placement on technical pages
CP-TXT-01

ACTION TITLE

The page's governing thought: a full sentence with a number, plus the DL's chrome (kicker and eyebrow) when the language asks for it.

DL-02
Erection recovered to 84%, six days behind forecast
DL-03
PROGRESS . WEEK 28 Erection recovered to 84%, six days behind forecast
DL-08
Erection recovered to 84%, six days behind forecast
  • the title is a full sentence stating the finding with a number; no verb or no number means rewrite
  • eyebrow and kicker render only when the DL chrome asks; the component never invents them
  • one action title per page
CP-TXT-02

SOURCE LINE

The data provenance line, bottom-left of every page that shows data. Non-negotiable across all languages.

DL-02
Source: sample dataset v1, 2026-07-12
DL-03
Source: sample dataset v1, 2026-07-12
DL-08
Source: sample dataset v1, 2026-07-12
  • always bottom-left, always present when the page shows data
  • states source name and as-of date
  • missing data is declared here, never silently omitted