Z-Index

border-radius-0

border-radius-050

border-radius-100

border-radius-150

border-radius-200

border-radius-300

border-radius-400

border-radius-500

border-radius-750

border-radius-full

border-width-0

border-width-0165

border-width-025

border-width-050

border-width-100

Commonly used for sizing containers (e.g. max-width). See below for media query usage.

breakpoints-xs

breakpoints-sm

breakpoints-md

breakpoints-lg

breakpoints-xl

color-scheme

The default background color of the admin.

color-bg

Use for high contrast page or component backgrounds.

color-bg-inverse

The background color for elements with the highest level of prominence, like a card.

color-bg-surface

The hover state color for elements with the highest level of prominence.

color-bg-surface-hover

The active state (on press) color for elements with the highest level of prominence.

color-bg-surface-active

The selected state color for elements with the highest level of prominence.

color-bg-surface-selected

color-bg-surface-disabled

The background color for elements with a secondary level of prominence.

color-bg-surface-secondary

The hover state color for elements with a secondary level of prominence.

color-bg-surface-secondary-hover

The active state (on press) color for elements with a secondary level of prominence.

color-bg-surface-secondary-active

The selected state color for elements with a secondary level of prominence.

color-bg-surface-secondary-selected

The background color for elements with a third level of prominence.

color-bg-surface-tertiary

The hover state color for elements with a third level of prominence.

color-bg-surface-tertiary-hover

The active state (on press) color for elements with a third level of prominence.

color-bg-surface-tertiary-active

color-bg-surface-brand

color-bg-surface-brand-hover

The active state (on press) color for key elements.

color-bg-surface-brand-active

The selected state color for key elements.

color-bg-surface-brand-selected

Use for backgrounds communicating important information, like banners.

color-bg-surface-info

The hover state color for communicating important information.

color-bg-surface-info-hover

The active state (on press) color for communicating important information.

color-bg-surface-info-active

Use for backgrounds communicating success, like banners.

color-bg-surface-success

The hover state color for communicating success.

color-bg-surface-success-hover

The active state (on press) color for communicating success.

color-bg-surface-success-active

Use for backgrounds communicating caution, like banners.

color-bg-surface-caution

The hover state for communicating caution.

color-bg-surface-caution-hover

The active state (on press) color for communicating caution.

color-bg-surface-caution-active

Use for backgrounds communicating warning, like banners.

color-bg-surface-warning

The hover state color for communicating warning.

color-bg-surface-warning-hover

The active state (on press) color for communicating warning.

color-bg-surface-warning-active

Use for backgrounds communicating critical information, like banners or input errors.

color-bg-surface-critical

The hover state color for communicating critical information.

color-bg-surface-critical-hover

The active state (on press) color for communicating critical information.

color-bg-surface-critical-active

Use for backgrounds indicating areas of focus in editors, such as the theme editor.

color-bg-surface-emphasis

The hover state color for elements indicating areas of focus in editors.

color-bg-surface-emphasis-hover

The active state (on press) color for elements indicating areas of focus in editors.

color-bg-surface-emphasis-active

Use for backgrounds of elements suggested by magic AI.

color-bg-surface-magic

The hover state color for elements suggested by magic AI.

color-bg-surface-magic-hover

The active state (on press) color for elements suggested by magic AI.

color-bg-surface-magic-active

color-bg-surface-inverse

Use for elements that need a fully transparent background.

color-bg-surface-transparent

The background color of contained elements with a smaller surface area, like a button.

color-bg-fill

The hover state color of contained elements with a smaller surface area, like a button.

color-bg-fill-hover

The active state (on press) color of contained elements with a smaller surface area, like a button.

color-bg-fill-active

The selected state color of contained elements with a smaller surface area, like a button or checkbox.

color-bg-fill-selected

The disabled state color of contained elements with a smaller surface area, like a button.

color-bg-fill-disabled

The background color of elements with a smaller surface area and a secondary level of prominence.

color-bg-fill-secondary

The hover state color of elements with a smaller surface area and a secondary level of prominence.

color-bg-fill-secondary-hover

The active state (on press) color of elements with a smaller surface area and a secondary level of prominence.

color-bg-fill-secondary-active

The selected state (on press) color of elements with a smaller surface area and a secondary level of prominence.

color-bg-fill-secondary-selected

The background color of elements with a smaller surface area and a third level of prominence.

color-bg-fill-tertiary

The hover state color of elements with a smaller surface area and a third level of prominence.

color-bg-fill-tertiary-hover

