Foundations

Elevation

The system is flat. Planes separate with a hairline. Only things that genuinely float — a popover, a dialog, an embed on someone else's page — cast a shadow.

A card

--shadow-card: none

By decision, not omission. The name exists so conformant markup resolves instead of failing silently.

A select menu

--shadow-popover

Dropdowns, comboboxes, tooltips. Paired with a hairline, never alone.

A dialog

--shadow-overlay

Dialog, sheet, drawer. Sits over a 40% ink scrim.

An embed

--shadow-widget

The one place elevation is load-bearing: an unknown host background means a hairline cannot be relied on to read.

Sporting Scouter Design System

Every token on this site is generated from theme.css.