Kage Design logo kage
menlo.ai
Asimov 1 faq component

Design analysis

A pale FAQ band uses a strong left-hand heading and a long, neatly ruled accordion list on the right, keeping many practical objections easy to scan.

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/asimov-1/d16421bf-78be-4064-9aab-fabd3467d820-1792562775-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/asimov-1/d16421bf-78be-4064-9aab-fabd3467d820-1792562736076-full.webp
- Component on Kage: https://kage.design/component/asimov-1-faq

## Before you start
Ask what the user's product, audience, and brand are, then apply the principles below to that product rather than reproducing this reference.

Build a two-column FAQ section on a very light grey background (#f7f7f6). Place a large two-line heading in the left column and a vertically stacked accordion list in the right column. Each question row should have compact technical typography, generous 20–28px vertical padding, a 1px divider in #dededb, and a plus/minus control aligned to the far right. Only one item needs to be open initially, or keep all closed for a clean overview. Animate height and icon rotation accessibly, support keyboard focus, and stack the heading above the questions on mobile. Use near-black headings, #555 body text, and a restrained accent for focus states.

Never: use the reference logo, product name, exact questions, illustrations, imagery, or branded assets.

More components