Help Center — Searchable FAQ (Mosaic)
A warm, searchable help-center / FAQ landing page: teal-on-paper palette, sticky blurred nav, gradient hero with a big search field, category filter pills, icon-headed accordion FAQ groups, and a teal gradient support CTA.
Summary
A warm, modern help-center / searchable-FAQ landing page on an off-white paper canvas with a teal brand system. A sticky blurred nav sits above a soft gradient hero with a centered pill eyebrow, a two-line bold question headline, and a large rounded search field with a Cmd+K hint and 'Popular:' quick links. Below, a centered row of pill category filters (the active pill solid teal) leads into icon-headed FAQ groups built from clean white <details> accordion cards (first item open by default, chevron rotates, answer fades in). It closes with a rounded teal gradient 'still need help' CTA card and a minimal split footer.
Style
Friendly SaaS help-center aesthetic: airy off-white paper background (#f8fafc), a single teal accent ramp (primary #0f766e teal-700, deep #115e59 teal-800, light tints #f0fdfa/#ccfbf1/#99f6e4), slate 'ink' text ramp for hierarchy, generous whitespace, soft long shadows tinted with the brand color, fully rounded controls (pills, rounded-2xl search, rounded-3xl CTA), and subtle blurred gradient blobs for depth. Inter throughout, extrabold for display headings, semibold for labels, regular for body. No em-dashes; copy reads human and reassuring.
Layout & Structure
Single centered column, max width ~64rem (max-w-5xl/6xl), stacked sections separated by hairline ink-900/5 borders: (1) sticky top nav, (2) gradient hero with search, (3) centered category filter pills, (4) icon-headed accordion FAQ groups, (5) teal gradient CTA card, (6) minimal footer.
Sticky nav
Hero with search
Category filter pills
Accordion FAQ groups
Still-need-help CTA
Footer
Special Notes
Built with Tailwind (CDN) and a custom palette: paper #f8fafc; teal 50 #f0fdfa, 100 #ccfbf1, 200 #99f6e4, 500 #14b8a6, 600 #0d9488, 700 #0f766e, 800 #115e59, 900 #134e4a; ink 400 #94a3b8, 500 #64748b, 600 #475569, 700 #334155, 800 #1e293b, 900 #0f172a. Font: Inter (400/500/600/700/800). Icons are inline Phosphor SVGs using currentColor. Accordions are pure HTML <details> (no JS) with CSS transitions; depth comes from soft teal-tinted shadows and blurred radial blobs, not heavy borders. Responsive: nav links and ⌘K chip hide on small screens, headline break only shows sm+, CTA buttons stack on mobile. Strictly avoid em-dashes in copy and keep the voice warm and reassuring.