## 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/mock-magic-video-presets/201a35ef-5103-4614-9439-92b73face5de-1789106562-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mock-magic-video-presets/201a35ef-5103-4614-9439-92b73face5de-1789106517952-full.webp
- Component on Kage: https://kage.design/component/mock-magic-video-presets-footer

## Before you start
Ask the user what their product is, who it serves, and what their brand personality and visual identity are. Then apply the principles below to create an original footer for that product rather than reproducing the reference.

## Build a dark, multi-column website footer
Create a full-width footer that closes a product or marketing page with a calm, premium, highly scannable navigation system. It should feel substantial without becoming visually loud, and it should work as a reusable responsive component.

### Layout and alignment
- Use a full-width dark footer surface with a thin top border separating it from the page above.
- Constrain the content to a centered max-width container, approximately 1200–1280px, with responsive horizontal padding of about 20–32px.
- On wide screens, use a five-column layout: a newsletter/signup column on the left and four link-group columns to its right. Give the signup column slightly more width than the link columns.
- Align every column to the same top edge. Keep the footer content visually open rather than boxing each group into cards.
- Place a low-contrast copyright/legal line along the bottom, separated from the main columns by substantial empty space. Align it with the main container.
- On tablet and mobile, collapse to two columns or a single column as appropriate. Preserve clear group spacing and keep the legal line at the end.
- Maintain a large vertical footprint on desktop, roughly 520–600px depending on content, but let the component size naturally based on the number of links.

### Typography hierarchy
- Use a clean sans-serif typeface with a modern, neutral feel.
- Make the brand or signup heading and navigation group headings semibold, around 18–20px, with a line height near 1.3.
- Use supporting signup text and navigation links at approximately 16px with a relaxed 1.8–2 line height.
- Make the copyright text smaller, around 14px, with reduced contrast.
- Use sentence case for labels and links. Keep headings short and make link groups easy to scan vertically.

### Colour and contrast
- Use an almost-black outer background, approximately `#050505`, and a subtly lighter charcoal footer surface, approximately `#171717` to `#1b1b1b`.
- Use a very low-contrast divider, approximately `#303030`.
- Use warm white for headings and primary controls, approximately `#f3f3f1`.
- Use muted gray for descriptions, links, and legal text, approximately `#a5a5a5` to `#b3b3b3`.
- Keep the footer monochrome unless the user's brand requires an accent colour. Any accent should be reserved for focus, hover, or validation states.
- Ensure text and controls meet accessible contrast requirements.

### Newsletter form
- Put a short invitation above the form, with enough distance from the heading to establish a clear hierarchy.
- Use a horizontal email input and submit button on desktop. Let them stack at narrow widths.
- Style the input as a dark gray filled field with a subtle border, approximately `#3a3a3a`, white or light-gray placeholder text, and a rounded radius around 7–9px.
- Make the submit button light or brand-coloured with dark, high-contrast text. Use a medium radius around 8–10px and enough horizontal padding to feel substantial.
- Include visible hover, focus, disabled, loading, and invalid-email states. Use a clear focus ring that is distinct from the dark background.
- Do not rely on placeholder text alone; include an accessible label, visually hidden if the design calls for a minimal form.

### Links and interaction
- Present links as simple text rows with consistent vertical spacing, around 8–12px between items.
- Keep link columns compact but readable; allow longer groups to extend naturally without forcing equal heights.
- Add a restrained hover treatment such as brighter text and a subtle underline or opacity transition. Avoid large animations or decorative effects.
- Use semantic navigation lists and meaningful accessible labels for each group.
- Preserve keyboard navigation with visible focus states on every link and form control.

### Borders, radius, and spacing
- Use a 1px top divider and minimal additional borders; this footer should not look like a collection of cards.
- Use 8–10px radius on inputs and buttons, with no radius or only a very small radius on the overall footer surface.
- Give the main footer content generous top and side padding, approximately 52–64px vertically on desktop.
- Leave a large intentional gap between the primary columns and the copyright row, approximately 120–180px where the content height allows.
- Use a consistent spacing scale based on 4 or 8px increments.

### Responsive behaviour
- At medium widths, reduce gaps and column widths before reducing type size.
- At mobile widths, stack the signup area first, then navigation groups in a clear sequence. Consider collapsible link groups only if the footer becomes excessively long; otherwise keep links visible.
- Make the form full width on small screens and ensure the button remains at least 44px tall for touch use.
- Prevent long link labels from overflowing or causing horizontal scrolling.

### Never
- Never copy the reference's logo, product name, navigation labels, link text, copyright wording, or newsletter copy.
- Never reuse the reference's exact content structure when the user's product needs different navigation groups.
- Never include illustrations, imagery, or decorative assets from the reference.
- Never make the footer a pixel-for-pixel reproduction.
- Never sacrifice accessibility, responsive behaviour, or the user's brand in pursuit of visual similarity.