Joran design system

Preview: Bg 

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8" />
    <title>Jorant preview</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta property="og:title" content="" />
    <meta property="og:type" content="" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="" />

    <link rel="manifest" href="site.webmanifest" />
    <link rel="apple-touch-icon" href="icon.png" />
    <!-- Place favicon.ico in the root directory -->

    <style>
        :root {
            --color__primary--100: rgb(242, 241, 252);
            --color-raw__primary--100: 242, 241, 252;
            --color__primary--200: rgb(221, 216, 249);
            --color-raw__primary--200: 221, 216, 249;
            --color__primary--400: rgb(190, 181, 245);
            --color-raw__primary--400: 190, 181, 245;
            --color__primary--600: rgb(157, 144, 238);
            --color-raw__primary--600: 157, 144, 238;
            --color__primary--800: rgb(126, 108, 234);
            --color-raw__primary--800: 126, 108, 234;
            --color__primary--900: rgb(93, 73, 222);
            --color-raw__primary--900: 93, 73, 222;
            --color__primary--cta: rgb(93, 73, 222);
            --color-raw__primary--cta: 93, 73, 222;
        }
    </style>

    <!-- Stylesheets -->
    <link media="all" rel="stylesheet" href="../../assets/styles/style.css" />
</head>

<body style="background-color: var(--color__primary--900)">

    <!-- Scripts -->
    <script src="../../assets/scripts/flickity.pkgd.min.js"></script>
    <script src="../../assets/scripts/masonry.pkgd.min.js"></script>
    <script src="../../assets/scripts/navigation.js"></script>
    <script src="../../assets/scripts/accordeon.js"></script>
    <script src="../../assets/scripts/timeline.js"></script>
    <script src="../../assets/scripts/slider-js-nav.js"></script>
    <script src="../../assets/scripts/alert.js"></script>
</body>

</html>
 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Jorant preview</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta property="og:title" content="" />
    <meta property="og:type" content="" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="" />

    <link rel="manifest" href="site.webmanifest" />
    <link rel="apple-touch-icon" href="icon.png" />
    <!-- Place favicon.ico in the root directory -->

    {% render '@colors-inc', colors %}

    <!-- Stylesheets -->
    <link
      media="all"
      rel="stylesheet"
      href="{{ '/assets/styles/style.css' | path }}"
    />
  </head>

  <body {% if styleModifier %} class="{{ styleModifier }}"{% endif %}{% if styleAttr %} style="{{ styleAttr }}"{% endif %}>
    {{ yield | safe }}
    <!-- Scripts -->
    <script src="{{ '/assets/scripts/flickity.pkgd.min.js' | path  }}"></script>
    <script src="{{ '/assets/scripts/masonry.pkgd.min.js' | path  }}"></script>
    <script src="{{ '/assets/scripts/navigation.js' | path  }}"></script>
    <script src="{{ '/assets/scripts/accordeon.js' | path  }}"></script>
    <script src="{{ '/assets/scripts/timeline.js' | path  }}"></script>
    <script src="{{ '/assets/scripts/slider-js-nav.js' | path  }}"></script>
    <script src="{{ '/assets/scripts/alert.js' | path  }}"></script>
  </body>
</html>
 
{
  "colors": {
    "colors": {
      "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"
      }
    }
  },
  "styleAttr": "background-color: var(--color__primary--900)"
}

No notes defined.