## 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/together-ai/60591018-8706-471e-a3f2-ad3109f52987-1789073941-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/together-ai/60591018-8706-471e-a3f2-ad3109f52987-1789073908-full.webp
- Component on Kage: https://kage.design/component/together-footer

# Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, and voice they want. Then apply the principles below to create an original footer for that product—not a copy of the reference.

## Design goal
Build a premium, spacious SaaS or developer-product footer that feels like the final calm surface of the page. Organise a large set of destinations into scan-friendly columns, then finish with a compact legal/social bar and a subtle oversized brand treatment in the background.

## Layout and alignment
- Use a full-width outer section with generous horizontal padding, approximately `56px` on desktop and `24px` on mobile.
- Place the footer inside a large rounded container, around `24px` radius, with a minimum height of roughly `520px` on desktop. Let the container sit above a soft, blurred ambient gradient that slightly extends beyond its edges.
- Keep the main navigation in a centered max-width region, approximately `760–860px` wide. Begin the link grid near the top with four evenly spaced columns; allow the first columns to contain product or capability links, a later column to contain resources, and the final column to contain company links. Use the user’s actual information architecture rather than these labels.
- Align all link text to the left and keep column starts consistent. On smaller screens, collapse to one or two columns with clear vertical spacing rather than forcing a dense desktop grid.
- Anchor the lower utility row close to the bottom of the container. Put copyright or ownership information on the left, policy links in the centre, and social icons on the right on desktop. Stack or wrap these groups cleanly on mobile.
- Add a very large, low-contrast brand-name treatment behind or above the utility row. It should be cropped by the container and act as atmosphere, not as a primary navigation element. Use the user’s product name or a typographic brand expression only after confirming it with the user.

## Typography hierarchy
- Use a modern sans-serif with a warm, human feel; use a monospace or compact uppercase style only for tiny category labels.
- Navigation links should be approximately `14–16px`, regular weight, with comfortable `8–10px` vertical gaps.
- Category labels, if present, should be `10–11px`, uppercase, slightly tracked, and visually quieter than links.
- Legal and policy links should be `11–13px` and muted.
- The oversized background brand treatment can be approximately `170–190px` on desktop, with a very light weight and low opacity; scale it responsively on mobile so it never causes horizontal overflow.

## Colour and atmosphere
- Use an almost-white footer surface such as `#F8FAFC` or a brand-appropriate equivalent.
- Create the surrounding glow with heavily blurred, low-opacity pastel fields: warm coral or blush around `#F4A6A0`, pale blue around `#B8D5EA`, and a small warm accent around `#F97316` if it fits the brand. Keep the effect subtle and avoid a visible hard gradient boundary.
- Use near-black text such as `#111318` for primary links, `#5F6670` for secondary/legal text, and a very pale grey such as `#DDE1E5` for the oversized background type.
- If the product has a strong brand colour, use it sparingly for hover states or one small accent rather than colouring the whole footer.

## Borders, radius, and depth
- Use a `1px` border in a very light neutral such as `#E7EAEE`, optionally with low opacity.
- Keep the main container around `24px` radius; use smaller radii only for any visible controls.
- Avoid heavy shadows. If separation is needed, use a diffuse shadow such as `0 12px 40px rgba(20, 30, 45, 0.06)`.
- Clip the oversized typography and ambient effects within the rounded footer so the composition remains polished.

## Interaction and accessibility
- Make every navigation, policy, and social item a real keyboard-focusable link.
- On hover, shift link colour slightly darker or add a restrained underline/opacity transition; use a quick `150–200ms` ease-out transition.
- Provide visible `:focus-visible` treatment using a 2px brand-colour outline with a small offset.
- Use accessible labels for icon-only social links and ensure muted text still meets contrast requirements.
- Keep the footer responsive, with no clipped links, accidental horizontal scrolling, or text placed solely in the decorative background layer.

## Content guidance
- Derive link groups from the user’s product, audience, and actual routes. Keep labels short and parallel in grammar.
- Prefer a few useful columns over an exhaustive sitemap. If a group is especially important, give it a small category label and enough breathing room.
- Keep legal information compact and separate from primary navigation.

## Never
- Never copy the reference’s logos, product names, exact navigation labels, legal copy, social icons arrangement, or distinctive wording.
- Never reuse the reference image, illustrations, imagery, or oversized wordmark treatment as an exact graphic.
- Never make the decorative brand text the only representation of the product name or use it as a substitute for accessible content.
- Never use a dense mega-menu, harsh gradients, oversized shadows, or tiny unreadable legal text.
- Never assume the user’s brand colours, routes, audience, or tone; ask first and adapt the system accordingly.