Shadow
Rendered
--shadow-smhairline + 1px
--shadow-mdcard lift
--shadow-lgfloating panel
noneflat / inline
Tokens — app surface
| Token | Use |
|---|---|
--shadow-sm | hairline + 1 px — table rows, segmented controls |
--shadow-md | card lift (default) |
--shadow-lg | floating panel |
--shadow-modal | modal and sheet — deeper drop with a tighter ambient term |
--shadow-glass | glass surfaces — inner highlight, ambient drop, and a 1 px ink ring in one token |
none | flat / inline |
Tokens — brand surface
The brand layer drops the colored ambient term — every marketing shadow is neutral, soft, and rgba-on-black. The ramp adds two intermediate steps (xs, soft-lg) and a card / hero pair tuned for the marketing grid.
| Token | Use |
|---|---|
--shadow-xs | brand-surface hairline — under inputs, code-card outlines |
--shadow-sm | brand-surface card resting state |
--shadow-md | brand-surface card hover and pill lift |
--shadow-lg | brand-surface floating tile — used on the marketing pricing grid |
--shadow-soft-lg | lifted marketing card — the bridge between md and lg, used on tiles that sit over a bloom backdrop and need ambient separation without a hard edge |
--shadow-card | brand-surface feature card — denser ambient than --shadow-lg, no edge ring |
--shadow-hero | brand-surface hero tile — the heaviest drop in the ramp, reserved for above-the-fold panels |
--shadow-soft-lg is the right choice when a card sits over a peach or amber bloom panel: the colored backdrop already supplies edge contrast, so the shadow only needs to carry vertical lift. Reach for it on modal-adjacent overlays that float above bloom art too — --shadow-modal is too tight for a card-sized surface.
Pick from the app set on the app surface, the brand set on marketing. Treat the ramps as ordinal — never mix-and-match across layers in one composition.
Don't author colored glows. The system has none at either layer.