elevation-and-depth
Installation
SKILL.md
Elevation and Depth
Elevation uses shadow and layering to communicate that an element sits above the base surface — giving UI a sense of physical depth. Combined with border-radius, it creates the tactile quality that makes cards graspable, modals clearly floating, and dropdowns feel like they've appeared on top of content.
The Elevation Scale
Define a small set of elevation levels as tokens. Each level maps to a specific UI role.
| Level | Token | Shadow | Role |
|---|---|---|---|
| 0 | --shadow-none |
none | Flat surface, inline elements |
| 1 | --shadow-xs |
0 1px 2px rgba(0,0,0,0.06) |
Subtle card, table row hover |
| 2 | --shadow-sm |
0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06) |
Card, input focus ring area |
| 3 | --shadow-md |
0 4px 6px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06) |
Dropdown, popover |
| 4 | --shadow-lg |
0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05) |
Modal, dialog, side drawer |
| 5 | --shadow-xl |
0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04) |
Command palette, full-screen overlay |
Keep shadows subtle. Dark, heavy shadows feel dated and visually aggressive. Light, diffuse shadows feel modern and material.