Installation

The Quartz Open ecosystem is designed to be robust, flexible, and highly scalable. This section will guide you to optimal integration.

Overview

Rather than providing a monolithic library of guidelines, components, and patterns, Quartz Open is organized into multiple modules:

High-level view of the Quartz Open ecosystem modules.

• The Core is the foundation for everything else. Its modules provide the styles, guidelines, components, and patterns that all products must use.
• The Applications and Websites domains build on top of the Core. Their modules provide components and patterns shared by all products of the same nature.
• The Facets provide guidelines, patterns and components tailored for a specialized area.

Which modules should I use?

1. Your product must use the Core Foundations at a minimum. You're currently reading its instructions.
2. Then, depending on the nature of your product, you must use one of the domain foundations:
   • Task-oriented products must use the Applications Foundations module
   • Content-oriented products must use the Websites Foundations module
3. Optionally, you can enable additional Facet modules if they're relevant to your product needs.

Info

There will be a wizard for this 💡 Once the list of modules has stabilized, a wizard will guide you through picking the modules appropriate to your needs.

Tip

Web technologies aren't only for websites The fact that an application is built using web technologies or published in the cloud does not imply it falls under the Website domain. Applications are task-oriented whereas Websites are content-oriented, regardless of the technology they're using.

Modules documentation

This website hosts the documentation for all modules. Use the tabs at the top to navigate domains. Then, use the left sidebar to find the module you're interested in.

Installation steps

The high-level steps to follow to get started are:

1. Enable the Core library and the Domain library
2. (optional) Set up additional Facet libraries
3. Enable the brand styles and fonts
4. Choose one or more themes
5. Choose one or more platforms
6. (optional) Enable one or more icon libraries

Set up your Figma project

Set up your development project