## 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/copilot-money/645bb157-e222-4315-91ed-1b76fbb9bd6b-1789146603-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/copilot-money/645bb157-e222-4315-91ed-1b76fbb9bd6b-1789146540058-full.webp
- Component on Kage: https://kage.design/component/copilot-money-footer

## Before you start
Ask what the user's product is, who it serves, and what its brand voice and colours are. Apply the principles below to that product rather than reproducing this reference.

Build a responsive dark footer:
- Start with a thin divider, then a max-width content area containing four link groups such as product, company, resources, and community.
- Use 14px group headings in soft white and 13–14px links in muted slate, with 14–18px vertical spacing and 24–40px column gaps.
- Add a lower row for a neutral brand mark, copyright, privacy/terms links, accessibility or preference controls, and any required legal text.
- Use #020d1b background, divider #10263a, heading #d7e0eb, link #8294aa, and keep contrast WCAG-compliant.
- Collapse columns into accordions or stacked groups on mobile; ensure keyboard focus states and an obvious hover state.
- A low-contrast abstract decorative strip may sit at the very bottom, but it must not interfere with footer content.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference;
- copy the reference's link labels, legal text, or decorative category pills;
- omit privacy, accessibility, or consent requirements relevant to the user's product.