use-shadows-appropriately

Elevation shadows in UI design should be used only to communicate functional layer separation and stacking contexts, such as for modals, popovers, dropdowns, and interactive controls, rather than for pure decoration.

To fix inconsistent shadow styles, enforce a small, consistent shadow scale ranging from none to high, then run pass/fail checks on elements like cards and buttons to ensure shadows match their functional purpose.

Static cards, text, and icons should not have drop shadows. You should flatten static content using flat or near-flat styling, reserving shadows exclusively for interactive controls and overlay elements to reduce visual clutter.

The best way to standardize a shadow scale for a design system is to define a small set of elevation levels—none, subtle, low, medium, and high—and apply them strictly based on an element's interaction affordance and layer separation requirements.

Evaluate UI shadow accessibility by performing pass/fail checks that assess whether each shadow reflects functional elevation. Remove decorative shadows that distract users and ensure interactive elements use a consistent elevation scale.

Tooltips and popovers look visually cluttered when shadows are applied decoratively without consistent elevation rules. Standardize their shadow levels to match their stacking context and remove overlapping or redundant drop shadows.