When navigation disappears, content breathes. A translucent frosted-glass bar with backdrop saturation and blur, hovering above the page like a whisper. Ultra-small typography, generous letter-spacing, and a single-pixel divider — nothing competes for attention.
Build an Apple-style frosted glass navigation bar. Key design decisions: 1. Background: rgba(255, 255, 255, 0.72) with backdrop-filter: saturate(180%) blur(20px). The saturation boost prevents the blur from washing out colors beneath. 2. Typography: 12px, -0.01em letter-spacing, 500 weight. Apple uses surprisingly small nav text — it stays out of the way. 3. Border: A single pixel (rgba(0, 0, 0, 0.1)) at the bottom. No shadows. The blur provides all the depth. 4. Links: #424245 default, #1d1d1f on hover (150ms). The color shift is subtle — users feel it more than see it. 5. Structure: Fixed position, full-width, z-50. Logo left, links center, CTA right. 6. CTA: Small rounded-full button in #0071e3 (Apple Blue), white text. No shadow, no border. The navigation should feel like it's not there until you need it.