## 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/upstash-com/210669b2-56ab-47a0-9be6-e94255ecbd31-1789073749-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/upstash-com/210669b2-56ab-47a0-9be6-e94255ecbd31-1789073722-full.webp
- Component on Kage: https://kage.design/component/upstash-footer

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

## Build this section
Create a minimal, low-visual-weight footer utility area for a developer-focused website. It should feel like the final informational layer of a polished SaaS page: quiet, precise, and easy to scan.

### Layout and alignment
- Use a full-width footer band with a very light neutral background, approximately `#f7f7f7` or a colour derived from the product’s brand system.
- Centre the content in a constrained column, approximately `620–680px` wide, rather than spanning the full viewport.
- Place a compact row of operational/resource links above the legal copy. Use pill-like, pale tinted link surfaces with small circular status indicators where appropriate.
- Stack the legal notices and machine-readable developer resource note beneath the link row.
- Keep all text left-aligned within the narrow column for legibility, while the overall block remains centred on the page.
- Use generous vertical whitespace above the utility content and a modest bottom inset so the footer feels intentionally quiet.
- On small screens, allow the link row to wrap naturally and reduce the content width to the viewport with approximately `20–24px` side padding.

### Typography hierarchy
- Use the site’s existing sans-serif UI font if available; otherwise choose a clean modern sans-serif.
- Render utility links slightly stronger than the legal copy, around `14–15px`, with medium weight.
- Set legal and developer notes around `12–13px`, regular weight, with approximately `1.35–1.5` line-height.
- Keep paragraph spacing compact but distinct: approximately `10–14px` between notices.
- Use muted text around `#9aa0a3` to keep the legal layer subordinate, while links may use a darker neutral around `#737b7d`.
- Make inline URLs visibly identifiable through a subtle underline or slightly darker text, without turning the section into a high-contrast navigation block.

### Colour, borders, and shape
- Use a near-white or very pale grey background such as `#f8f8f8`.
- Use soft green or brand-accent tints for operational link pills, for example a background around `#e8f7f1` and an accent dot around `#19b486`; adapt these values to the product brand.
- Avoid strong borders. If separation is needed, use a 1px line near `#eeeeee`.
- Give link pills a soft rounded radius of approximately `18–22px`, with compact horizontal and vertical padding.
- Keep the legal text free of cards, shadows, illustrations, or decorative containers.

### Interaction
- Make status/resource pills keyboard accessible and clearly clickable.
- On hover, slightly darken the pill background and link text; do not introduce dramatic motion.
- Use a subtle underline or colour shift for inline links on hover and focus.
- Preserve visible keyboard focus with a thin, brand-coloured outline.
- If the product has live service indicators, ensure status labels communicate their state with both text and colour—not colour alone.

### Content structure
- Include a compact operational link row appropriate to the product, such as service status, performance, documentation, support, or other trust-building resources.
- Follow it with one or more concise legal/trademark notices relevant to the product’s actual dependencies and claims.
- End with an optional short note explaining how AI agents or developers can access the product’s documentation or resources, if that is useful for the product.
- Write original, product-specific copy based on the user’s answers; do not use placeholder text in the finished implementation.

## Never
- Never copy the reference site’s logos, product names, trademarks, URLs, or exact wording.
- Never reuse the reference’s legal notices or specific AI-agent instruction text.
- Never add illustrations, stock imagery, decorative graphics, or a large branded footer treatment.
- Never make the footer visually louder than the rest of the page.
- Never rely on colour alone to communicate operational status.
- Never use the reference layout as a pixel-for-pixel reconstruction; preserve only the underlying principles of a centred, restrained legal and developer-resource footer.