The active state (on press) color of elements with a smaller surface area and a third level of prominence.

color-bg-fill-tertiary-active

The background color of main actions, like primary buttons.

color-bg-fill-brand

The hover state color of main actions, like primary buttons.

color-bg-fill-brand-hover

The active state (on press) color of main actions, like primary buttons.

color-bg-fill-brand-active

The selected state color of main actions, like primary buttons.

color-bg-fill-brand-selected

The disabled state color of main actions, like primary buttons.

color-bg-fill-brand-disabled

Use for backgrounds communicating important information on elements with a smaller surface area, like a badge or button.

color-bg-fill-info

The hover state color for communicating important information on elements with a smaller surface area.

color-bg-fill-info-hover

The active state (on press) color for communicating important information on elements with a smaller surface area.

color-bg-fill-info-active

Use for backgrounds communicating important information on elements with a smaller surface area, with a secondary level of prominence.

color-bg-fill-info-secondary

Use for backgrounds communicating success on elements with a smaller surface area, like a badge or a banner.

color-bg-fill-success

The hover state color for communicating success on elements with a smaller surface area.

color-bg-fill-success-hover

The active state (on press) color for communicating success on elements with a smaller surface area.

color-bg-fill-success-active

Use for backgrounds communicating success on elements with a smaller surface area, with a secondary level of prominence.

color-bg-fill-success-secondary

Use for backgrounds communicating warning on elements with a smaller surface area, like a badge or a banner.

color-bg-fill-warning

The hover state color for communicating warning on elements with a smaller surface area.

color-bg-fill-warning-hover

The active state (on press) color for communicating warning on elements with a smaller surface area.

color-bg-fill-warning-active

Use for backgrounds communicating warning on elements with a smaller surface area, with a secondary level of prominence.

color-bg-fill-warning-secondary

Use for backgrounds communicating caution on elements with a smaller surface area, like a badge or a banner.

color-bg-fill-caution

The hover state color for communicating caution on elements with a smaller surface area.

color-bg-fill-caution-hover

The active state (on press) color for communicating caution on elements with a smaller surface area.

color-bg-fill-caution-active

Use for backgrounds communicating caution on elements with a smaller surface area, with a secondary level of prominence.

color-bg-fill-caution-secondary

Use for backgrounds communicating critical information on elements with a smaller surface area, like a badge or a banner.

color-bg-fill-critical

The hover state color for communicating critical information on elements with a smaller surface area.

color-bg-fill-critical-hover

The active state (on press) color for communicating critical information on elements with a smaller surface area.

color-bg-fill-critical-active

The selected state color for communicating critical information on elements with a smaller surface area.

color-bg-fill-critical-selected

Use for backgrounds communicating critical information on elements with a smaller surface area, with a secondary level of prominence.

color-bg-fill-critical-secondary

Use for backgrounds indicating areas of focus in editors on elements with a smaller surface area, like a button or a badge.

color-bg-fill-emphasis

The hover state color for indicating areas of focus in editors on elements with a smaller surface area.

color-bg-fill-emphasis-hover

The active state (on press) color for indicating areas of focus in editors on elements with a smaller surface area.

color-bg-fill-emphasis-active

The background color of elements suggested by magic AI, like a badge or a banner.

color-bg-fill-magic

The background color of elements suggested by magic AI, with a secondary level of prominence.

color-bg-fill-magic-secondary

The hover state color of elements suggested by magic AI, with a secondary level of prominence.

color-bg-fill-magic-secondary-hover

The active state (on press) color of elements suggested by magic AI, with a secondary level of prominence.

color-bg-fill-magic-secondary-active

The background color of elements with a smaller surface area on an inverse background.

color-bg-fill-inverse

The hover state color of elements with a smaller surface area on an inverse background.

color-bg-fill-inverse-hover

The active state (on press) color of elements with a smaller surface area on an inverse background.

color-bg-fill-inverse-active

The background color of elements that need to sit on different background colors, like tabs.

color-bg-fill-transparent

The hover state color of elements that need to sit on different background colors, like tabs.

Name	Value	Description
--p-z-index-0	auto	—
--p-z-index-1	100	—
--p-z-index-2	400	—
--p-z-index-3	510	—
--p-z-index-4	512	—
--p-z-index-5	513	—
--p-z-index-6	514	—
--p-z-index-7	515	—
--p-z-index-8	516	—
--p-z-index-9	517	—
--p-z-index-10	518	—
--p-z-index-11	519	—
--p-z-index-12	520	—

Tokens → Z-Index