## 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/ai-observability-by-openobserve/e945d001-9c66-4981-a493-d9cb08ea77ee-1789106508-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ai-observability-by-openobserve/e945d001-9c66-4981-a493-d9cb08ea77ee-1789106452566-full.webp
- Component on Kage: https://kage.design/component/ai-observability-by-openobserve-pricing-table

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

## Build this section
Create a responsive website footer that combines multi-column navigation, a prominent newsletter signup card, trust signals, and a bottom announcement bar. Treat it as a complete closing section for a B2B software website, but adapt the content, number of links, and conversion goal to the user's product.

## Design language

### Layout and alignment
- Use a full-width, very dark footer background with a subtle warm or cool gradient toward the lower edge; approximate colours: `#0D0B12`, `#120D1A`, and a faint accent glow around `#3A1D2C`.
- Contain the footer in a centered max-width wrapper of roughly `1200–1280px`, with generous horizontal padding of `16–32px`.
- On desktop, arrange four or five navigation columns on the left and a distinct signup card on the right. Keep all columns top-aligned and use consistent column widths.
- Place the signup card in its own visual panel, approximately `300px` wide, with enough internal padding to feel separate from the link lists.
- Below the main footer content, align trust or certification badges toward the right, then place a full-width announcement strip at the very bottom of the container.
- On tablet and mobile, collapse the navigation into fewer columns or accordion groups, move the signup card above or below the links, and let the announcement bar stack its content and action button.

### Typography hierarchy
- Use a clean modern sans-serif with a slightly heavier display weight for headings.
- Navigation group headings should be around `18–22px`, semibold, in near-white `#F5F3F7`.
- Navigation links should be around `14–16px`, regular weight, with muted white `#E5E1E8`; use a comfortable line height of about `1.55`.
- The signup card heading should be noticeably larger and bolder, around `20–24px`, centered.
- Supporting card text should be `14–16px`, centered, and muted in `#6E6875`.
- The announcement strip should use compact `14–16px` text with a clear event label and readable metadata.

### Spacing
- Give the main footer `56–80px` of top padding and `28–40px` of bottom padding before the announcement strip.
- Use `24–36px` vertical gaps between navigation links and `20–28px` gaps between columns.
- Give the signup card `28–34px` of internal padding.
- Keep the trust-badge row visually separated from the navigation with approximately `48–72px` of space.
- Use `8–12px` gaps between form controls and `16–20px` between the form and the legal disclaimer.

### Signup card and controls
- Use a light card background around `#FAFAFB` or `#FFFFFF` against the dark footer.
- Give the card a medium radius of `16–18px`; avoid excessive shadows, using only a subtle shadow such as `0 8px 30px rgba(0,0,0,.16)` if needed.
- The email input should be white with a thin neutral border around `#D9D6DE`, approximately `48–52px` high, rounded `8px`, and include a simple mail icon.
- Use a saturated purple or brand accent for the subscribe button, approximately `#6941E8` to `#5421C7`, with white text, the same height as the input, and a modest `8px` radius.
- Include a small privacy or consent note below the form, centered and low-contrast but still accessible.

### Borders, badges, and announcement strip
- Use thin, low-contrast borders around secondary surfaces, approximately `rgba(255,255,255,.18)` on dark areas and `#E3E0E6` on light areas.
- Trust signals should be compact and monochrome or softly coloured; use generic certification, security, community, or customer-proof badges relevant to the user's product.
- Build the announcement strip as a rounded rectangular row with a translucent dark background, a `1px` border, and radius around `8px`.
- Include a small status or event icon, concise announcement text, optional date/time metadata, and a high-contrast action button aligned to the far right.
- Make the announcement action button light or white with dark text and a simple arrow; provide hover states that slightly increase contrast or translate the arrow by a few pixels.

### Interaction and accessibility
- Links should transition smoothly to a brighter colour such as `#FFFFFF` on hover and show a visible keyboard focus ring.
- The signup form needs a labelled email field, validation feedback, disabled/loading state, and a clear success state.
- Make the entire footer keyboard navigable and preserve visible focus indicators with at least `2px` contrast-aware outlines.
- Maintain WCAG-friendly contrast, meaningful link labels, semantic footer/navigation landmarks, and responsive tap targets of at least `44px`.
- If navigation groups collapse on mobile, use accessible buttons with `aria-expanded` and animate the panel subtly rather than hiding content without explanation.

## Never
- Never copy logos, product names, navigation labels, newsletter copy, event details, certification marks, icons, or exact wording from the reference.
- Never reproduce the reference site's specific brand colours as a requirement; tune the palette to the user's brand while preserving the contrast strategy.
- Never use illustrations or imagery from the reference.
- Never make the footer a pixel-for-pixel clone; preserve only the underlying layout, hierarchy, and interaction principles.
- Never sacrifice readability or accessibility for visual density.