Joran design system

Colors: Green 

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

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

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

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

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

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

    <div class="h-48 w-48 block rounded-full p-6 m-4 shadow" style="background-color: rgb(58, 134, 45);">
        color__primary--cta: <code>rgb(58, 134, 45)</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, 255, 222",
    "200": "222, 255, 171",
    "400": "222, 255, 171",
    "600": "197, 255, 105",
    "800": "182, 255, 68",
    "900": "17, 164, 60",
    "cta": "58, 134, 45"
  }
}
  • Handle: @colors--green
  • 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.