## 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/mastra-factory/e98dc23c-cafd-4086-ae60-932f10b41f0f-1789106665-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mastra-factory/e98dc23c-cafd-4086-ae60-932f10b41f0f-1789106606408-full.webp
- Component on Kage: https://kage.design/component/mastra-factory-footer

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

## Design the footer
Create a wide, dark-mode website footer for a technical software product. Treat it as the final navigation and trust layer of the page, with a calm, editorial developer-tool aesthetic.

### Layout and alignment
- Use a large centered footer shell with a maximum width of approximately 1180–1240px.
- Give the shell a very dark near-black background, subtle vertical side borders, and a large rounded bottom/top contour around 28–36px. Preserve generous horizontal padding of roughly 38–40px on desktop.
- Organize the upper area as a six-column navigation grid. Keep columns evenly distributed across the width, with each group aligned to the same top baseline.
- Use short link lists with consistent vertical rhythm. Let groups have different list lengths without forcing empty placeholders.
- Place a lower utility row beneath the navigation with operational/status indicators on the left and legal links on the right. Separate this area with ample empty space rather than a heavy divider.
- On smaller screens, collapse the grid into two columns or a vertically stacked set of groups, while keeping the status and legal links readable and easy to scan.

### Typography hierarchy
- Use a compact neutral sans-serif or system UI font for navigation and legal links.
- Set links around 14–15px on desktop with a relaxed line height near 1.9–2.1.
- Use small uppercase monospace or technical-label styling for status labels, around 11–12px, with modest letter spacing of 0.08–0.12em.
- Avoid oversized branding or marketing headlines in this component; the footer should feel quiet and information-dense.
- Use medium weight only where needed. Most links should remain regular weight.

### Colour
- Page/background black: approximately #050505–#080808.
- Footer surface: approximately #090909–#0C0C0C.
- Subtle border: approximately #242424–#2D2D2D.
- Primary link text: approximately #929292–#A3A3A3.
- Muted legal text: approximately #777777–#858585.
- Status neutral text: approximately #B0B0B0.
- Operational green: approximately #7EE787 or #8BEF88.
- Add only restrained hover feedback: links can brighten toward #E5E5E5, while the green status remains green.

### Borders, radius, and depth
- Use a 1px low-contrast border around the footer shell, especially along the sides and curved lower edge.
- Use a radius around 30px; the radius should make the footer feel like a contained panel rather than a full-bleed rectangle.
- Avoid obvious shadows, gradients, glass effects, and decorative textures. If the surrounding page has ambient decoration, keep it nearly invisible behind the footer.

### Interaction and accessibility
- Make every navigation, legal, and social item a real link with a visible hover and keyboard-focus state.
- Use an unobtrusive underline, colour shift, or both for focus; never rely on colour alone.
- Pair the operational indicator with a small circular status light. The light may have a very subtle glow, but it must remain crisp and accessible.
- Ensure the footer remains usable at narrow widths: wrap legal links, preserve adequate tap targets, and avoid horizontal scrolling.
- Keep link labels concise and group them under meaningful, product-specific headings when the user's content requires headings.

## Never
- Never reuse logos, product names, navigation labels, legal copy, or status wording from the reference.
- Never copy the reference site's exact column structure, content, spacing measurements, or visual ornamentation.
- Never include illustrations, photographs, or decorative imagery from the reference.
- Never make the footer visually louder than the rest of the product experience.
- Never use inaccessible low-contrast text, tiny tap targets, or hover-only navigation.