goodreads.com
Design analysis
A light footer organizes company links, work-with-us links, social icons, app download badges, mobile information, and legal details into a practical closing navigation. Its pale background clearly separates it from the content above.
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/goodreads-com/0ed04b7a-0db2-4e11-9788-e963511428af-1789146330-6.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/goodreads-com/0ed04b7a-0db2-4e11-9788-e963511428af-1789146302680-full.webp - Component on Kage: https://kage.design/component/goodreads-footer ## Before you start Ask what legal, support, company, social, and app links the user's product needs, and what brand system should govern the footer, then apply the principles below. Build a broad desktop footer on a very light neutral surface such as `#f7f7f5`, separated by a subtle top border around `#eeeeee`. Use a four-column grid: company or product links, partner/work-with-us links, social links, and app or platform downloads. Add a small legal row beneath with copyright, privacy, terms, accessibility, and preferences links. Use uppercase or small semibold group labels around `11–12px`, link text around `12–13px`, muted gray `#555555`, and generous horizontal padding of `32px` or a centered max-width container. Social icons should sit in small circular controls; app badges should be compact and aligned. On mobile, stack the columns, keep legal links readable, and avoid forcing app badges beyond the viewport. Provide hover and focus states for every link and icon. Never: - use Goodreads logos, product names, exact reference copy, or source app badges - reuse reference social icons as branded assets - omit privacy, terms, or accessibility pathways
kage