Joran design system

Colors: Pink 

<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, 219, 239);">
        color__primary--100: <code>rgb(255, 219, 239)</code>
    </div>

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

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

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

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

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

    <div class="h-48 w-48 block rounded-full p-6 m-4 shadow" style="background-color: rgb(184, 0, 101);">
        color__primary--cta: <code>rgb(184, 0, 101)</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, 219, 239",
    "200": "255, 183, 222",
    "400": "255, 110, 189",
    "600": "255, 37, 156",
    "800": "220, 0, 120",
    "900": "184, 0, 101",
    "cta": "184, 0, 101"
  }
}

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.