Content hierarchy specifications

Quartz content hierarchy model is supported by Figma templates and utility classes for the web platform. This page specifies the design tokens used to build them. Use these specifications to add support for additional platforms.

Layers

See the content hierarchy page for a conceptual introduction to the vertical hierarchy of layers.

The following specifications list the design tokens that must be used to implement layer styles.

main layer

• Background color: main-background
• Padding: main-padding-vertical and main-padding-horizontal
• Spacing: main-gap-children-related and main-gap-children-related

panel layer

• Background color (panel): panel-background
• Elevation: panel-elevation
• Padding: panel-padding
• Spacing: panel-gap-children-related and panel-gap-children-unrelated
• Corner radius: panel-border-radius

navigation layer

• Background color (panel and toolbar): navigation-background
• Elevation: navigation-elevation
• Padding: navigation-padding
• Spacing: navigation-gap-children-related and navigation-gap-children-unrelated
• Corner radius: navigation-border-radius

popup layer

• Background color (dialog box and notifications): popup-background
• Overlay: popup-overlay-background, popup-overlay-opacity and popup-overlay-blur
• Elevation: popup-elevation
• Padding: popup-padding
• Spacing: popup-gap-children-related and popup-gap-children-unrelated
• Corner radius: popup-border-radius

accessory layer

• Background color (floating menu): accessory-background
• Elevation: accessory-elevation
• Padding: accessory-padding
• Spacing: accessory-gap-children-related, accessory-gap-children-unrelated and accessory-gap-floating (space between the triggering object and the menu)
• Corner radius: accessory-border-radius

Sections/Subsections

TODO