Foundations

Uses the canvas color for document background color, with semantic remapping for DocumentFoundation-specific treatment.

--qp-document-background-image

Choose optional artwork, texture, photography, or gradients for the document canvas.

--qp-document-background-repeat

root · repeat

Choose how document background artwork tiles across the canvas.

--qp-document-background-size

root · var(--qp-border-width) solid var(--qp-border-color)

Choose how document background artwork is scaled across the canvas.

Border

Complete edge treatments that coordinate border width, style, and color as one authored decision.

--qp-border

Establish the standard complete edge treatment shared by ordinary bordered surfaces.

--qp-document-focus-outline

derived · 2px solid var(--qp-color-1)

Builds the document focus outline from the primary accent so keyboard focus follows the theme palette.

--qp-footer-border

Uses the standard composite border for footer border, with semantic remapping for SiteFooter-specific treatment.

--qp-image__badge-border

Builds the complete image badge border from the standard edge color so its edge treatment stays synchronized with theme foundations.

--qp-image-border

root · 0

Choose whether ordinary inline media receives a complete framing border.

Builds the complete lightbox control border from the standard edge color so its edge treatment stays synchronized with theme foundations.

--qp-menu__mobile-list-border

derived · var(--qp-border-width) solid var(--qp-color-4--dark)

Uses the standard composite border for menu mobile list border, with semantic remapping for Menu-specific treatment.

--qp-menu-nested-border

Builds the complete menu nested border from the standard border thickness and strong edge color so its edge treatment stays synchronized with theme foundations.

Builds the complete modal close border from the standard edge color so its edge treatment stays synchronized with theme foundations.

Builds the complete modal border from the standard edge color so its edge treatment stays synchronized with theme foundations.

--qp-page-list__action-border

Builds the complete page list action border from the standard edge color so its edge treatment stays synchronized with theme foundations.

--qp-socials-link-border

Uses the standard composite border for socials link border, with semantic remapping for Socials-specific treatment.

--qp-sticky-tray-panel-border

Uses the standard composite border for sticky tray panel border, with semantic remapping for StickyTray-specific treatment.

--qp-video-poster-border

Uses the standard composite border for video poster border, with semantic remapping for Video-specific treatment.

Border Width

Authored edge thicknesses used where border and focus geometry can vary independently from color.

--qp-border-width

root · 1px

Choose the standard thickness of ordinary QP edges.

--qp-card-focus-width

inherited · var(--qp-border-width)

Uses the standard focus thickness for card focus width, with semantic remapping for Card-specific treatment.

--qp-cta-border-width

Uses the standard border thickness for CTA border width, with semantic remapping for CTA-specific treatment.

--qp-cta-focus-width

Uses the standard focus thickness for CTA focus width, with semantic remapping for CTA-specific treatment.

--qp-focus-width

root · 2px

Choose the standard visible focus-indicator thickness across QP controls and surfaces.

--qp-menu-link-focus-width

Uses the standard focus thickness for menu link focus width, with semantic remapping for Menu-specific treatment.

--qp-menu-mobile-toggle-focus-width

Uses the standard focus thickness for menu mobile toggle focus width, with semantic remapping for Menu-specific treatment.

--qp-menu-search-focus-width

Uses the standard focus thickness for menu search focus width, with semantic remapping for Menu-specific treatment.

--qp-menu-submenu-focus-width

Uses the standard focus thickness for menu submenu focus width, with semantic remapping for Menu-specific treatment.

--qp-sticky-tray-focus-width

Uses the standard focus thickness for sticky tray focus width, with semantic remapping for StickyTray-specific treatment.

--qp-toc-link-focus-width

Uses the standard focus thickness for TOC link focus width, with semantic remapping for Toc-specific treatment.

Color

Palette foundations and semantic color relationships for text, surfaces, borders, states, and system interactions.

--qp-background

Uses the canvas color for background, with semantic remapping for Foundation-specific treatment.

--qp-border-color

Uses the standard edge color for border color, with semantic remapping for Foundation-specific treatment.

--qp-border-color--strong

Uses the strong edge color for border color in its strong state, with semantic remapping for Foundation-specific treatment.

--qp-card__body-text-color

Uses the primary foreground color for card body text color, with semantic remapping for Card-specific treatment.

--qp-card__icon-background

Uses the subtle surface color for card icon background, with semantic remapping for Card-specific treatment.

--qp-card__icon-text-color

Uses the strong foreground color for card icon text color, with semantic remapping for Card-specific treatment.

--qp-card__subtitle-text-color

Uses the muted foreground color for card subtitle text color, with semantic remapping for Card-specific treatment.

--qp-card__title-text-color

Uses the strong foreground color for card title text color, with semantic remapping for Card-specific treatment.

--qp-card-background

Uses the canvas color for card background, with semantic remapping for Card-specific treatment.

--qp-card-background--alternate

Uses the subtle surface color for card background in its alternate state, with semantic remapping for Card-specific treatment.

--qp-card-border-color

Uses the standard edge color for card border color, with semantic remapping for Card-specific treatment.

--qp-card-border-color--alternate

Uses the strong edge color for card border color in its alternate state, with semantic remapping for Card-specific treatment.

--qp-card-border-color--hover

Uses the strong edge color for card border color in its hover state, with semantic remapping for Card-specific treatment.

--qp-card-focus-color

Uses the primary accent color for card focus color, with semantic remapping for Card-specific treatment.

--qp-card-text-color

derived · color-mix(in oklch, var(--qp-color-1), black 18%)

Uses the primary foreground color for card text color, with semantic remapping for Card-specific treatment.

--qp-color-1

root · #2563eb

Establish the primary accent color that carries the theme’s identity and interactive emphasis.

--qp-color-1--dark

Derives a darker palette variant from the primary accent color for stronger contrast and interaction states.

--qp-color-1--light

derived · color-mix(in oklch, var(--qp-color-1), white 82%)

Derives a lighter palette variant from the primary accent color for subdued surfaces and interaction states.

--qp-color-2

root · #111827

Establish the primary foreground color for readable text and interface content.

--qp-color-2--dark

derived · color-mix(in oklch, var(--qp-color-2), black 24%)

Derives a darker palette variant from the primary foreground color for stronger contrast and interaction states.

--qp-color-2--light

derived · color-mix(in oklch, var(--qp-color-2), white 28%)

Derives a lighter palette variant from the primary foreground color for subdued surfaces and interaction states.

--qp-color-3

root · #ffffff

Establish the canvas color used by the document and ordinary surfaces.

--qp-color-4

root · #e5e7eb

Establish the supporting edge color used for borders and subdued surface separation.

--qp-color-4--dark

derived · color-mix(in oklch, var(--qp-color-4), black 10%)

Derives a darker palette variant from the standard edge color for stronger contrast and interaction states.

--qp-color-4--light

