## 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/hob/bb3af585-7542-45f5-8db1-3e25168b9aff-1789106505-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hob/bb3af585-7542-45f5-8db1-3e25168b9aff-1789106472876-full.webp
- Component on Kage: https://kage.design/component/hob-cta

## Before you start
Ask what the user's product is, who it serves, and what brand personality, colour palette, and navigation structure it uses. Then apply the principles below to create an original version for that product—not a visual copy of the reference.

## Design the section
Build a minimal website footer that pairs a compact promotional CTA line with a navigation area.

### Layout and alignment
- Use a full-width, very light footer surface with a thin horizontal divider near the top.
- Place the CTA as a single short sentence centered horizontally above the divider or within a slim announcement band. Keep it visually quiet and avoid turning it into a large hero-style block.
- Below the divider, create a wide, centered content container with generous left and right gutters. Use four navigation columns on desktop, distributed evenly across the available width.
- Align every column to the same top baseline. Each column should contain a small category heading followed by a short vertical list of links.
- Keep the footer tall and airy: leave substantial space between the divider, the link groups, and any lower footer content. On smaller screens, collapse to one or two columns while preserving comfortable vertical rhythm.
- Ensure the layout is responsive, semantic, keyboard accessible, and does not rely on absolute positioning.

### Typography hierarchy
- Use a neutral modern sans-serif or the product’s existing typeface.
- Render the promotional line in a small, medium-weight style, approximately 13–14px, with a calm dark-grey colour.
- Render column headings at approximately 13–14px, medium weight, with stronger contrast than the links.
- Render links at approximately 13–14px, regular weight, with muted contrast and generous line height around 2.2–2.5.
- Keep text case natural and understated; do not use oversized display typography in this section.

### Spacing
- Use approximately 28–40px of vertical padding for the announcement band.
- Give the navigation area approximately 64–76px of top padding and 80–120px of bottom padding, depending on the surrounding page.
- Use 24–32px between each column heading and its first link, and 12–18px between individual links.
- Maintain a desktop container width around 1120–1280px, with responsive gutters of 24px or more.

### Colour
- Use a near-white background, approximately #FCFCFB or #FFFFFF.
- Use a very faint divider, approximately #EEEEEC or #E8E8E6.
- Use dark muted text for headings and the CTA, approximately #5F6062.
- Use softer grey for links, approximately #A2A3A5.
- Adapt these values to the user’s brand system while preserving a low-contrast, editorial feel.

### Borders and radius
- Use a 1px solid divider with no decorative border treatment elsewhere.
- Keep the footer’s corners square or use a very subtle radius only if it matches the product’s broader UI language.
- Avoid cards, shadows, gradients, and heavy visual framing.

### Interaction
- Make every link visibly interactive on hover and keyboard focus: increase contrast, add a subtle underline or colour transition, and provide a clear `:focus-visible` outline.
- Keep transitions short and restrained, around 150–200ms.
- If the promotional CTA is clickable, make the entire sentence or its action affordance accessible without making the interaction ambiguous.
- Preserve readable contrast and touch targets on mobile.

### Content structure
- Use product-relevant CTA copy and four useful navigation groups, such as product, resources, company, and contact/community, but rename and reorder them to fit the user’s product.
- Keep each group concise so the footer remains visually light.

## Never
- Never use the reference product’s logo, product name, navigation labels, or exact promotional copy.
- Never copy the reference layout’s content verbatim.
- Never include illustrations, screenshots, or imagery from the reference.
- Never use oversized branding, loud gradients, heavy shadows, or dense navigation that conflicts with the quiet footer treatment.
- Never make assumptions about the user’s brand; ask first and adapt the colours, type, copy, and link groups accordingly.