Elevation
Shadows that separate cards, menus and dialogs from the page beneath them.
Scale
Seven steps, each tinted with the system’s black, #0A090B, so shadows stay warm against the greys.
xs
sm
md
lg
xl
2xl
inner
Component shadows
Four shadows, each named for the component it sits under.
input
card
dropdown
tooltip
--shadow-card has three layers, and the third is 0 0 0 1px. It draws the card’s edge without a border, so the edge adds nothing to the layout.--shadow-input
0 1px 2px 0 rgba(10, 9, 11, 0.05)
--shadow-card
0 2px 12px -1px rgba(10, 9, 11, 0.10)
0 2px 2px -1px rgba(10, 9, 11, 0.04)
0 0 0 1px rgba(10, 9, 11, 0.05) ← the hairline
--shadow-dropdown
0 4px 12px rgba(0, 0, 0, 0.08)
0 2px 4px rgba(0, 0, 0, 0.04)
--shadow-tooltip
0 2px 8px rgba(0, 0, 0, 0.15)
Focus rings
button
Bore 12
chip
field
| Token | Value | Where it lands |
|---|---|---|
| (no token) | 2px gap, 2px ring | Buttons. |
| --shadow-button-focus | 2px white + 2px #1877F2 | Chips, and small buttons inside fields. Was 0 0 0 3px rgba(0,174,239,.3). |
| (no token) | 2px #1877F2 border, 3px halo at 6% | Text fields. The border carries focus; the halo is decoration. |
Usage
- Don’t add a border to a surface that has
--shadow-card. Its third layer already draws the edge. - Use
--shadow-dropdownfor menus and dropdowns.