splitformac.com
Design analysis
A split FAQ layout places a large reassurance heading beside a compact accordion, addressing objections close to the purchase decision.
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/split/8556c614-105f-4777-9be3-693330882192-1790402628-6.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/split/8556c614-105f-4777-9be3-693330882192-1790402544582-full.webp - Component on Kage: https://kage.design/component/split-faq ## Before you start Ask what the user's product is, who it is for, and what their brand style should feel like. Apply the principles below to that product rather than copying this reference. Create an FAQ section with a two-column desktop layout: a large left-side heading and short support link or reassurance line, and a right-side accordion list. Use 42–54px dark heading typography with tight line height, 14px muted body text, and rows around 56–68px tall. Give each row a very pale blue-gray surface #f7fafb, subtle separators or 12–16px rounded corners, bold question text, and a plus/minus affordance aligned right in the accent color. Animate expansion gently but support reduced motion, and ensure the accordion is keyboard accessible with clear focus states. Stack the columns on smaller screens. Never use the reference's logos, product names, copy, illustrations, imagery, or exact visual assets.
kage