Glass
A single glass recipe across web, app, and docs: blur(14) saturate(180), paper-85 border, the standard shadow stack. Vary density only by opacity — reach for .glass-soft / .glass / .glass-strong. Don't author a new blur or border.
Three intensities — over peach bloom
.glass-soft · paper-42
sidebar nav · low-density panels
.glass · paper-62
cards · hero callouts
.glass-strong · paper-85
active panes · modal bodies
Tokens
| Class | Paper alpha (rest → high) | Use |
|---|---|---|
.glass-soft | paper-42 → 25 | sidebar nav, low-density panels |
.glass | paper-62 → 32 | default — cards, hero callouts |
.glass-strong | paper-85 → 65 | active panes, modal bodies |
Recipe
.glass,
.glass-soft,
.glass-strong {
backdrop-filter: blur(14px) saturate(180%);
border: 1px solid var(--paper-85);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
}
.glass-soft { background: var(--paper-42); }
.glass { background: var(--paper-62); }
.glass-strong { background: var(--paper-85); }Pick glass density by surface density, not by surface kind. Soft for nav, default for cards-over-bloom, strong for modals.
Don't author a new blur or border. Same recipe across all three surfaces.
Surfaces
One glass recipe. Four bloom backdrops. One sheet. One code card. One dark theme.
Blooms
Four bloom backdrops — peach / lavender / sage / amber. Full-section panels. Veil is mandatory when text sits in front; text in front of a bloom is always white. Motion-blur stripes on peach and amber are intentional.