## 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/cal-com/cdeba7c5-dd46-4ce9-ba9c-2d344d57a58b-1789060425-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cal-com/cdeba7c5-dd46-4ce9-ba9c-2d344d57a58b-1789060392-full.webp
- Component on Kage: https://kage.design/component/cal-footer

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

## Build this section
Create a large, practical website footer that feels trustworthy, operational, and calm. It should support both reassurance and discovery: establish the company identity and credibility on the left, provide useful product utilities, then transition into grouped navigation links.

### Layout and alignment
- Use a very light warm-gray or off-white footer background, approximately `#f7f7f6`, separated from the content above by a subtle horizontal rule around `#dededb`.
- Center the footer contents inside a wide responsive container, but intentionally anchor the primary company-information block to the left rather than centering everything.
- On large screens, use a generous multi-column grid: a broad left column for identity, legal text, trust indicators, mission, controls, downloads, reviews, and support; navigation columns begin lower down or alongside it, depending on content length.
- Preserve substantial empty space on the right when the left rail is the dominant content area. The asymmetry should feel editorial and deliberate, not broken.
- On smaller screens, collapse navigation groups into a single-column or accordion layout while keeping the identity and utility content easy to scan.
- Keep consistent left edges within each content group. Do not use card-heavy layouts; this is a structured information surface.

### Content hierarchy
- Start with a prominent wordmark-style text treatment for the company name, but use the user's own product identity and do not reproduce any reference branding.
- Follow it with compact trademark or legal ownership text in a smaller, readable size.
- Place a row of trust, compliance, security, or certification badges beneath the legal text. Use neutral badge placeholders or text-based marks where real assets are unavailable.
- Add a concise mission statement below the trust row. Give it enough width to read as a short paragraph rather than a slogan.
- Include practical controls such as language selection and service-status visibility. Status should be visually clear but understated, using a small colored indicator and concise operational wording.
- Add a “Downloads” or equivalent utility heading followed by compact pill-like link buttons for relevant apps, browsers, platforms, or resources. Let buttons wrap naturally across rows.
- Include review or recognition links as optional promotional proof points, visually separated from the utility controls and never more prominent than the product navigation.
- Add a support sentence with one or two inline links before the main navigation groups.
- Use clear navigation group headings such as product areas, solutions, resources, company, or use cases, with short links beneath each.

### Typography
- Use a modern sans-serif with a slightly strong, friendly presence. Use the user's brand font if available; otherwise choose a clean system or geometric sans-serif.
- Make the identity line approximately `28–32px`, weight `650–750`, with tight line-height.
- Use navigation headings around `15–17px`, weight `650–700`.
- Use body copy and links around `14–16px`, with `1.45–1.6` line-height for legal and mission text.
- Keep legal copy visibly secondary, around `12–14px`, but maintain accessible contrast.
- Use normal sentence case for links and labels. Avoid excessive all-caps text.

### Spacing and rhythm
- Give the footer generous top and side padding: approximately `56–80px` vertically and `16–32px` on small screens, expanding to a wide container on desktop.
- Separate identity, trust marks, mission, controls, downloads, reviews, support, and navigation with clear vertical intervals of roughly `20–36px`.
- Use compact gaps within related groups: `8–12px` between inline controls, `10–16px` between download buttons, and `8–14px` between navigation links.
- Allow rows of buttons and badges to wrap without compressing their labels.
- Keep the bottom navigation area visually lighter than the company-information rail by using space and typography rather than heavy containers.

### Colour, borders, and surfaces
- Use near-black text around `#202124` or the equivalent brand foreground, with muted copy around `#565656`.
- Use a soft footer surface around `#f6f6f5` to `#fafafa`; avoid stark pure white unless it fits the user's brand.
- Use thin borders around `#d5d5d2` for language selectors, status controls, and download buttons.
- Give controls modest rounded corners, approximately `6–9px`; avoid highly rounded capsules except for small status indicators.
- Use a restrained accent colour for links, focus states, and operational status. A green status dot may use approximately `#16a36b`, but adapt it to the product's semantic colour system.
- Trust marks should be monochrome or low-saturation so they communicate credibility without competing with navigation.

### Interaction and accessibility
- Make every badge, control, download button, review panel, support link, and navigation link keyboard accessible.
- Add visible hover and focus states: slightly darker border, subtle background shift, and an accessible focus ring.
- Language controls should open a clear menu; status controls may link to a detailed status page.
- Download buttons should include recognizable platform labels and optional icons, but icons must not be the sole source of meaning.
- On mobile, make navigation groups easy to expand and collapse, with clear disclosure indicators and preserved keyboard semantics.
- Maintain WCAG-compliant contrast and a minimum comfortable touch target of about `44px` for interactive controls.

### Responsive behaviour
- At desktop widths, use a wide grid with the information rail occupying roughly one-third to two-fifths of the content width and navigation occupying the remaining space.
- At tablet widths, reduce column count and allow navigation groups to form two columns.
- At mobile widths, stack all groups, keep controls full-width or naturally wrapping, and avoid excessive horizontal scrolling.
- Ensure long legal text, mission copy, and link labels wrap gracefully without causing layout overflow.

## Never
- Never copy the reference's logos, product name, trademark text, mission statement, navigation labels, review badges, certification artwork, or exact copy.
- Never use the reference brand's logo or recreate its distinctive marks.
- Never import the reference's illustrations, imagery, app-store graphics, browser icons, or badge artwork; use original assets, neutral placeholders, or the user's own brand assets.
- Never reproduce the exact footer dimensions, link taxonomy, spacing measurements, or visual arrangement if doing so would make the result a clone.
- Never make trust badges, promotional reviews, or status indicators look more important than the product's primary navigation and support paths.