Prism — Design at the Speed of a Prompt
Minimal center-aligned marketing navbar: a true-centered wordmark flanked by symmetric link groups on a sticky white-glass header, with one low-key ghost CTA. Black-on-white (ink #0a0a0b) + a single cobalt #2563eb accent, Inter, tight tracking, a rotating diamond logo mark, clean responsive reflow to a hamburger bar.
Summary
A minimal, center-aligned marketing navbar in the editorial/Vercel-Linear school: a true-centered wordmark flanked by symmetric link groups, on a sticky white-glass header with a single low-key ghost CTA. Black-on-white (ink #0a0a0b) with one cobalt #2563eb accent, Inter type, tight negative tracking, a tiny rotating diamond logo mark, and a clean three-column desktop grid that reflows to a hamburger + centered wordmark + compact CTA on mobile.
Style
Restrained, premium editorial-tech aesthetic. Near-black ink on white, exactly one accent (cobalt blue), generous whitespace, no boxes or heavy shadows, only hairline borders. Inter with aggressively tight letter-spacing on the wordmark and headings. The personality comes from one signature detail (a small rotated cobalt square logo mark) and quiet hover transitions, not from color or chrome.
Layout & Structure
Sticky white-glass header (bg-white/85 + backdrop-blur-md, hairline bottom border). On desktop the nav is a 3-column CSS grid at 72px height: left link cluster justified-start, the wordmark perfectly centered via justify-self-center, and a right cluster (links + one ghost CTA) justified-end, so the brand sits at the TRUE optical center regardless of how many links each side has. On mobile/tablet it collapses to a single 60px flex row: hamburger left, absolutely-centered wordmark, compact CTA right. All inner content lives in a mx-auto max-w-7xl container with px-6 (lg:px-10) gutters shared with the page below.
Sticky header shell
Desktop 3-column grid (>=lg)
Left link group
Centered wordmark + logo mark
Right link group + ghost CTA
Mobile / tablet bar (<lg)
Special Notes
The defining move is the 3-column grid that pins the wordmark to true center, do NOT replace it with a simple flexbox space-between or the brand drifts off-center when the two link groups have different widths. Keep the palette strictly monochrome ink (#0a0a0b) + the single cobalt accent (#2563eb), express hierarchy through ink opacity rather than extra colours, and keep exactly ONE ghost CTA (resist adding a second filled button, the restraint is the point). Preserve the tight negative tracking (-0.045em base, -0.06em wordmark), the rotated-diamond mark with its hover spin, and the white-glass sticky header with only a hairline border. The hero/feature/footer sections below are optional page context, not part of the navbar pattern itself.