derived · color-mix(in oklch, var(--qp-color-4), white 68%)

Derives a lighter palette variant from the standard edge color for subdued surfaces and interaction states.

--qp-color-5

root · #000000

Establish the maximum-contrast color used to derive backdrops, shadows, and deep overlays.

--qp-cta-background

Uses the primary accent color for CTA background, with semantic remapping for CTA-specific treatment.

--qp-cta-background--alternate

Uses the framework-defined transparent color for CTA background in its alternate state, with semantic remapping for CTA-specific treatment.

--qp-cta-background--alternate-hover

Uses the light accent color for CTA background in its alternate hover state, with semantic remapping for CTA-specific treatment.

--qp-cta-background--hover

Uses the strong foreground color for CTA background in its hover state, with semantic remapping for CTA-specific treatment.

--qp-cta-border-color

Uses the primary accent color for CTA border color, with semantic remapping for CTA-specific treatment.

--qp-cta-border-color--alternate

Uses the muted foreground color for CTA border color in its alternate state, with semantic remapping for CTA-specific treatment.

--qp-cta-border-color--alternate-hover

Uses the primary foreground color for CTA border color in its alternate hover state, with semantic remapping for CTA-specific treatment.

--qp-cta-border-color--hover

Uses the strong foreground color for CTA border color in its hover state, with semantic remapping for CTA-specific treatment.

--qp-cta-focus-color

Uses the primary accent color for CTA focus color, with semantic remapping for CTA-specific treatment.

--qp-cta-text-color

Uses the canvas color for CTA text color, with semantic remapping for CTA-specific treatment.

--qp-cta-text-color--alternate

Uses the primary accent color for CTA text color in its alternate state, with semantic remapping for CTA-specific treatment.

--qp-cta-text-color--alternate-hover

Uses the strong foreground color for CTA text color in its alternate hover state, with semantic remapping for CTA-specific treatment.

--qp-cta-text-color--hover

inherited · var(--qp-system-color-highlight)

Uses the canvas color for CTA text color in its hover state, with semantic remapping for CTA-specific treatment.

--qp-document__selection-background

Uses the platform selection highlight for document selection background, with semantic remapping for DocumentFoundation-specific treatment.

--qp-document__selection-text-color

inherited · var(--qp-system-color-highlight-text)

Uses the platform selection text color for document selection text color, with semantic remapping for DocumentFoundation-specific treatment.

--qp-document-text-color

Uses the primary foreground color for document text color, with semantic remapping for DocumentFoundation-specific treatment.

--qp-focus-color

Uses the primary accent color for focus color, with semantic remapping for Foundation-specific treatment.

--qp-footer-background

Uses the subtle surface color for footer background, with semantic remapping for SiteFooter-specific treatment.

--qp-footer-text-color

Uses the muted foreground color for footer text color, with semantic remapping for SiteFooter-specific treatment.

--qp-gallery__caption-background

Uses the framework-defined transparent color for gallery caption background, with semantic remapping for Gallery-specific treatment.

--qp-gallery__caption-secondary-text-color

Uses the muted foreground color for gallery caption secondary text color, with semantic remapping for Gallery-specific treatment.

--qp-gallery__caption-text-color

Uses the primary foreground color for gallery caption text color, with semantic remapping for Gallery-specific treatment.

--qp-heading-text-color

Uses the strong foreground color for heading text color, with semantic remapping for DocumentFoundation-specific treatment.

--qp-heading-text-color--primary

Uses the strong foreground color for heading text color in its primary state, with semantic remapping for DocumentFoundation-specific treatment.

--qp-image__badge-background

Uses the canvas color for image badge background, with semantic remapping for Image-specific treatment.

--qp-image__badge-text-color

Uses the primary foreground color for image badge text color, with semantic remapping for Image-specific treatment.

Uses the framework-defined transparent color for lightbox caption background, with semantic remapping for Lightbox-specific treatment.

Uses the strong edge color for lightbox caption secondary text color, with semantic remapping for Lightbox-specific treatment.

Uses the canvas color for lightbox caption text color, with semantic remapping for Lightbox-specific treatment.

Uses the canvas color for lightbox control background, with semantic remapping for Lightbox-specific treatment.

Uses the primary foreground color for lightbox control text color, with semantic remapping for Lightbox-specific treatment.

derived · color-mix(in srgb, var(--qp-color-5) 86%, transparent)

Uses the canvas color for lightbox item border color in its selected state, with semantic remapping for Lightbox-specific treatment.

Derives lightbox backdrop from the maximum-contrast color so translucent surface contrast stays synchronized with the palette.

Uses the canvas color for lightbox text color, with semantic remapping for Lightbox-specific treatment.

--qp-link-text-color

Uses the primary accent color for link text color, with semantic remapping for DocumentFoundation-specific treatment.

--qp-link-text-color--hover

inherited · var(--qp-color-1--dark)

Uses the strong foreground color for link text color in its hover state, with semantic remapping for DocumentFoundation-specific treatment.

--qp-link-text-color--visited

Uses the dark accent color for link text color in its visited state, with semantic remapping for DocumentFoundation-specific treatment.

--qp-media-caption-text-color

Uses the muted foreground color for media caption text color, with semantic remapping for MediaCaption-specific treatment.

--qp-menu__link-background--hover

Uses the light accent color for menu link background in its hover state, with semantic remapping for Menu-specific treatment.

--qp-menu__link-focus-color

Uses the primary accent color for menu link focus color, with semantic remapping for Menu-specific treatment.

--qp-menu__link-text-color

Uses the primary foreground color for menu link text color, with semantic remapping for Menu-specific treatment.

--qp-menu__link-text-color--hover

Uses the strong foreground color for menu link text color in its hover state, with semantic remapping for Menu-specific treatment.

--qp-menu__mobile-link-background

Uses the framework-defined transparent color for menu mobile link background, with semantic remapping for Menu-specific treatment.

--qp-menu__mobile-link-background--hover

Uses the light accent color for menu mobile link background in its hover state, with semantic remapping for Menu-specific treatment.

--qp-menu__mobile-link-text-color

Uses the primary foreground color for menu mobile link text color, with semantic remapping for Menu-specific treatment.

--qp-menu__mobile-link-text-color--hover

Uses the strong foreground color for menu mobile link text color in its hover state, with semantic remapping for Menu-specific treatment.

--qp-menu__mobile-list-background

Uses the canvas color for menu mobile list background, with semantic remapping for Menu-specific treatment.

--qp-menu__mobile-toggle-background

Uses the canvas color for menu mobile toggle background, with semantic remapping for Menu-specific treatment.

--qp-menu__mobile-toggle-background--hover

Uses the light accent color for menu mobile toggle background in its hover state, with semantic remapping for Menu-specific treatment.

--qp-menu__mobile-toggle-border-color

