TubeSpanner Style Guide

Score meter: Poor score 

<div class="ts-metric">
    <div class="ts-metric__name">Retention</div>
    <div class="ts-meter" role="meter" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100" aria-label="Retention: F, Very poor">
        <div class="ts-meter__seg is-current" 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-off" 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-f-bg)">Very poor</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": "Retention",
  "value": 22,
  "grade": "F",
  "gradeToken": "f",
  "word": "Very poor",
  "bands": [
    {
      "token": "f",
      "label": "F",
      "current": true
    },
    {
      "token": "d",
      "label": "D",
      "current": false
    },
    {
      "token": "c",
      "label": "C",
      "current": false
    },
    {
      "token": "b",
      "label": "B",
      "current": false
    },
    {
      "token": "a",
      "label": "A",
      "current": false
    },
    {
      "token": "a-plus",
      "label": "A+",
      "current": false
    }
  ]
}

The F band exists precisely so a bad score is stated plainly rather than shown as an almost-empty bar.