Joran design system

Colors: Blue 

<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(235, 241, 247);">
        color__primary--100: <code>rgb(235, 241, 247)</code>
    </div>

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

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

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

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

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

    <div class="h-48 w-48 block rounded-full p-6 m-4 shadow" style="background-color: rgb(0, 165, 220);">
        color__primary--cta: <code>rgb(0, 165, 220)</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": "235, 241, 247",
    "200": "204, 220, 234",
    "400": "153, 185, 213",
    "600": "102, 150, 192",
    "800": "51, 115, 171",
    "900": "0, 80, 150",
    "cta": "0, 165, 220"
  }
}

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.