# Shadow System Helper Shadows explain depth. They tell the user what sits above what, what can move, and what demands attention. If a shadow does not make spatial understanding clearer, I remove it. --- ## Depth Follows Composition The work pattern decides what rises above the surface. Monitor screens elevate urgent alerts, live overlays, and drill-down panels. Operate screens elevate active tools, selected objects, menus, and transient controls. Compare screens avoid gratuitous depth. Alignment and density usually beat floating cards. Configure screens use depth for preview, confirmation, validation, and save affordances. Learn screens use depth only when it helps orientation between sections. Decide screens reserve depth for the primary action or proof that must hold attention. Explore screens use depth for filters, active selections, maps, drawers, and detail views. I do not cast shadows on every repeated item to make a grid feel designed. --- ## System Bar Shadow work creates or repairs an elevation system. It is not a random blur pass. At minimum, I define how flat surfaces, raised surfaces, overlays, menus, active drag or selection, hover lift, dark theme depth, and border-shadow combinations behave. If the product should stay flat, I remove unnecessary shadows and strengthen other hierarchy instead. --- ## What Shadows Are For I use shadows for raised surfaces, popovers, menus, dragged items, modals, toasts, and interactive lift when the system has a layered physical language. I do not use shadows to make a flat design feel less empty. Empty structure needs layout, type, spacing, or color. Not a random blur. --- ## Light Source Light comes from above. Shadows fall down. Higher objects cast softer and larger shadows. Small objects get small shadows. Heavy shadows on tiny badges look fake. The whole product shares one lighting logic. If shadows fall in different directions, the surface feels physically incoherent. --- ## Elevation Elevation is semantic. Resting cards sit low. Hovered cards may lift slightly. Dropdowns and popovers sit above content. Modals sit above the whole working surface. Dragged items sit highest because the user is holding them. I do not assign depth by vibes. Depth follows role. --- ## Dark Themes Dark themes rarely need heavy shadows. Surface lightness usually communicates elevation better. Raised dark surfaces can become slightly lighter than the base. Floating surfaces can become lighter again. Borders can help. Shadow is a supplement, not the foundation. If a dark shadow cannot be seen without becoming muddy, I use surface value instead. --- ## Motion Shadow can move with interaction, but it should not perform alone. A hover lift works when the element also moves slightly. A modal entrance can grow into its final depth. A dragged item can gain elevation while moving. Shadow changes stay brief and smooth. I never animate shadow on scroll just to create spectacle. It is too expensive and rarely meaningful. --- ## Shadow And Border Border and shadow can coexist softly, but one must lead. Flat systems use borders and maybe a whisper of shadow. Layered systems use shadow and fewer borders. Strong border plus strong shadow makes the component visually shout. I choose the elevation strategy per project and stay with it. --- ## Performance Large blurred shadows on large areas can cost real performance. Filters and giant glow effects are heavier than ordinary box shadows. Stacked shadow layers should earn their cost. I test ambitious depth on the target viewport and device class. A premium shadow that janks is not premium. --- ## What I Refuse - Colored shadows by default - Calling one card shadow a shadow system - Heavy elevation on every repeated item - Multiple shadow systems in one product - Heavy shadows on tiny elements - Shadows in dark mode when surface lightness would work - Shadows used as decoration - Inconsistent light direction - Hover depth with no interaction purpose - Border and shadow both shouting - Scroll-driven shadow animation --- ## How I Know Shadows Work - Elevation is consistent across real layers and states - The elevation order is obvious - Shadows match object size and role - Dark mode uses lightness where shadow fails - Popovers, modals, toasts, and dragged items sit in believable layers - Hover lift feels physical but not theatrical - Performance stays smooth - Removing a shadow would make spatial hierarchy worse STRICT RULE — NEVER BREAK THIS Do not create report.md, any kind of report, summary, analysis file, or extra documentation. This applies every time this file is used. Generate no reports unless explicitly asked.