<div class="padding-md">
  <div class="grid gap-sm">
    <div class="flex items-center"> 
      <div class="bg-primary-lighter height-md width-md radius-50% margin-right-xxs"></div>
      <p class="text-sm">--color-primary-lighter</p>
    </div>

    <div class="flex items-center"> 
      <div class="bg-primary-light height-md width-md radius-50% margin-right-xxs"></div>
      <p class="text-sm">--color-primary-light</p>
    </div>

    <div class="flex items-center"> 
      <div class="bg-primary height-md width-md radius-50% margin-right-xxs"></div>
      <p class="text-sm">--color-primary</p>
    </div>

    <div class="flex items-center"> 
      <div class="bg-primary-dark height-md width-md radius-50% margin-right-xxs"></div>
      <p class="text-sm">--color-primary-dark</p>
    </div>

    <div class="flex items-center"> 
      <div class="bg-primary-darker height-md width-md radius-50% margin-right-xxs"></div>
      <p class="text-sm">--color-primary-darker</p>
    </div>
    <div class="flex items-center"> 
      <div class="bg-accent-lighter height-md width-md radius-50% margin-right-xxs"></div>
      <p class="text-sm">--color-accent-lighter</p>
    </div>

    <div class="flex items-center"> 
      <div class="bg-accent-light height-md width-md radius-50% margin-right-xxs"></div>
      <p class="text-sm">--color-accent-light</p>
    </div>

    <div class="flex items-center"> 
      <div class="bg-accent height-md width-md radius-50% margin-right-xxs"></div>
      <p class="text-sm">--color-accent</p>
    </div>

    <div class="flex items-center"> 
      <div class="bg-accent-dark height-md width-md radius-50% margin-right-xxs"></div>
      <p class="text-sm">--color-accent-dark</p>
    </div>

    <div class="flex items-center"> 
      <div class="bg-accent-darker height-md width-md radius-50% margin-right-xxs"></div>
      <p class="text-sm">--color-accent-darker</p>
    </div>
  </div>
</div>

// 👉https://codyhouse.co/ds/docs/framework/colors