Foundations
Foundations
Glass
Product-safe glassmorphism for Foundry Volt — frosted accents over controlled stages, liquid tint for heroes, and automatic solid fallbacks for lite bandwidth and reduced transparency.
2026 rule
Live stage
Default
Frosted panel
Readable over Volt mesh — blur + scrim + border.
Liquid
Tinted frost
Teal/coral wash — marketing heroes only.
Variants
Default
Cards, floating panels, modal shells over known stages
.glassSubtle
Chips, secondary floats, dense chrome
.glass-subtleStrong
Sticky headers, nav bars, command chrome
.glass-strongLiquid
Hero accents, marketing panels (Volt-tinted frost)
.glass-liquidSolid
Forced opaque fallback; matches lite / reduced transparency
.glass-solidTokens
| Token | Default | Note |
|---|---|---|
| --glass-blur | 16px | Default frost radius |
| --glass-blur-strong | 24px | Headers / bars |
| --glass-saturate | 1.25 | Backdrop saturation boost |
| --glass-bg | card mix 72% | Default fill |
| --glass-bg-subtle | card mix 55% | Lighter frost |
| --glass-bg-strong | card mix 88% | More opaque |
| --glass-bg-solid | var(--card) | Fallback fill |
| --glass-border | white mix + border | Edge highlight |
| --glass-shadow | inset + soft drop | Depth recipe |
Components
Glass, GlassCard, GlassBar, GlassChip, GlassStage
Import from @/components/ui/glass
Controlled stage
Always blur known art — mesh, gradient, hero — never random user photos under body copy.
Fallback chain
lite bandwidth → solid. prefers-reduced-transparency → solid. no backdrop-filter support → solid.
Liquid sparingly
Tinted frost is for heroes and promos. Product chrome prefers strong/default.
Do
- Place glass only over controlled stages (mesh, gradient, hero art)
- Keep long reading text on solid cards when the background is busy
- One blur layer per view region (header OR panel — not both stacked deeply)
- Pair with bandwidth lite and prefers-reduced-transparency fallbacks
Don’t
- Glass entire dashboards of dense tables and forms
- Stack 4+ backdrop-filters
- Animate blur continuously
- Rely on blur alone for hierarchy without borders or scrim
Shell already uses Glass
surface-glass). Set bandwidth to lite to see solid fallback across the product.