Foundations

Shadow

Shadows are supporting actors. In dark mode they mostly reinforce layering; the real depth cue is the surface luminance step. Nothing in Luc UI uses a large generic drop shadow.

Levels

shadow.none

shadow-none

Flat surfaces, table rows, ghost cards.

shadow.xs

shadow-xs

Inset wells and the smallest controls.

shadow.sm

shadow-sm

Default card and button elevation.

shadow.md

shadow-md

Hovered cards, raised stat cards.

shadow.lg

shadow-lg

Menus and large floating panels.

shadow.overlay

shadow-overlay

Dialogs, popovers, tooltips.

Dark mode detail

Dark shadows need an inset top highlight or the surface reads as a hole. That highlight is part of the shadow token, not a component style.

Wrong — flat fill

Looks like a hole cut in the canvas.

Right — sm with inset highlight

Reads as a surface catching light from above.

Too much — 24px blur

Reads as a floating sticker, not a panel.

Reference

Shadow tokens
Token	Utility	Use for
`shadow.none`	`shadow-none`	Flat surfaces, table rows, ghost cards.
`shadow.xs`	`shadow-xs`	Inset wells and the smallest controls.
`shadow.sm`	`shadow-sm`	Default card and button elevation.
`shadow.md`	`shadow-md`	Hovered cards, raised stat cards.
`shadow.lg`	`shadow-lg`	Menus and large floating panels.
`shadow.overlay`	`shadow-overlay`	Dialogs, popovers, tooltips.

Rules

Change elevation by one step on interaction, not two.
Combine elevation with a border colour change for a crisp hover.
Keep overlay shadows the only deep ones.

Don't

Animate blur radius — it forces a repaint every frame.
Put a shadow on every card in a dashboard grid.
Write a bespoke box-shadow in a component.