Density
The internal slot gap of every interactive component — fixed per density, so icon-to-label spacing never drifts. A loading spinner claims the slot-loading-width without layout shift.
--slot-gap-compact
Compact density.
--slot-gap-standard
Standard density.
--slot-gap-expanded
Expanded density.
Layers
The stacking contract: nine named planes so features never invent a z-index. Each layer has exactly one neighbor above it.
| Token | Value | Use |
|---|---|---|
| --z-base | 0 | Page content. |
| --z-sticky | 100 | Sticky table headers, top nav. |
| --z-dropdown | 200 | Select menus, popovers, autocomplete. |
| --z-drawer-scrim | 290 | Scrim behind a drawer — just under it. |
| --z-drawer | 300 | Slide-over sheets, sidebars. |
| --z-overlay | 390 | Modal-family backdrop — just under the modal. |
| --z-modal | 400 | Dialog windows, alert modals. |
| --z-toast | 500 | Notifications, snackbars. |
| --z-tooltip | 600 | Tooltips — always topmost. |
A live stack — each plane above carries a higher --z-* token; scrims sit just under the surface they serve.
Sizes
The icon ladder — each step pairs with a text role, so an icon and its label share one optical system.
--icon-xs
Dots and table chevrons — pairs with the smallest text.
--icon-sm
Button icons, input adornments.
--icon-md
Standard buttons and nav items.
--icon-lg
Card headers, toast icons.
--icon-xl
Empty states, hero banners.