Kage Design logo kage
squadroom.app
SquadRoom faq component

Design analysis

A simple FAQ band uses a strong left-side heading and a clean stack of bordered accordion rows on the right.

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/squadroom/d449f1a3-a1d7-46c0-a9d5-0020447fa3ed-1791871294-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/squadroom/d449f1a3-a1d7-46c0-a9d5-0020447fa3ed-1791871247696-full.webp
- Component on Kage: https://kage.design/component/squadroom-faq

## Before you start
Ask what objections and practical questions users have before adopting the product. Turn those into original, concise FAQ entries.

Create a dark FAQ section with a two-column layout: a left heading block with a small icon or eyebrow, large two-line title, supporting sentence, and contact link; a right stack of six rounded accordion rows. Use #070707 background, #e5e5e1 headings, #8e8e89 copy, and #242424 borders. Each row should be about 48–56px tall with 16px horizontal padding, 12–14px text, and a small chevron aligned right.

Implement accessible accordion behavior with button semantics, keyboard support, visible focus rings, and smooth height transitions. Keep closed rows compact, and let the open answer use a slightly brighter border. On mobile, stack the heading above the list.

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

More components