Space

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-space-0	0px	—
--p-space-025	1px	—
--p-space-050	2px	—
--p-space-100	4px	—
--p-space-150	6px	—
--p-space-200	8px	—
--p-space-300	12px	—
--p-space-400	16px	—
--p-space-500	20px	—
--p-space-600	24px	—
--p-space-800	32px	—
--p-space-1000	40px	—
--p-space-1200	48px	—
--p-space-1600	64px	—
--p-space-2000	80px	—
--p-space-2400	96px	—
--p-space-2800	112px	—
--p-space-3200	128px	—
--p-space-button-group-gap	var(--p-space-200)	—
--p-space-card-gap	var(--p-space-400)	—
--p-space-card-padding	var(--p-space-400)	—
--p-space-table-cell-padding	var(--p-space-150)	—

Tokens → Space