Kage Design logo kage
runnova.ai
NOVA CLI v1.0 faq component

Design analysis

A narrow FAQ column uses a clear heading and bordered accordion rows, with the first answer expanded and the rest collapsed.

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/nova-cli-v1-0/f9d737a9-3081-4768-944e-79473fdb1d08-1791525759-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/nova-cli-v1-0/f9d737a9-3081-4768-944e-79473fdb1d08-1791525679651-full.webp
- Component on Kage: https://kage.design/component/nova-cli-v1-0-faq

## Before you start
Ask what questions users repeatedly ask about the user's product and which answer should be open initially. Apply these interaction and visual principles to original content.

Build a centered FAQ section with a small eyebrow, a strong heading, and an italic accent word or phrase. Constrain the accordion to about 520–560px. Each row should be a white card with a 1px #e3e3e3 border, 14–16px radius, and 14–18px vertical padding; maintain 8–10px gaps between rows. Use 14–16px semibold question text and a circular or pill expand control aligned right. The first item may be expanded with muted body copy and a dark close control. Animate height and icon rotation subtly, but support reduced motion and proper aria-expanded semantics.

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

More components