duolingo.com
Design analysis
The bright green footer organizes many links into clear columns, then adds social links and a broad language selector as a final utility layer.
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/duolingo-com/3a8c78c9-bd82-49c8-8251-8e9f7b022530-1789146270-8.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/duolingo-com/3a8c78c9-bd82-49c8-8251-8e9f7b022530-1789146240317-full.webp - Component on Kage: https://kage.design/component/duolingo-footer ## Before you start Ask what footer destinations, legal requirements, social channels, and localization options the user's product needs, then apply the principles below to that product rather than copying the reference. Build a full-width footer with a saturated green background (approximately #58CC02) and a centered max-width content grid. Use five or six link columns with concise headings in white or very light text, smaller low-contrast link text, and generous column gaps. Include a separated lower area for language selection with multiple inline language links that wrap naturally. Add hover and focus underlines, preserve readable contrast, and make columns collapse into an accordion or stacked groups on mobile. Include appropriate legal and accessibility links without overwhelming the primary navigation. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage