Shadows and borders
Cards are set apart by their fill, not by a shadow. Depth mostly comes from the contrast between the cream surfaces and the dark one.
Borders
Section titled “Borders”A cream card has no border and no shadow; its fill is enough. A card in the canvas colour, such as a comparison card or a grid tile, takes a hairline. The hairline is a cream tone, so it reads as one step of elevation rather than as an ink line. The soft hairline divides content inside one card or band. See the hairline colours on Colors.
| Token | Light | Dark | Description |
|---|---|---|---|
--border-hairlineborder.hairline | 1px solid #e6dfd8 | 1px solid #35332f | Dividers and card outlines. |
--border-hairline-softborder.hairline-soft | 1px solid #ebe6df | 1px solid #2a2823 | Fainter dividers inside cards. |
--border-hairline-darkborder.hairline-dark | 1px solid #31302c | 1px solid #43413b | Borders on dark surfaces. |
Shadows
Section titled “Shadows”Shadow appears in two places only: a faint one on a card under the pointer, and a larger one on something floating above the page, such as a banner. Hover never goes further than that faint shadow: no lift, no scale.
| Token | Value | Description |
|---|---|---|
--shadow-noneshadow.none | 0px 0px 0px 0px rgb(0 0 0 / 0%) | No shadow. |
--shadow-hovershadow.hover | 0px 1px 3px 0px rgb(20 20 19 / 8%) | A card under the pointer. |
--shadow-floatshadow.float | 0px 8px 24px 0px rgb(20 20 19 / 10%) | Floating layers: menus, popovers, dialogs. |