Kage Design logo kage
saliency.dev
S-Roll faq component

Design analysis

A centered FAQ section uses an editorial heading followed by five thinly separated accordion rows with plus affordances.

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/s-roll/31ce67c8-e756-4d99-81ee-7a5fcf910ca7-1789711387-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/s-roll/31ce67c8-e756-4d99-81ee-7a5fcf910ca7-1789711333877-full.webp
- Component on Kage: https://kage.design/component/s-roll-faq

## Before you start
Ask what questions users have before adopting or downloading the user's product. Turn those into concise, product-specific FAQ items.

Create a centered FAQ section on a black background. Start with a small uppercase eyebrow and a large serif heading centered above a narrow list. Each accordion row should use a thin #1d1d20 divider, left-aligned question text in warm gray, and a plus icon aligned to the far right. Give rows 56–72px of vertical padding and animate height and icon rotation when opened. Keep the list width around 640px, use high-contrast accessible focus states, and stack comfortably on mobile. Avoid heavy cards; the editorial restraint comes from spacing and hairline rules.

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

More components