## 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/mistral-ai/b4bd1aa3-e31c-42a6-8066-6d42fc3e7f45-1789073965-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mistral-ai/b4bd1aa3-e31c-42a6-8066-6d42fc3e7f45-1789073922-full.webp
- Component on Kage: https://kage.design/component/mistral-footer

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

## Design the footer
Build a minimal, full-width website footer with a strong horizontal composition and generous negative space.

### Layout and alignment
- Use a wide footer container spanning the viewport, with a minimum height of roughly 150–220px on desktop.
- Arrange three zones on one horizontal baseline: a small legal or copyright line aligned to the lower-left area, a large abstract brand mark centered in the viewport, and compact preference controls aligned to the lower-right area.
- Let the center mark extend beyond the footer’s top and bottom edges so it feels like a cropped architectural object rather than a conventional logo lockup.
- Keep the left and right zones visually quiet; the centered form should provide the main visual weight.
- On smaller screens, preserve the hierarchy: keep the mark centered, stack or wrap the utility controls neatly, and maintain comfortable side padding of 24–32px.
- Use a max-width only for the utility content if needed, but allow the central shape to remain aligned to the viewport center.

### Typography
- Use a clean sans-serif system or brand font.
- Legal text should be small, approximately 12–14px, regular weight, with slightly muted contrast.
- Control labels should be 13–14px and medium weight for readability.
- Avoid headlines or promotional copy in this section; the footer should feel like a quiet endpoint.

### Colour
- Use a warm near-white background around `#F7F7F5` or adapt it to the product’s neutral surface colour.
- Use a very dark navy or charcoal for the central abstract mark, approximately `#111323`.
- Use muted grey for legal text, approximately `#6F706F`.
- Keep controls close to the background colour with dark text and subtle contrast.
- Ensure all interactive text and controls meet accessible contrast requirements.

### Borders, shape, and spacing
- Give the footer generous horizontal padding: approximately 40px desktop and 24px mobile.
- Use compact control groups with 8–12px gaps.
- Place controls inside soft, lightly bordered containers using a 6–10px radius.
- Use a 1px border around segmented preference controls, approximately `#E2E3DF`, with a very subtle shadow or inset highlight if useful.
- The central mark should be a simple original geometric shape—such as a block, cutout, or abstract monogram-like construction—without resembling a real logo.
- Keep the overall surface flat and calm; avoid gradients, decorative patterns, and excessive shadows.

### Interaction
- Provide a compact appearance/theme control with three icon-only options, such as system, light, and dark mode. Give the active option a subtle filled or elevated state and include accessible labels/tooltips.
- Provide a language selector beside it, styled as a compact bordered button with a text label and chevron.
- Add hover and focus-visible states using a slightly darker border or soft background tint; never rely on colour alone to communicate the active state.
- Make all controls keyboard accessible and ensure the selector has an obvious open, selected, and focus state.

### Responsive behaviour
- At tablet widths, reduce the footer padding and keep the center mark proportionally large.
- At mobile widths, allow the legal text and control group to occupy separate rows while preserving a centered abstract form between or behind them. Prevent controls from overflowing horizontally.
- Respect safe-area insets on mobile devices.

## Never
- Never copy the reference site’s logo, central emblem, product name, copyright wording, language choices, icons, or exact copy.
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never make the footer depend on the reference brand’s exact colours, geometry, or proportions; adapt the system to the user’s product and brand.