Skip to content

Elevation

Flat by default — hierarchy comes from hairline borders and accent tints; the one sanctioned shadow is for overlays.

Tokens

  • --nx-hairline
  • --nx-shadow-overlay
  • --nx-scrim

Accessibility

  • Overlay shadow (--nx-shadow-overlay) is reserved for drawers/modals/menus/tooltips — flat components (cards, rows, tiles) never get a drop shadow.

Do / Don’t

  • Do: Use a 1px hairline border + accent tint for in-page hierarchy.Don’t: Don't add a drop shadow to a card or any non-overlay surface.

View in spec →