<div class="sb:colors">
  <div class="sb:color-group">
    <div>
      <h4 class="sb:color-name">Brand Green</h4>
      <div class="sb:color-block sb:color--green" style="color:white">Base</div>
      <div class="sb:color-block sb:color--green-light" style="color:white">
        Light
      </div>
      <div class="sb:color-block sb:color--green-dark" style="color:white">
        Dark
      </div>
      <div class="sb:color-block sb:color--green-darker" style="color:white">
        Darker
      </div>
    </div>
  </div>
  <div class="sb:color-group">
    <div>
      <h4 class="sb:color-name">Accent Yellow</h4>
      <div class="sb:color-block sb:color--yellow" style="color:black">
        Base
      </div>
      <div class="sb:color-block sb:color--yellow-light" style="color:black">
        Light
      </div>
      <div class="sb:color-block sb:color--yellow-dark" style="color:black">
        Dark
      </div>
      <div class="sb:color-block sb:color--yellow-darker" style="color:black">
        Darker
      </div>
    </div>
  </div>
  <div class="sb:color-group">
    <div>
      <h4 class="sb:color-name">Accessible Blue</h4>
      <div class="sb:color-block sb:color--blue" style="color:white">Base</div>
      <div class="sb:color-block sb:color--blue-light" style="color:white">
        Light
      </div>
      <div class="sb:color-block sb:color--blue-dark" style="color:white">
        Dark
      </div>
      <div class="sb:color-block sb:color--blue-darker" style="color:white">
        Darker
      </div>
    </div>
  </div>
  <div class="sb:color-group">
    <div>
      <h4 class="sb:color-name">BW &amp; Greyscale</h4>
      <div class="sb:color-block sb:color--black" style="color:white">
        Black
      </div>
      <div class="sb:color-block sb:color--grey" style="color:white">90%</div>
      <div class="sb:color-block sb:color--grey-80" style="color:white">
        80%
      </div>
      <div class="sb:color-block sb:color--grey-70" style="color:white">
        70%
      </div>
      <div class="sb:color-block sb:color--grey-30" style="color:black">
        30%
      </div>
      <div class="sb:color-block sb:color--grey-20" style="color:black">
        20%
      </div>
      <div class="sb:color-block sb:color--grey-10" style="color:black">
        10%
      </div>
      <div class="sb:color-block sb:color--grey-5" style="color:black">5%</div>
      <div class="sb:color-block sb:color--white" style="color:black">
        White
      </div>
    </div>
  </div>
  <div class="sb:color-group">
    <div>
      <h4 class="sb:color-name">Success Green</h4>
      <div class="sb:color-block sb:color--success" style="color:white">
        Base
      </div>
      <div class="sb:color-block sb:color--success-light" style="color:white">
        Light
      </div>
      <div class="sb:color-block sb:color--success-dark" style="color:white">
        Dark
      </div>
      <div class="sb:color-block sb:color--success-darker" style="color:white">
        Darker
      </div>
    </div>
  </div>
  <div class="sb:color-group">
    <div>
      <h4 class="sb:color-name">Warning Yellow</h4>
      <div class="sb:color-block sb:color--warning" style="color:black">
        Base
      </div>
      <div class="sb:color-block sb:color--warning-light" style="color:black">
        Light
      </div>
      <div class="sb:color-block sb:color--warning-dark" style="color:black">
        Dark
      </div>
      <div class="sb:color-block sb:color--warning-darker" style="color:black">
        Darker
      </div>
    </div>
  </div>
  <div class="sb:color-group">
    <div>
      <h4 class="sb:color-name">Error Red</h4>
      <div class="sb:color-block sb:color--error" style="color:white">Base</div>
      <div class="sb:color-block sb:color--error-light" style="color:white">
        Light
      </div>
      <div class="sb:color-block sb:color--error-dark" style="color:white">
        Dark
      </div>
      <div class="sb:color-block sb:color--error-darker" style="color:white">
        Darker
      </div>
    </div>
  </div>
</div>