Stat Strip

One statistic at display size in an inverted panel, its history as the panel floor, and the other three as a rail beside it. The fill is the consumer's own primary / primary-foreground pair, so it carries their brand and clears 4.5:1 in both the light and the dark default; muted text inside it switches to primary-foreground/75 rather than a grey mixed for the page. The rail drops its sparklines on purpose — one readable chart beats four thumbnails. Run the pointer along that floor: it snaps to the nearest quarter rather than following the cursor, a dot marks the point, and one bubble names the quarter and prints the value in the figure's own formatting. The bubble is a single fixed node on the body, because the panel is overflow-hidden and rounded and anything positioned inside it is clipped at the edge.

A hairline row cannot take a fill without ceasing to be a row, so emphasis lands as a short primary rule above the band and moves every sparkline onto the primary token. The deltas run up, down and flat — each a glyph plus the word, never a colour, and never a judgement: a falling churn rate and a falling headcount get the same downward mark. Two charts here, one readout: hover ARR and the bubble names a quarter, hover churn and it says “Point 3 of 7”, because that series was left unlabelled on purpose. Both also print their whole history as sr-only text — every point, the low, the high and the latest — which is the route on touch, where there is no hover to have.

lead={false} returns the band to equal columns for figures that are peers, and none of these three carries a delta, a series or any emphasis. This is the quietest thing the item can render, and it has to read as finished rather than as three cells waiting for data.

Bordered cells for a page section, and a label long enough to wrap two lines. The emphasised cell keeps its border in the fill's own colour, so it is exactly the size of the cells beside it. The lead is a row-only idea: in a grid that wraps, no cell is the headline — which is why emphasis marks the first cell here instead.

One sentence-like run for a hero or a footer, clauses separated by a hairline — a different shape, not the grid with smaller gaps. Notes, deltas and sparklines are all dropped here, and emphasis is ignored outright: a filled clause inside a sentence is a highlighter mark.

Support satisfaction has no number yet: an em dash with an accessible “not available”, keeping its slot, because a zero here would be a claim nobody made. Its delta and series are dropped with it — a change against a number you do not have is not a fact.

The feature layout has the most to hold open, so it is the one worth showing empty: skeletons at the hero figure's real height, at the panel chart's height, and on each rail row that declares a delta. Nothing moves when the numbers land, and the pulse has a reduced-motion path.