Foundations
Elevation
Elevation shows what sits above what. Use surface color first, and add shadow only when something floats over other content.
Shadows
None Flat surfaces that sit on the page.
Raised Slight lift, for cards that need separating.
Overlay Floating layers, such as menus and dialogs.
Theme-aware shadows
These combine a soft glow with a drop shadow and change with the theme. Use them for floating layers.
Card Containers such as the data table.
Menu Dropdown menus and the Select popup.
Modal Dialogs, drawers, popovers, and toasts.
Tooltip Tooltip bubbles.
Layering with surfaces
Each step up is one surface token. In dark mode this matters more than shadow, because shadows are hard to see on dark backgrounds.
Canvas: the page
Card: a raised container
Subtle: a group inside it
Lines
| Name | Width | Used for | Token |
|---|---|---|---|
| Hairline | Dividers and outlines. | --as-elevation-border-hairline | |
| Focus ring | Keyboard focus outlines. | --as-elevation-border-focus |