## 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/superhuman-com/aa0f5749-a8ae-405c-9afb-679f6a47222d-1789060757-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/superhuman-com/aa0f5749-a8ae-405c-9afb-679f6a47222d-1789060721-full.webp
- Component on Kage: https://kage.design/component/superhuman-cta

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual system are. Then apply the principles below to create an original footer navigation section for that product—not a reproduction of the reference.

## Design language

Build a full-width footer navigation area with a deep, warm, near-black burgundy background (approximately `#421C24` or a brand-appropriate equivalent) and soft, low-contrast text (approximately `#D8C7C9`). Keep the component intentionally quiet: it should support the rest of the page rather than compete with it.

- Use a wide, centered content container with generous side padding, approximately `64px` on desktop and `24px` on small screens.
- Arrange navigation into multiple vertical columns on desktop. Align each column to the same top baseline, with consistent column widths and generous horizontal gaps. Use a responsive grid that collapses to two columns or a stacked layout on narrow screens.
- Keep the layout visually sparse. Each group should contain short, single-line links with generous vertical separation, around `18–24px` between items. Allow longer labels to wrap naturally without breaking the grid.
- Use a clean sans-serif typeface. Navigation links should be around `15–16px`, regular weight, with approximately `1.45` line-height. Avoid prominent headings if the product does not need them; the reference's understated appearance comes from letting the links form the visual structure.
- Maintain a restrained contrast hierarchy: primary footer text around `#D8C7C9`, muted utility text around `#BFAEB1`, and hover text near `#FFFFFF`. Do not introduce bright accent colours unless they are essential to the user's brand.
- Do not use card surfaces or heavy dividers. If separators are needed, use a subtle border such as `1px solid rgba(255,255,255,0.10)`. Keep corners square or use only a very small radius, approximately `0–4px`.
- Include a compact social or utility column where appropriate. Pair each social destination with a small, simple icon and a text label; keep icon and label aligned on a shared baseline with about `8px` spacing.
- Provide clear keyboard focus states, such as a thin light outline or visible underline. On hover, slightly brighten the link and optionally add a subtle underline; avoid large motion or decorative effects.
- Ensure links have a comfortable hit area even when the visible text is small. Preserve readable contrast and allow the footer to work without relying on colour alone.
- On mobile, reduce the column gap and vertical padding while preserving breathing room. Avoid horizontal overflow and keep social links accessible with touch-friendly spacing.

## Never

- Never reuse logos, product names, exact link labels, or copy from the reference.
- Never copy the reference's exact column structure, dimensions, spacing, or visual proportions; adapt the system to the user's information architecture.
- Never include the reference's illustrations, imagery, icons, social marks, or privacy-widget artwork. Use an icon library or brand-neutral geometric icons only where the user's product requires them.
- Never add a promotional headline, email form, or extra CTA unless it is appropriate to the user's product and footer goals.
- Never make the footer visually louder than the page content above it.