Uses the strong edge color for menu mobile toggle border color, with semantic remapping for Menu-specific treatment.

--qp-menu__mobile-toggle-focus-color

Uses the primary accent color for menu mobile toggle focus color, with semantic remapping for Menu-specific treatment.

--qp-menu__mobile-toggle-text-color

Uses the primary accent color for menu mobile toggle text color, with semantic remapping for Menu-specific treatment.

--qp-menu__search-background

Uses the canvas color for menu search background, with semantic remapping for Menu-specific treatment.

--qp-menu__search-border-color

Uses the strong edge color for menu search border color, with semantic remapping for Menu-specific treatment.

--qp-menu__search-empty-text-color

Uses the muted foreground color for menu search empty text color, with semantic remapping for Menu-specific treatment.

--qp-menu__search-focus-color

Uses the primary accent color for menu search focus color, with semantic remapping for Menu-specific treatment.

--qp-menu__search-text-color

Uses the strong foreground color for menu search text color, with semantic remapping for Menu-specific treatment.

--qp-menu__submenu-focus-color

Uses the primary accent color for menu submenu focus color, with semantic remapping for Menu-specific treatment.

--qp-menu__submenu-toggle-background--hover

Uses the light accent color for menu submenu toggle background in its hover state, with semantic remapping for Menu-specific treatment.

--qp-menu__submenu-toggle-text-color

Uses the primary foreground color for menu submenu toggle text color, with semantic remapping for Menu-specific treatment.

--qp-menu__submenu-toggle-text-color--hover

Uses the strong foreground color for menu submenu toggle text color in its hover state, with semantic remapping for Menu-specific treatment.

Uses the canvas color for modal close background, with semantic remapping for Modal-specific treatment.

Uses the light accent color for modal close background in its hover state, with semantic remapping for Modal-specific treatment.

Uses the primary foreground color for modal close text color, with semantic remapping for Modal-specific treatment.

derived · color-mix(in srgb, var(--qp-color-5) 55%, transparent)

Uses the primary foreground color for modal title text color, with semantic remapping for Modal-specific treatment.

Derives modal backdrop from the maximum-contrast color so translucent surface contrast stays synchronized with the palette.

Uses the canvas color for modal background, with semantic remapping for Modal-specific treatment.

derived · linear-gradient(0deg, color-mix(in srgb, var(--qp-color-2) 88%, transparent), color-mix(in srgb, var(--qp-color-2) 8%, transparent))

Uses the primary foreground color for modal text color, with semantic remapping for Modal-specific treatment.

--qp-page-header__hero-content-background

Derives page header hero content background from the primary foreground color so translucent surface contrast stays synchronized with the palette.

--qp-page-header__hero-content-background--mobile

Uses the primary accent color for page header hero content background in its mobile state, with semantic remapping for PageHeader-specific treatment.

--qp-page-header__hero-subtitle-text-color

Uses the canvas color for page header hero subtitle text color, with semantic remapping for PageHeader-specific treatment.

--qp-page-header__hero-text-color

Uses the canvas color for page header hero text color, with semantic remapping for PageHeader-specific treatment.

--qp-page-header__subtitle-text-color

Uses the muted foreground color for page header subtitle text color, with semantic remapping for PageHeader-specific treatment.

--qp-page-header__title-text-color

Uses the strong foreground color for page header title text color, with semantic remapping for PageHeader-specific treatment.

--qp-page-header-background

Uses the framework-defined transparent color for page header background, with semantic remapping for PageHeader-specific treatment.

--qp-page-header-hero-background

Uses the primary accent color for page header hero background, with semantic remapping for PageHeader-specific treatment.

--qp-page-header-text-color

Uses the primary foreground color for page header text color, with semantic remapping for PageHeader-specific treatment.

--qp-page-list__action-background

Uses the subtle surface color for page list action background, with semantic remapping for PageList-specific treatment.

--qp-page-list__action-text-color

Uses the primary foreground color for page list action text color, with semantic remapping for PageList-specific treatment.

--qp-prose__link-text-color

Uses the primary accent color for prose link text color, with semantic remapping for DocumentFoundation-specific treatment.

--qp-section-background--alternate

Uses the subtle surface color for section background in its alternate state, with semantic remapping for PageSection-specific treatment.

--qp-section-background--default

Uses the canvas color for section background in its default state, with semantic remapping for PageSection-specific treatment.

--qp-section-border-color--alternate

Uses the strong edge color for section border color in its alternate state, with semantic remapping for PageSection-specific treatment.

--qp-section-border-color--default

Uses the standard edge color for section border color in its default state, with semantic remapping for PageSection-specific treatment.

--qp-section-text-color--alternate

Uses the primary foreground color for section text color in its alternate state, with semantic remapping for PageSection-specific treatment.

--qp-section-text-color--default

Uses the primary foreground color for section text color in its default state, with semantic remapping for PageSection-specific treatment.

--qp-site-header__menu-link-background--current

Uses the standard edge color for site header menu link background in its current state, with semantic remapping for SiteHeader-specific treatment.

--qp-site-header__menu-link-text-color--current

Uses the strong foreground color for site header menu link text color in its current state, with semantic remapping for SiteHeader-specific treatment.

--qp-site-header-background

Uses the canvas color for site header background, with semantic remapping for SiteHeader-specific treatment.

--qp-site-header-border-color

Uses the standard edge color for site header border color, with semantic remapping for SiteHeader-specific treatment.

--qp-socials__link-background

Uses the framework-defined transparent color for socials link background, with semantic remapping for Socials-specific treatment.

--qp-socials__link-background--hover

Uses the light accent color for socials link background in its hover state, with semantic remapping for Socials-specific treatment.

--qp-socials__link-text-color

Uses the primary foreground color for socials link text color, with semantic remapping for Socials-specific treatment.

--qp-socials__link-text-color--hover

Uses the strong foreground color for socials link text color in its hover state, with semantic remapping for Socials-specific treatment.

--qp-sticky-tray__bar-background

Uses the canvas color for sticky tray bar background, with semantic remapping for StickyTray-specific treatment.

--qp-sticky-tray__bar-text-color

Uses the primary foreground color for sticky tray bar text color, with semantic remapping for StickyTray-specific treatment.

--qp-sticky-tray__handle-text-color

Uses the strong foreground color for sticky tray handle text color, with semantic remapping for StickyTray-specific treatment.

--qp-sticky-tray__panel-background

Uses the canvas color for sticky tray panel background, with semantic remapping for StickyTray-specific treatment.

--qp-sticky-tray-bar-border-color

Uses the strong edge color for sticky tray bar border color, with semantic remapping for StickyTray-specific treatment.

--qp-sticky-tray-focus-color

Uses the primary accent color for sticky tray focus color, with semantic remapping for StickyTray-specific treatment.

--qp-sticky-tray-inset-background

