## 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/workid-ai/2843b616-ed30-482d-adaf-40c736e4842a-1789106674-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/workid-ai/2843b616-ed30-482d-adaf-40c736e4842a-1789106613949-full.webp
- Component on Kage: https://kage.design/component/workid-footer

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

## Design the footer
Build a calm, credible website footer for a professional software or service product. Treat it as the final reassurance point on the page: make support easy to find, navigation scannable, and legal information clearly separated without making the section feel dense.

### Layout and alignment
- Use a full-width footer with a centered content container, approximately 1150–1200px wide, with responsive horizontal padding of 24–64px.
- Organize the main footer row into two zones: a brand/support area on the left and grouped navigation columns on the right.
- Align the brand mark and wordmark on one horizontal line near the top of the footer.
- Place a short positioning or trust statement opposite the brand on desktop, right-aligned; let it stack beneath or below the brand area on small screens.
- Below that, create a generous two-column region: contact and social actions on the left, navigation groups on the right. Use CSS grid or flexbox with clear column gaps rather than rigid absolute positioning.
- Add a full-width divider before the bottom disclaimer. Center the disclaimer text within a readable max-width, and allow it to wrap naturally.
- On mobile, collapse navigation into a simple stacked arrangement or a two-column grid, keep all links left-aligned, and preserve generous vertical rhythm.

### Typography hierarchy
- Use a modern sans-serif system font or a similarly neutral grotesk.
- Brand name: bold, approximately 18–20px.
- Trust statement: regular, approximately 15–16px, with a relaxed line-height and muted colour.
- Navigation group headings: semibold, approximately 15–16px.
- Navigation links: 14–15px with comfortable 1.8–2.2 line-height.
- Disclaimer: 12–13px, muted, with approximately 1.35–1.5 line-height.
- Keep the hierarchy understated: headings should be clear through weight and spacing, not oversized display type.

### Spacing
- Use approximately 32–40px top padding for the brand row.
- Leave 32–48px between the brand row and the main contact/navigation row.
- Give navigation groups 28–48px of horizontal separation and 14–20px vertical separation between links.
- Size contact controls around 42–48px tall, with 12–16px horizontal padding.
- Use approximately 30–40px of padding above and below the divider and disclaimer area.
- Ensure the footer has enough empty space to feel deliberate, but avoid oversized unused regions on mobile.

### Colour and surfaces
- Use a near-white background around #FFFFFF or #FCFCFB.
- Use deep charcoal for primary text around #161A1D or #1D2227.
- Use muted gray for secondary copy and links around #62676B or #707477.
- Use a very light neutral border around #E4E5E6 or #E9EAEB.
- If the product has an accent colour, use it sparingly for the brand mark, icons, focus states, or subtle action emphasis; an approximate vivid blue such as #3B82E8 can work, but adapt it to the user's brand.
- Keep the contact button and social control on a soft neutral surface, such as #FAFAFA, with a subtle border rather than a heavy shadow.

### Borders, radius, and controls
- Use 1px horizontal dividers with low contrast.
- Give contact and social controls a restrained 10–14px radius; use a pill or softly rounded rectangle for the primary support/contact action.
- Keep shadows minimal or absent. The footer should feel flat, editorial, and trustworthy.
- Include clear hover and keyboard-focus states: links may shift to the accent colour or darker text, while controls may receive a slightly stronger border and a subtle background change.
- Make every contact, social, navigation, and legal item an accessible link with visible focus treatment and descriptive accessible labels.

### Interaction and responsive behaviour
- Support/contact action should look actionable and may include a small directional or envelope icon, but icons must support the label rather than replace it.
- Social links can be compact square or softly rounded controls with recognizable symbols and accessible labels.
- Keep link hit areas comfortable, especially on touch devices.
- At narrow widths, stack the brand/trust area, contact area, and navigation groups; avoid horizontal overflow.
- Respect reduced-motion preferences and keep transitions short and subtle.

## Never
- Never reuse the reference's logos, product name, brand mark, exact copy, navigation labels, or contact details.
- Never copy the reference's illustrations, imagery, icons, or distinctive graphics; use generic UI icons only when necessary and choose an original treatment.
- Never assume the user's brand is blue, monochrome, or identity-verification related—derive colour and content from the user's product.
- Never use dense columns, tiny unreadable legal text, low-contrast links, or decorative elements that weaken accessibility and trust.