Elevation Hierarchy and Design System Tokens

Design systems organize depth into a systematic scale of elevation tokens mapped to real-world interface roles:

• Elevation 0 (Base Canvas): Flat page canvas, form inputs, table rows. No shadow.
• Elevation 1 (Cards & Lists): box-shadow: 0 1px 3px rgba(0,0,0,0.06). Content containers resting slightly above the canvas.
• Elevation 2 (Hovered Cards & Dropdowns): box-shadow: 0 4px 12px rgba(0,0,0,0.08). Floating popovers and dropdown menus.
• Elevation 3 (Sticky Navbars & Side Drawers): box-shadow: 0 12px 24px rgba(0,0,0,0.12). Persistent navigation hovering over page content.
• Elevation 4 (Modal Dialogs): box-shadow: 0 24px 48px rgba(0,0,0,0.18). Critical interrupting overlays requiring absolute user focus.