// Add depth only when functionally necessary (elevation, not decoration)
Determine what UI element draws attention first, second, third using size, weight, color, and de-emphasis strategies
Create clear typographic hierarchy using hand-crafted font sizes, weights, and colors
Create comprehensive palette with 8-10 greys, 5-10 primary, 5-10 accent shades
Use systematic spacing with 25% minimum jumps, start with excess whitespace
Create clear primary/secondary/tertiary action distinctions
Remove unnecessary borders, backgrounds, shadows, decorations
| name | use-shadows-appropriately |
| description | Add depth only when functionally necessary (elevation, not decoration) |
| domain | ui-design |
| skill-type | corrective |
| version | 1.0.0 |
| author | refactoring-ui-expert |
| prerequisites | [] |
| dependencies | [] |
Add depth and elevation only when functionally necessary, avoiding decorative shadows.
Added nuance: Subtle shadows on cards are acceptable (less distracting than borders). Large decorative shadows on static elements are wrong.
Corrective + Evaluative
Removes decorative shadows from static elements, reserves shadows for elevation layers (modals above content, dropdowns above page).
Subtle shadows (small blur, low opacity) on cards are OK. The book recommends them as alternative to borders. Large, flashy shadows on static content are wrong.
| Level | Use Case | CSS Example (approximate) |
|---|---|---|
| None | Static content, text, icons | none |
| Subtle | Cards (alternative to borders) | 0 2px 4px rgba(0,0,0,0.1) |
| Low | Raised cards, buttons | 0 4px 6px rgba(0,0,0,0.1) |
| Medium | Dropdowns, popovers, tooltips | 0 10px 15px rgba(0,0,0,0.1) |
| High | Modals, dialogs, drawers | 0 20px 25px rgba(0,0,0,0.15) |
| Failure | Description | Fix |
|---|---|---|
| Shadow Carpet | Every card has a shadow | Flatten static cards, subtle shadows OK |
| Drop Shadow Abuse | Heavy shadows on static elements | Reserve for elevation/interaction |
| Inconsistent Depth | Similar elements different shadows | Create 2-3 shadow levels, apply consistently |
| Black Shadows | Pure black shadows (harsh) | Use rgba with low opacity, tinted to brand |
| No Modal Separation | Modal doesn't feel above page | Increase shadow spread and blur |
eliminate-visual-clutter (shadows often add clutter)Input: Page with card shadows (0 4px 6px rgba(0,0,0,0.1)), button shadows (0 2px 4px), modal shadow (0 4px 6px), text with text-shadow
Evaluation: FAIL (cluttered)
Recommendation:
0 2px 4px)0 20px 25px rgba(0,0,0,0.15)