Uses the canvas color for sticky tray inset background, with semantic remapping for StickyTray-specific treatment.

--qp-surface-background--hover

Uses the light accent color for surface background in its hover state, with semantic remapping for Foundation-specific treatment.

--qp-surface-background--muted

Uses the subtle surface color for surface background in its muted state, with semantic remapping for Foundation-specific treatment.

--qp-system-color-highlight

system · Highlight

Provides the browser or operating-system highlight color for selected content.

--qp-system-color-highlight-text

system · HighlightText

Provides the browser or operating-system text color for selected content.

--qp-system-color-transparent

system · transparent

Represents complete transparency independently from the authored palette.

--qp-text-color

Uses the primary foreground color for text color, with semantic remapping for Foundation-specific treatment.

--qp-text-color--disabled

Uses the muted foreground color for text color in its disabled state, with semantic remapping for Foundation-specific treatment.

--qp-text-color--inverse

Uses the canvas color for text color in its inverse state, with semantic remapping for Foundation-specific treatment.

--qp-text-color--muted

Uses the muted foreground color for text color in its muted state, with semantic remapping for Foundation-specific treatment.

--qp-text-color--strong

Uses the strong foreground color for text color in its strong state, with semantic remapping for Foundation-specific treatment.

--qp-toast-background

Uses the strong foreground color for toast background, with semantic remapping for Toast-specific treatment.

--qp-toast-text-color

Uses the canvas color for toast text color, with semantic remapping for Toast-specific treatment.

--qp-toc__link-background

Uses the framework-defined transparent color for TOC link background, with semantic remapping for Toc-specific treatment.

--qp-toc__link-background--current

Uses the subtle surface color for TOC link background in its current state, with semantic remapping for Toc-specific treatment.

--qp-toc__link-background--hover

Uses the light accent color for TOC link background in its hover state, with semantic remapping for Toc-specific treatment.

--qp-toc__link-border-color--current

Uses the primary accent color for TOC link border color in its current state, with semantic remapping for Toc-specific treatment.

--qp-toc__link-focus-color

Uses the primary accent color for TOC link focus color, with semantic remapping for Toc-specific treatment.

--qp-toc__link-text-color

Uses the muted foreground color for TOC link text color, with semantic remapping for Toc-specific treatment.

--qp-toc__link-text-color--current

Uses the strong foreground color for TOC link text color in its current state, with semantic remapping for Toc-specific treatment.

--qp-toc__link-text-color--hover

derived · color-mix(in srgb, var(--qp-color-5) 65%, transparent)

Uses the strong foreground color for TOC link text color in its hover state, with semantic remapping for Toc-specific treatment.

--qp-video__play-background

Derives video play background from the maximum-contrast color so translucent surface contrast stays synchronized with the palette.

--qp-video__play-background--hover

derived · color-mix(in srgb, var(--qp-color-5) 80%, transparent)

Derives video play background in its hover state from the maximum-contrast color so translucent surface contrast stays synchronized with the palette.

--qp-video__play-text-color

Uses the canvas color for video play text color, with semantic remapping for Video-specific treatment.

--qp-video-focus-color

Uses the primary accent color for video focus color, with semantic remapping for Video-specific treatment.

Effect

Complete visual-processing recipes for architectural surfaces where compositing is an intentional theme decision.

Choose the complete compositing treatment behind the Lightbox surface.

Choose the complete compositing treatment behind Modal content.

--qp-site-header-backdrop-filter

Choose the complete compositing treatment behind the SiteHeader surface.

--qp-sticky-tray-bar-backdrop-filter

Choose the complete compositing treatment behind the persistent StickyTray bar.

--qp-sticky-tray-panel-backdrop-filter

root · ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

Choose the complete compositing treatment behind the open StickyTray panel.

Font Family

Typeface families that establish the document, heading, code, and component voices of a theme.

--qp-code-font-family

Establish the monospace typeface for code and technical reference content.

--qp-document-font-family

root · ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Establish the primary typeface for document content and inheriting interface text.

--qp-heading-font-family

inherited · var(--qp-document-font-family)

Uses the document typeface for heading font family, with semantic remapping for DocumentFoundation-specific treatment.

--qp-sticky-tray-handle-font-family

inherited · var(--qp-document-font-family)

Uses the document typeface for sticky tray handle font family, with semantic remapping for StickyTray-specific treatment.

--qp-card-title-font-size

inherited · var(--qp-font-size-md)

Uses the large type level for card title font size, with semantic remapping for Card-specific treatment.

--qp-document-font-size

Uses the body type level for document font size, with semantic remapping for DocumentFoundation-specific treatment.

--qp-font-size-2xl

root · clamp(1.75rem, 1.35rem + 2vw, 2.5rem)

Establish the major-heading canonical type level for document-level hierarchy.

--qp-font-size-3xl

root · clamp(2.25rem, 1.35rem + 4vw, 4.5rem)

Establish the display canonical type level for responsive PageHeader typography.

--qp-font-size-lg

root · clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem)

Establish the large canonical type level for component titles and modest emphasis.

--qp-font-size-md

root · 1rem

Establish the standard canonical type level for body copy and ordinary controls.

--qp-font-size-sm

root · 0.9375rem

Establish the small canonical type level for captions, secondary text, and compact controls.

--qp-font-size-xl

root · clamp(1.375rem, 1.15rem + 1vw, 1.75rem)

Establish the extra-large canonical type level for section headings and prominent content titles.

--qp-font-size-xs

root · 0.8125rem

Establish the smallest canonical type level for compact metadata and tertiary labels.

--qp-heading-1-size

inherited · var(--qp-font-size-2xl)

Uses the major-heading type level for heading 1 size, with semantic remapping for DocumentFoundation-specific treatment.

--qp-heading-2-size

inherited · var(--qp-font-size-xl)

Uses the extra-large type level for heading 2 size, with semantic remapping for DocumentFoundation-specific treatment.

--qp-heading-3-size

inherited · var(--qp-font-size-sm)

Uses the large type level for heading 3 size, with semantic remapping for DocumentFoundation-specific treatment.

--qp-media-caption-size

Uses the small type level for media caption size, with semantic remapping for MediaCaption-specific treatment.

--qp-media-caption-title-size

inherited · var(--qp-font-size-sm)

Uses the small type level for media caption title size, with semantic remapping for MediaCaption-specific treatment.

--qp-menu-mobile-link-font-size

Uses the large type level for menu mobile link font size, with semantic remapping for Menu-specific treatment.

inherited · var(--qp-font-size-3xl)

Uses the large type level for modal title font size, with semantic remapping for Modal-specific treatment.

--qp-page-header-title-font-size

Uses the display type level for page header title font size, with semantic remapping for PageHeader-specific treatment.

--qp-sticky-tray-handle-font-size

inherited · var(--qp-font-size-sm)

