Kage Design logo kage
umbra.masn.studio
Umbra Mail footer component

Design analysis

A sparse footer balances a data/privacy statement on the left with legal and repository links on the right.

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/umbra-mail/e5ad193a-88e6-403f-9829-5608575fa4bb-1792476320-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/umbra-mail/e5ad193a-88e6-403f-9829-5608575fa4bb-1792476206048-full.webp
- Component on Kage: https://kage.design/component/umbra-mail-footer

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

Create a minimal footer on a deep navy background matching the surrounding page. Use a centered max-width container, a two-column layout on desktop, and stack the columns on narrow screens. Place a tiny muted trust or privacy statement on the left and a compact row of legal, documentation, and community links on the right. Use 12px sans-serif type, subdued blue-gray text around #78829C, underlined links where appropriate, and generous top padding. Keep the footer free of decorative clutter; its job is closure and trust. Add subtle hover color changes to links and ensure the mobile layout remains comfortable.

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

More components