## 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/fifi/65f510a7-1d11-431a-a427-6e570df25f2f-1789538468-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fifi/65f510a7-1d11-431a-a427-6e570df25f2f-1789538432367-full.webp
- Component on Kage: https://kage.design/component/fifi-faq

## Before you start
Ask what the user's product is, who it serves, and what their brand personality and palette are. Apply the following principles to that product rather than reproducing the reference.

Build an FAQ section with a centered dark navy heading and a constrained accordion list beneath it. Use pale cool background, rows separated by thin #d5e0e7 rules, approximately 18px vertical padding, left-aligned questions, and small right-aligned chevrons. Keep the list width around 480–560px so it feels focused. One item may be open by default, but the compact closed state should be the dominant visual. Animate height and chevron rotation subtly, support keyboard and screen-reader interaction, and stack cleanly on mobile.

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