## 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/madebydaedalus-com/ae0cc407-2597-43fd-9c0f-0722227b2dcc-1789060550-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/madebydaedalus-com/ae0cc407-2597-43fd-9c0f-0722227b2dcc-1789060515-full.webp
- Component on Kage: https://kage.design/component/madebydaedalus-footer

## Before you start
Ask what the user's product is, who it serves, and what its brand personality, colour palette, and accessibility requirements are. Then apply the principles below to create an original footer for that product rather than reproducing the reference.

## Build a minimal, editorial footer
Create a shallow full-width footer designed to close a modern marketing page with calm confidence. The footer should feel like a final signature: useful, legible, and visually quiet.

### Layout and alignment
- Use a full-width footer with a subtle horizontal divider or top band separating it from the content above.
- On desktop, use a three-zone horizontal layout within a centered container: brand identity at the left, a concise positioning statement centered, and utility information at the right.
- Align all zones vertically to the same center line; keep the middle statement optically centered in the viewport rather than merely centered between the side zones.
- Use generous horizontal padding, approximately 48–64px on large screens, reducing to 20–24px on mobile.
- On smaller screens, allow the layout to wrap into a compact stack or two-row arrangement while preserving clear grouping and comfortable tap targets.
- Keep the footer relatively shallow: target approximately 72–96px on desktop, with height driven by content rather than forced cropping.

### Typography hierarchy
- Use the product's display or brand typeface for the brand name, at roughly 20–24px with medium or semibold weight.
- Set the central positioning line in a small, understated sans-serif style around 12–14px, with relaxed line height and muted contrast.
- Render utility links, accessibility controls, and legal metadata at approximately 11–13px. Keep them readable and never rely on extremely small text.
- Use sentence case, concise labels, and a clear weight distinction rather than excessive uppercase styling.

### Colour
- Use the product's brand colours sparingly. The surrounding footer should be near-white, such as `#FCFBFA` or a suitable brand-neutral equivalent.
- Use a very pale tinted top band or divider, such as lavender `#EEE7F7`, warm grey `#E9E7E4`, or a matching brand tint.
- Use near-black for the primary brand lockup, approximately `#171719`.
- Use a soft neutral grey for secondary copy and metadata, approximately `#6F6D70` or a palette-adjusted equivalent.
- If the brand has an emblem or small accent mark, use one compact multicolour or bright accent element beside the wordmark; keep it subordinate to the name and ensure sufficient contrast.

### Borders, radius, and visual detail
- Prefer a 1px top border or a slim tinted strip over a heavy card treatment.
- Avoid enclosing the entire footer in a card. It should merge naturally with the page background.
- If utility controls appear as pills or buttons, use a subtle 1px border around `#D8D5D2`, a radius of 999px, and horizontal padding of 10–12px; otherwise keep them as plain text links.
- Keep decorative details minimal: a tiny ellipsis, dot, or divider may introduce a utility item, but do not add visual clutter.
- Preserve ample empty space around the footer so it feels intentional rather than compressed.

### Interaction and accessibility
- Make all links and controls visibly interactive with hover, focus, and active states. Use a restrained colour shift or underline rather than dramatic animation.
- Provide a clear keyboard focus ring, such as a 2px ring in the product's accent colour with 2px offset.
- If including a reduced-motion control, make its state explicit with text and an accessible pressed or checked state; do not rely on an icon alone.
- Respect `prefers-reduced-motion`; avoid decorative movement in the footer and disable transitions when reduced motion is requested.
- Maintain WCAG-friendly contrast for all text, especially muted metadata, and ensure touch targets are at least 44px high on mobile.
- Add a responsive screen-reader-friendly structure with a footer landmark and meaningful link labels.

### Content structure
- Include an original product mark or wordmark treatment on the left, a short brand-specific statement in the center, and only the essential utility/legal items on the right.
- Use the product's own terminology and voice; do not fill the layout with generic navigation.
- Keep the number of right-side items low so the footer remains airy and balanced.

## Never
- Never copy the reference site's logo, product name, wording, or exact brand mark.
- Never reuse the reference copy, including its central tagline, accessibility label, or copyright text.
- Never include the reference's illustrations, imagery, icon artwork, or distinctive multicolour symbol.
- Never make the footer a pixel-for-pixel recreation or preserve its exact measurements and spacing.
- Never use illegibly small text, low-contrast metadata, inaccessible icon-only controls, or motion that ignores reduced-motion preferences.