## 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/bun-sh/5fab2b15-2f70-4d99-a79d-411d5e236c09-1789073826-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/bun-sh/5fab2b15-2f70-4d99-a79d-411d5e236c09-1789073774-full.webp
- Component on Kage: https://kage.design/component/bun-table

## Before you start
Ask the user what their product is, who it serves, and what their brand language, colors, and navigation structure are. Then apply the principles below to create an original footer for that product—not a copy of the reference.

## Design language

Build a clean, minimal website footer with a warm off-white background and a wide, centered content container.

### Layout and alignment
- Use a full-width footer with a maximum content width of approximately 1140–1180px and 24–40px horizontal padding.
- On large screens, arrange the upper footer in a four-column grid: a wider brand/about column on the left, followed by three similarly sized navigation columns.
- Align every column to the same top edge. Keep the brand block slightly wider so its description can remain readable.
- Place a thin divider near the bottom, then a compact copyright or attribution row beneath it.
- On smaller screens, collapse into a single column or a two-column navigation grid. Preserve clear grouping and comfortable vertical spacing rather than forcing a dense desktop layout.

### Typography hierarchy
- Use a bold, dark wordmark-style text treatment for the product name, approximately 24–28px, with tight line-height.
- Set navigation group labels in small uppercase or letter-spaced text, approximately 11–12px, using medium contrast.
- Set navigation links and the short brand description at approximately 15–16px with 1.6 line-height.
- Use a smaller muted style, approximately 13–14px, for the bottom legal line.
- Choose a modern sans-serif with a slightly editorial feel; use weight and spacing rather than excessive font-size contrast.

### Spacing
- Give the footer generous top and bottom padding, approximately 56–72px on desktop.
- Keep 20–28px between a navigation heading and its links.
- Stack links with approximately 12–16px vertical separation.
- Give the brand description 18–24px of space below the product name and social or utility links 24–32px below the description.
- Keep the divider and legal row visually separate from the navigation area with approximately 48–64px of space.

### Colour
- Use a warm near-white background around `#F7F7F7` or `#FAFAFA`.
- Use a near-black for the product name and primary text around `#111111`.
- Use a softened charcoal gray for descriptions and links around `#5F5F5F`.
- Use a very light gray divider around `#DDDDDD`.
- If the product has an accent color, reserve it for a tiny mark, icon, hover state, or inline emphasis; do not let it overpower the footer.

### Borders, radius, and icons
- Keep the footer mostly flat and rectangular; avoid cards and heavy containers.
- Use a 1px divider with no radius near the bottom.
- If a brand avatar or small product mark is needed, use a simple circular treatment of approximately 28–36px, but create an original mark or use text only.
- Social and utility icons should be small, monochrome, and optically aligned in a horizontal row. Use accessible labels and recognizable icon shapes.

### Interaction
- Make all links keyboard accessible with visible focus states.
- On hover, shift links from muted gray to near-black and optionally add a subtle underline or accent-color transition.
- Keep hover effects quick and restrained, around 150–200ms.
- If navigation groups collapse on mobile, use an accessible disclosure pattern with clear open/closed states; otherwise keep the links visible in a simple stacked layout.

### Content structure
- Include a concise product identity block with a short one- or two-sentence description.
- Include three or four groups of links, each with a clear category heading and a short list of destinations relevant to the user’s product.
- Finish with a thin divider and a low-emphasis legal, copyright, or status line.

## Never
- Never copy logos, product names, or brand marks from the reference.
- Never reuse the reference’s exact navigation labels, description, copyright text, or other copy.
- Never use the reference’s illustrations, mascot, imagery, or social icon arrangement.
- Never reproduce the exact layout proportions or visual styling; adapt the principles to the user’s product and brand.
- Never sacrifice contrast, keyboard access, or mobile usability for visual similarity.