Professional doesn't have to mean cold. A white navigation bar with warm blue-gray typography, a signature gradient accent line beneath the active link, and generous whitespace that signals confidence. The kind of design that makes complex products feel approachable.
Build a Stripe-style luminous navigation bar. Key design decisions: 1. Background: Pure white (#ffffff) with a subtle box-shadow (0 1px 3px rgba(0, 0, 0, 0.08)). No border — the shadow provides separation with more warmth than a hard line. 2. Typography: 15px, font-weight 500. Noticeably larger than Apple or Linear — Stripe values readability and approachability over density. 3. Link colors: #425466 (Stripe's signature blue-gray) default, #0A2540 (Stripe's dark navy) on hover. This palette says "financial trust" without feeling corporate. 4. Active indicator: A 2px gradient bottom-border using linear-gradient(to right, #635BFF, #00D4AA) — violet to teal. This signature gradient is Stripe's most recognizable design element. Apply it sparingly. 5. Logo: #0A2540 (dark navy), bold weight, 18px. Larger and bolder than the links — clear hierarchy. 6. CTA: #635BFF (Stripe Violet) pill button, white text. Subtle shadow (0 2px 6px rgba(99, 91, 255, 0.2)) — it glows, just barely. 7. Spacing: px-8 between sections, gap-8 between links. Generous. Confidence requires space. The result should feel like a premium financial product that doesn't take itself too seriously.