## 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/modeinspect/f4214789-eaef-4abd-8d9d-34964c707234-1789106494-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/modeinspect/f4214789-eaef-4abd-8d9d-34964c707234-1789106455022-full.webp
- Component on Kage: https://kage.design/component/modeinspect-footer

# Before you start
Ask what the user's product is, who it is for, and what its brand personality and visual system are. Then apply the principles below to create a footer for that product—not a literal reproduction of this reference.

## Design language

Build a spacious, dark utility footer that feels like the closing frame of a premium software landing page. It should support navigation and trust while remaining visually quiet.

### Layout and alignment
- Use a near-black full-width background, approximately `#101010`, with a centered content container capped around 1150–1200px.
- Separate the footer from the preceding section with a thin horizontal rule in a low-contrast grey, approximately `#2A2A28`.
- Give the upper footer generous vertical padding, roughly 64–76px on desktop.
- Arrange the main footer content in two zones: a left content area occupying about two-thirds of the width and a right visual or utility panel occupying the remaining third. Keep their top edges aligned.
- In the left zone, place a short brand descriptor above a three-column navigation grid. The descriptor should be constrained to roughly 300px so it forms a readable, compact paragraph.
- Navigation columns should align to a consistent grid and use small uppercase labels with generous tracking. Keep link rows vertically spaced but compact.
- Add a second horizontal rule before the legal row. The legal row should use a small left-aligned copyright notice and a horizontal group of secondary links.
- On smaller screens, collapse the visual panel below or beside the description, then stack navigation columns into a simple responsive grid. Preserve comfortable horizontal padding of 20–24px.

### Typography hierarchy
- Use a clean modern sans-serif for the brand name, description, navigation links, and legal links.
- Make the small brand label or wordmark modest but slightly heavier than body copy, around 15–16px.
- Set the description around 15–16px with a 1.55–1.65 line height and muted contrast.
- Style navigation headings in approximately 9–10px uppercase text with 0.16–0.22em letter spacing.
- Set navigation links around 14–15px with a 1.8–2.2 line height.
- Use a restrained monospace or technical sans treatment for legal metadata if it suits the product, around 10–11px with subtle tracking.
- Avoid oversized footer typography; the footer should feel information-dense but calm.

### Colour
- Background: approximately `#101010` or `#111111`.
- Primary text: warm off-white, approximately `#F2F2EC`.
- Body and navigation text: muted grey, approximately `#92928E`.
- Section labels and legal metadata: darker grey, approximately `#5D5D59`.
- Dividers and panel borders: approximately `#292A27`.
- If the product has an accent colour, use it sparingly for hover states or a tiny detail in the visual panel; a soft chartreuse such as `#C8FF72` works well against the dark surface.

### Borders, surfaces, and radius
- Use 1px dividers with low contrast rather than heavy cards or shadows.
- If including a right-side visual panel, make it a quiet rectangular surface one shade lighter than the footer, around `#292A28`, with a subtle border.
- Keep the panel radius minimal—0 to 2px—or use the product’s established radius system. Do not make the footer feel like a collection of rounded cards.
- Avoid gradients unless they are a very subtle brand-specific atmosphere.

### Interaction
- All links should have clear keyboard focus states using a visible outline or accent-colour underline.
- On hover, navigation links may shift to off-white and receive a restrained underline or a small opacity transition; use a fast 150–200ms transition.
- If the visual panel contains a decorative cursor, diagram, or product hint, treat it as nonessential atmosphere and keep it static or gently animated without distracting from navigation.
- Ensure the footer remains useful and readable with motion disabled and on touch devices.
- Maintain accessible contrast and provide meaningful labels for any icon-only or external links.

## Content guidance
- Write a short, specific description of the user's product in 2–4 lines.
- Use 2–4 navigation groups with labels relevant to the product, such as company, product, resources, social, or legal.
- Include practical legal links and a copyright line where appropriate.
- Keep link labels concise so the footer scans quickly.

## Never
- Never copy the reference’s logo, product name, navigation labels, descriptive copy, copyright text, or exact calls to action.
- Never reuse the reference’s decorative cursor, orbit graphic, illustration, or imagery; create a product-appropriate visual treatment or omit it.
- Never reproduce the exact column widths, spacing values, or visual details as a pixel-for-pixel clone.
- Never make the footer depend on low-contrast text, hover-only information, or animation for comprehension.
- Never add unrelated promotional content that competes with the main page CTA.