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

Design analysis

The footer uses a deep navy field, a brand mark area with search and social links, several categorized navigation columns, and a compact legal/copyright region.

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-1789146617-8.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-footer

## 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.

Create a dark, information-rich footer beneath the final CTA. Use a left column for an abstract brand mark, site search, social icons, copyright, and a short legal disclaimer. Place three or four link columns to the right with small uppercase or colored category labels and well-spaced links. Use deep navy #171957 or #20245e, muted lavender-gray secondary text, mint or green labels, and a thin bright accent line if needed. Give the footer 64–88px top padding, 24–32px column gaps, and 12–14px legal text. On mobile, stack columns and turn categories into collapsible groups while keeping search and legal content accessible.

Never: reuse logos, product names, copy, illustrations, imagery, or exact branding from the reference.

More components