## 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/tally-so/8873d519-e012-4a77-bd60-f7e8803b75a7-1789060955-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/tally-so/8873d519-e012-4a77-bd60-f7e8803b75a7-1789060926-full.webp
- Component on Kage: https://kage.design/component/tally-footer

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

## Design language

Build a minimalist website footer for the user's product with a wide, horizontal layout and generous empty space. Treat the footer as a quiet navigation surface rather than a promotional banner.

### Layout and alignment
- Use a full-width footer container with a centered inner wrapper and generous horizontal padding, approximately `32px–64px` on desktop.
- Arrange the content into a narrow social area on the left and three or four navigation columns to its right.
- Align every navigation column to the same top baseline and use a consistent column gap of approximately `72px–120px`, depending on viewport width.
- Keep the content constrained to a readable maximum width, around `1100px–1280px`.
- Leave substantial vertical whitespace around the navigation so the footer feels airy; use approximately `56px–96px` top and bottom padding.
- On smaller screens, collapse the columns into a responsive grid or stacked groups while preserving clear left alignment and comfortable touch targets.

### Typography hierarchy
- Use the product's sans-serif typeface, or a neutral modern sans-serif fallback.
- Render ordinary links in a small-to-medium size around `14px–16px`, with regular weight and relaxed line height around `1.6`.
- Use navigation group headings at the same or slightly larger size, around `15px–16px`, with semibold weight.
- Keep headings visually distinct through weight and spacing rather than oversized type.
- Give each link approximately `6px–10px` of vertical separation; avoid dense lists.

### Colour
- Use a white or near-white footer background, approximately `#FFFFFF` or `#FAFAF8`.
- Use dark charcoal text for links, approximately `#3D3D3A` to `#4A4A46`.
- Use a slightly darker charcoal for group headings, approximately `#242422`.
- Social icons may use the same dark neutral, with muted gray on idle if that better fits the user's brand.
- Add a subtle hover state such as a darker text colour, underline, or 70–90% opacity transition; do not introduce loud accent colours unless the user's brand requires it.

### Borders and radius
- Prefer no visible border when the footer sits on a white page; preserve the open, uninterrupted feel.
- If separation is needed, use a very subtle 1px top border around `#ECECE8`.
- Keep the footer and link elements mostly square or softly rounded, with radii around `0px–6px`.
- Do not use cards, pills, shadows, or decorative containers around each link group.

### Social links and interaction
- Place a compact row of recognizable social destinations in the left area, using simple monochrome icons sized around `18px–20px`.
- Give each icon an accessible label, visible focus state, and a hit area of at least `32px–40px` even if the glyph is smaller.
- Keep icon spacing consistent, around `10px–16px`.
- Make all footer links keyboard accessible and provide a clear focus ring using the user's accent colour or a dark high-contrast outline.
- Ensure long link labels wrap naturally without disturbing the alignment of neighboring columns.
- Include only the navigation groups and destinations that make sense for the user's product; the structure should be reusable rather than fixed.

## Never
- Never copy the reference's logos, social marks as a branded set, product names, navigation labels, or exact copy.
- Never reuse illustrations, imagery, or decorative assets from the reference.
- Never reproduce the exact column contents, spacing measurements, or visual styling as a pixel-for-pixel clone.
- Never invent brand claims or destinations without asking the user what their product needs.
- Never sacrifice responsive behavior, semantic navigation, keyboard access, or readable contrast for visual similarity.