Kage Design logo kage
saliency.dev
S-Roll footer component

Design analysis

The footer provides utility links and support information above a final floating brand bar with copyright and social 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/s-roll/31ce67c8-e756-4d99-81ee-7a5fcf910ca7-1789711387-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/s-roll/31ce67c8-e756-4d99-81ee-7a5fcf910ca7-1789711333877-full.webp
- Component on Kage: https://kage.design/component/s-roll-footer

## Before you start
Ask what legal links, support contact, social destinations, and copyright details the user's product requires. Apply the structure without borrowing reference content.

Build a restrained dark footer. Center a small row of pill-shaped legal links, followed by muted support text and a short ownership line. At the bottom, add a full-width floating bar matching the site's navigation: brand at left, copyright text and two compact circular utility buttons at right. Use #000000 background, #7f7b79 secondary text, #111114 surfaces, #343439 borders, 999px pills, and 16–20px outer padding. Keep typography small but legible, maintain strong contrast, and make links visibly interactive with hover and focus states. On mobile, allow the utility row to wrap and stack the bottom bar contents.

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

More components