Glassmorphism Design Spec

4 Core Elements

1. Transparency — Semi-transparent backgrounds using rgba() or hsla() with alpha 0.05–0.4
2. Blur — backdrop-filter: blur() ranging 8–40px for frosted-glass effect
3. Border — Subtle semi-transparent borders (1px solid rgba(255,255,255,0.18)) to define edges
4. Shadow — Soft layered box-shadow for depth separation from background

CSS Tokens

Reference: references/tokens.css

Use CSS custom properties from tokens.css for consistent theming:

@import 'references/tokens.css';