Kage Design logo kage
ynab.com
ynab.com card component

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.

More components