Buttons feel tactile, panels stay quiet: how raised controls, wells, cards, menus and dialogs leave the page.
Buttons are the tactile thing: they read as keys you can press and squeeze to 0.97 when you do. Everything else stays quiet. Panels don't draw outlines; a card separates by its fill, and only what floats over the page casts a soft shadow. In dark mode a surface steps up in lightness instead.
| Token | For | What it does |
|---|---|---|
| shadow-button | Buttons and raised controls | A faint ring and a hairline drop, and a squeeze when pressed. The one thing that feels pressable. |
| bg-field | Fields | A well: a fill one step into the surface, no edge until focus or an error. |
| bg-control | Raised controls | White in light, a step above the card in dark. |
| shadow-card | Cards | No outline: the fill separates it, with a breath of shadow in light. |
| shadow-menu | Menus, popovers, selects | A soft shadow where it floats, no hard edge. In dark, a faint 0.5px line. |
| shadow-modal | Dialogs | One soft shadow; the backdrop does the rest. |
| material-popover | Floating surfaces | 86% opaque with a blur, so what is beneath shows through. |