Kage Design logo kage
crewtower.app
CrewTower Mod for Claude Code faq component

Design analysis

The FAQ uses a broad lavender band and simple ruled accordion rows, making practical objections easy to scan while keeping the page visually quiet.

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/crewtower-mod-for-claude-code/6a95b5f4-2bf6-41f9-aa93-70409ededf43-1792303421-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/crewtower-mod-for-claude-code/6a95b5f4-2bf6-41f9-aa93-70409ededf43-1792303277739-full.webp
- Component on Kage: https://kage.design/component/crewtower-mod-for-claude-code-faq

## Before you start
Ask what questions block adoption or purchase for the user's product. Use those questions, not generic filler, and decide which answer should be open by default.

Create an FAQ section on a soft lavender surface around #e9e5fb. Use a small uppercase eyebrow, a large left-aligned heading, and a single full-width accordion list below. Each row should have a 1px horizontal divider in #d9d4eb, 16px vertical padding, a 15–16px medium-weight question, and a plus/minus control aligned at the far right. Animate expansion with a short height and opacity transition, preserve keyboard focus rings, and support screen-reader disclosure states. Keep the content column wide but bounded to roughly 780px with 56–72px section padding.

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

More components