Floating Pill Coral navbar — legibility fixes applied
A sticky floating-pill navbar in a warm coral-and-cream palette: a blurred white rounded-full bar floating inset from the top, sparkle logo, a centered inner pill link group with a raised white active pill, and a solid coral Start free CTA.
Summary
A sticky floating-pill navbar in a warm coral-and-cream palette: a white, blurred, rounded-full bar that floats inset from the top of the page, with a sparkle logo on the left, a centered inner pill group of nav links (the active link sits on its own white sub-pill), and right-side Sign in + a solid coral Start free CTA. Built on Poppins with a soft, friendly shadow system and a responsive collapse to a hamburger + dropdown card under lg.
Style
Warm, friendly, modern-SaaS aesthetic on a cream canvas (#fdfaf6) with a single coral accent ramp. Rounded-everything (pill radius 999px), heavy Poppins weights for branding, generous soft shadows, and a subtle grain dot texture. The look reads approachable and premium rather than corporate.
Layout & Structure
A fixed, full-width container pinned to the top (z-50) with horizontal padding (16px, 24px at sm) and top padding (16px, 20px at sm) so the bar floats inset from every edge. Inside it, a centered max-w-6xl nav bar uses a three-zone flex row: logo (left, shrink-0), centered link pill group (hidden below lg), and right actions (shrink-0). The active link is a white sub-pill inside a cream-tinted inner pill track. Below lg the center group disappears and a hamburger reveals a rounded dropdown card just under the bar.
Floating sticky container
The pill bar itself
Logo (left zone)
Centered link group (inner pill)
Right actions zone
Responsive mobile dropdown
Special Notes
Icons are Phosphor via Iconify (e.g. ph:sparkle-fill, ph:arrow-right-bold, ph:list-bold). Pill radius is a literal 999px token applied to the bar, badge, links, and buttons. The bar floats inset from the top using a fixed outer wrapper with its own padding rather than sitting flush. Legibility fixes vs the source reference: body/nav text uses warm ink tones (ink-700/800/900) for sufficient contrast on white and cream, the active link is reinforced with both a white pill and weight change, and every link/button has an explicit, surface-aware coral focus ring for keyboard users. Layout is responsive: the centered link group collapses below lg into a hamburger-triggered dropdown card, and the Sign in link hides below sm.