Kage Design logo kage
agentgrid.io
AgentGrid.io footer component

Design analysis

The footer has a brand column, several grouped navigation columns, and a separated legal copyright 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/agentgrid-io/a4a816d7-f557-4fb4-82e6-3348f23e6057-1792994475-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/agentgrid-io/a4a816d7-f557-4fb4-82e6-3348f23e6057-1792994443669-full.webp
- Component on Kage: https://kage.design/component/agentgrid-footer

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

Build a clean footer on white with a centered max-width container. Use a top grid with the brand/description area at left and four or five link groups to the right, each with a small bold heading and vertically stacked muted links. Add a horizontal divider and a bottom legal row with copyright and secondary legal text. Use 12–14px typography, 28–40px column gaps, 56px top padding, and #f0f0f0 dividers. On mobile, stack groups into two columns or disclosure accordions. Keep link hover states subtle and accessible.

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

More components