Overlays
Layered UI surfaces — modals, slidevers, tooltips, toasts. Each uses elevated glass with heavy backdrop blur.
Centered dialog with frosted overlay and elevated glass content panel. Use for confirmations, forms that need focus, or detail views. The overlay uses backdrop-blur-sm to soften the background without hiding it.
Side panel for settings, detail views, or navigation. Slides in from the edge with the same elevated glass treatment as modals. Ideal for node configuration or activity logs.
Bottom sheet drawer — pull down to dismiss. Great for mobile-first quick actions or compact detail views.
Compact contextual hints. Fully opaque for maximum readability — no glass blur here, because tooltips need to be instantly scannable.
Non-blocking notifications that appear and auto-dismiss. Use semantic colors: success for completed actions, error for failures, warning for attention needed.