Kage Design logo kage
fish.audio
Fish Audio Drama 3 faq component

Design analysis

The FAQ section is a simple, wide accordion with a strong heading and evenly spaced question rows; one answer is expanded while the remaining questions stay collapsed.

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/fish-audio-drama-3/b8b3d5d8-1af1-45c3-b814-ec39ae20de20-1792217029-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fish-audio-drama-3/b8b3d5d8-1af1-45c3-b814-ec39ae20de20-1792216963457-full.webp
- Component on Kage: https://kage.design/component/fish-audio-drama-3-faq

## Before you start
Ask what the user's product is, who needs support, and what information reduces purchase or adoption friction. Then create an original FAQ using these principles.

Build a full-width FAQ section with a constrained content width. Place a clear heading near the top, followed by six or more accordion rows separated by generous vertical spacing or thin rules. Each row has a bold question on the left and a plus/chevron control on the right. Keep one representative answer expanded initially, using readable muted body text; all other answers remain collapsed. Animate height and icon rotation accessibly.

Use the existing warm-neutral canvas around `#f7f6f3`, black headings, gray answer text around `#73716d`, no heavy card decoration, and generous horizontal padding. Ensure buttons are full-width row controls with keyboard navigation, visible focus states, correct ARIA expanded/controls attributes, and good mobile wrapping.

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

More components