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

Design analysis

The footer presents several columns of categorized links, social links, a legal/disclosure area, and dense compliance copy on a continuous dark surface.

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/mercury-com/99bed992-0157-4d82-b4d6-a0016ce1a166-1789141946-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mercury-com/99bed992-0157-4d82-b4d6-a0016ce1a166-1789138980717-full.webp
- Component on Kage: https://kage.design/component/mercury-footer

## Before you start
Ask what the user's product, audience, and brand are, then apply the following principles to that product rather than copying the reference.

Build a large dark footer with a responsive multi-column link directory. Group links under clear headings, include a separate social column, then add a thin divider, copyright/legal controls, and a readable disclosure block below. Use a deep navy #171721, muted gray-white text, #343543 dividers, 12–14px link text, 10–12px legal copy, and generous row spacing. Keep the top of the footer airy while allowing the legal area to be denser. On mobile, collapse link groups into accessible accordions; keep legal text selectable and maintain strong contrast.

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

More components