## 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/viso-now/0aea1f2c-e643-44c4-ac70-db26df0b3931-1789106577-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/viso-now/0aea1f2c-e643-44c4-ac70-db26df0b3931-1789106536289-full.webp
- Component on Kage: https://kage.design/component/viso-now-footer

## Before you start
Ask the user what their product does, who it is for, and what their brand personality, colour palette, and preferred tone are. Then apply the principles below to create an original footer for that product—not a copy of the reference.

## Design language

Build a full-width, dark site footer that feels like a calm, credible closing surface for a modern B2B software product.

### Layout and alignment
- Use a near-black background, approximately `#090910`, with a centered content container capped around `1200–1280px` and horizontal padding of `28–32px` on desktop.
- Create a generous top section with a five-part layout: a wider brand/CTA column on the left and four evenly spaced navigation columns on the right. Let the brand column occupy roughly 30% of the grid and the link columns share the remainder.
- Align every column to the same top baseline. Keep the footer visually airy rather than filling every available area.
- In the brand column, place the product wordmark as text or a neutral brand placeholder, a short one- or two-line value statement, then two compact CTA buttons in a horizontal row.
- Add a lower utility row separated by a 1px divider in approximately `#24242d`. Place trust/compliance marks on the left, social links near the centre, and legal links plus a copyright notice on the right.
- On smaller screens, collapse navigation columns into a readable stacked or two-column arrangement. Keep the brand block first, allow CTA buttons to wrap, and make the lower utility row stack with adequate spacing.

### Typography hierarchy
- Use a clean modern sans-serif system or brand font with strong legibility at small sizes.
- Make navigation group headings medium-weight, muted, and approximately `13–14px`.
- Set navigation links at approximately `13–14px`, with a slightly brighter gray than their headings and a line height around `1.9–2.1`.
- Make the brand statement approximately `13–14px`, with a line height near `1.5` and a subdued gray colour.
- Keep legal text and social labels small, around `12–13px`, without making them feel cramped.
- Use restrained weight contrast: bold for the brand and primary CTA, regular or medium for supporting links.

### Colour and controls
- Use a near-black/navy background such as `#090910` or `#0b0b13`.
- Use primary text around `#f4f4f6`, secondary text around `#a0a0aa`, and link text around `#c9c9d0`.
- Use a light primary CTA with a white or very pale surface, dark text, and a subtle pink-violet shadow or glow if that suits the user’s brand.
- Use a transparent or charcoal secondary CTA with a 1px border around `#3b3b46` and light text.
- If the product has an accent colour, use it sparingly for hover states, focus rings, CTA shadows, or small highlights rather than tinting the whole footer.
- Trust badges should be monochrome or mostly white so they read as credibility signals rather than decorative artwork. If real certifications are unavailable, use neutral placeholder blocks or omit them—do not invent certifications.

### Borders, radius, and spacing
- Give buttons a pill or generously rounded shape, approximately `999px`, with a height around `40–44px` and horizontal padding around `20–24px`.
- Use subtle separation only: a thin divider above the utility row and no heavy card borders between navigation columns.
- Allow approximately `88–112px` of top and bottom padding on desktop; use `56–72px` on mobile.
- Keep 28–36px between the brand description and CTA buttons. Use 24–32px between navigation heading and its links, with 8–12px between individual links.
- Maintain enough space between the main footer grid and the utility row that the divider feels intentional rather than crowded.

### Interaction and accessibility
- Make every link and button visibly interactive. On hover, shift link text toward the primary text colour and use a restrained accent or underline; avoid dramatic motion.
- Add a clear, accessible `:focus-visible` outline in the product accent colour with sufficient contrast against the dark background.
- Ensure the entire button and link hit areas are comfortably clickable, and preserve readable contrast for muted text.
- If navigation is collapsed on mobile, use native disclosure controls with clear expanded/collapsed states and keyboard support.
- Respect reduced-motion preferences and avoid relying on glow, colour, or icon shape alone to communicate state.

## Never
- Never reuse the reference product’s logo, product name, navigation labels, CTA copy, copyright text, or certification artwork.
- Never copy the exact column structure if it does not suit the user’s information architecture; preserve the principles, not the arrangement.
- Never include the reference site’s illustrations, imagery, icons, social marks, or branded assets.
- Never invent legal claims, compliance certifications, customer counts, or trust signals for the user’s product.
- Never make the footer visually louder than the primary page CTA or hide essential links in an inaccessible interaction pattern.