Kage Design logo kage
tonebird.ai
ToneBird faq component

Design analysis

A split FAQ layout places a large reassurance-oriented heading beside a short list of expandable questions and a help link.

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/tonebird/16d0d272-e4c0-4394-9450-270e8dcbe6b2-1790229841-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/tonebird/16d0d272-e4c0-4394-9450-270e8dcbe6b2-1790229760726-full.webp
- Component on Kage: https://kage.design/component/tonebird-faq

## Before you start
Ask what objections, setup questions, and trust concerns users have before trying the product. Organize those answers into a concise original FAQ.

Build a two-column FAQ section with a large heading and supporting sentence on the left, and a vertical accordion list on the right. Each row should have a question, a plus or chevron affordance, and a subtle bottom divider. Use 32–42px heading type, 13–15px supporting text, 14–16px question text, and generous 18–24px row padding. Use #202329 for questions, #747c7d for supporting copy, #e8edeb dividers, and a small accent for the open state. Animate height and icon rotation gently, preserve keyboard focus, and include a final help link beneath the list.

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

More components