Joran design system

Preview: Print 

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

<head>
    <meta charset="utf-8" />
    <title>Jorant print preview</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 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>

</body>

</html>
 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Jorant print preview</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 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>
    {{ yield | safe }}
  </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"
      }
    }
  }
}

No notes defined.