Kage Design logo kage
tryobra.com
tryobra.com faq component

Design analysis

The light FAQ section uses a numbered, bordered accordion list with generous row spacing and a low-key help-center link for unresolved questions.

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/tryobra-com/5ed8a808-d125-4341-bc8a-0a69442cb995-1789152087-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/tryobra-com/5ed8a808-d125-4341-bc8a-0a69442cb995-1789152039794-full.webp
- Component on Kage: https://kage.design/component/tryobra-faq

## Before you start
Ask what objections and support questions users have before conversion. Organize original answers around the user's product and terminology.

Build a warm ivory FAQ section with a chapter eyebrow, large heading, and a vertical accordion list. Use full-width 1px dark borders, compact question IDs in orange monospace, bold question text, and a plus icon at the far right. Keep rows around 44–56px tall, support keyboard interaction, and animate expansion subtly without shifting the entire page unexpectedly. Add a small muted line and text link below for additional help. Use #f2f1e8 background, #111312 text, and #b44727/orange accents.

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

More components