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

Design analysis

The footer transitions to white, exposes multiple link columns and contact/app information, then continues into a pale legal disclosure area with dense regulatory text.

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/public-com/cb41c975-325f-4844-b439-84e9d28bd7b7-1789146538-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/public-com/cb41c975-325f-4844-b439-84e9d28bd7b7-1789146490836-full.webp
- Component on Kage: https://kage.design/component/public-footer

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

Build a comprehensive responsive footer. Start with a white upper footer containing four or five columns: product links, resources, quick links, contact details, and a brand/app-download area. Add generous column gaps, 12–14px sans-serif links, compact headings, and subtle hover underlines. Below, add a pale blue-gray legal region (#F3F8FA) with a row of policy links, copyright, and long-form regulatory disclosures in 10–11px muted text. Use #111111 headings, #555555 body text, #DDE5E8 separators, 24–48px padding, and a clear max-width grid. Collapse columns into accordions on mobile while keeping critical disclosures readable.

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

More components