Shadow tokens

Shadow tokens create a small, consistent elevation vocabulary. They help separate a control or floating surface from its surroundings without turning every container into a raised card.

XS--aidsgn-shadow-xs

SM--aidsgn-shadow-sm

MD--aidsgn-shadow-md

LG--aidsgn-shadow-lg

Use xs for barely raised details, sm for quiet controls and containers, md for floating non-modal surfaces, and lg only for large floating surfaces that need strong separation. Avoid stacking multiple shadows or inventing one-off elevations when the distinction is not meaningful.

Elevation is supplementary. Borders, surface contrast, text, and native semantics must still communicate structure and state when shadows are unavailable, reduced by display conditions, or difficult to perceive.