Meter

A 32px bar in the data color on the gray track. A target is a white cut through the bar with a black triangle above it; anything past the target is hashed.

Split bar

One whole in two or three parts, darkest first. .sys-split--remainder pairs the main step with the lightest for “value vs. what’s left”.

Stipulations

• 32px tall, square ends, no outline.
• Set role="meter" and the value attributes; the target mark and hash are decoration (aria-hidden if they’re separate elements with content).
• Only draw .sys-meter__over when the value is past the target. Below target, the meter is plain.
• The verdict goes in words beside the meter (“On target”), not in the bar’s color.
• Split bars use a 3px white gap between parts; a remainder split has no gap.