Kage Design logo kage
wealthfront.com
wealthfront.com faq component

Design analysis

The FAQ is split into a bold introductory column and a larger accordion column. Thin rules and chevrons make each question scannable.

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/wealthfront-com/3e3be85e-7bdd-4e6a-8630-f389b2c5e8da-1789146565-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/wealthfront-com/3e3be85e-7bdd-4e6a-8630-f389b2c5e8da-1789146504390-full.webp
- Component on Kage: https://kage.design/component/wealthfront-faq

## Before you start
Ask what the user's product is, who it serves, and what its brand voice and visual identity are. Then apply the following principles to that product rather than reproducing this reference.

Build a two-column FAQ section on white or very pale lavender. The left column contains a large, tightly set heading, a short explanatory paragraph, and optional links to deeper resources. The right column contains five or more accordion rows separated by thin gray rules. Use large readable question text, generous row padding, and a right-aligned chevron that rotates when expanded. Implement the accordion with semantic buttons, accessible expanded states, keyboard support, and smooth height transitions. On small screens, stack the intro above the questions. Use indigo headings around #38238f, charcoal body text #262532, and neutral borders #b9b7c0.

Never: copy the reference's logos, product names, copy, illustrations, imagery, questions, or exact answers.

More components