Vzzdxa

<div class="flex-container">
  <div class="color black">$black: #000; 7.7%</div>
  <div class="color imageCardLabel">$imageCardLabel: #171A20; 1.5%</div>
  <div class="color oneF">$oneF: #1F2731; 1%</div>
  <div class="color dropdownMenuItemText">$dropdownMenuItemText: #252B33; 2.6%</div>
  <div class="color imageCardBackground">$imageCardBackground: #303641; 1%</div>
</div>
<div class="flex-container">
  <div class="color three">$three: #333; 1%</div>
  <div class="color sidenavMenuItem">$sidenavMenuItem: #4A4A4A; 4.1%</div>
  <div class="color dnsTitle">$dnsTitle: #4E4E4E; 2.6%</div>
  <div class="color seven">$seven: #777; 1%</div>
  <div class="color paragraphText">$paragraphText: #898989; 2.1%</div>
</div>
<div class="flex-container">
  <div class="color nineB">$nineB: #9B9B9B; 1%</div>
  <div class="color nineSeven">$nineSeven: #979797; 1%</div>
  <div class="color dropdownTitle">$dropdownTitle: #AAABAE; 6.2%</div>
  <div class="color dialogGrey">$dialogGrey: #D8D8D8; 4.1%</div>
  <div class="color cardFooterBorder">$cardFooterBorder: #E0E0E0; 7.7%</div>
</div>
<div class="flex-container">
  <div class="color darkgrey">$darkgrey: #e2e2e2; 7.7%</div>
  <div class="color defaultBackgroundColor">$defaultBackgroundColor: #F1F1F1;7.7%</div>
  <div class="color dropdownMenuItem">$dropdownMenuItem: #F7F7F7; 3.6%</div>
  <div class="color fontcolorlight">$font-color-light: #fff; 4.1%</div>
</div>
<hr>
<div class="flex-container">
  errors
  <div class="color valid">$valid: #008000; 0.5%</div>
  <div class="color error">$error: #ff0000; 6.2%</div>
</div>

<hr>
<div class="flex-container">
   dialog gradient
  <div class="color threeZero">$threeZero: #3023AE; 1%</div>
  <div class="color threeD">$threeD: #3D29B1; 1%</div>
  <div class="color cEight">$cEight: #C86DD7;  1%</div>
</div>

<div class="flex-container">
  bonfire
  <div class="color bonfireBlue">$bonfireBlue: #29ABE2; 12.8%</div>
  <div class="color bonfireRed">$bonfireRed: #F15A29; 2.6%</div>
</div>