Layering & Depth
Depth provides information architecture. By using standardized Z-stack tokens and premium elevation effects, we manage interface complexity.
5-Tier Surface Hierarchy
We never use more than 5 levels of Z-depth. This prevents visual clutter and ensures the user always knows what is modal.
Standard Elevation Tags
We use standardized Z-index tokens (Base, Raised, Overlay, etc.) instead of hardcoded values to prevent Z-index "wars".
Shadow + Glow depth
Critical UI (Modals, Alerts) use brand-tinted glows instead of just black shadows to express "Virtual Institutionalism".
The Z-Stack Visualizer
Experience the isometric projection of our layering system. Higher Z-values inherit stronger shadows and "Satin-Charcoal" surface lifts.
The absolute foundation of the page.
Card base, sticky sidebars.
Tooltips, simple popovers.
Institutional navigation bars.
Highest level task isolation.
The Modal Isolation Rule
Whenever a Z-MAX element is active, the rest of the interface must inherit a 16px blur backdrop filter. This isn't just aesthetic — it provides immediate operational focus on high-stakes tasks like QR Verification or User Management changes.