Kage Design logo kage
tryfigo.com
Figo faq component

Design analysis

A centered FAQ header includes category filter pills and a narrow stack of expandable questions with plus affordances and a load-more control.

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/figo/1fdd4f4a-2ffc-49bc-a537-37335d7ddf1d-1789711317-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/figo/1fdd4f4a-2ffc-49bc-a537-37335d7ddf1d-1789711271827-full.webp
- Component on Kage: https://kage.design/component/figo-faq

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and primary conversion goal are. Apply the principles below to that product rather than reproducing the reference.

Create an FAQ section on white with a centered uppercase eyebrow, a bold two-line heading, and a row of pill-shaped category filters. Use one dark active pill and several pale inactive pills. Below, constrain the accordion to roughly 450–520px wide and show five full-width rows with light gray backgrounds, subtle shadows, 14px radii, question text on the left, and a plus icon on the right. Add a small muted load-more button below. Implement keyboard-accessible tabs and accordion behavior, with smooth expansion and clear focus states. Keep vertical spacing generous and the overall visual quiet.

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

More components