SKILL.md
Shadow Elevation
Elevation System
Define Levels
--elevation-0: none; /* Flat, same plane */
--elevation-1: 0 1px 3px rgba(0,0,0,0.08); /* Slight lift: cards, buttons */
--elevation-2: 0 4px 8px rgba(0,0,0,0.12); /* Medium: dropdowns, popovers */
--elevation-3: 0 8px 24px rgba(0,0,0,0.16); /* High: modals, dialogs */
--elevation-4: 0 16px 48px rgba(0,0,0,0.20); /* Highest: floating panels */
Rules
- Higher = closer to user. Modals above dropdowns above cards.
- Shadows go down. Light source is always from above.
- Larger shadows are softer. Spread increases with elevation.
- Dark mode: Reduce shadow opacity OR use surface color lightening instead.
- Consistent across the product. Same elevation level = same shadow value.
Anti-Patterns
- Shadows on elements that don't need elevation (flat is fine).
- Multiple light sources (shadows going different directions).
- Too-dark shadows (looks like a 2012 skeuomorphic app).
- Using shadows instead of borders for separation (pick one system).
