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.
  • More than four KPIs in attention or spotlight. attention highlights the metric that needs the room; spotlight monumentalizes one number. Past four KPIs the visual hierarchy collapses — split into two slides.
  • 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 -->

`Financial · Q4 2026`

## 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 -->

`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 -->

`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