Uses the small type level for sticky tray handle font size, with semantic remapping for StickyTray-specific treatment.

--qp-toast-font-size

inherited · var(--qp-font-size-md)

Uses the body type level for toast font size, with semantic remapping for Toast-specific treatment.

Font Weight

Canonical emphasis levels and semantic mappings that establish typographic hierarchy across QP content and controls.

--qp-cta-font-weight

inherited · var(--qp-font-weight-bold)

Uses the bold emphasis weight for CTA font weight, with semantic remapping for CTA-specific treatment.

--qp-font-weight-bold

root · 700

Establish the canonical bold weight for headings and strong emphasis.

--qp-font-weight-medium

root · 500

Establish the canonical medium weight for moderate interface emphasis.

--qp-font-weight-regular

root · 400

Establish the canonical regular weight for ordinary reading text.

--qp-font-weight-semibold

root · 600

Establish the canonical semibold weight for navigation, actions, and labels.

--qp-heading-font-weight

inherited · var(--qp-font-weight-bold)

Uses the bold emphasis weight for heading font weight, with semantic remapping for DocumentFoundation-specific treatment.

--qp-menu-link-font-weight

inherited · var(--qp-font-weight-semibold)

Uses the semibold emphasis weight for menu link font weight, with semantic remapping for Menu-specific treatment.

--qp-menu-mobile-link-font-weight

inherited · var(--qp-font-weight-semibold)

Uses the semibold emphasis weight for menu mobile link font weight, with semantic remapping for Menu-specific treatment.

--qp-page-list-action-weight

inherited · var(--qp-font-weight-semibold)

Uses the semibold emphasis weight for page list action weight, with semantic remapping for PageList-specific treatment.

--qp-sticky-tray-handle-font-weight

inherited · var(--qp-font-weight-bold)

Uses the bold emphasis weight for sticky tray handle font weight, with semantic remapping for StickyTray-specific treatment.

Layer

Framework stacking levels that coordinate ordinary, persistent, overlay, modal, and system surfaces.

system · 300

Defines the framework layer floor for modal, lightbox, and takeover interfaces that dominate page interaction.

--qp-system-layer-overlay

system · 200

Defines the framework layer floor for temporary overlays above persistent surfaces.

--qp-system-layer-persistent

system · 100

Defines the framework layer floor for viewport-persistent interface surfaces.

--qp-system-layer-system

system · 400

Defines the highest framework layer floor for transient system feedback.

Layout

Authorable composition choices that determine how QP structures arrange content. Excludes required mechanics, containment, and intrinsic responsive behavior.

--qp-card-title-row-justify

root · flex-start

Choose how Card titles and optional icons share horizontal space.

--qp-menu-mobile-list-display

root · grid

Choose the layout mode used to compose the open mobile navigation list.

--qp-site-header-justify

root · flex-start

Choose how branding, navigation, and actions are distributed across the SiteHeader.

--qp-site-header-menu-offset

Choose how the SiteHeader menu is aligned relative to preceding header content.

--qp-site-header-position

root · relative

Choose how the SiteHeader participates in document positioning, including ordinary and sticky presentation.

--qp-site-header-top

Choose the SiteHeader’s placement offset when its positioning mode uses a top coordinate.

--qp-sticky-tray-bottom-offset

root · 0px

Reserve space below a bottom-positioned StickyTray.

--qp-sticky-tray-inline-offset

Uses the small spatial rhythm for sticky tray inline offset, with semantic remapping for StickyTray-specific treatment.

--qp-sticky-tray-occupied-bottom

system · 0px

Tracks runtime-measured space already occupied at the bottom of the viewport.

--qp-sticky-tray-occupied-top

system · 0px

Tracks runtime-measured space already occupied at the top of the viewport.

--qp-sticky-tray-top-offset

root · 0px

Reserve space above a top-positioned StickyTray.

--qp-sticky-tray-viewport-gutter

Uses the small spatial rhythm for sticky tray viewport gutter, with semantic remapping for StickyTray-specific treatment.

--qp-toast-bottom

inherited · var(--qp-heading-line-height)

Uses the large spatial rhythm for toast bottom, with semantic remapping for Toast-specific treatment.

Line Height

Text-rhythm decisions and semantic mappings that establish readable line spacing across document and component typography.

--qp-heading-1-line-height

Uses the heading text rhythm for heading 1 line height, with semantic remapping for DocumentFoundation-specific treatment.

--qp-heading-line-height

root · 1.2

Choose the shared vertical rhythm for document headings.

--qp-line-body

root · 1.5

Choose the default vertical rhythm for body copy and ordinary readable text.

--qp-media-caption-line-height

inherited · var(--qp-line-body)

Uses the body text rhythm for media caption line height, with semantic remapping for MediaCaption-specific treatment.

--qp-media-caption-subtitle-line-height

inherited · var(--qp-line-body)

Uses the body text rhythm for media caption subtitle line height, with semantic remapping for MediaCaption-specific treatment.

--qp-media-caption-title-line-height

inherited · var(--qp-line-body)

Uses the body text rhythm for media caption title line height, with semantic remapping for MediaCaption-specific treatment.

Radius

Canonical rounding magnitudes and semantic mappings for surfaces, controls, focus treatments, and media. Intrinsic circles and pills remain local.

--qp-card-icon-radius

Uses the compact rounding for card icon radius, with semantic remapping for Card-specific treatment.

--qp-cta-radius

Uses the standard rounding for CTA radius, with semantic remapping for CTA-specific treatment.

--qp-document-focus-radius

Uses the compact rounding for document focus radius, with semantic remapping for DocumentFoundation-specific treatment.

--qp-gallery-caption-radius

Uses the framework-defined absence of rounding for gallery caption radius, with semantic remapping for Gallery-specific treatment.

--qp-gallery-image-radius

Uses the framework-defined absence of rounding for gallery image radius, with semantic remapping for Gallery-specific treatment.

--qp-image-radius

Uses the framework-defined absence of rounding for image radius, with semantic remapping for Image-specific treatment.

Uses the compact rounding for lightbox radius, with semantic remapping for Lightbox-specific treatment.

--qp-menu-link-radius

Uses the standard rounding for menu link radius, with semantic remapping for Menu-specific treatment.

--qp-menu-mobile-link-radius

inherited · var(--qp-radius-lg)

Uses the standard rounding for menu mobile link radius, with semantic remapping for Menu-specific treatment.

--qp-menu-mobile-list-radius

Uses the prominent rounding for menu mobile list radius, with semantic remapping for Menu-specific treatment.

--qp-menu-mobile-toggle-radius

Uses the standard rounding for menu mobile toggle radius, with semantic remapping for Menu-specific treatment.

--qp-menu-submenu-toggle-radius

Uses the compact rounding for menu submenu toggle radius, with semantic remapping for Menu-specific treatment.

