TubeSpanner Style Guide

Progress Bar: At limit 

<div style="font-family:'Satoshi';">
    <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
        <span style="font-size:0.875rem;color:var(--title);font-weight:500;">Video ideas used</span>
        <span style="font-size:0.875rem;color:var(--paragraph);">100%</span>
    </div>
    <div class="progress" style="height:8px;">
        <div class="progress-bar" style="width:100%;" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>
 
<div style="font-family:'Satoshi';">
  {{#if label}}
  <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
    <span style="font-size:0.875rem;color:var(--title);font-weight:500;">{{label}}</span>
    <span style="font-size:0.875rem;color:var(--paragraph);">{{value}}%</span>
  </div>
  {{/if}}
  <div class="progress" style="height:8px;">
    <div class="progress-bar" style="width:{{value}}%;" role="progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>
 
{
  "value": 100,
  "label": "Video ideas used"
}

Bootstrap .progress with 8px height and purple fill (--primary-color). Used for usage limits (scripts used/remaining), channel objective progress, and stat cards. Always show percentage label.