raycast.com
Design analysis
A centered FAQ heading sits above four wide, minimally styled accordion rows with strong left alignment and small chevrons at 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/raycast-2-0/585c4674-841f-40bf-a211-e6fd2d8f71e9-1789192911-6.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/raycast-2-0/585c4674-841f-40bf-a211-e6fd2d8f71e9-1789192849096-full.webp - Component on Kage: https://kage.design/component/raycast-2-0-faq ## Before you start Ask what questions users have about the product, setup, requirements, migration, or support. Apply these principles to that product rather than reproducing the reference. Build a centered FAQ section on a black background. Use a clear 24px heading in #eeeeef with generous space above and below. Constrain the accordion to a readable max width of roughly 490px. Each row should be a full-width button with 16px vertical padding, a thin bottom divider in #1d1f21, a 13px semibold question in #eeeeef, and a small chevron aligned to the far right in #b4b4b8. Keep row spacing calm and consistent. Implement accessible accordion behavior with keyboard support, aria-expanded, animated height/opacity for answers, and only one open item if that suits the product. Answers should use 13px muted gray text and never disrupt the overall rhythm. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage