Complex UI & Tables
Patterns for information-rich environments where density, performance, and institutional clarity are paramount.
16px Institutional Gutter
High-density tables use a strict 16px gutter (--ds-space-gap-md) between columns to maximize information density without clutter.
Glass-Sticky Headers
Table and dashboard headers use --ds-surface-glass with backdrop-blur-xl, allowing content to bleed subtly through during scroll.
Stacking Protocol
Overlays, Drawers, and Popovers use incremental z-index tiers (L10 -> L50) with unique shadow bloom multipliers for depth.
High-Density Table Lab
Interactive demonstration of 16px gutter spacing and glassmorphic headers.
Resident Registry
Subtle-Satin Borders
Table rows in the GateFlow system use --ds-border-subtle for initial separation and --ds-border-bold for grouping. This ensures that even with hundreds of rows, the UI maintains its institutional legibility without visual fatigue.