Stat · Overprint

Example#

Volume

Paper

Colourway

Lighthouse performance: 95+
Layout shift: 0
Of free fixes: 2mo

Live render of examples/stat/basic.tsx

Usage#

Use a stat to make one number the point: a score, a speed, a count. A StatGroup sets two to four side by side, as a description list, often on the slab as "numbers you can check".

Parts. value (a preformatted string), label, an optional unit, size and line (the value in the line's text ink).
Claims you can check. source adds a footnote link under the label, to the report or page the number comes from.
No counting up. Values print at their final figure at once; the words stay still (D-H1).

Anatomy#

Lighthouse performance: 95+
Layout shift: 0
Of free fixes: 2mo

StatOne fact, divided from the next by a rule.data-mk-part="item"
ValueA numeral with an optional unit..mk-stat-value
LabelWhat was measured, under the value..mk-stat-label

Volume#

Reading layer: identical at every volume.

Quiet
Lighthouse performance
95+
Layout shift
0
Of free fixes
2mo
Docs, forms, legal and long reads. Flat inks, no art in motion.
Studio
Lighthouse performance
95+
Layout shift
0
Of free fixes
2mo
The site default. Art on its own plates, one display moment per view.
Press
Lighthouse performance
95+
Layout shift
0
Of free fixes
2mo
Hero moments, covers and campaigns. Halftone fields and the second ink.
Rave
Lighthouse performance
95+
Layout shift
0
Of free fixes
2mo
Launches, posters and the 404. Every ink, and the words still win.

Content#

The value is exact and has its unit: "0.7 s", "95+".
The label says what was measured, in a few words: "Lighthouse performance".
Every claim has a source a reader could check, or it does not go in a stat.

Do and don't#

Lighthouse performance: 95+
To first paint: 0.7s

Measured, with what was measured.

Don't

Better: 10x
Satisfaction: 100%

Numbers that measure nothing.

A stat borrows the authority of a number. Without a unit and a subject it is a slogan in a large font.

Accessibility#

StatGroup is a <dl>: the label is the term, shown under the value by CSS order.
Values never animate (words still, D-H1); a source link lets readers check the claim.

Props#

Prop	Type	Default	Description
`size`	`NumeralSize`	`m`	Default `m`.
`value` required	`string`	none	Preformatted ("95+", "0.7 s", "$3,200").
`label` required	`string`	none
`unit`	`string`	none
`line`	`"custom-apps" \| "growth" \| "maxos" \| "software" \| "websites"`	none	Prints the value in the line's text ink.
`source`	`{ readonly label: string; readonly href: string; }`	none	A footnote link to the evidence.

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from StatProps in packages/overprint-react/src/reading/stat/stat.tsx.

Tokens#

System tokens (13)

Its own properties (2)

--mk-stat-group-cols
--mk-stat-group-gap

Scanned from its CSS at build and checked against its registry entry; 6 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry