## 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/codeaf/74fffb9e-aea6-4193-af2d-c8a5b19c270c-1791007530-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/codeaf/74fffb9e-aea6-4193-af2d-c8a5b19c270c-1791007420738-full.webp
- Component on Kage: https://kage.design/component/codeaf-footer

## Before you start
Ask what pages, resources, legal links, newsletter destination, and brand signature the user's product needs. Build the footer around those priorities and the user's identity.

Create a dark footer with a centered max-width container. Start with a five-column link matrix: a brief company description and newsletter email field on the left, then product, open-source/community, resources, and company columns. Use compact headings and generous vertical rhythm. Below the links, add a social/community button, version or license metadata, and a large abstract typographic brand signature that is unique to the user's brand. Keep the footer visually quiet but memorable.

Design language: #08090a background, top divider #202324, primary text #d3d6d3, muted text #777b79, field border #34352f, and restrained gold #b99543 for a tiny star/accent. Use 10–12px labels and links, 11px body copy, and a large custom wordmark treatment at roughly 80–100px only if the user's brand supports it. Use square or 2px-radius fields, 40px control height, 16–24px column gaps, and clear hover/focus states. Collapse columns into grouped accordions on mobile; keep the newsletter form labeled and accessible.

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