--spacing-generic-left-golden-ratio: desktop: 14.6% tablet: --space-8 / 32px mobile: --space-4 / 16px Loading
Loading Design System pageSpacing
Breakpoint
Generic
Reusable proportional spacing helpers that are not tied to one component category.
--spacing-generic-right-golden-ratio: desktop: 23.6% tablet: --space-8 / 32px mobile: --space-4 / 16px Header
Header layers, header navigation rhythm, and sticky header reserve.
--spacing-header-left: mirrors --spacing-generic-left-golden-ratio tablet: --space-8 / 32px mobile: --space-4 / 16px --spacing-header-right: mirrors --spacing-generic-right-golden-ratio tablet: --space-8 / 32px mobile: --space-4 / 16px --spacing-header-top-part-top: --space-4 / 16px --spacing-header-layer-y: --space-1 / 4px --spacing-header-middle-part-gap: --space-4 / 16px --spacing-header-reserve-bottom: --space-3 / 12px Block
Full-width content blocks inside pages with their own internal padding.
--spacing-block-top: default: --space-8 * 2 / 64px mobile: --space-6 * 2 / 48px --spacing-block-right: mirrors --spacing-generic-right-golden-ratio tablet: --space-8 / 32px mobile: --space-4 / 16px --spacing-block-bottom: default: --space-8 * 2 / 64px mobile: --space-6 * 2 / 48px --spacing-block-left: mirrors --spacing-generic-left-golden-ratio tablet: --space-8 / 32px mobile: --space-4 / 16px --spacing-block-gap: default: --space-8 / 32px mobile: --space-6 / 24px Rich Text
Long-form semantic content blocks mapped from Wiki Markdown into Rich Text subcomponents.
--spacing-rich-text-top: 0 --spacing-rich-text-right: mirrors --spacing-block-right --spacing-rich-text-bottom: half of --spacing-block-bottom --spacing-rich-text-left: mirrors --spacing-block-left Block Compact
Compact variant of Block spacing for denser full-width content blocks.
--spacing-block-compact-top: default: --space-8 / 32px mobile: --space-6 / 24px --spacing-block-compact-right: default: --space-8 / 32px mobile: --space-4 / 16px --spacing-block-compact-bottom: default: --space-8 / 32px mobile: --space-6 / 24px --spacing-block-compact-left: default: --space-8 / 32px mobile: --space-4 / 16px --spacing-block-compact-gap: default: --space-8 / 32px mobile: --space-6 / 24px Content
Page content and large layout zones.
--spacing-content-top: default: --space-8 / 32px mobile: --space-6 / 24px --spacing-content-right: default: --space-8 / 32px mobile: --space-4 / 16px --spacing-content-bottom: default: --space-12 / 48px mobile: --space-8 / 32px --spacing-content-left: default: --space-8 / 32px mobile: --space-4 / 16px --spacing-content-gap: default: --space-8 / 32px mobile: --space-6 / 24px Surface
Cards, framed blocks, and preview-like surfaces.
--spacing-surface-top: default: --space-6 / 24px mobile: --space-4 / 16px --spacing-surface-right: default: --space-6 / 24px mobile: --space-4 / 16px --spacing-surface-bottom: default: --space-6 / 24px mobile: --space-4 / 16px --spacing-surface-left: default: --space-6 / 24px mobile: --space-4 / 16px --spacing-surface-gap: default: --space-4 / 16px mobile: --space-3 / 12px Interactive
Buttons, menu items, prop buttons, and button-like links.
--spacing-interactive-top: --space-2 / 8px --spacing-interactive-right: --space-2 / 8px --spacing-interactive-bottom: --space-2 / 8px --spacing-interactive-left: --space-2 / 8px --spacing-interactive-gap: --space-2 / 8px Navigation
Side menu and navigation hierarchy spacing.
--spacing-navigation-top: --space-8 / 32px --spacing-navigation-right: --space-8 / 32px --spacing-navigation-bottom: --space-8 / 32px --spacing-navigation-left: --space-8 / 32px --spacing-navigation-gap: --space-1 / 4px --spacing-navigation-indent: 40px Menu Container
Outer spacing reserved by the side menu container before the menu tree starts and after it ends.
--spacing-menu-container-top: default: 124px mobile: --space-4 / 16px --spacing-menu-container-right: 0 --spacing-menu-container-bottom: default: 124px mobile: --space-4 / 16px --spacing-menu-container-left: --space-4 / 16px