## 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/drizzle-team/742c665e-9ce1-4c98-831f-72085091350d-1789073810-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/drizzle-team/742c665e-9ce1-4c98-831f-72085091350d-1789073797-full.webp
- Component on Kage: https://kage.design/component/drizzle-team-footer

## Before you start
Ask what the user's product is, who it is for, and what brand, visual identity, and navigation destinations should be used. Then apply the principles below to create an original footer for that product rather than reproducing the reference.

## Build this section
Create a minimal website footer with a thin horizontal divider across the content width and a spacious, low-contrast layout beneath it. Use the footer as a calm closing navigation area: two compact link groups on the left and a single prominent-but-unobtrusive support or conversion link on the right.

### Design language

- **Layout:** Place the footer inside a centered max-width container, approximately 1160–1240px wide, with responsive horizontal padding of 24–60px. Add a 1px top border across the container. On desktop, use a three-column grid: the first two columns are narrow content groups aligned to the same top edge, while the final column is reserved for one featured action. Keep the first and second columns separated by a generous gap; let the right column sit toward the upper-right or begin at a consistent grid position rather than vertically centering it.
- **Responsive behavior:** At smaller widths, collapse the grid into a single vertical stack. Keep the featured action near the top or bottom based on its importance, and preserve clear separation between link groups without creating excessive height.
- **Typography:** Use a clean sans-serif system font or the product’s existing UI font. Section labels should be semibold, around 16px, with a line height near 24px. Links should be regular weight, around 16px, with a 24–28px line height. Use normal sentence case and avoid oversized footer headings.
- **Spacing:** Give the top border around 22–28px of breathing room before the first row. Use roughly 8–12px between a group heading and its first link, then 8–12px between links. Maintain 40–72px of horizontal space between columns and enough bottom padding—around 40–56px—for the footer to feel intentionally open.
- **Colour:** Use an off-white or white background such as `#ffffff` or `#fafafa`. Set primary text near `#303030` and secondary links near `#404040` or `#4a4a4a`. Use a subtle divider such as `#d5d5d5`. If the featured action has an icon or accent, use the product’s brand colour sparingly; do not introduce a large coloured button unless the product’s brand calls for it.
- **Borders and radius:** Keep the divider as a straight 1px rule with no rounded treatment. Avoid cards, shadows, filled panels, and decorative containers. If links receive a background or focus treatment, use a small 4–6px radius only for accessibility and interaction feedback.
- **Interaction:** Make every link a real, keyboard-accessible anchor. On hover, change the text colour, add a subtle underline, or both; do not use dramatic animation. Provide a clearly visible `:focus-visible` outline with sufficient contrast. The featured action may include a small inline icon or symbol, aligned with the text baseline, and should respond to hover without shifting layout.
- **Content structure:** Use meaningful, product-specific categories such as resources, products, company, community, legal, or support. Keep each group short—approximately 3–5 links—and make the featured action a single clear destination. Preserve consistent alignment and avoid adding social icon rows, newsletter forms, or extra promotional content unless the user’s product requires them.

## Never

- Never use logos, product names, exact copy, link labels, or brand-specific wording from the reference.
- Never copy the reference’s exact column proportions, spacing measurements, or visual arrangement verbatim; adapt the underlying hierarchy to the user’s product.
- Never use the reference’s illustrations, imagery, icons, or decorative assets.
- Never create inaccessible links, weak keyboard focus states, or hover-only navigation.
- Never turn this into a dense sitemap, a large CTA banner, or a visually heavy card-based footer.