effect
Menu effect
Frosted glass, a 12px backdrop blur, for a nav or cards that sit over content.
When to use
- Things that float over content and have to stay readable while it scrolls underneath: the nav, the hero info cards.
When not to use
- Project thumbnails, they have their own (Thumb effect).
- On top of another frosted surface. Two blurs just turn to mud.
Behaviour
backdrop-filter: blur(12px), and a 24px version for the bigger case-study surfaces. I took the 12px from how the nav uses it. I haven't read it from the style itself yet (see "Not right yet").
Accessibility
- Contrast: check text against the busiest thing that can scroll under it, not a flat colour.
- Fallback: where
backdrop-filterdoesn't work, use a solid surface. Never a see-through one you can't read.
Values
Straight from the contract. Each value sits next to its token, because six tokens here all come out as #3a3a3a and the colour alone can't tell you which one is right.
Never changes
| Part | Property | Value | Token |
|---|---|---|---|
| root | backdrop-filter | blur(12px) | effect/menu |