## 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/thousand/cb10af68-535d-4246-97d9-03dbd24306a9-1789106640-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/thousand/cb10af68-535d-4246-97d9-03dbd24306a9-1789106570706-full.webp
- Component on Kage: https://kage.design/component/thousand-footer

## Before you start
Ask me what my product is, who it is for, and what its brand personality, colours, typography, and content requirements are. Then apply the principles below to create an original footer for my product—not a copy of the reference.

## Design goal
Build a minimal website footer that feels calm, polished, and spacious. The footer should act as a soft visual landing at the end of the page: a warm neutral lower area with a strong, rounded colour band entering from the top, followed by understated legal and informational navigation.

## Layout and alignment
- Make the footer full width and use a two-part structure:
  1. An upper accent band or rounded panel that touches or slightly overlaps the footer’s top edge.
  2. A lower navigation row on a warm off-white background.
- Give the accent band a generous height relative to the footer and round only its lower corners, or use a large continuous radius so it feels like a broad pill-like shape clipped by the viewport edges.
- Keep the lower footer content in a centered, max-width container with generous horizontal padding, approximately 48–64px on desktop and 24px on mobile.
- Align the copyright text to the left and the utility links to the right on larger screens. On narrow screens, stack them or allow the links to wrap while preserving comfortable spacing.
- Vertically center the lower row. Use approximately 52–72px of vertical padding so the footer remains airy without becoming oversized.
- Use a consistent gap between links, approximately 24–30px, and prevent the link group from feeling like a dense menu.

## Typography hierarchy
- Use a small, quiet sans-serif style throughout the lower row, around 14px desktop and 13–14px mobile.
- Set the copyright and links at the same visual level; there is no headline or promotional message in this component.
- Use regular font weight, relaxed line height around 1.4–1.6, and slightly softened contrast rather than bold emphasis.
- Preserve enough contrast for accessibility even though the footer should feel subdued.

## Colour
- Use a warm near-white footer background, approximately `#F5F1E7` or a brand-appropriate equivalent.
- Use a cheerful golden-yellow accent for the upper band, approximately `#F4B928` to `#F8C43A`.
- Use muted taupe-grey text, approximately `#9A958A`, but adjust it to meet accessible contrast requirements.
- Derive these colours from the product’s brand if the user provides a palette; retain the same relationship of warm background, high-energy accent, and quiet text.

## Borders, radius, and surface treatment
- Avoid visible borders, shadows, gradients, or decorative effects.
- Use a large radius on the accent band, approximately 28–36px, with the sides extending beyond or aligning to the viewport edges.
- Keep the lower background flat and uninterrupted.
- Ensure the accent shape does not create horizontal overflow on any viewport.

## Interaction and responsive behaviour
- Make every utility link keyboard accessible with a visible focus state, such as a 2px outline using the accent colour with a small offset.
- On hover, slightly darken the link colour or add a subtle underline; do not use dramatic motion.
- Respect reduced-motion preferences and keep transitions short, around 150–200ms.
- Ensure the footer works at mobile widths: the link group may wrap, but links must retain adequate tap targets of at least 44px in height.
- Maintain a clear separation between the accent band and the legal/navigation row at all breakpoints.

## Never
- Never use the reference product’s logo, product name, copyright wording, navigation labels, or exact copy.
- Never copy the reference layout pixel-for-pixel; adapt the principles to the user’s product and brand.
- Never include illustrations, photographs, icons, or other imagery from the reference.
- Never introduce a large headline, CTA, newsletter form, social feed, or extra footer columns unless the user’s product requirements call for them.
- Never sacrifice readable contrast or keyboard accessibility for a muted visual style.