busabase.com
Design analysis
A centered FAQ heading sits above a compact bordered accordion list. The uniform rows, dividers, and trailing chevrons make common objections easy to scan and expand.
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/busabase/7d05ddcb-d0f9-4d81-8382-8bbb1120492e-1791612079-8.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/busabase/7d05ddcb-d0f9-4d81-8382-8bbb1120492e-1791612035007-full.webp - Component on Kage: https://kage.design/component/busabase-faq ## Before you start Ask which questions prospective users repeatedly ask about the user's product, privacy, pricing, and compatibility. Apply the design rules to that content and brand. Create an FAQ section with a small eyebrow, centered serif heading, and a constrained accordion list. Each row should be a full-width button with a question aligned left, a chevron aligned right, and a subtle divider; opening a row should reveal the answer with a smooth but accessible height transition. Use a max-width around 540px, #f4f6f5 background, white or transparent list surface, #dce1de 1px borders, 10px outer radius, 16px row padding, charcoal #181a19 text, and muted #727875 answers. Provide clear hover, keyboard focus, and open states. Keep the section compact and let the list expand naturally without forcing a fixed height. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage