kpi — Lattice component

kpi

EvidenceLedgerStructure

Executive KPI system — one base, five layout modifiers.

Open in Playground
Variant

Use for KPI dashboards with status framing — current value, target, trend, attention-needed. Bare kpi resolves to the briefing layout; the five modifiers tune the visual emphasis for different audiences (ops, compliance, investor, headline).

dashboardscorecardmetricokr

When to use

  • Status framing matters as much as the number. Reach for kpi when the audience needs value, target, trend, AND status indicator together. For ungoverned metric rows use stats; for a single hero number use big-number.
  • Pick the modifier from the audience. Board / investor reviews use the bare briefing default. SRE / SLO reviews use ops. Auditor / regulator packs use compliance. Year-over-year growth stories use trajectory. A single hero metric with body copy uses spotlight.
  • One contract across all five. Every modifier reads the same ` eyebrow / ## headline / 1. value` / nested bullets / status pills authoring contract. Switching modifiers should never require rewriting the prose.

When not to use

  • Decorative pills without status semantics. The pills read as status, not freeform tags. Status color is assigned by each KPI's row position within the modifier — the engine never reads the pill text — so reserve them for the status vocabulary the position implies (On plan, At risk, Breaching, Compliant, Remediating). Arbitrary labels land a color that has nothing to do with the words.
  • A fifth metric — or a fourth that is not terse. The supports divide whatever the title and eyebrow leave them, so count trades against label length. Measured at a wide @size — the box a deck is authored in, and the one where nothing paginates past the budget: three is the allowance, and a short label plus a target line fits up to a two-line title, with or without an eyebrow. A fourth needs everything terse — one status pill, no eyebrow, a one-line title. A fifth fits at no label length. Past that the ledger spills, and the export clips it and names the page — nothing shrinks silently to make room. Split across slides, or use stats, which drops the targets and pills and holds more rows. (A portrait or square deck paginates instead of clipping, so a long ledger there is divided into a run rather than cut.)
  • Reaching for attention or spotlight to carry a fifth metric. attention highlights the metric that needs the room; spotlight monumentalizes one number. Both spend most of the stage on a single tile, so past four the hierarchy they exist to create collapses — split into two slides rather than crowding the hero.
  • No targets, no trends. If the KPIs carry only current values, the slide is a stats row, not a kpi dashboard. Use stats and reclaim the room.

Common mistakes

  • A KPI's lead value has no nested bullets beneath it, e.g. a bare 1. $2.4B with nothing indented under it. A bare value still renders as the big display number (slot-label-lift auto-bolds every top-level li lead regardless of nested content) — but with no nested bullet there's no metric-name label under it, so the number reads without context. Nest at least the metric-name bullet beneath each value.
  • Eyebrow paragraph placed after the heading instead of before it, or written as plain/bold text instead of inline code. The eyebrow is the section's first child — an inline-code-only paragraph before the ## heading — keep it first and backtick-wrapped, or it won't get the mono/uppercase eyebrow treatment.

Authoring

<!-- _class: kpi -->

## Revenue ahead of plan; margin and cash both expanded.

1. $2.4B
   - Total revenue
   - target $2.2B · +9% `On plan` `Board`
2. 42%
   - Gross margin
   - +2pp QoQ `On plan` `Audit`
3. $1.1B
   - Cash & equivalents
   - +$180M QoQ `On plan` `Investor`

Slots

SlotSelectorRequiredDescription
titleh2yesSlide heading naming the KPI group.
eyebrowp > codenoOptional inline-code eyebrow above the heading — mono, tracked uppercase (e.g. Financial · Q4 2026). Authored as an inline-code paragraph, not a heading, so it stays lint-safe (no heading-order violation).
kpisol > liyesOne li per KPI, authored as an ordered list (1.). The lead is the metric value (the big number) — it renders in display type automatically (no **…** needed); follow it with nested bullets for the metric name, target/trend, and status pills. The value still renders big with no nested bullets, but the tile has no metric-name label under it — always nest at least one.

Anatomy

┌─────────────────────────────────────────┐
│  header                                 │
│  ┌────────────┐  SUPPORTING KPIS        │
│  │ $2.4B      │  42%  margin     ✓      │
│  │ hero       │  $1.1B cash      ✓      │
│  │ metric     │  +18% YoY        ✓      │
│  └────────────┘                         │
│  footer                           1/19  │
└─────────────────────────────────────────┘

Variant decision rule

  • default (no modifier)Board or investor reviews — the briefing default: one hero metric left, three hairline supports right.
  • attentionOne metric is off-plan and needs to visually stand out — flags the hero tile in warn color rather than treating every metric equally.
  • opsSRE/SLO reviews — a 2×2 grid of equally-weighted metrics against service-level targets.
  • complianceAuditor or regulator packs — a vertical list with a source/citation footer, framed for legal review.
  • trajectoryInvestor or period-over-period stories — four cards emphasizing the delta (up/down), not just the current value.
  • spotlightA single hero metric with supporting body copy — monumentalizes one number rather than balancing several equally.

Variants

attentionattention

Flags the tile that misses.

<!-- _class: kpi attention -->

## attention flags the tile that misses.

1. 1
   - tile flagged
   - the miss `Attention`
2. 3
   - tiles steady
   - for context `On plan`
3. 0
   - alarms hidden
   - honesty `Board`
4. 4
   - tiles total
   - the row `On plan`

opsops

Reads the tiles against SLOs.

<!-- _class: kpi ops -->

`kpi ops`

## ops reads the tiles against SLOs.

1. 99.9%
   - the SLO frame
   - target line `SLO`
2. 4
   - tiles per row
   - unchanged `On plan`
3. 1
   - breach shown
   - never hidden `Ops`
4. 30d
   - the window
   - rolling `SLO`

compliancecompliance

Tallies findings per framework.

<!-- _class: kpi compliance -->

`kpi compliance`

## compliance tallies findings per framework.

1. 0
   - open findings
   - the goal `Clean`
2. 4
   - frameworks tracked
   - one row `Audit`
3. 1
   - in remediation
   - dated `Watch`

trajectorytrajectory

Pairs each tile with its delta.

<!-- _class: kpi trajectory -->

`kpi trajectory`

## trajectory pairs each tile with its delta.

1. +9%
   - the delta leads
   - vs plan `Up`
2. 4
   - tiles still rule
   - per row `On plan`
3. −2
   - down is shown
   - not spun `Honest`

spotlightspotlight

One tile earns double width.

<!-- _class: kpi spotlight -->

## spotlight gives one tile double width.

1. 1
   - tile promoted
   - the headline `Spotlight`
2. 2
   - support tiles
   - beside it `On plan`
3. 0
   - competing heroes
   - one only `Rule`

Related

  • statsmetric row without targets or status pills
  • big-numbera single number is the whole argument
  • split-panelone KPI with a paragraph of supporting prose
  • progresscompletion percentages across parallel workstreams
  • timeline-listmilestones in time, not metrics at a moment