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.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Stripe-style luminous navigation bar.
Key design decisions:
1. Background: Pure white (#FFFFFF) with a subtle box-shadow (0 1px 3px #00000014). 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: #64748B (Stripe's signature blue-gray) default, #0F172A (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, #4F46E5, #06B6D4) — violet to teal. This signature gradient is Stripe's most recognizable design element. Apply it sparingly.
5. Logo: #0F172A (dark navy), bold weight, 18px. Larger and bolder than the links — clear hierarchy.
6. CTA: #4F46E5 (Stripe Violet) pill button, white text. Subtle shadow (0 2px 6px #4F46E533) — 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.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.