Kage Design logo kage
lu.ma
lu.ma footer component

Design analysis

A restrained footer uses a fine divider, a small brand label, grouped utility links, social icons, and a second row of legal links without competing with the page content.

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/lu-ma/a4be0bf4-46ad-4066-8582-e9890f24d9e0-1789146185-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/lu-ma/a4be0bf4-46ad-4066-8582-e9890f24d9e0-1789146157883-full.webp
- Component on Kage: https://kage.design/component/lu-ma-footer

## Before you start
Ask what the user's product is, who it serves, and what its brand voice and visual identity are. Build an original footer that reflects its navigation and legal needs.

Create a compact footer inside the same centered max-width as the page. Start with a thin divider (#eeeeee), then use a first row containing a small brand label on the left, a horizontal set of primary utility links, and a few understated social/action icons on the right. Add a second row of legal or policy links in smaller, lighter text. Use 12–13px text for navigation, 10–11px for legal links, #777777 for secondary text, and #b0b0b0 for legal text. Keep spacing airy, align everything to a shared baseline, and use 4–6px icon buttons with subtle hover color changes. Ensure the footer wraps cleanly on mobile.

Never: use the reference's logo, product name, copy, social handles, illustrations, imagery, or exact link labels.

More components