Every web developer has encountered this disaster: an engineer wants a modal to sit on top of a sticky header, so they write z-index: 999. Another engineer wants a toast to sit on top of the modal, so they write z-index: 999999. Soon, the codebase is an unmaintainable war of arbitrary numbers.
A design system ends this chaos with a strict, tokenized Z-Index scale:
z-index-base: 0 (Standard document flow)z-index-dropdown: 100 (Dropdown menus, autocomplete popovers)z-index-sticky: 200 (Sticky navigation bars, fixed headers)z-index-backdrop: 400 (Modal backdrop dimming overlay)z-index-modal: 500 (Modal dialogs, side drawers)z-index-toast: 1000 (Global system notifications, toasts)By banning arbitrary z-index numbers and enforcing tokens via linters, UI elements layer in predictable, perfect order.
Level 4 · Component Architecture & Visual Language