Uses the standard rounding for modal radius, with semantic remapping for Modal-specific treatment.

--qp-page-list-action-radius

Uses the standard rounding for page list action radius, with semantic remapping for PageList-specific treatment.

--qp-radius-lg

Establish prominent rounding for cards, panels, and major containers.

--qp-radius-md

root · 0.5rem

Establish standard rounding for ordinary controls, media, and surfaces.

--qp-radius-sm

root · 0.375rem

Establish compact rounding for controls and subtle surface treatment.

--qp-socials-link-radius

derived · var(--qp-radius-lg) var(--qp-radius-lg) 0 0

Uses the standard rounding for socials link radius, with semantic remapping for Socials-specific treatment.

--qp-sticky-tray-bar-open-radius

Calculates sticky tray bar open radius from the prominent rounding to preserve joined StickyTray corner geometry.

--qp-sticky-tray-bar-radius

inherited · var(--qp-radius-lg)

Uses the prominent rounding for sticky tray bar radius, with semantic remapping for StickyTray-specific treatment.

--qp-sticky-tray-panel-radius

derived · 0 0 var(--qp-radius-lg) var(--qp-radius-lg)

Calculates sticky tray panel radius from the prominent rounding to preserve joined StickyTray corner geometry.

--qp-sticky-tray-side-bar-radius

inherited · var(--qp-radius-lg)

Uses the prominent rounding for sticky tray side bar radius, with semantic remapping for StickyTray-specific treatment.

--qp-sticky-tray-side-left-bar-open-radius

derived · var(--qp-radius-lg) 0 0 var(--qp-radius-lg)

Calculates sticky tray side left bar open radius from the prominent rounding to preserve joined StickyTray corner geometry.

--qp-sticky-tray-side-left-panel-radius

derived · 0 var(--qp-radius-lg) var(--qp-radius-lg) 0

Calculates sticky tray side left panel radius from the prominent rounding to preserve joined StickyTray corner geometry.

--qp-sticky-tray-side-right-bar-open-radius

derived · 0 var(--qp-radius-lg) var(--qp-radius-lg) 0

Calculates sticky tray side right bar open radius from the prominent rounding to preserve joined StickyTray corner geometry.

--qp-sticky-tray-side-right-panel-radius

derived · var(--qp-radius-lg) 0 0 var(--qp-radius-lg)

Calculates sticky tray side right panel radius from the prominent rounding to preserve joined StickyTray corner geometry.

--qp-system-radius-none

system · 0

Represents the intrinsic absence of rounding independently from the authored radius scale.

--qp-toast-radius

Uses the standard rounding for toast radius, with semantic remapping for Toast-specific treatment.

--qp-toc-link-radius

Uses the compact rounding for TOC link radius, with semantic remapping for Toc-specific treatment.

--qp-video-radius

Uses the framework-defined absence of rounding for video radius, with semantic remapping for Video-specific treatment.

Shadow

Complete elevation recipes and semantic mappings that establish surface separation and interaction depth. Optical and legibility shadows remain local.

--qp-card-shadow

Uses the standard raised-content elevation for card shadow, with semantic remapping for Card-specific treatment.

--qp-cta-shadow

inherited · var(--qp-cta-shadow)

Choose the resting depth treatment that establishes the primary CTA interaction language.

--qp-cta-shadow--alternate

Uses the CTA shadow for CTA shadow in its alternate state, with semantic remapping for CTA-specific treatment.

--qp-cta-shadow--alternate-hover

inherited · var(--qp-cta-shadow)

Choose whether alternate CTAs gain a distinct elevation treatment during interaction.

--qp-cta-shadow--hover

Uses the CTA shadow for CTA shadow in its hover state, with semantic remapping for CTA-specific treatment.

--qp-image-shadow

derived · 0 12px 40px color-mix(in srgb, var(--qp-color-5) 25%, transparent)

Uses the standard raised-content elevation for image shadow, with semantic remapping for Image-specific treatment.

Derives modal shadow from the maximum-contrast color so elevation contrast stays synchronized with the palette.

--qp-raised-content-shadow

Establish the standard elevation treatment for raised content surfaces and framed media.

--qp-section-surface-shadow

Uses the standard raised-content elevation for section surface shadow, with semantic remapping for PageSection-specific treatment.

--qp-sticky-tray-bar-shadow

derived · 0 4px 16px color-mix(in srgb, var(--qp-color-5) 20%, transparent)

Choose how strongly the persistent StickyTray bar separates from document content.

--qp-toast-shadow

Derives toast shadow from the maximum-contrast color so elevation contrast stays synchronized with the palette.

--qp-video-poster-shadow

Uses the standard raised-content elevation for video poster shadow, with semantic remapping for Video-specific treatment.

Size

Meaningful dimensions, capacity limits, and proportions that alter the scale or composition of QP elements. Excludes typography, intrinsic sizing, defensive constraints, and fixed responsive mechanics.

--qp-card-icon-glyph-size

root · 1.25rem

Choose the visual scale of glyphs inside Card icon containers.

--qp-card-icon-size

root · 2rem

Choose the physical prominence of Card icon containers.

--qp-card-list-min-column-width

root · 15.625rem

Choose the minimum useful Card column measure before a CardList reflows.

--qp-cta-max-width

root · 100%

Choose the maximum horizontal prominence of CTA controls.

--qp-cta-min-height

root · 2.625rem

Choose the minimum interactive height of CTA controls.

--qp-footer-content-width

root · min(75rem, 100%)

Choose the maximum content measure inside the SiteFooter.

--qp-footer-menu-max-width

root · 100%

Choose the maximum measure available to Footer navigation.

--qp-footer-menu-width

root · fit-content

Choose whether Footer navigation fills or shrink-wraps its available measure.

--qp-gallery-image-height

Choose the common rendered height used to align Gallery imagery.

--qp-gallery-item-aspect-ratio

Choose the standard framing proportion of Gallery items.

--qp-gallery-item-min-width

root · 220px

Choose the minimum useful Gallery item measure before the Gallery reflows.

--qp-gallery-max-width

Choose the maximum composition width of a Gallery.

--qp-gallery-portrait-aspect-ratio

Choose the framing proportion used for portrait Gallery items.

--qp-icon-size

root · 1em

Choose the default scale of inline icons relative to surrounding content.

--qp-image-max-height

Choose the maximum displayed height of ordinary inline images.

--qp-image-width

inherited · var(--qp-section-width-default)

Choose whether ordinary inline images occupy their available content width or shrink to the rendered media width.

root · 2.5rem

Choose the physical size of the Lightbox close control.

--qp-menu-link-min-height

root · 2.75rem

Choose the minimum interactive height of Menu links.

--qp-menu-mobile-list-width

root · min(32rem, 100%)

Choose the maximum usable width of the mobile Menu surface.

