Elevation Levels
Elevation in Couldja communicates hierarchy, focus, and interaction. Shadows are used intentionally to separate surfaces while maintaining a calm, readable interface.
Elevation 0 — None
No shadow
Flat surfaces such as page backgrounds or grouped sections.
Elevation 1 — XS
Subtle separation
Hairline cards, list rows, or low-emphasis containers.
Elevation 2 — Small
Default surface
Cards, panels, and standard UI containers.
Elevation 3 — Medium
Raised content
Dropdowns, menus, tooltips, and hover states.
Elevation 4 — Large
Overlay surfaces
Modals, dialogs, popovers, and floating panels.
Elevation 5 — XL
Maximum focus
Critical overlays that must dominate the interface.
Guidelines
• Use the lowest elevation necessary to communicate hierarchy.
• Avoid stacking multiple high-elevation surfaces.
• Elevation should support focus, not decoration.
• Combine elevation with motion and opacity for interactive feedback.