Brand setup

One design system. Many brands.

What's inside a brand?

In Quartz Open, each brand lives in its own space, including its primary brand, Schneider Electric.

Every brand provides at least the assets required to use the Core library:

• Light and Dark theme styles
• Desktop and Mobile platform styles
• Core icons

A brand can also provide any number of additional assets, like:

• themes and platform styles
• one or more icon libraries
• fonts
• logotypes, illustrations, etc.

Note

The generic brand provides open-sourced styles and assets and is used as a template for all the "real" brands.

Where are the assets?

In Figma

All Quartz libraries host the variables for all the brands, themes, and platforms. (Coming soon!)

Each brand also has its own Brand > {name} project space within the Quartz design system team.

Brand libraries are named after the {brand} | {type} | {name} convention, where:

• {brand} is the brand's short name (SE, etc.)
• {type} is the type of asset (Icons, etc.)
• {name} is the custom name of the asset

In code

Each brand publishes its packages under the @quartzds NPM scope, prefixed with its brand name:

• {brand}-icons-{name}: icon libraries
• {brand}-tokens-{domain}: theme and platform styles for domain's foundations (core, apps, websites)
• {brand}-tokens-{domain}-{facet}: theme and platform styles for facets
• {brand}-fonts: additional fonts

Only the generic brand is published on the public NPM repository. Other brands are published within the Schneider Electric intranet.

Independent brands

Generic brand

The default brand shipping with Quartz, under open-source license.

Schneider Electric

Restricted access

AVEVA

This is an example.

Associated brands

APC

This is an example.

Clipsal

This is an example.