## 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/ramp-com/ad2900d9-6fba-4f32-a572-3ba7a6ce9831-1789060917-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ramp-com/ad2900d9-6fba-4f32-a572-3ba7a6ce9831-1789060875-full.webp
- Component on Kage: https://kage.design/component/ramp-footer

## Before you start
Ask what the user's product is, who it serves, and what its brand personality, visual identity, and compliance requirements are. Then apply the principles below to create an original footer for that product—not a literal reproduction of the reference.

## Build this section
Create a full-width, dark corporate website footer with three functional layers: a multi-column navigation area, a lower utility/legal area, and a compact email signup CTA. The footer should feel information-rich, credible, and deliberately quiet rather than promotional.

### Layout and alignment
- Use a near-black charcoal background, approximately `#191919` or `#1B1B1B`, with a centered content container around `1180–1280px` wide.
- At desktop widths, arrange the primary navigation into six evenly distributed columns. Keep each column top-aligned, with a short primary link group on the left and denser product/resource groups to the right.
- Use generous horizontal gutters between columns and enough vertical space below the navigation to prevent the footer from feeling cramped.
- Separate the navigation from the legal area with a thin, full-width rule in muted gray, approximately `#777777` at low opacity.
- Below the rule, use a three-part desktop layout: long legal and regulatory copy on the left, company address details in the center, and app/social utility links on the right. Let the legal column be substantially wider than the other two.
- Place the signup CTA beneath the legal copy in the left column. On smaller screens, stack all regions into one column and preserve clear section spacing.
- Use responsive behavior that collapses navigation columns into a two-column or accordion-like layout on mobile, depending on the product's content volume. Avoid horizontal scrolling.

### Typography hierarchy
- Use a clean sans-serif system or brand font with a compact, highly legible appearance.
- Navigation links should be small, around `14–15px`, with approximately `1.45` line-height.
- Use brighter text for high-priority links, approximately `#F2F2F2`, and softer gray for secondary links, approximately `#A0A0A0`.
- Legal copy should be smaller, around `12–13px`, with a generous `1.45–1.55` line-height so dense disclosures remain readable.
- Keep headings visually subtle rather than oversized: use medium weight and the same general scale as the links, or a modestly larger `15–16px` size.
- Make legal and social utility links visibly underlined or otherwise clearly identifiable as links.
- Use bold emphasis sparingly for the key signup proof point and the product's primary CTA.

### Colour, borders, and surfaces
- Keep the palette monochrome and low contrast overall: background around `#191919`, primary text around `#F0F0F0`, secondary text around `#A4A4A4`, and rules around `#6F6F6F` with reduced opacity.
- If the brand has an accent colour, reserve it for the signup button or a small status/control element rather than colouring the whole footer.
- Use subtle borders around the email signup field, approximately `#666666`, with a slightly lighter hover/focus state.
- Give the signup control a medium radius, around `10–12px`; the input and button may be joined into one pill-like horizontal control on desktop and stacked on mobile.
- Keep badges, app-store controls, and social links compact and aligned to the right-side utility area. Use neutral placeholders or the user's own assets, not reference-brand assets.

### Interaction and accessibility
- Add clear hover and focus states: navigation links can shift from gray to near-white, while underlines or opacity changes should make the state obvious.
- Ensure keyboard focus is visible against the dark background with a bright outline or ring.
- Make the email field and CTA large enough to use comfortably, with a clear label or accessible placeholder and a useful validation/error state.
- Preserve readable contrast for small legal text and never rely on gray text alone for essential information.
- If navigation groups collapse on mobile, make their controls keyboard-accessible and expose expanded/collapsed state.
- Keep the footer visually stable while loading; avoid distracting animations.

### Content structure
- Replace all reference-specific categories with navigation groups relevant to the user's product: company, product, platform, customers, resources, partners, support, or similar.
- Include only the legal and regulatory disclosures appropriate to the user's business and regions. Structure them as paragraphs with links to full policies rather than inserting arbitrary filler.
- Include a small trust or social-proof sentence above the signup form only if the user's product has a credible claim to support it.
- Keep the final CTA direct and action-oriented, but use the user's own conversion goal and tone.

## Never
- Never copy the reference site's logos, product names, company names, navigation labels, legal wording, address, app-store badges, social handles, or CTA copy.
- Never reuse the reference's exact content, brand-specific accent treatment, or distinctive assets.
- Never add unrelated illustrations, decorative imagery, or stock photography.
- Never make the footer a pixel-for-pixel clone; preserve the information architecture and design principles while adapting the layout, content, and visual language to the user's product.