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

Design analysis

The dark footer is information-dense but organized into repeated link columns, a utility row with contact and app links, and several separated legal disclosure blocks. Strong contrast and hierarchy make a large sitemap 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/lemonade-com/fec12946-54bf-4cf0-ac52-dcd9bbeb95c9-1789146827-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/lemonade-com/fec12946-54bf-4cf0-ac52-dcd9bbeb95c9-1789146795796-full.webp
- Component on Kage: https://kage.design/component/lemonade-footer

## Before you start
Ask what the user's information architecture, required legal notices, contact details, and brand are, then build an original footer around those requirements.

Create a dark, multi-layered site footer. Use a near-black background around #151515, white or #f2f2f2 section headings, muted gray #a6a6a6 link text, and thin separators around #343434. Start with a responsive grid of grouped navigation links, using four columns on desktop and collapsible accordions on mobile. Follow it with a utility row containing social links, contact information, locale selector, and app or platform links where relevant. Finish with a legal row and several small-print disclosure paragraphs in 11–12px type, constrained to a readable width and separated by subtle rules. Maintain 40–56px outer padding, 24–32px column gaps, 8–14px link spacing, visible keyboard focus rings, and sufficient contrast. Keep legal copy clearly distinct from promotional links.

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

More components