## 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/mmbl-io/849f4ec6-ce65-4185-a867-71fbc561b804-1789060567-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mmbl-io/849f4ec6-ce65-4185-a867-71fbc561b804-1789060540-full.webp
- Component on Kage: https://kage.design/component/mmbl-footer

# Before you start
Ask the user what their product is, who it is for, and what their brand identity should feel like. Then apply the principles below to create an original footer for that product rather than reproducing this reference.

## Design direction
Build a minimal, premium utility footer for a dark website. The footer should feel quiet and spacious, with a strong horizontal rhythm and only the information users need at the bottom of the page.

## Layout and alignment
- Place the footer inside a wide container with a maximum width of approximately 1170–1250px and responsive horizontal padding of 24–56px.
- Start with a 1px horizontal divider spanning the container width, using a subtle low-contrast border.
- Below the divider, create a single horizontal flex row on desktop, vertically centered with generous top and bottom padding of roughly 38–48px.
- Divide the row into four logical zones: brand block on the left, a short supporting statement beside it, one or more navigation links toward the middle or right, and legal/platform information at the far right.
- Use flexible gaps rather than fixed positioning. Let the supporting statement absorb available space so the right-side links remain aligned without overlap.
- On smaller screens, collapse into a stacked layout with the brand first and links below it. Preserve clear grouping and use consistent vertical gaps.

## Typography hierarchy
- Use a clean modern sans-serif with a slightly heavier weight for the brand wordmark treatment and regular weight for supporting text.
- Brand text should be visually prominent but compact, around 20–24px with a weight of 650–750.
- Supporting copy and utility links should be understated, around 12–14px, with comfortable line height.
- Legal text can be the smallest or lowest-contrast text, around 12–13px.
- Keep labels short and sentence case. Avoid oversized headings or promotional language.

## Colour
- Use a very dark blue-black or charcoal background, approximately #10101B to #12121F.
- Use warm off-white for the primary brand treatment, approximately #F2F0F4.
- Use muted cool gray for supporting copy and legal text, approximately #9A99A5.
- Use a slightly lighter gray for links, approximately #B5B3BE, increasing toward #F2F0F4 on hover.
- If the product has a brand accent, use it sparingly in a small brand mark or micro-detail rather than colouring large areas.

## Borders and shape
- Use a thin, low-contrast divider such as #2B2B38 at about 1px.
- Keep the footer background flat and untextured.
- Avoid cards, shadows, gradients, large rounded containers, or decorative panels.
- Any small brand mark should use simple geometric forms and a restrained radius, around 2–4px, consistent with the product’s identity.

## Interaction
- Make navigation and platform links visibly interactive through a subtle colour shift, underline, or opacity change on hover and keyboard focus.
- Include a clear, accessible focus style that works against the dark background.
- If a link includes an external-link indicator, keep it small and aligned with the text baseline.
- Preserve the calm visual hierarchy: interactions should feel precise, not animated or attention-seeking.
- Ensure the footer remains usable at narrow widths without horizontal scrolling.

## Content structure
- Include an original brand area, a brief product-specific supporting phrase, a compact navigation link group, and optional platform, contact, privacy, or copyright links as appropriate.
- Use the user’s real product name and brand assets only after asking for them; otherwise use sensible placeholders that are easy to replace.

## Never
- Never copy the reference product’s logo, product name, tagline, navigation labels, copyright text, or exact copy.
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never recreate the reference as a pixel-perfect clone or preserve its exact spacing, wording, or brand mark.
- Never add unnecessary promotional sections, social feeds, newsletter forms, decorative illustrations, or heavy visual effects.
- Never sacrifice responsive behavior or accessibility for visual similarity.