Design analysis

The FAQ uses the same pale lime surface and grid language, with a fixed editorial heading column and a clean stack of numbered question rows. A load-more control gives the list room to grow without overwhelming the page.

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/cadenya/d064e83b-00ab-4d52-aab7-77367964ea32-1789192868-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cadenya/d064e83b-00ab-4d52-aab7-77367964ea32-1789192832645-full.webp
- Component on Kage: https://kage.design/component/cadenya-faq

## Before you start
Ask which objections, setup questions, and trust concerns users have about the user's product. Use those answers to create original FAQ items while retaining the interaction model.

Build a spacious FAQ section on a pale lime background with a faint square grid. Use a two-column layout: a framed left heading block with a large serif title, and a right stack of question rows. Each row should show a small uppercase question number, a readable question, and a right-aligned chevron. Separate rows with 1px low-contrast rules; on click, expand the answer with a smooth transition while keeping the question visible. Include a subtle full-width load-more or show-all control below the initial set. Use #e5f59a background, #182c25 text, #c8db78 borders, and a white/green-tinted control surface. Use 30–44px serif heading type, 11px mono metadata, and 14–16px question text. Ensure keyboard navigation, visible focus rings, semantic buttons, and responsive stacking with the heading above the list.

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