Color

<div class="flow">
<h2>Blue</h2>
<div class='flex-row gap-m'>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-blue-100'></div>
<div class='mx-auto'>blue-100</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-blue-300'></div>
<div class='mx-auto'>blue-300</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-blue-600'></div>
<div class='mx-auto'>blue-600</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-blue-700'></div>
  <div class='mx-auto'>blue-700</div>
  </div>
</div>
<h2>Green</h2>
<div class='flex-row gap-m'>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-green-100'></div>
<div class='mx-auto'>green-100</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-green-300'></div>
<div class='mx-auto'>green-300</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-green-500'></div>
<div class='mx-auto'>green-500</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-green-600'></div>
<div class='mx-auto'>green-600</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-green-700'></div>
<div class='mx-auto'>green-700</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-green-800'></div>
  <div class='mx-auto'>green-800</div>
  </div>
</div>
<h2>Red</h2>
<div class='flex-row gap-m'>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-red-100'></div>
<div class='mx-auto'>red-100</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-red-500'></div>
<div class='mx-auto'>red-500</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-red-600'></div>
  <div class='mx-auto'>red-600</div>
  </div>
</div>
<h2>Orange</h2>
<div class='flex-row gap-m'>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-orange-100'></div>
<div class='mx-auto'>orange-100</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-orange-500'></div>
<div class='mx-auto'>orange-500</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-orange-600'></div>
  <div class='mx-auto'>orange-600</div>
  </div>
</div>
<h2>Neutral</h2>
<div class='flex-row gap-m'>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-white'></div>
<div class='mx-auto'>white</div>
</div>
<div class='flex-col gap-s'>
  <div class='rounded-full width-4xl height-4xl bg-black'></div>
    <div class='mx-auto'>black</div>
    </div>
  </div>
</div>

{{ c("color", {
  "colors": [
    "blue-100",
    "blue-300",
    "blue-600",
    "blue-700",
    "green-100",
    "green-300",
    "green-500",
    "green-600",
    "green-700",
    "green-800",
    "red-100",
    "red-500",
    "red-600",
    "orange-100",
    "orange-500",
    "orange-600",
    "white",
    "black"
  ]
}) }}