Importance

Consistent representation of importance throughout the system.

The three levels of importance

Quartz defines three levels of importance: subdued, standard and emphasized. These importance levels are used consistently across the whole design system:

The standard level

Most content on the screen lives at the standard importance level. This is the reference level that must be used by default.

This is a standard subsection

This is standard text.

The emphasized level

To emphasize an element relative to its siblings, use the emphasized level:

This is a standard subsection

This is standard text.

This is an emphasized subsection

This is standard text with some words emphasized.

This is a standard subsection

This is standard text.

The subdued level

To remove emphasis from an element relative to its siblings, use the subdued level:

This is a standard subsection

This is standard text.

This is a subdued subsection

This is standard text. Details can be subdued.

This is a standard subsection

This is standard text.

Guidelines

Don't use a specific level because "it looks better"

Respect the visual language hierarchy by applying emphasized or subdued only to a few elements from a group.

This is an emphasized subsection

This is an emphasized subsection

This is an emphasized subsection

Don't

This is a standard subsection

This is a standard subsection

This is a standard subsection

Do

Use the standard level by default

Start by creating all your content using the standard level. Then selectively apply the emphasized or subdued levels to a few elements only.

Don't

Don't

Do