--qp-menu-mobile-toggle-icon-size

root · 1.25rem

Choose the visual scale of the mobile Menu toggle glyph.

--qp-menu-mobile-toggle-size

root · 2.75rem

Choose the physical size of the mobile Menu toggle control.

--qp-menu-submenu-toggle-size

root · 2rem

Choose the physical size of submenu disclosure controls.

root · 720px

Choose the maximum composition width of Modal surfaces.

--qp-page-header-content-width

Uses the section width default for page header content width, with semantic remapping for PageHeader-specific treatment.

--qp-page-header-hero-aspect-ratio

root · 16 / 9

Choose the framing proportion of PageHeader hero media.

--qp-page-header-hero-panel-width

inherited · var(--qp-section-width-wide)

Uses the section width wide for page header hero panel width, with semantic remapping for PageHeader-specific treatment.

--qp-page-header-panel-inline-size

derived · calc(100% - (var(--qp-space-md) * 2))

Calculates page header panel inline size from the base spatial rhythm to preserve equal responsive edge insets.

--qp-page-header-subtitle-max-width

inherited · var(--qp-subtitle-max-width)

Uses the standard subtitle measure for page header subtitle max width, with semantic remapping for PageHeader-specific treatment.

--qp-page-max-width

derived · calc(100% - (var(--qp-space-md) * 2))

Choose the maximum width of the QP page canvas.

--qp-product-list-image-ratio

root · 4 / 3

Choose the consistent framing proportion used for product imagery across a ProductList.

--qp-section-inline-size

Calculates section inline size from the base spatial rhythm to preserve equal responsive edge insets.

--qp-section-subtitle-max-width

inherited · var(--qp-subtitle-max-width)

Uses the standard subtitle measure for section subtitle max width, with semantic remapping for PageSection-specific treatment.

--qp-section-width-default

root · 60rem

Choose the standard content measure used by ordinary QP sections.

--qp-section-width-wide

root · 75rem

Choose the expanded content measure used by wide QP compositions.

--qp-site-header-content-width

root · min(75rem, 100%)

Choose the maximum content measure inside the SiteHeader.

--qp-site-header-min-height

root · 4rem

Choose the minimum physical height of the SiteHeader.

--qp-socials-icon-size

root · 1.25rem

Choose the visual scale of Socials glyphs.

--qp-socials-link-size

root · 2.75rem

Choose the physical size of Socials link controls.

--qp-sticky-tray-compact-max-width

derived · min(24rem, calc(100vw - (var(--qp-space-sm) * 2)))

Calculates sticky tray compact max width from the small spatial rhythm to preserve viewport clearance.

--qp-sticky-tray-max-width

root · 48rem

Choose the maximum horizontal extent of the StickyTray.

--qp-sticky-tray-panel-max-height

root · 60vh

Choose the maximum viewport capacity of an open StickyTray panel.

--qp-sticky-tray-side-open-width

derived · min(24rem, calc(100vw - (var(--qp-space-sm) * 2)))

Calculates sticky tray side open width from the small spatial rhythm to preserve viewport clearance.

--qp-subtitle-max-width

root · 48rem

Choose the standard readable measure for explanatory subtitles across major QP compositions.

--qp-toast-max-width

root · 40rem

Choose the maximum readable width of Toast messages.

--qp-toast-min-width

root · 0px

Choose the minimum physical width of Toast messages.

--qp-toc-link-min-height

root · 2.5rem

Choose the minimum interactive height of TOC links.

--qp-video-max-height

root · min(80vh, 50rem)

Choose the maximum displayed height of Video media.

--qp-video-max-inline-size

derived · calc(var(--qp-video-max-height) * 1.7778)

Calculates Video width from its authored maximum height using the standard widescreen proportion.

--qp-video-play-icon-size

root · 3rem

Choose the visual scale of the Video play glyph.

--qp-video-play-size

root · 3rem

Choose the physical prominence of the Video play control.

--qp-video-ratio

root · 16 / 9

Choose the framing proportion of Video media.

Spacing

Spatial rhythm and independently authorable spacing relationships that control the density and separation of QP compositions.

--qp-card-list-gap

derived · 0 0 var(--qp-space-lg)

Uses the large spatial rhythm for card list gap, with semantic remapping for CardList-specific treatment.

--qp-card-list-margin

Calculates trailing CardList separation from large spatial rhythm so lists participate in document cadence without leading space.

--qp-control-padding-block-md

root · 0.7rem

Choose the ordinary block-axis density used by action controls and control-like bars.

--qp-control-padding-block-sm

root · 0.625rem

Choose the compact block-axis density used by navigation, search, and similar controls.

--qp-control-padding-inline

Choose the standard horizontal breathing room for compact navigation, search, and TOC controls.

--qp-cta-gap

derived · var(--qp-space-md) 0

Uses the small spatial rhythm for CTA gap, with semantic remapping for CTA-specific treatment.

--qp-cta-margin

Calculates vertical CTA separation from base spatial rhythm so actions participate consistently in document cadence.

--qp-cta-padding-block

inherited · var(--qp-control-padding-block-md)

Uses the standard control density for CTA padding block, with semantic remapping for CTA-specific treatment.

--qp-cta-padding-inline

root · 1.1rem

Choose the horizontal emphasis and label breathing room of CTA controls.

--qp-footer__section-padding-block

Uses the large spatial rhythm for footer section padding block, with semantic remapping for SiteFooter-specific treatment.

--qp-footer__section-padding-inline

Uses the major-surface inline safe area for footer section padding inline, with semantic remapping for SiteFooter-specific treatment.

--qp-footer-margin-top

root · 4rem

Choose whether the Footer is separated from the document or attached to the preceding surface.

--qp-gallery-gap

Uses the base spatial rhythm for gallery gap, with semantic remapping for Gallery-specific treatment.

--qp-grid-gap

Uses the large spatial rhythm for grid gap, with semantic remapping for Foundation-specific treatment.

inherited · var(--qp-space-xs)

Uses the base spatial rhythm for lightbox padding, with semantic remapping for Lightbox-specific treatment.

--qp-media-caption__subtitle-gap

Uses the extra-small spatial rhythm for media caption subtitle gap, with semantic remapping for MediaCaption-specific treatment.

--qp-media-caption__title-gap

Uses the framework-defined absence of spacing for media caption title gap, with semantic remapping for MediaCaption-specific treatment.

--qp-media-caption-gap

inherited · var(--qp-control-padding-block-sm)

Uses the small spatial rhythm for media caption gap, with semantic remapping for MediaCaption-specific treatment.

--qp-menu__link-padding-block

Uses the compact control density for menu link padding block, with semantic remapping for Menu-specific treatment.

--qp-menu__link-padding-inline

inherited · var(--qp-control-padding-inline)

