Design tokens

Elevation

Four shadow levels, defined once. Components use them by name, so a popover, a dialog and a menu always feel related, and changing the look of depth is one edit. In dark mode each level uses a deeper shadow with a faint light edge, because a dark shadow barely shows on a dark surface.

• --rd-elevation-controlFilled buttons and checked boxes: a lit top edge and a small drop.
• --rd-elevation-raisedResting controls, cards and the selected tab.
• --rd-elevation-floatingMenus, listboxes, tooltips and toasts.
• --rd-elevation-overlayDialogs, sheets and the command palette.

.menu { box-shadow: var(--rd-elevation-floating); }

Density

Control heights and padding come from tokens too. Put data-density="compact" on <html>, or on any container, and everything inside tightens. Use it for data-heavy admin screens; leave it off for marketing pages and forms people fill in once.

<html data-density="compact">

<section data-density="compact">…</section>

All tokens