A bounded quantity read as a meter: the box’s bottom edge is the bar. --value is 0..1, like .ring. No fill class is the resting look. A measured 0% draws a real, empty gauge; .gauge-unknown has no bar at all, so absence can never be read as zero.
Account
Session
Day
Week
Cycle
Scoped
acct-alpha
0%
41%
74%
82%
94%
acct-beta
—
5%
75%
100%
—
Outside a table, and where a high value is good. The right-hand gauge shows the optional colourless threshold tick at 80%.
96%62%
In a stretching flex or grid row the box grows to match its tallest sibling and the bar stays welded to the bottom edge — the premise of the component. The middle gauge carries the threshold tick at the very top of its range, where the tick must still read as a mark and not as the frame.
33%88%A sibling tall enough to stretch the row
Modal (native <dialog>)
Focus trap, Esc, backdrop, and open/close all come from the platform.
Typography
d900 — Display titles
d800 — Display sections
d700 — Display subsections
h900 — Page titles
h800 — Section titles
h700 — Card group titles
h600 — Modal titles
h500 — Widget titles
h400 — Field group titles
h300 — Column headers
h200 — Field labels
h100 — Fine print
Body text with a link, inline code, and subtle text.