Foundations
Elevation
One recipe across the kit — top highlight glaze + soft drop shadow. Never fake depth with a darker bottom border.
Tiers
--supa-shadow-rest
rest
Cards at rest, inputs, badges.
--supa-shadow-raised
raised
Solid buttons, primary CTAs.
--supa-shadow-card
card
Document cards, featured panels.
--supa-shadow-dropdown
dropdown
Menus, popovers, tooltips.
--supa-shadow-modal
modal
Dialogs, drawer surfaces.
Why never the dark bottom border
We tried it twice and shipped it twice — both times the differential border-bottom-color read as a stray hairline at small sizes (badges, chips). The rule is uniform: all four border edges share a colour. Depth comes from the ::before highlight glaze and the layered drop shadow.