Kage Design logo kage
hinge.co
hinge.co footer component

Design analysis

A dark footer closes the page with the brand area on the left, multiple categorized link columns on the right, social links, and a small legal/language row.

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/hinge-co/fc8d8d16-7276-4f4c-b1c9-567702ba4b3c-1789146939-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hinge-co/fc8d8d16-7276-4f4c-b1c9-567702ba4b3c-1789146918698-full.webp
- Component on Kage: https://kage.design/component/hinge-footer

## Before you start
Ask what the user's product and brand are, then apply the principles below to their context rather than reproducing this reference.

Build a dark multi-column footer with a simple brand area at left and three or more categorized link columns at right. Include primary navigation, resources, legal links, social icons, and a bottom metadata row for copyright and locale. Use a clear responsive collapse: stack columns or convert them to accessible accordions on narrow screens. Keep link typography small but legible, with generous row spacing and visible hover/focus states. Approximate colours: background `#191919`, primary text `#F5F2EE`, secondary text `#C8C4C0`, divider `#454545`; use a 24px desktop gutter and 48–64px vertical padding.

Never use the reference logo, product name, exact labels, copy, illustrations, or imagery.

More components