## 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/replicate-com/18021eac-ea1d-469d-8210-9b10eacb77c7-1789073924-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/replicate-com/18021eac-ea1d-469d-8210-9b10eacb77c7-1789073887-full.webp
- Component on Kage: https://kage.design/component/replicate-footer

## Before you start
Ask the user what their product is, who it is for, and what visual identity or brand guidelines should guide the work. Then apply the principles below to their product rather than reproducing the reference literally.

## Build an editorial CTA and navigation footer
Create a full-width website footer for a modern software or technology product. Treat it as the closing section of a highly typographic page: the footer should feel calm and spacious, with a strong promotional statement above a compact navigation system.

### Structure and layout
- Use a white or near-white page background and a centered responsive container with generous horizontal gutters, approximately 64px on desktop and 24px on mobile.
- Above the footer navigation, include a large editorial CTA block. Use a short, confident headline with oversized lowercase or sentence-case typography, followed by a concise supporting paragraph and one solid primary button.
- Keep the CTA content aligned to the main container rather than centered in the viewport. Limit the paragraph width to roughly 380–460px so it reads as a compact invitation.
- Separate the CTA area from the navigation with three thin, full-bleed horizontal rules stacked with a small gap. Each rule should use a vivid left-to-right gradient, primarily magenta/pink with warmer yellow or orange appearing toward the far right. The rules should remain decorative and should not contain text.
- Below the rules, create a footer grid: reserve the left portion for a compact brand mark rendered as text or a simple neutral placeholder, and place three or four link groups to the right. On desktop, distribute the groups evenly across the remaining width; on mobile, stack them in a readable vertical rhythm.
- Include a very low-contrast bottom utility row separated by a thin light-gray border. It may contain small accessibility, display-mode, or preference controls aligned to the bottom-right, but keep these secondary to the navigation.

### Typography hierarchy
- Use a contemporary sans-serif with slightly geometric forms and strong weight contrast.
- Make the CTA headline visually dominant, around 64–112px on desktop with tight line-height between 0.85 and 0.98; scale it down fluidly to approximately 42–60px on mobile.
- Use 17–22px body text for the CTA with a comfortable 1.35–1.5 line-height.
- Use 16–18px semibold group headings and 15–17px regular link text. Keep link lists vertically spaced by about 12–16px.
- Avoid excessive uppercase labels; if used, reserve them for small utility text only.

### Spacing and alignment
- Give the CTA generous vertical breathing room, approximately 96–160px above and below depending on viewport height.
- Place the primary button 24–32px below the supporting paragraph.
- Use 56–88px of vertical space around the gradient divider and 72–112px between the divider and the navigation grid.
- Maintain consistent left edges between the CTA, gradient rules, and footer navigation container.
- On narrow screens, reduce spacing without making the footer feel cramped; preserve clear separation between link groups.

### Colour, borders, and surfaces
- Use an off-white background near #FFFFFF or #FCFCFB and near-black text around #161616.
- Use muted secondary text around #454545.
- Style the main CTA button with a black or near-black fill such as #111111, white text, a modest 2–4px radius, and compact padding around 14px 22px.
- Keep borders extremely subtle, around #E5E5E5 or #DADADA, generally 1px.
- Make each gradient rule approximately 14–18px tall with a narrow 8–12px gap. Use a custom gradient such as #D72BE8 → #F22FD2 → #FF3A82 → #FFD21A, adjusting the palette to suit the user’s brand.
- Do not add cards, shadows, or decorative backgrounds to the link columns; the open white space is part of the design.

### Interaction and accessibility
- Make every navigation item a real link with a clear hover and keyboard-focus state. A simple colour shift, underline, or slight opacity change is sufficient.
- Give the CTA button a restrained hover treatment such as a small brightness change or 1–2px upward movement.
- Ensure the gradient rules are decorative with `aria-hidden="true"` and do not interfere with contrast or keyboard navigation.
- Make the footer semantic with a `<footer>` element, navigation landmarks, visible focus rings, sufficient colour contrast, and touch targets of at least 44px on mobile.
- Collapse the footer grid cleanly at tablet/mobile widths without horizontal scrolling.

### Never
- Never copy the reference product’s logo, wordmark, product name, navigation labels, or exact marketing copy.
- Never reuse the reference page’s images, illustrations, media thumbnails, icons, or other imagery.
- Never reproduce the exact headline, link taxonomy, gradient dimensions, or pixel-level arrangement; invent content and adapt the system to the user’s product and brand.
- Never make the footer depend on the reference site or external assets to communicate its structure.