betterment.com
Design analysis
A two-column FAQ uses a large editorial title on the left and a disciplined accordion list on the right. One item is expanded to show detailed answer copy.
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/betterment-com/48b23e19-a777-4bc7-89e7-1aceabf18629-1789146558-8.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/betterment-com/48b23e19-a777-4bc7-89e7-1aceabf18629-1789146502433-full.webp - Component on Kage: https://kage.design/component/betterment-faq ## Before you start Ask what the user's product, audience, and brand are, then apply these principles to that product rather than copying the reference. Design an FAQ section on a warm cream background with a two-column layout: a large dark-navy serif heading on the left and a vertical accordion list on the right. Each question row should have a bold 16–18px label, a clear chevron button with an accessible name, generous 22–28px vertical padding, and a thin neutral divider. The open answer should use comfortable 14–16px line-height, links with underlines, and a restrained maximum line length. Animate height and chevron rotation subtly, support keyboard focus, and allow only one open item if that makes scanning easier. Stack the heading above the accordion on mobile. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage