Glass Dark UI Skill

Workflow

1. Confirm environment (HTML/CSS, Tailwind, or React) and target surface (hero, dashboard, modal, card).
2. Define dark UI tokens first (background, glass fill, border glow, primary text, muted text).
3. Build frosted panels with backdrop-filter, transparent dark fill, and subtle inner highlight.
4. Apply the masked gradient border (.border-gradient::before) to key surfaces.
5. Add restrained depth (shadow + glow) and clear hover/focus states.
6. Validate contrast and mobile behavior before finalizing.

Base Tokens

Use these as defaults and tune per brand.