Foundations
Layers
Every stacking decision in the system is one of these six. A raw z-50 in a component is a bug — it cannot be reasoned about against the others. Gaps of 100 leave room for a host page's own layers to interleave.
--z-index-tooltip600
Tooltips
--z-index-toast500
Above modal on purpose — "failed to save" must reach the user while a dialog is open
--z-index-modal400
Dialog, sheet, drawer
--z-index-overlay300
The scrim behind a dialog
--z-index-dropdown200
Select, menu, popover, combobox
--z-index-sticky100
Sticky table heads, app header
--z-index-base0
The page
Sporting Scouter Design System
Every token on this site is generated from
theme.css.