Palette — FAQ (Classic Accordion, Emerald)

Summary

A clean, classic single-column FAQ accordion section on a light SaaS marketing page: a sticky frosted-white top nav (a rounded emerald sparkle logo + 'Palette' wordmark, a row of nav links with the active 'FAQ' link in emerald, a ghost 'Sign in' link and a solid dark-ink 'Start free' pill), then a centered max-w-5xl FAQ block opening with an emerald pill eyebrow ('SUPPORT & ANSWERS' with a soft-pulsing live dot), a big tight-tracked 'Frequently asked questions' heading and a muted lead paragraph. The accordion itself is a list of full-width rows divided by hairline ink borders, each row a left-aligned question with a circular plus-to-x toggle button on the right; opening a row reveals its answer with a smooth grid-template-rows height animation, washes the row a faint emerald (bg-emerald-50/40), paints a 3px emerald accent rail down its left edge, turns the question text emerald, and rotates the plus 45deg into an x. Only one row is open at a time (the first is open by default). It closes with a friendly footer CTA strip (a soft ink-50 card: an emerald chat icon, a 'Still have a question?' line, and a solid emerald 'Talk to us' button). Built on Tailwind CDN with the Inter font and Iconify Phosphor icons; below md the nav links hide and the heading/CTA reflow to a single column.

Style

A clean, modern, trustworthy light-mode SaaS aesthetic built around a single emerald accent on a cool-slate neutral ramp. The background is pure white (#ffffff); text is a near-black slate ink (#1e293b body, #0f172a headings) with muted slate (#64748b) for secondary copy. Emerald (#10b981 / #059669 / #047857) is the only accent, used sparingly but deliberately: the logo chip, the eyebrow pill and its pulsing dot, the active nav link, the open-row wash + left accent rail + emerald question text, the inline keyword highlight chips, and the CTA button. Everything is soft and rounded (rounded-lg to rounded-2xl, full-round pills and toggle circles) with hairline slate borders (#e2e8f0) doing the structural work instead of heavy shadows; the only shadows are tiny tinted glows under the emerald chips (shadow-emerald-500/30). Typography is Inter across a wide weight range (400-800) with tight negative letter-spacing on the big heading (tracking-[-0.025em]) and a clear size hierarchy (34-44px heading, 17-19px questions, 15-16px body). The signature feel is calm and premium: generous whitespace, a strict hairline grid, one confident accent color, and motion that is smooth and unhurried (a long .42s cubic-bezier ease on the accordion open, a soft 2.6s pulse on the live dot).

Layout & Structure

A sticky frosted top nav followed by a single centered FAQ column and a footer CTA strip. The `<header>` is `sticky top-0 z-50 bg-white/85 backdrop-blur-md` over a `border-b border-ink-100`, its content centered in a `max-w-6xl mx-auto px-6 sm:px-8` row at `h-16`: a brand cluster on the left (emerald rounded logo chip + 'Palette' wordmark), a `hidden md:flex` row of nav links in the middle-right (Prompts / Canvas / Pricing, plus an active emerald 'FAQ'), and a right cluster (a `hidden sm:inline-flex` ghost 'Sign in' + a solid dark-ink 'Start free' pill). The FAQ `<main id="faq">` holds a `mx-auto max-w-5xl px-6 sm:px-8 pt-20 sm:pt-28 pb-28 <section>`: a left-aligned `max-w-2xl` header (an emerald eyebrow pill with a pulsing dot, an `<h1>` 'Frequently asked questions', and a muted lead paragraph), then the accordion (`#accordion` with a `border-t border-ink-200`), then a footer CTA strip. The accordion is a stack of `.faq-item` rows each `border-b border-ink-200`, each a `<button class="faq-trigger">` with the question text on the left and a circular toggle on the right, plus a `.faq-answer` grid-collapse container holding the answer paragraph. Below md the nav links hide and the heading/CTA stack to single column.

Sticky frosted top nav

FAQ header (eyebrow + heading + lead)

Accordion list

Footer CTA strip

Accordion open/close behavior

Responsive reflow

Special Notes

Exact tokens (Tailwind config extend): fonts = Inter (Google Fonts weights 400;450;500;600;700;800) set as `fontFamily.sans`. Colors: `emerald` ramp 50 #ecfdf5 / 100 #d1fae5 / 200 #a7f3d0 / 300 #6ee7b7 / 400 #34d399 / 500 #10b981 / 600 #059669 / 700 #047857 / 800 #065f46; `ink` (cool slate) ramp 50 #f8fafc / 100 #f1f5f9 / 200 #e2e8f0 / 300 #cbd5e1 / 400 #94a3b8 / 500 #64748b / 600 #475569 / 700 #334155 / 800 #1e293b / 900 #0f172a. Body `bg-white text-ink-800 font-sans antialiased`; `html { scroll-behavior: smooth }`; `body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }`. Emerald is the ONLY accent; everything else is the slate ink ramp; structure via hairline borders (border-ink-100 / border-ink-200), shadows only as tiny emerald glows (shadow-sm shadow-emerald-500/30, shadow-emerald-700/25). Corners: rounded-lg (buttons/logo), rounded-xl (CTA chip + button), rounded-2xl (CTA card), rounded-full (pills + toggle circles). Accordion mechanics: `.faq-answer { display:grid; grid-template-rows:0fr; opacity:0; transition: grid-template-rows .42s cubic-bezier(.4,0,.2,1), opacity .32s ease, margin .42s ease }` with `.faq-answer > div { overflow:hidden; min-height:0 }`, opening to `grid-template-rows:1fr; opacity:1; margin-top:.15rem` on `.is-open`. Open-row treatment: `.faq-item` is `position:relative` with `border-top-right-radius:10px; border-bottom-right-radius:10px` and a `.faq-item::before` 3px #10b981 rail (left:0; top:8px; bottom:8px; width:3px; radius 0 3px 3px 0) that goes `scaleY(0)->scaleY(1)`, plus a `bg-emerald-50/40` wash toggled in JS. Toggle: `.chev` plus icon rotates `rotate(45deg)` on open. Eyebrow live dot: `@keyframes softpulse` over 2.6s. Heading `text-[34px] sm:text-[44px] font-800 tracking-[-0.025em] leading-[1.07]`. Icons: Iconify Phosphor (ph:sparkle-fill, ph:arrow-right-bold, ph:plus-bold, ph:chats-circle-fill, ph:arrow-up-right-bold). JS enforces single-open accordion (close all, then open the clicked row if it was closed). Reference inspiration: a classic emerald support/FAQ accordion (CodePen by magraytariq, https://codepen.io/magraytariq/pen/QWOrBQE), recreated as an original prompt-library product for the placeholder design-tool brand 'Palette'. The sticky nav and footer CTA strip are demo context so the FAQ section sits on a real marketing page; the prompt-library value is the classic emerald single-column accordion pattern (grid-rows animation + open-row wash/rail + plus-to-x toggle) itself.