## 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/labs-winszn-xyz/4df5b54d-904b-4cf9-bf65-93181d626a5e-1789097621-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/labs-winszn-xyz/4df5b54d-904b-4cf9-bf65-93181d626a5e-1789097588315-full.webp
- Component on Kage: https://kage.design/component/labs-winszn-footer

## Before you start
Ask me what my 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 my product—not a copy of the reference.

## Design the footer
Build a highly minimal, full-width footer that acts as a quiet end-cap to the page. The composition should be defined primarily by negative space: avoid columns, promotional content, social icon clusters, newsletter forms, or decorative graphics unless my product genuinely requires them.

### Layout and alignment
- Use a full-width footer with a very dark solid background.
- Give the footer generous vertical height, roughly 220–300px on desktop, so the content feels intentionally placed rather than tightly packed.
- Anchor the only footer content near the lower-left, aligned with the main page container or the page’s existing left grid edge.
- Use responsive horizontal padding of approximately 32–40px on desktop and 20–24px on mobile.
- Keep the content close to the bottom with approximately 38–48px bottom padding on desktop and 24–32px on mobile.
- If additional links are needed for my product, preserve the same sparse composition: place them in one compact row or a small adjacent group, never as a dense sitemap.
- Prevent the footer from feeling like a card; it should meet the viewport edges cleanly with no outer margin.

### Typography hierarchy
- Use a compact mono or technical sans-serif for metadata, reflecting a crafted developer-oriented product.
- Set the legal or ownership line in uppercase or small-cap styling with generous tracking, around 0.16–0.24em.
- Use a small size, approximately 10–12px, with a restrained line height around 1.4.
- Keep the text visually secondary; the footer should not compete with the page content above it.
- If links are present, match the same typeface and size, but increase contrast slightly on hover.

### Colour
- Use an approximate background of `#100D0D` or another near-black warm charcoal that fits my brand.
- Use muted gray text around `#777171` to `#8B8585` rather than bright white.
- If the surrounding page uses a different palette, preserve the contrast relationship—darkest background, subdued metadata, and no unnecessary accent colour.
- Ensure the text remains accessible enough to read while retaining a low-key visual presence.

### Borders and radius
- Prefer no border, divider, shadow, or visible container treatment.
- If separation from the preceding section is necessary, use a very subtle 1px top border around `#211D1D`.
- Keep the footer square to the viewport with a `0px` radius; do not make it look like a floating panel.

### Interaction and responsive behaviour
- Static copyright or ownership metadata does not need interaction.
- If links are added, use a subtle colour shift, underline, or opacity change on hover and keyboard focus; avoid animated or attention-seeking effects.
- Maintain the lower-left anchor on mobile, allowing the line to wrap naturally rather than shrinking the text below a readable size.
- Respect reduced-motion preferences and keep transitions short, approximately 150–200ms.

## Never
- Never reuse logos, product names, wording, or copyright text from the reference.
- Never copy the reference’s exact dimensions, spacing values, or visual implementation; adapt the principles to my product and brand.
- Never include illustrations, imagery, decorative textures, or branded graphics from the reference.
- Never add unnecessary footer columns, large calls to action, newsletter forms, or social icons just to fill the space.
- Never use bright white text, gradients, rounded cards, heavy shadows, or a visually dominant footer treatment unless my brand explicitly calls for them.