<div class="ts-metric">
<div class="ts-metric__name">Compelling element</div>
<div class="ts-meter" role="meter" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Compelling element: C, Has potential">
<div class="ts-meter__seg is-off" style="background:var(--ts-score-f-bg)">F</div>
<div class="ts-meter__seg is-off" style="background:var(--ts-score-d-bg)">D</div>
<div class="ts-meter__seg is-current" style="background:var(--ts-score-c-bg)">C</div>
<div class="ts-meter__seg is-off" style="background:var(--ts-score-b-bg)">B</div>
<div class="ts-meter__seg is-off" style="background:var(--ts-score-a-bg)">A</div>
<div class="ts-meter__seg is-off" style="background:var(--ts-score-a-plus-bg)">A+</div>
</div>
<div class="ts-metric__word" style="color:var(--ts-score-c-bg)">Has potential</div>
</div>
<div class="ts-metric">
<div class="ts-metric__name">{{name}}</div>
<div class="ts-meter" role="meter" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="100"
aria-label="{{name}}: {{grade}}, {{word}}">
{{#each bands}}
<div class="ts-meter__seg{{#unless this.current}} is-off{{/unless}}{{#if this.current}} is-current{{/if}}"
style="background:var(--ts-score-{{this.token}}-bg)">{{this.label}}</div>
{{/each}}
</div>
<div class="ts-metric__word" style="color:var(--ts-score-{{gradeToken}}-bg)">{{word}}</div>
</div>
{
"name": "Compelling element",
"value": 64,
"grade": "C",
"gradeToken": "c",
"word": "Has potential",
"bands": [
{
"token": "f",
"label": "F",
"current": false
},
{
"token": "d",
"label": "D",
"current": false
},
{
"token": "c",
"label": "C",
"current": true
},
{
"token": "b",
"label": "B",
"current": false
},
{
"token": "a",
"label": "A",
"current": false
},
{
"token": "a-plus",
"label": "A+",
"current": false
}
]
}
The one way to show a graded metric. Decided 2026-07-28; replaces the emoji-face meter, the purple block meter and the plain orange bar, which were three scales doing one job, two of them on the same panel as each other.
Six segments, one per grade band. The grade scale has six bands since F was added, so a five-segment meter cannot map to it and would disagree with the grade chip beside it. At six, the meter is the scale: a reader can see the bands, where they landed, and how far the ceiling is.
Letters, not faces. Letters carry the reading in shape as well as colour, which is the property colour-blind users need and the one a plain bar lacks. They are also more precise than a face, and they state rather than scold: a frowny face on a D editorialises, a letter does not.
Position, not fill. Only the reached band is outlined; the others stay visible but recede. Lighting every segment up to the grade reads as achievement and floods the row with colour, but hides what the bands are. These are diagnostics, so knowing “C, and the ceiling is A+” beats “four blocks lit”.
Colour comes from the score tokens (--ts-score-*), the same values as the grade chip and the arc gauge, so one score never appears in two palettes.
Do not use this for a proportion. “3 of 7 measured”, quota used, percent complete: none of those are graded, and dressing them as a grade meter implies a judgement that is not being made. Those stay a plain bar in brand purple.
Accessibility: role="meter" with an aria-label naming the metric, the grade and the word, since the segments alone are not announced usefully. Unreached segments sit at 18% opacity and are decorative, so no contrast threshold applies to them; the reached segment carries a white letter at 5.09 to 6.57 depending on band.
Narrow screens: six segments need roughly 210px. Below that the meter hides and the grade chip plus word carries the reading alone.