Uses the compact-control inline inset for menu link padding inline, with semantic remapping for Menu-specific treatment.

--qp-menu__mobile-link-padding-block

Choose mobile navigation touch density independently from compact desktop controls.

--qp-menu__mobile-link-padding-inline

inherited · var(--qp-space-xs)

Uses the base spatial rhythm for menu mobile link padding inline, with semantic remapping for Menu-specific treatment.

--qp-menu__mobile-list-gap

Uses the extra-small spatial rhythm for menu mobile list gap, with semantic remapping for Menu-specific treatment.

--qp-menu__mobile-list-margin

root · 0.75rem auto 0

Choose how the expanded mobile navigation panel separates from header content.

--qp-menu__mobile-list-padding

inherited · var(--qp-control-padding-block-sm)

Uses the small spatial rhythm for menu mobile list padding, with semantic remapping for Menu-specific treatment.

--qp-menu__search-padding-block

Uses the compact control density for menu search padding block, with semantic remapping for Menu-specific treatment.

--qp-menu__search-padding-inline

inherited · var(--qp-control-padding-inline)

Uses the compact-control inline inset for menu search padding inline, with semantic remapping for Menu-specific treatment.

--qp-menu-gap

root · 0.375rem

Choose the density of top-level navigation items without changing their clickable padding.

--qp-menu-nested-gap

root · 0.125rem

Choose the separation between entries in a nested navigation hierarchy.

--qp-menu-nested-indent

Uses the base spatial rhythm for menu nested indent, with semantic remapping for Menu-specific treatment.

Uses the large spatial rhythm for modal inset, with semantic remapping for Modal-specific treatment.

Uses the large spatial rhythm for modal padding, with semantic remapping for Modal-specific treatment.

--qp-page-header__hero-margin-block-end

Uses the extra-large spatial rhythm for page header hero margin block end, with semantic remapping for PageHeader-specific treatment.

--qp-page-header__hero-panel-padding-block--mobile

Uses the large spatial rhythm for page header hero panel padding block in its mobile state, with semantic remapping for PageHeader-specific treatment.

--qp-page-header__hero-panel-padding-inline

Uses the major-surface inline safe area for page header hero panel padding inline, with semantic remapping for PageHeader-specific treatment.

--qp-page-header__hero-panel-padding-inline--mobile

Uses the base spatial rhythm for page header hero panel padding inline in its mobile state, with semantic remapping for PageHeader-specific treatment.

--qp-page-header-margin-block-end

Uses the extra-large spatial rhythm for page header margin block end, with semantic remapping for PageHeader-specific treatment.

--qp-page-header-padding-block

derived · var(--qp-control-padding-block-md) 1rem

Uses the extra-large spatial rhythm for page header padding block, with semantic remapping for PageHeader-specific treatment.

--qp-page-list__action-padding

Builds the PageList action-label padding recipe from standard control density while retaining its local inline inset.

--qp-page-list__body-gap

Uses the small spatial rhythm for page list body gap, with semantic remapping for PageList-specific treatment.

--qp-page-list__body-padding-inline

Uses the large spatial rhythm for page list body padding inline, with semantic remapping for PageList-specific treatment.

--qp-page-padding-bottom

Uses the framework-defined absence of spacing for page padding bottom, with semantic remapping for PageDocument-specific treatment.

--qp-page-padding-inline

Uses the framework-defined absence of spacing for page padding inline, with semantic remapping for PageDocument-specific treatment.

--qp-page-padding-top

Uses the framework-defined absence of spacing for page padding top, with semantic remapping for PageDocument-specific treatment.

--qp-product-list__body-gap

Uses the small spatial rhythm for product list body gap, with semantic remapping for ProductList-specific treatment.

--qp-region-gap

Uses the extra-large spatial rhythm for region gap, with semantic remapping for Region-specific treatment.

--qp-region-mobile-gap

Uses the large spatial rhythm for region mobile gap, with semantic remapping for Region-specific treatment.

--qp-section__header-margin-block-end

Uses the large spatial rhythm for section header margin block end, with semantic remapping for PageSection-specific treatment.

--qp-section__surface-padding-block

Uses the extra-large spatial rhythm for section surface padding block, with semantic remapping for PageSection-specific treatment.

--qp-section__surface-padding-inline

Uses the major-surface inline safe area for section surface padding inline, with semantic remapping for PageSection-specific treatment.

--qp-section-margin-block-end

Uses the extra-large spatial rhythm for section margin block end, with semantic remapping for PageSection-specific treatment.

--qp-site-header-gap

Uses the base spatial rhythm for site header gap, with semantic remapping for SiteHeader-specific treatment.

--qp-site-header-padding-block

Choose the SiteHeader’s vertical density and overall bar height.

--qp-site-header-padding-inline

derived · calc(var(--qp-space-md) * 1.5)

Uses the major-surface inline safe area for site header padding inline, with semantic remapping for SiteHeader-specific treatment.

--qp-space-lg

Derives large spacing from the base spatial rhythm to keep prominent component spacing proportional.

--qp-space-md

root · 1rem

Choose the base unit that controls QP’s overall spatial density.

--qp-space-sm

derived · calc(var(--qp-space-md) * .5)

Derives small spacing from the base spatial rhythm to keep compact relationships proportional.

--qp-space-xl

derived · calc(var(--qp-space-md) * 2)

Derives extra-large spacing from the base spatial rhythm to keep section-scale separation proportional.

--qp-space-xs

derived · calc(var(--qp-space-md) * .25)

Derives extra-small spacing from the base spatial rhythm to keep tightly related content proportional.

--qp-sticky-tray__bar-gap

inherited · var(--qp-control-padding-block-md)

Uses the small spatial rhythm for sticky tray bar gap, with semantic remapping for StickyTray-specific treatment.

--qp-sticky-tray__bar-padding-block

Uses the standard control density for sticky tray bar padding block, with semantic remapping for StickyTray-specific treatment.

--qp-surface-padding-inline

root · clamp(1rem, 4vw, 2rem)

Choose the default responsive inline safe area inside major QP surfaces.

--qp-system-space-none

system · 0

Represents the canonical absence of spacing for semantic relationships that resolve to zero.

--qp-toast-padding

root · .75rem 1rem

Choose the density and prominence of transient Toast messages.

--qp-toc__link-padding-block

inherited · var(--qp-control-padding-block-sm)

Uses the compact control density for TOC link padding block, with semantic remapping for Toc-specific treatment.

--qp-toc__link-padding-inline

inherited · var(--qp-control-padding-inline)

Uses the compact-control inline inset for TOC link padding inline, with semantic remapping for Toc-specific treatment.

--qp-toc-nested-gap

inherited · var(--qp-space-xs)

Uses the extra-small spatial rhythm for TOC nested gap, with semantic remapping for Toc-specific treatment.

--qp-toc-nested-indent