Joran design system

Colors: Default 

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

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

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

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

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

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

    <div class="h-48 w-48 block rounded-full p-6 m-4 shadow" style="background-color: rgb(93, 73, 222);">
        color__primary--cta: <code>rgb(93, 73, 222)</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": "242, 241, 252",
    "200": "221, 216, 249",
    "400": "190, 181, 245",
    "600": "157, 144, 238",
    "800": "126, 108, 234",
    "900": "93, 73, 222",
    "cta": "93, 73, 222"
  }
}
  • Handle: @colors--default
  • 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.