## 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/warp-dev/0d3838c7-307f-484a-8c23-3188eaa6f6f5-1789060391-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/warp-dev/0d3838c7-307f-484a-8c23-3188eaa6f6f5-1789060312-full.webp
- Component on Kage: https://kage.design/component/warp-footer

## Before you start
Ask the user what their product is, who it serves, and what visual brand language they want. Then apply the principles below to create an original footer for that product—not a copy of the reference.

## Design direction
Build a wide, information-dense website footer with a quiet technical/editorial character. Treat the footer as a navigation directory: a short brand or product statement sits at the far left, while several link groups are distributed across an aligned column grid. Finish with a separate bottom row for copyright or legal metadata.

### Layout and alignment
- Use a full-width footer with a centered max-width content container, approximately 1180–1280px wide.
- Divide the upper footer into 5–6 vertical columns using a consistent grid. On large screens, align every column to the same vertical guides and keep the leftmost column wider for a short description.
- Add subtle vertical rules between columns, extending through the upper navigation area. Keep the rules secondary and low contrast.
- Give the upper section generous top and bottom padding, roughly 56–80px, while keeping the link lists compact.
- Place the copyright/legal row below a full-width horizontal divider. It should be shorter than the navigation area, with approximately 18–28px of vertical padding.
- On smaller screens, collapse the grid into one or two columns, remove or reduce vertical rules, and preserve clear grouping and comfortable tap targets.

### Typography hierarchy
- Use a compact grotesk or monospace-inspired sans-serif for navigation labels to suggest a developer-tool or technical product context.
- Make the descriptive text slightly larger than the links, around 14–16px, with relaxed line height and a muted tone.
- Render link labels around 12–14px with approximately 1.9–2.2 line height so dense lists remain scannable.
- Use small, understated legal text around 11–12px. Avoid oversized headings; the structure should come from alignment and whitespace.
- Keep text weight mostly regular, reserving medium weight for occasional group labels or important calls to action.

### Colour and surface
- Use a near-white or very pale warm background, approximately #FAFAF8 or #FCFCFB.
- Use primary text in a soft charcoal such as #555555, with secondary text around #8A8A86.
- Set grid lines and dividers to a very light neutral, approximately #E5E5E1 or rgba(80,80,75,0.14).
- If the product has an accent colour, use it sparingly for hover states or one small utility element rather than colouring the whole footer.
- A subtle dotted or micro-grid texture may sit behind the footer at very low opacity, using dots around #D8D8D2. Keep it decorative and never let it reduce text contrast.

### Borders, radius, and detail
- Prefer square or nearly square geometry: use 0–4px corner radii and thin 1px rules.
- Keep the footer visually flat; avoid cards, strong shadows, gradients, or heavy background blocks.
- Ensure the horizontal divider above the legal row is clearly perceptible but still quieter than the text.

### Interaction
- Make all links keyboard accessible with visible focus states that meet contrast requirements.
- On hover, shift link text from muted charcoal toward the product’s primary text or accent colour; use a quick 150–200ms transition.
- Do not rely on hover alone to communicate link groups. Preserve clear labels, sufficient spacing, and a minimum comfortable tap target on touch devices.
- If link groups collapse on mobile, use an accessible disclosure pattern with clear expanded/collapsed states.

## Never
- Never use the reference product’s logo, product name, or brand assets.
- Never reuse the reference copy, link labels, legal text, or exact navigation taxonomy.
- Never copy the reference’s exact column count, measurements, typeface, or decorative grid treatment; adapt the system to the user’s product.
- Never include illustrations, screenshots, or imagery from the reference.
- Never make the footer visually noisy, overly rounded, gradient-heavy, or dependent on low-contrast text for readability.