Effects
Aurora's elevation system uses six numbered shadow levels — shadow-100 through shadow-600. Pick one based on how far the surface should appear above the page.
Shadow scale
shadow-100
Subtle separation
shadow-200
Cards at rest
shadow-300
Popovers, dropdowns
shadow-400
Hover-lifted cards
shadow-500
Modals
shadow-600
Top-of-stack, alerts
html
<div class="shadow-100">Subtle separation</div>
<div class="shadow-200">Card at rest</div>
<div class="shadow-300">Popover or dropdown</div>
<div class="shadow-400">Lifted card</div>
<div class="shadow-500">Modal</div>
<div class="shadow-600">Top-of-stack</div>Picking a level
| Level | Reach for it when… |
|---|---|
shadow-100 | You want a hairline of depth — list items, table rows, low-emphasis cards |
shadow-200 | Default card or surface elevation |
shadow-300 | Floating UI: popovers, dropdowns, menus, tooltips |
shadow-400 | A card lifts on hover, or a panel rises above peers |
shadow-500 | Modal-class surfaces over an overlay |
shadow-600 | Top-of-stack toasts and emergency alerts |
The numbers are an explicit ladder — adjacent levels are perceptually distinct. Don't invent in-between values; pick the closest level on the scale.
When to skip shadows
For surfaces that sit flush against the page (settings rows, table cells, list items), a border is usually the right boundary, not a shadow. Use shadows for surfaces that need to feel above the page.