## 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/beehiiv-com/23eb8ac3-d7aa-449f-95ad-92bcd925810d-1789067456-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/beehiiv-com/23eb8ac3-d7aa-449f-95ad-92bcd925810d-1789067406-full.webp
- Component on Kage: https://kage.design/component/beehiiv-footer

## Before you start
Ask me what my product is, who it is for, and what its brand personality, typeface, and colour palette are. Then apply the principles below to create an original footer for that product—not a copy of the reference.

## Build a dark conversion footer
Create a full-width website footer with two clearly related zones: a prominent conversion band above and a structured navigation/legal footer below. The component should feel like the final, confident close of a modern SaaS or digital-product landing page.

### Layout and alignment
- Use a near-black navy background across the entire component, approximately `#050317` or a brand-adjusted equivalent.
- Keep the content inside a centered max-width container of roughly 1024–1180px, with generous horizontal padding that reduces smoothly on smaller screens.
- Start with a spacious conversion area. Center-align a short, uppercase, assertive headline and place one primary CTA directly beneath it.
- Give the CTA area substantial vertical breathing room: approximately 180–240px above the headline when following a preceding section, 24–32px between headline and button, and 90–120px below the button before the navigation area.
- Separate the conversion area and navigation area with a very subtle 1px rule, approximately `#17152b`.
- In the navigation area, use a responsive grid: a wider left column for an email/update invitation and consent note, and several narrower columns for grouped links. On desktop, align these columns to the top; on mobile, stack them with consistent gaps.
- Finish with another subtle divider and a bottom utility row containing legal links on the left and a small brand mark or abstract brand-shaped detail on the right. On mobile, allow the utility links to wrap and place the mark on its own line if needed.

### Typography hierarchy
- Use a bold display face or heavy sans-serif for the conversion headline. Set it in uppercase with tight tracking and a compact line height; target roughly 40–48px on desktop and 30–36px on mobile.
- Use a clear, semibold sans-serif for the CTA and navigation group headings, around 14–16px.
- Use muted regular text for navigation links, consent copy, and legal links, around 13–14px with comfortable line height.
- Keep the conversion headline visually dominant, but avoid oversized text that causes awkward wrapping on narrow screens.

### Colour
- Use warm white or very light grey for the headline and primary text, approximately `#F7F7FA`.
- Use a saturated blue-violet or another brand accent for the primary CTA, approximately `#3647C8`; choose a contrasting light label colour.
- Use muted lavender-grey for secondary links and legal copy, approximately `#9895A9`.
- Use slightly brighter muted text for navigation group labels, approximately `#E5E3EC`.
- Keep borders extremely low contrast so the dark surface remains the dominant visual field.

### Borders, radius, and controls
- Give the CTA a medium radius of approximately 6–8px, with horizontal padding around 24px and vertical padding around 13–15px.
- Avoid cards, shadows, gradients, or decorative containers unless they are essential to the user's brand.
- Use thin horizontal rules only between major footer zones, not around every link group.
- Make the footer links and CTA keyboard accessible with visible focus states that use the brand accent or a light outline.

### Interaction and responsive behaviour
- Make the CTA a real link or button with a clear primary destination.
- Add a restrained hover state: slightly brighten or deepen the accent colour and optionally lift the button by 1px; do not use an exaggerated animation.
- Give text links a subtle colour transition and underline or opacity change on hover.
- Preserve generous whitespace on desktop, but reduce the conversion band's vertical padding on mobile.
- Ensure grouped links remain readable and do not collide: stack columns or use a two-column mobile grid depending on content length.
- Keep the legal/consent copy legible at small sizes and make privacy-related terms individually clickable.
- If the user's product needs an email signup, include an accessible input and submit control in the left column; otherwise use a concise update invitation without inventing unnecessary functionality.

## Never
- Never use logos, product names, copy, illustrations, imagery, icons, or brand marks from the reference.
- Never reproduce the reference's exact wording, link taxonomy, typography, spacing measurements, or visual identity.
- Never assume the user's brand is dark navy and blue; adapt the structure and contrast principles to the user's product.
- Never hide legal links, consent language, focus states, or mobile navigation accessibly.