Apply layer effects and shadows

Add a subtle elevation to the card list with a 6px y-offset shadow, 12px blur and 15% black opacity, and apply it as an effect on the Cards component so it updates across the library. Ensure the shadow is layer-effect only (not rasterized) and that it preserves corner radii on hover and expanded states.

Before I release the new card elevation, make the shadow easy to review: show the card at normal and hover states side by side, list the exact effect values (offset, blur, spread, color, opacity), and highlight any instances where a second inner shadow or background image will mute the lift so reviewers can decide if the effect should be component-level or frame-level.

I applied the same drop shadow effect to every card component but on a few pages the elevation reads much stronger. The product manager and the frontend engineer are watching. I don’t know whether this is due to stacking multiple shadows, a background color contrast issue, or export flattening. What is the most likely reason and the immediate test to confirm it?

We often ship components where shadows were flattened into bitmaps or duplicated, causing awkward contrasts and missed updates. I’m the senior designer and it forces engineering to patch visuals. Which habitual change in how we apply or document layer effects would stop this, and what one check should we add to our pre-release checklist?