Foundation

Effects (Shadow)

Shadows add depth and realism by positioning elements on a z-axis. Nexus splits them into a general-purpose drop-shadow elevation scale and spread-only focus rings for interactive component states.

Drop shadow scale

General-purpose elevation for surfaces, cards, and floating elements. Apply via the shadow-* utilities — never hand-write a box-shadow.

shadow-xs1 layer

Subtle chips, small tags

shadow-sm2 layers

Input focus, compact cards

shadow-md2 layers

Cards, dropdowns, tooltips

shadow-lg3 layers

Modals, drawers, popovers

shadow-xl3 layers

Dialogs, large floating panels

shadow-2xl2 layers

Full-screen overlays

shadow-3xl2 layers

Feature heroes, max depth

Component focus rings

Spread-only rings (0 0 0 spread) for interactive focus states. Apply only on the matching component — and never stack a focus ring with a drop shadow on the same element.

Button — default size

4px spread

Defaultshadow-btn-default

Errorshadow-btn-error

Warningshadow-btn-warning

Successshadow-btn-success

Infoshadow-btn-info

Button — large size

6px spread

Defaultshadow-btn-lg

Errorshadow-btn-error-lg

Warningshadow-btn-warning-lg

Successshadow-btn-success-lg

Infoshadow-btn-info-lg

Toggle

4px spread

Restingshadow-toggle-default

Focusedshadow-toggle-focus