ynab.com
Design analysis
A spacious editorial quote section isolates one italic statement and attribution on a pale cream canvas, creating a calm emotional pause between proof and product explanation.
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/ynab-com/e7a182c7-b158-445f-80c9-594412562788-1789146616-4.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ynab-com/e7a182c7-b158-445f-80c9-594412562788-1789146549729-full.webp - Component on Kage: https://kage.design/component/ynab-card ## 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. Build a standalone testimonial or founder-quote block with a very spacious pale background. Constrain the quote to a readable central or left-aligned column, use large italic text with highlighted or lightly tinted emphasis, and place the speaker's name and role beneath in a smaller upright style. Prioritize rhythm and whitespace over decoration. Use #fff9e9 or a similarly soft neutral background, #171957 text, 28–40px quote type with 1.15 line height, and a maximum text width around 600px. Add no card border; let the typography carry the section. Ensure the quote remains readable and scales down cleanly on mobile. Never: reuse logos, product names, copy, illustrations, imagery, or exact branding from the reference.
kage