Kage Design logo kage
ultracite.ai
Ultracite v8 footer component

Design analysis

A dark footer closes the page with a compact brand statement, grouped documentation links, and small social or utility icons. The multi-column structure preserves the product's technical, documentation-first character.

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/ultracite-v8/2cfe6d77-9aac-44fd-bb06-05dad12091d2-1792303308-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ultracite-v8/2cfe6d77-9aac-44fd-bb06-05dad12091d2-1792303236925-full.webp
- Component on Kage: https://kage.design/component/ultracite-v8-footer

## Before you start
Ask what the user's product name, support resources, legal links, social destinations, and documentation taxonomy are. Use those real inputs to create an original footer.

Build a dark, multi-column documentation footer. Put the brand and a one- or two-line description in the first column, with small social or utility links beneath. Use the remaining columns for grouped navigation such as getting started, integrations, migrations, and more. Keep group labels small and letter-spaced, while links are comfortably readable and vertically spaced. Add a subtle top border or tonal transition from the CTA.

Use near-black #121211, warm white #f2f2ee for the brand, muted gray #979791 for descriptions, and #deded9 for links or focus states. Keep the footer padding around 28–40px and use a restrained 12–14px type scale. Ensure every link has a visible hover and keyboard focus state, provide semantic navigation landmarks, and collapse into stacked groups on mobile.

### Never
- Never use the reference's logos, product names, copy, illustrations, or imagery.
- Never include dead-end navigation or inaccessible icon links.
- Never let the footer become a second hero or add unrelated promotional content.

More components