## 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/convex-dev/1b90134a-1727-4d68-9c37-d8b1750ddf17-1789074852-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/convex-dev/1b90134a-1727-4d68-9c37-d8b1750ddf17-1789074817179-full.webp
- Component on Kage: https://kage.design/component/convex-footer

## Before you start
Ask the user what their product is, who it serves, and what visual brand it uses. Then apply the principles below to create an original footer for that product rather than reproducing this reference.

## Design the footer
Build a full-width, dark, multi-column website footer for a technical product. Treat it as a calm navigation hub: it should support discovery, establish credibility, and make important destinations easy to scan without feeling like a dense sitemap.

### Layout and alignment
- Use a very dark warm charcoal background, approximately `#211B1B` or a close brand-adjusted equivalent.
- Add a thin, subtle top border or inset highlight around `#2B2525` to separate the footer from the page above.
- Place the footer content in a centered max-width container, approximately 1180–1240px wide, with generous horizontal padding of 48px on desktop and 24px on mobile.
- On desktop, use a five-part structure: a compact brand/wordmark area at left, three navigation columns in the middle, and a social/trust column at right. The columns should align to a shared top baseline.
- Keep the navigation columns visually distinct through whitespace, not vertical rules. Use a flexible grid with roughly 1.1fr 1fr 1fr 1.1fr proportions, adapting to the amount of content.
- Give the top navigation area generous vertical breathing room, around 48–64px, and reserve a separate bottom row for legal/copyright information.
- On smaller screens, collapse into a responsive two-column or single-column layout. Keep section headings and link groups readable; do not force all desktop columns into tiny widths.
- Put the copyright or legal line at the bottom-left, with a clear separation from the navigation above, using roughly 56–72px of bottom spacing.

### Typography hierarchy
- Use the product’s sans-serif typeface, or a clean modern grotesk/system fallback.
- Make column labels small, muted, and medium-weight, around 13–14px with slightly increased letter spacing.
- Make links 14–16px, regular to medium weight, with approximately 14–18px vertical spacing between rows.
- Allow longer links to wrap naturally within their column rather than shrinking the type.
- Keep the copyright line slightly smaller or equal to body link size, in a muted light tone.
- Use sentence case for navigation labels and keep hierarchy understated; avoid oversized footer headlines.

### Colour and states
- Use warm off-white for primary links, approximately `#F1EDED`.
- Use desaturated taupe-gray for headings and secondary text, approximately `#A59E9E`.
- Use a low-contrast border/highlight around `#302929`.
- Reserve a gentle lime or mint accent, approximately `#A8E68E`, for trust-check icons or other verified states.
- External-link indicators should be small, subtle, and slightly dimmer than the associated link.
- On hover, links should transition to brighter off-white or the product’s accent colour. Keep the effect restrained: colour change and perhaps a minimal underline, not large movement.
- Ensure all text and icon states meet accessible contrast requirements.

### Navigation and trust content
- Include a compact brand mark or wordmark area, but generate one appropriate to the user’s product; it must not imitate the reference logo.
- Organize links into clear category groups such as Product, Resources, Company, Community, or other categories relevant to the user’s product.
- Use simple inline external-link indicators for destinations that leave the site.
- If the product has meaningful security, privacy, reliability, or compliance claims, place a short trust label beneath the social links. Represent each claim with a small check icon and bold the important certification or status phrase.
- Use neutral placeholder labels only when the user has not supplied real navigation content; do not invent claims of compliance or certification.
- Social links may include small monochrome icons, aligned consistently with their labels. Use an icon library or simple accessible SVGs rather than decorative illustrations.

### Borders, radius, and interaction
- Keep the footer mostly flat and architectural: no cards, gradients, shadows, or large rounded containers.
- If pills or badges are needed for trust content, use small radii around 4–6px; otherwise use square or minimally rounded geometry.
- Make every link keyboard-focusable with a clearly visible focus ring in the accent colour, such as `#A8E68E`, offset from the text.
- Ensure external links communicate their destination through accessible labels or visually hidden text in addition to the icon.
- On mobile, allow groups to stack with consistent spacing; optional disclosure accordions are acceptable only if the sitemap is very large, and they must be keyboard accessible.

## Never
- Never copy the reference company’s logo, wordmark, product names, navigation labels, copyright text, or exact copy.
- Never use the reference brand identity, including its distinctive logo treatment, as your own product’s branding.
- Never reuse the reference’s social icons, compliance claims, or certification wording unless they genuinely belong to the user’s product.
- Never include illustrations, screenshots, decorative imagery, or borrowed assets from the reference.
- Never make unsupported security, privacy, regulatory, or compliance claims.
- Never reproduce the exact column widths, link ordering, spacing measurements, or layout as a pixel-for-pixel clone; preserve the principles while adapting the footer to the user’s content and brand.