Promptpalette · classic-SaaS navbar (CTA-right) — legibility-fixed

Summary

A classic SaaS marketing navbar in the proven left-wordmark / center-links / right-CTA arrangement, sitting on a sticky white glass header with a thin gradient announcement strip above it. Emerald-on-white palette, Inter type, a pill primary CTA with a legibility-tuned green gradient (white text clears 4.5:1 across the whole fill), and a tidy responsive reflow where links collapse into a hamburger and the CTA stays full-width.

Style

Bright, trustworthy emerald-on-white SaaS aesthetic. Inter everywhere, tight tracking on headings, soft shadows tinted with the brand green, generous whitespace, fully rounded (pill) primary actions and rounded-xl logo tile. Restrained accent use: emerald carries the brand, slate ('ink') carries the text hierarchy.

Layout & Structure

Sticky header = two stacked bars: a thin centered announcement strip, then the main nav at 76px height. Main nav is a single flex row, space-between, inside a max-w-7xl centered container with px-5/px-8 gutters: wordmark hard-left, primary link group centered (hidden below lg), secondary 'Log in' text link + primary pill CTA + hamburger hard-right. Optional thin hero + full-bleed category rail can sit below for context.

Sticky header shell

Announcement strip

Main nav bar

Wordmark (left)

Centered link group

Right actions

Special Notes

Accessibility-tuned variant: the CTA fill is a 180deg gradient (#059669 -> #058460 -> #047857) specifically so white label text clears WCAG AA 4.5:1 over every part of the button, unlike a flat light-green fill. Keep the two-scale (emerald accent + ink/slate neutral) system intact, the 76px nav height, the max-w-7xl centered container, and the left/center/right three-zone arrangement; the underline + chevron-rotate micro-interactions are what make it feel finished. Hero strip and category rail are optional context below the navbar, not part of the navbar pattern itself.