## 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/gojo/109391a8-f454-43af-b6cd-05815ad35e3c-1789106544-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/gojo/109391a8-f454-43af-b6cd-05815ad35e3c-1789106501929-full.webp
- Component on Kage: https://kage.design/component/gojo-footer

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

## Design direction
Build a minimal, editorial footer for a modern software product. The footer should feel calm, precise, and lightly branded, with a large amount of white space and a clear distinction between the navigational link area and the small legal/status bar at the bottom.

### Layout and alignment
- Use a full-width footer with a centered max-width content container, approximately 1180–1240px wide, with 32–40px horizontal padding on desktop.
- Place the main footer navigation in a multi-column grid, typically 3–4 columns. Keep each column left-aligned and use consistent vertical rhythm between links.
- Allow the columns to begin lower or higher according to the surrounding page composition, but preserve generous empty space around the link groups; do not make the footer feel dense.
- Add a full-width, 1px divider near the bottom of the container.
- Below the divider, create a compact metadata row: copyright or ownership text aligned left, and a short platform, security, or legal status note aligned right.
- On smaller screens, stack or wrap the link columns into 2 columns, then stack the bottom metadata row vertically with comfortable spacing.

### Typography hierarchy
- Use the product’s existing sans-serif typeface, or a neutral modern sans-serif if none exists.
- Navigation links should be small and readable, around 15–16px on desktop, with regular weight and relaxed line height around 1.8–2.
- Bottom metadata should be slightly smaller, around 13–14px, with medium-low emphasis.
- Do not introduce large headings unless the product’s information architecture needs them; this pattern works best when the links remain visually quiet.

### Spacing
- Give the main link grid substantial top and bottom padding, approximately 72–120px depending on the surrounding page.
- Use roughly 16–20px vertical spacing between links.
- Keep 48–80px between adjacent columns on wide screens, while allowing the grid to compress naturally at tablet widths.
- Give the bottom row approximately 28–36px of vertical padding around the divider.

### Colour
- Use the product’s brand background where appropriate; otherwise start with a warm or neutral near-white such as `#FCFCFB` or `#FFFFFF`.
- Use a softened charcoal for links, approximately `#666666` to `#707070`, rather than pure black.
- Use an even lighter neutral for the divider, approximately `#EEEEEC` or `#E8E8E6`.
- Use slightly darker text for the bottom metadata only if needed for legibility, approximately `#5A5A5A`.
- Maintain accessible contrast for all interactive text, even though the visual treatment is subdued.

### Borders and radius
- Keep the divider hairline-thin: 1px, low contrast, and full width within the content container.
- Avoid cards, panels, heavy outlines, gradients, and decorative containers.
- Use no corner radius for the overall footer structure; this is an open, page-level section.

### Interaction
- Every footer link should have a clear hover and keyboard-focus state.
- On hover, shift the link colour toward the product’s primary text or accent colour; a subtle underline or small opacity/colour change is enough.
- Use a visible, accessible focus ring or underline that does not depend on colour alone.
- If the status text contains multiple items, separate them with a small centered dot or another restrained typographic separator.
- Ensure links have comfortable tap targets on touch devices and that the responsive layout never causes horizontal scrolling.

### Content structure
- Populate the columns with the user’s real navigation categories, product resources, comparison pages, support links, and legal links as appropriate.
- Keep labels short and scannable. Avoid adding unnecessary descriptions or promotional copy.
- Make the final row useful but unobtrusive: ownership/copyright on one side and a concise trust, platform, or legal detail on the other.

## Never
- Never use logos, product names, copy, illustrations, icons, imagery, or exact link labels from the reference.
- Never reproduce the reference footer’s exact column arrangement or content; adapt the structure to my product’s navigation needs.
- Never use dense spacing, oversized headings, loud colours, heavy shadows, gradients, or decorative artwork.
- Never sacrifice keyboard accessibility, readable contrast, or responsive behaviour for visual similarity.