Color

<div class="flow">
<h2>Reds</h2>
<div class='flex-row flex-wrap gap-m'>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-red-200'></div>
<div class='mx-auto'>red-200</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>
<h2>Golds</h2>
<div class='flex-row flex-wrap gap-m'>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-gold-100'></div>
<div class='mx-auto'>gold-100</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-gold-150'></div>
<div class='mx-auto'>gold-150</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-gold-300'></div>
<div class='mx-auto'>gold-300</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-gold-400'></div>
<div class='mx-auto'>gold-400</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-gold-500'></div>
  <div class='mx-auto'>gold-500</div>
  </div>
</div>
<h2>Greens</h2>
<div class='flex-row flex-wrap gap-m'>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-green-50'></div>
<div class='mx-auto'>green-50</div>
</div>
<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-150'></div>
<div class='mx-auto'>green-150</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-green-200'></div>
  <div class='mx-auto'>green-200</div>
  </div>
</div>
<h2>Blues</h2>
<div class='flex-row flex-wrap gap-m'>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-blue-50'></div>
<div class='mx-auto'>blue-50</div>
</div>
<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-150'></div>
<div class='mx-auto'>blue-150</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-blue-200'></div>
<div class='mx-auto'>blue-200</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-blue-250'></div>
<div class='mx-auto'>blue-250</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-400'></div>
<div class='mx-auto'>blue-400</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-blue-450'></div>
<div class='mx-auto'>blue-450</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-blue-500'></div>
<div class='mx-auto'>blue-500</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-blue-550'></div>
<div class='mx-auto'>blue-550</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>Neutrals</h2>
<div class='flex-row flex-wrap 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 class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-grey-50'></div>
<div class='mx-auto'>grey-50</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-grey-100'></div>
<div class='mx-auto'>grey-100</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-grey-150'></div>
<div class='mx-auto'>grey-150</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-grey-200'></div>
<div class='mx-auto'>grey-200</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-grey-300'></div>
<div class='mx-auto'>grey-300</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-4xl height-4xl bg-grey-400'></div>
<div class='mx-auto'>grey-400</div>
</div>
<div class='flex-col gap-s'>
  <div class='rounded-full width-4xl height-4xl bg-grey-600'></div>
    <div class='mx-auto'>grey-600</div>
    </div>
  </div>
</div>

{{ c("color", {
  "colors": [
    "white",
    "black",
    "grey-50",
    "grey-100",
    "grey-150",
    "grey-200",
    "grey-300",
    "grey-400",
    "grey-600",
    "red-200",
    "red-500",
    "blue-50",
    "blue-100",
    "blue-150",
    "blue-200",
    "blue-250",
    "blue-300",
    "blue-400",
    "blue-450",
    "blue-500",
    "blue-550",
    "blue-600",
    "blue-700",
    "gold-100",
    "gold-150",
    "gold-300",
    "gold-400",
    "gold-500",
    "green-50",
    "green-100",
    "green-150",
    "green-200"
  ]
}) }}