## 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/wealthfolio/bf50ab71-633d-4b86-816e-5951eb096cd4-1789106474-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/wealthfolio/bf50ab71-633d-4b86-816e-5951eb096cd4-1789106444729-full.webp
- Component on Kage: https://kage.design/component/wealthfolio-footer

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

## Build this section
Create a full-width website footer with two related zones: a spacious upper conversion band and a structured lower information band. The footer should feel like the final, quiet chapter of an editorial landing page: useful, trustworthy, warm, and slightly literary.

### Layout and alignment
- Use a full-bleed warm off-white background, with a centered content container capped around 1240px and horizontal padding of 16–32px.
- Start with an upper CTA area that is centered and vertically generous. Include a compact headline, supporting sentence, primary dark pill button, secondary light pill button, and a small reassurance line below the buttons.
- Keep the CTA content narrow, approximately 560–680px, and stack it naturally on smaller screens.
- Separate the CTA area from the navigation footer with a subtle background shift or horizontal boundary.
- In the lower footer, use a responsive grid: a wider brand/about column on the left and three evenly sized navigation columns on the right. Align all column headings and links to the same top edge.
- Below the navigation grid, add a thin divider and a newsletter row. Place the update title and explanatory copy on the left, and an email input plus submit button on the right.
- Finish with another divider and a centered copyright/legal line. Collapse the grid to one column on mobile, keep link groups clearly separated, and make the newsletter form full-width.

### Typography hierarchy
- Use a distinctive serif or editorial display face for the main CTA headline and brand name; use the user's own display type if available.
- Set navigation headings in a heavier serif or semibold text, around 15–18px.
- Use a restrained monospace or humanist sans for supporting copy, navigation links, form text, metadata, and legal text, around 13–16px with generous line height.
- Make the CTA headline prominent but not oversized: approximately 36–48px desktop, 30–36px mobile, with tight line height and optional italic emphasis on a key phrase.
- Use sentence case for headings and links. Avoid excessive uppercase text except for an intentional small utility label.

### Colour
- Use a warm paper background near #F7F5F2 or #FAF8F5 for the primary footer surface.
- Use a slightly different warm neutral, near #FCFAF7, for the CTA band if a tonal division is desired.
- Use near-black charcoal #1D1D1B for primary text and dark buttons.
- Use muted grey-brown #77736D for descriptions, links, reassurance text, and legal metadata.
- Use a very light beige-grey border near #E5E1DB for dividers and input outlines.
- Derive hover and focus colours from the user's brand rather than adding decorative colour; maintain WCAG-readable contrast.

### Borders, controls, and radius
- Use thin 1px horizontal rules with low contrast to organize the footer without creating heavy boxes.
- Render primary and secondary actions as pill-shaped buttons with a radius of 999px, approximately 46–52px tall, and generous horizontal padding.
- Keep the primary button charcoal with light text; keep the secondary button close to the background with a faint border or shadow.
- Style the newsletter input as a long rounded field and place a compact dark pill submit button beside it. On mobile, stack them or let the button occupy a comfortable fixed-width row below.
- Social links may appear as small circular or softly rounded neutral buttons beneath the brand description. Use simple monochrome icons and visible hover/focus states.

### Interaction and accessibility
- Every navigation item, social icon, CTA, and form control must be a real interactive element with an appropriate accessible label.
- Add subtle transitions: dark buttons can slightly lighten, secondary buttons can gain a clearer border, links can shift colour or receive an underline, and social circles can lift by 1–2px.
- Provide a clear keyboard focus ring with sufficient contrast; never rely on hover alone.
- Validate email input, expose an inline success/error message, and keep the form usable without JavaScript where practical.
- Preserve generous whitespace and avoid animated distractions in this final page section.

### Responsive behaviour
- At tablet widths, reduce the number of columns only when necessary while preserving readable line lengths.
- At mobile widths, center the CTA, make the navigation columns single-column or two-column depending on available space, and keep the brand description at a comfortable measure.
- Ensure no button, input, or link becomes too small to tap, and prevent long legal or navigation labels from overflowing.

## Never
- Never copy the reference's logo, product name, navigation labels, marketing copy, copyright text, or exact wording.
- Never reuse its illustrations, imagery, icon artwork, or branded symbols.
- Never recreate the exact layout proportions or visual identity; translate the structural principles into the user's product and brand.
- Never use placeholder content that implies the reference product or company.
- Never sacrifice accessibility, responsive behaviour, or semantic HTML for visual similarity.