Quick start | Quartz Design System

In Figma

Create a new file, hit Ctrl/Cmd + Alt + O (letter O), search for "Quartz" and enable the "Core" library:

The Libraries Figma dialog window showing the result of enabling the Quartz Open Core library.

Now can use all of Quartz's components!

Try adding a button: hit Shift + I to open the "Resources" toolbar panel, search for "button", then drag and drop the qds-button component on the canvas.

The Resources drop-down showing the result of searching for 'button' and drag and dropping it on the canvas.

In code

Copy the following code to an HTML file:

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@quartzds/core@next/styles/core.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/@quartzds/generic-tokens-core@next/dist/platform/desktop.css"
      onload="document.documentElement.classList.add('qds-platform-desktop');"
    />
    <link
      rel="stylesheet"
      media="(prefers-color-scheme:light)"
      href="https://unpkg.com/@quartzds/generic-tokens-core@next/dist/theme/light.css"
      onload="document.documentElement.classList.add('qds-theme-light');"
    />
    <link
      rel="stylesheet"
      media="(prefers-color-scheme:dark)"
      href="https://unpkg.com/@quartzds/generic-tokens-core@next/dist/theme/dark.css"
      onload="document.documentElement.classList.add('qds-theme-dark');"
    />
    <script type="module">
      import { defineCustomElements } from 'https://unpkg.com/@quartzds/core@next/loader'

      defineCustomElements()
    </script>
  </head>
  <body class="qds-main">
    <div class="qds-main-section">
      <!-- Add a button here -->
    </div>
  </body>
</html>

Now can use all of Quartz's components! And the light/dark theme will match the user's preferences.

Try adding a button:

<qds-button text="Click me"></qds-button>

This will render as below, using the default generic brand (TODO):

This will activate Quartz's lazy loader, which registers components on the fly as you use them.

Next steps

🎉 Congratulations! You just experienced the simplest way of using the Quartz core components in your product, using the generic open-source brand identity.

Now you certainly want to go further by enabling your specific brand, adding navigation, and optimizing Quartz integration into your product.

Next steps​

Next steps