Kage Design logo kage
openwhispr.com
OpenWhispr for iOS footer component

Design analysis

The footer separates brand description and social controls from grouped product, resource, and company links, then ends with legal links and utility controls.

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/openwhispr-for-ios/fdca984f-87fc-4407-a067-b1821a770c20-1791957717-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/openwhispr-for-ios/fdca984f-87fc-4407-a067-b1821a770c20-1791957682462-full.webp
- Component on Kage: https://kage.design/component/openwhispr-for-ios-footer

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

Build a spacious multi-column footer on white. Begin with a top divider, then use a left brand/about column with a small mark, short description, social buttons, and a language selector. Place three or more link columns to the right with small uppercase or medium-weight group headings and muted vertically stacked links. Finish with a thin divider and a bottom legal row containing copyright, legal/policy links, and compact appearance or settings controls. Use 14–16px body text, 12–13px footer links, #111318 headings, #68707c links, 28–40px column gaps, and 20–32px horizontal padding inside a max-width container. Keep the footer responsive: collapse columns into an orderly stack or accordion on mobile. Use subtle #edf0f2 rules and small 8–12px radii for controls.

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

More components