Promptly — FAQ (card-grid-pastel)

Summary

A friendly, light-mode card-grid FAQ section on a warm cream marketing page, in a warm-and-playful brand voice. A sticky frosted-cream top nav (a sky-to-coral gradient rounded sparkle logo + a 'Promptly.' wordmark with a sky period, a row of nav links with the active 'FAQ' link in ink, a ghost 'Sign in' link and a solid ink 'Start free' pill) sits above a centered section header: a sky 'Help center' eyebrow pill, a big two-line 'Questions, answered the friendly way.' heading whose final period is coral, and a soft muted lead. Three large pale blurred color blobs (sky and coral) float behind the header. Beneath it, a responsive grid of rounded-4xl white FAQ cards (1 column on mobile, 2 on tablet, 3 on desktop): each card is a native HTML <details> disclosure whose <summary> shows the question and a circular toggle, and whose answer reveals with a smooth grid-template-rows height animation. The toggle is a sky-blue circle with a plus icon that, when the card is open, turns coral and swaps to a minus; open cards also lift slightly and gain a sky-tinted glow shadow and border, while hover nudges every card up 3px. The first two cards are open by default; the remaining seven start closed. A full-width dark-navy gradient CTA strip ('Can't find your answer?' with a white 'Chat with us' button and a ghost 'Browse the docs' button, over soft coral and sky blurred glows) and a light social footer anchor the page. Built on the Tailwind CDN with the Poppins font and Iconify (Solar) icons; below lg the grid steps down to two then one column and the nav links collapse.

Style

A warm, friendly, light-mode SaaS aesthetic built on a soft cream ground with a playful two-accent palette of sky blue and coral. The whole page sits on cream (#fdf9f3); cards and the footer are pure white, and a dark-navy gradient anchors the CTA strip. Text is deep ink (#1f2433) for headings and a muted slate (#5b6273) for body and nav links. The two accents are used deliberately and sparingly: sky blue (#38bdf8) for the closed-card plus toggles, the nav 'Promptly' period and 'FAQ' active link, the eyebrow pill, and decorative blobs/glows; coral (#fb7185) for the heading's final period, the open-card minus toggle, and accent glows. Surfaces are generously rounded (rounded-4xl = 2rem cards, rounded-5xl = 2.75rem CTA strip, full-round pills and toggle circles) over hairline ink/5 borders, with depth from soft layered shadows rather than hard lines: a base card shadow (0 10px 30px -12px rgba(31,36,51,0.12)), a sky-tinted hover/open shadow (0 22px 50px -18px rgba(56,189,248,0.40)), and a coral pill shadow (0 8px 20px -8px rgba(251,113,133,0.55)). Behind the header three large blurred translucent blobs (sky/20, coral/15, sky/10) and behind the CTA two blurred glows (coral/40, sky/25) give the flat cream a soft, airy, gradient-lit feel. Typography is Poppins across weights 400-800 with tight tracking on the big heading (text-[40px] up to text-[56px], font-800, leading-[1.08]) and a clear scale (18px card questions, 15-17px body, 13-15px nav/labels). The signature feel is light, rounded, and cheerful: lots of cream whitespace, soft pastel shadows, two friendly accents, and gentle motion (cards lift 3px on hover, the answer expands on a .35s grid-rows ease, the toggle cross-fades plus->minus and recolors sky->coral on open).

Layout & Structure

A sticky frosted-cream top nav, then a centered full-bleed header over decorative blobs, then a centered card grid, then a dark gradient CTA strip, then a light footer. The `<header>` is `sticky top-0 z-50 bg-cream/80 backdrop-blur-md border-b border-ink/5` with its content centered in a `mx-auto max-w-7xl px-6 lg:px-10` row at `h-[72px]`: a brand cluster on the left (a sky-to-coral gradient `rounded-2xl` sparkle logo chip + a 'Promptly.' wordmark with a sky period), a `hidden md:flex` row of nav links (Gallery / Library / Pricing, plus an active ink 'FAQ' link), and a right cluster (a `hidden sm:block` ghost 'Sign in' link + a solid ink `rounded-full` 'Start free' pill). The FAQ header `<section id="faq">` is `relative overflow-hidden` with three absolutely-positioned blurred blobs behind a centered `mx-auto max-w-2xl pt-20 pb-12 text-center md:pt-28 md:pb-16` stack: a sky 'Help center' eyebrow pill, the two-line 'Questions, answered the friendly way.' heading (final period coral), and a muted lead. The grid `<section>` centers a `mx-auto max-w-7xl px-6 pb-8 lg:px-10` wrapper holding `grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3` with nine `<details class="faq">` cards (the first two `open`). Each card is `rounded-4xl border border-ink/5 bg-white p-7 shadow-card` with a `<summary>` (question `<h3>` + circular toggle) and a `.faq-answer` grid-collapse wrapper holding the answer `<p>`. The CTA `<section>` centers a `rounded-5xl bg-gradient-to-br from-ink to-[#0c1a3a]` card with two blurred glows, a white heading + lead, and a button row (a white 'Chat with us' button with a coral chat icon + a ghost 'Browse the docs' button). The `<footer>` is `border-t border-ink/5 bg-white` with a centered `max-w-7xl` row of brand / link row / copyright. Below lg the grid steps to 2 then 1 column; below md the nav links hide and the footer reflows to a stacked column.

Sticky frosted-cream top nav

Centered header with decorative blobs

Centered FAQ card grid

Dark gradient CTA strip

Light social footer

Native details disclosure mechanics

Responsive reflow

Special Notes

Exact tokens (Tailwind config extend): fonts = Poppins (Google Fonts weights 400;500;600;700;800) set as `fontFamily.sans = ['Poppins','ui-sans-serif','system-ui','sans-serif']`. Colors: `cream` #fdf9f3, `sky` #38bdf8, `coral` #fb7185, `ink` #1f2433, `slate2` #5b6273; the CTA gradient runs `from-ink` (#1f2433) `to-[#0c1a3a]`; the eyebrow pill label uses inline `color:#075985`. borderRadius: `4xl` = 2rem (cards), `5xl` = 2.75rem (CTA strip). boxShadow: `card` = '0 10px 30px -12px rgba(31,36,51,0.12)', `cardhover` = '0 22px 50px -18px rgba(56,189,248,0.40)', `pill` = '0 8px 20px -8px rgba(251,113,133,0.55)'. Body `font-sans text-ink antialiased selection:bg-coral/20` with `body { background-color:#fdf9f3 }` and `html { scroll-behavior:smooth }`. Two accents only: sky (#38bdf8) and coral (#fb7185); ink/slate2 for text; structure via hairline `border-ink/5` plus the three soft shadows. Disclosure mechanics (no JS): native `<details>`/`<summary>`; kill the marker with `.faq summary { list-style:none }` + `::-webkit-details-marker { display:none }` + `::marker { content:"" }` (do NOT set `display` on summary so Tailwind `.flex` wins); icon swap `.faq .faq-icon-minus { display:none }`, `.faq[open] .faq-icon-plus { display:none }`, `.faq[open] .faq-icon-minus { display:inline-block }`. Open-card treatment: `.faq[open] .faq-toggle { background-color:#fb7185; box-shadow:0 8px 20px -8px rgba(251,113,133,0.55) }` and `.faq[open] { box-shadow:0 22px 50px -18px rgba(56,189,248,0.40); border-color:rgba(56,189,248,0.45) }`. Answer animation: `.faq-answer { display:grid; grid-template-rows:0fr; transition: grid-template-rows .35s ease }` with `.faq-answer > div { overflow:hidden }`, opening to `grid-template-rows:1fr` on `.faq[open]`. Card transitions: `transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease` with `.faq:hover { transform: translateY(-3px) }`; closed-card summaries get `min-height:56px; align-items:center` via `.faq:not([open]) > summary`. Heading `text-[40px] md:text-[56px] font-800 leading-[1.08] tracking-tight` ('Questions, answered' / 'the friendly way' with a coral '.'). Card questions `text-[18px] font-700 leading-snug`; answers `text-[15px] leading-relaxed text-slate2`. Icons are Iconify Solar set (CDN https://code.iconify.design/3/3.1.1/iconify.min.js): `solar:magic-stick-3-bold` (logo), `solar:question-circle-bold` (eyebrow), `solar:add-circle-linear` / `solar:minus-circle-linear` (toggle), `solar:chat-round-dots-bold` (CTA). Layout: a sticky `bg-cream/80 backdrop-blur-md` `h-[72px]` nav over a `relative overflow-hidden` `#faq` header (three blurred blobs + a centered `max-w-2xl` eyebrow/heading/lead stack), then a centered `max-w-7xl` `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5` of nine `<details class="faq">` cards (first two open), then a `rounded-5xl` dark-navy gradient CTA strip with two `blur-xl` glows, closed by a light `bg-white` social footer; below lg the grid steps 3->2->1, below md the nav links hide, the 'Sign in' link is `hidden sm:block`. This is an original prompt-library product for the placeholder design-tool brand 'Promptly' (faithfully reproducing the build HTML); the prompt-library value is the friendly light-mode card-grid FAQ pattern itself (a responsive grid of rounded white <details> cards with sky-to-coral plus/minus toggles and a grid-rows reveal, on a soft cream pastel ground).