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.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Linear-style dark precision navigation bar.
Key design decisions:
1. Background: #0A0A0FF2 — near-black with slight transparency. Not pure black, which feels dead. The 0F in the blue channel adds imperceptible warmth.
2. Border: 1px solid #F5F3FF0F at the bottom. Almost invisible, but structurally essential — it separates nav from content without adding visual weight.
3. Links: #F5F3FF73 default. Muted enough to recede, bright enough to read. Hover to #F5F3FFE6 — 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.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.