Joran design system

Colors: Orange 

<div class="flex flex-row flex-wrap">

    <div class="h-48 w-48 block rounded-full p-6 m-4 shadow" style="background-color: rgb(255, 244, 235);">
        color__primary--100: <code>rgb(255, 244, 235)</code>
    </div>

    <div class="h-48 w-48 block rounded-full p-6 m-4 shadow" style="background-color: rgb(255, 213, 173);">
        color__primary--200: <code>rgb(255, 213, 173)</code>
    </div>

    <div class="h-48 w-48 block rounded-full p-6 m-4 shadow" style="background-color: rgb(255, 171, 92);">
        color__primary--400: <code>rgb(255, 171, 92)</code>
    </div>

    <div class="h-48 w-48 block rounded-full p-6 m-4 shadow" style="background-color: rgb(185, 89, 0);">
        color__primary--600: <code>rgb(185, 89, 0)</code>
    </div>

    <div class="h-48 w-48 block rounded-full p-6 m-4 shadow" style="background-color: rgb(143, 69, 0);">
        color__primary--800: <code>rgb(143, 69, 0)</code>
    </div>

    <div class="h-48 w-48 block rounded-full p-6 m-4 shadow" style="background-color: rgb(102, 49, 0);">
        color__primary--900: <code>rgb(102, 49, 0)</code>
    </div>

    <div class="h-48 w-48 block rounded-full p-6 m-4 shadow" style="background-color: rgb(204, 99, 0);">
        color__primary--cta: <code>rgb(204, 99, 0)</code>
    </div>

</div>
 
<div class="flex flex-row flex-wrap">
  {% for name, value in primary %}
  <div
    class="h-48 w-48 block rounded-full p-6 m-4 shadow"
    style="background-color: rgb({{ value }});"
  >
    color__primary--{{ name }}: <code>rgb({{ value }})</code>
  </div>
  {% endfor %}
</div>
 
{
  "primary": {
    "100": "255, 244, 235",
    "200": "255, 213, 173",
    "400": "255, 171, 92",
    "600": "185, 89, 0",
    "800": "143, 69, 0",
    "900": "102, 49, 0",
    "cta": "204, 99, 0"
  }
}
  • Handle: @colors--orange
  • Preview:
  • Filesystem Path: src/components/01-Design Tokens/colors/colors/colors.nunj

Colors

Colors can be set by systems.

These values can be set as custom properties inside a <style> tag in the <head> of the page.