elevation-and-depth
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.
More from dembrandt/dembrandt-skills
nielsen-usability-heuristics
UI design and review should apply Nielsen's 10 Usability Heuristics — the foundational principles for evaluating and improving usability. Use when auditing an interface, designing interaction flows, writing error messages, or reviewing any UI for usability issues.
53color-mode-and-theme
Choose light, dark, or combined color mode deliberately based on brand tone and user context. Offer a theme selector only when user control genuinely matters — enterprise tools, data-heavy UIs, or extended-use applications. Use when defining the base color palette, designing a design system, or deciding whether to build dark mode support.
53user-flows-and-guided-paths
Related features and tasks — such as purchase flows, onboarding, or multi-step configuration — should be designed as natural, guided paths that feel coherent and fit the product hierarchy. Use wizards for complex sequential tasks. Use when designing flows, onboarding, checkout, setup sequences, or any multi-step user journey.
52form-design
Forms have three layers of guidance: helper text below the input explains what to enter, placeholder shows the expected format, and validation confirms correctness. Real-time validation for complex inputs. Submit enables only when the form is valid. Use when designing or reviewing any form, input field, or data entry UI.
52button-states
Every interactive element needs a complete set of visual states — rest, hover, active/pressed, focus, disabled, and loading. States should be derived algorithmically from the base colour, not chosen arbitrarily. Use when designing buttons, links, inputs, or any clickable component.
51semantic-html-and-seo
Semantic HTML5, SEO fundamentals, alt texts, progressive enhancement, SPA considerations, device capability detection, and user context awareness. Good HTML is the foundation of accessibility, SEO, and resilient UI. Use when building any web UI, reviewing markup quality, or optimising for search and accessibility.
50