Color

<div class="flow">
<h2>Cream</h2>
<div class='flex-row justify-start gap-m'>
<div class='flex-col gap-s'>
<div class='rounded-full width-8 height-8 bg--cream-50'></div>
<div class='mx-auto'>Cream 50</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-8 height-8 bg--cream-100'></div>
  <div class='mx-auto'>Cream 100</div>
  </div>
</div>
<h2>Orange</h2>
<div class='flex-row justify-start gap-m'>
<div class='flex-col gap-s'>
<div class='rounded-full width-8 height-8 bg--orange-500'></div>
<div class='mx-auto'>Orange 500</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-8 height-8 bg--orange-700'></div>
  <div class='mx-auto'>Orange 700</div>
  </div>
</div>
<h2>Purple</h2>
<div class='flex-row justify-start gap-m'>
<div class='flex-col gap-s'>
<div class='rounded-full width-8 height-8 bg--purple-100'></div>
<div class='mx-auto'>Purple 100</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-8 height-8 bg--purple-650'></div>
<div class='mx-auto'>Purple 650</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-8 height-8 bg--purple-700'></div>
  <div class='mx-auto'>Purple 700</div>
  </div>
</div>
<h2>Gradients</h2>
<div class='flex-row justify-start gap-m'>
<div class='flex-col gap-s'>
<div class='rounded-full width-8 height-8 bg--gradient bg--cream-150-to-purple-100'></div>
<div class='mx-auto'>Cream 150 to Purple 100</div>
</div>
<div class='flex-col gap-s'>
<div class='rounded-full width-8 height-8 bg--gradient bg--purple-50-to-cream-150'></div>
<div class='mx-auto'>Purple 50 to Cream 150</div>
</div>
<div class='flex-col gap-s'>
  <div class='rounded-full width-8 height-8 bg--gradient bg--purple-50-to-cream-50'></div>
    <div class='mx-auto'>Purple 50 to Cream 50</div>
    </div>
  </div>
</div>

{{ c("color", {
  "colors": {
    "cream-50": "Cream 50",
    "cream-100": "Cream 100",
    "orange-500": "Orange 500",
    "orange-700": "Orange 700",
    "purple-100": "Purple 100",
    "purple-650": "Purple 650",
    "purple-700": "Purple 700"
  },
  "gradients": {
    "cream-150-to-purple-100": "Cream 150 to Purple 100",
    "purple-50-to-cream-150": "Purple 50 to Cream 150",
    "purple-50-to-cream-50": "Purple 50 to Cream 50"
  }
}) }}