Kage Design logo kage
thestory.run
thestory.run faq component

Design analysis

A broad FAQ block uses a simple heading and full-width divided rows. The repeated structure is calm and scannable, with enough whitespace for each question to feel approachable.

Prompt preview
## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/thestory-run/30e08e83-50b8-4774-b650-1d7663d8d1f5-1790143356-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/thestory-run/30e08e83-50b8-4774-b650-1d7663d8d1f5-1790143267493-full.webp
- Component on Kage: https://kage.design/component/thestory-run-faq

## Before you start
Ask what objections, setup questions, privacy concerns, and buying questions users commonly have. Organise those questions in the order a new customer would need them.

Build a FAQ section with a left-aligned serif heading and a vertical list of full-width accordion rows. Each row should have a question, a plus or chevron control, and a hidden answer that expands inline. Use warm off-white background, charcoal text, thin pale-grey dividers, and deep green for the active control. Keep row padding generous and preserve a clear focus ring. Allow only one or multiple items open according to the user's content needs, and make the accordion fully keyboard and screen-reader accessible.

Never use logos, product names, copy, illustrations, or imagery from the reference.

More components