Engineered restraint — every element earns its place through purpose, not decoration. A dark navigation bar where muted links recede until needed, and a single violet accent line marks the current page. The kind of navigation that makes you trust the product behind it.
Build a Linear-style dark precision navigation bar. Key design decisions: 1. Background: rgba(10, 10, 15, 0.95) — near-black with slight transparency. Not pure black, which feels dead. The 0F in the blue channel adds imperceptible warmth. 2. Border: 1px solid rgba(255, 255, 255, 0.06) at the bottom. Almost invisible, but structurally essential — it separates nav from content without adding visual weight. 3. Links: rgba(255, 255, 255, 0.45) default. Muted enough to recede, bright enough to read. Hover to rgba(255, 255, 255, 0.90) — never pure white on hover, keep 10% transparency for softness. 4. Active indicator: A 2px bottom border in #8B5CF6 (violet) on the active link. The only color in the entire navbar. This restraint makes the accent powerful. 5. Typography: 13px, font-weight 500, -0.01em tracking. Slightly smaller than you'd expect — precision demands economy. 6. Logo: A small diamond icon (◇) + brand name in pure white. The icon is 16x16, rotated 45deg square with 1px border. 7. CTA: Violet (#8B5CF6) pill button, white text. Small, decisive. Trust is built through restraint. Nothing in this navbar is there by accident.