## 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/prisma-io/a9579200-8b41-4bc5-a193-79d074877e51-1789073821-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/prisma-io/a9579200-8b41-4bc5-a193-79d074877e51-1789073789-full.webp
- Component on Kage: https://kage.design/component/prisma-footer

## Before you start
Ask the user what their product does, who it is for, and what their brand personality, colours, typography, and navigation structure are. Then apply the principles below to create an original footer for that product rather than reproducing the reference.

## Design language
Build a full-width footer with a clean, light background and a generous maximum-width container, approximately 1200px wide. Use a desktop layout with a four-column upper section: a wider brand and contact column on the left, followed by three evenly sized navigation columns. Keep all columns aligned to the same top edge and give the footer generous horizontal padding, around 40px on desktop and 20–24px on mobile.

The left column should establish the brand briefly: use the product's own wordmark or brand treatment, a short one-to-three-line description, an email or primary contact link, a small row of social links, and optionally one compact trust, review, or community CTA. Keep this block visually distinct through content hierarchy, not a coloured panel.

Use clear column headings in a medium or semibold weight, around 14–16px, with link lists below in a regular 14–16px size. Set list items with comfortable vertical spacing, approximately 12–18px, and avoid overloading any one group. Use a neutral sans-serif type system: dark charcoal for headings and primary text, approximately #202124, and muted grey for descriptions and links, approximately #6F7075. Let the user's brand accent appear only in the logo, icons, focus states, or optional CTA rather than colouring the entire footer.

Separate the upper navigation from the legal row with a thin, low-contrast divider around #E8E8E8. Below it, create a compact bottom row with copyright on the left and privacy, terms, compliance, or other utility links grouped alongside it. On smaller screens, stack the columns in a logical order, preserve clear section spacing, and let the legal row wrap or stack without cramped alignment.

Use small monochrome social icons with accessible labels and consistent 20–24px hit areas. Links should have a subtle colour change or underline on hover and a clearly visible keyboard focus ring using the product's accent colour. Keep borders minimal, use no card shadows, and use a restrained radius—around 6–10px—for any pill-shaped CTA or bordered control.

After the legal row, optionally add a large typographic brand signature or wordmark treatment as a visual closing element. It should be oversized, partially cropped by the viewport or container, and built from the user's own typography and brand motifs. Treat it as decorative, ensure it does not interfere with navigation, and provide an accessible text alternative or hide it from assistive technology when redundant.

Ensure semantic structure with a `<footer>`, navigation landmarks, heading hierarchy, descriptive link text, accessible icon labels, and sufficient colour contrast. The result should feel spacious, trustworthy, and easy to scan rather than like a dense sitemap.

## Never
- Never copy the reference's logo, product name, wordmark, navigation labels, or exact marketing copy.
- Never reuse the reference's distinctive striped typographic artwork, illustrations, imagery, or branded graphic motifs.
- Never assume the user's product has the same columns, links, social platforms, CTA, colours, or legal requirements.
- Never make the footer a pixel-for-pixel recreation of the reference.
- Never use unlabeled icon-only links, inaccessible focus states, or low-contrast text.