## 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/convex-dev/1b90134a-1727-4d68-9c37-d8b1750ddf17-1789074852-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/convex-dev/1b90134a-1727-4d68-9c37-d8b1750ddf17-1789074817179-full.webp
- Component on Kage: https://kage.design/component/convex-banner

## Before you start
Ask the user what their product does, who it is for, and what brand personality, colour palette, and voice it uses. Then apply the principles below to create an original enterprise announcement banner for that product—not a copy of the reference.

## Build this section
Create a full-width enterprise-readiness banner that sits between major page sections. The component should feel compact, polished, and trustworthy, with a centered content group rather than a conventional left-aligned hero.

### Layout and alignment
- Use a full-width horizontal section with a warm, dark red-brown background, approximately `#7A302B` or a brand-appropriate equivalent.
- Give the section generous but controlled vertical padding: roughly `40–56px` on desktop and `28–36px` on mobile.
- Center all content on the horizontal axis.
- Stack a small outlined status badge above a single horizontal announcement/CTA row, leaving approximately `28–34px` between them.
- Keep the announcement row compact and content-sized on desktop, with a maximum width around `690px`.
- On narrow screens, allow the row to wrap or become a vertical stack while preserving clear separation between the informational portion and the CTA.
- Include a very subtle dark top or bottom edge if it helps the banner transition into adjacent sections, but do not add unnecessary decoration.

### Content structure
- The upper badge is a short, uppercase enterprise-readiness label.
- The main row has two contrasting segments:
  - A light cream information segment containing several short, uppercase trust or compliance capabilities separated by centered dots. Include one small contrasting “coming soon” or status chip within this segment.
  - A dark charcoal CTA segment with a concise enterprise-oriented label and a simple right-pointing arrow.
- Use product-specific copy supplied by the user. Keep every phrase brief enough to preserve the banner’s highly compressed rhythm.

### Typography
- Use a compact monospaced or technical sans-serif for the badge, capability list, and status chip. Use uppercase lettering, approximately `10–12px`, with modest tracking around `0.04–0.08em`.
- Use a more expressive serif, italic serif, or distinctive brand display face for the CTA label only if that matches the user’s brand; otherwise use a confident semibold sans-serif.
- Keep the CTA visually prominent but not oversized: approximately `16–18px` on desktop.
- Maintain strong contrast and a clear hierarchy: badge first, capability metadata second, CTA third.

### Colour, borders, and shape
- Use a warm cream information panel around `#F1E8D5` with dark brown text near `#302B27`.
- Use a near-black CTA panel around `#17191B`, with warm cream text and a muted orange-red arrow near `#C96A4D`.
- Style the status badge as transparent with a thin cream border, small radius around `4–6px`, and light text.
- Give the combined row a medium capsule radius around `10–12px`; clip the two segments so they read as one joined control.
- Avoid heavy shadows. If separation is needed, use a very subtle 1px inset border or low-opacity dark edge.
- Keep the status chip filled with a muted terracotta or brown-red, using tiny cream text and a radius of `3–4px`.

### Interaction
- Make the CTA segment a clear link or button with a comfortable hit area and a subtle hover state: slightly lighten the charcoal background and shift the arrow a few pixels to the right.
- Preserve keyboard focus with a visible cream or orange outline.
- If the capability list contains links, use understated hover underlines without disturbing the compact layout.
- Ensure the banner remains readable and usable at mobile widths; never force text to overlap or become illegibly small.

### Responsive and accessibility details
- Use semantic markup such as a `section`, a short heading or status label, and a real anchor/button for the CTA.
- Maintain at least WCAG AA contrast for all text and controls.
- On mobile, reduce the number of capability items or let them wrap cleanly based on the product’s actual content.
- Respect reduced-motion preferences for hover and arrow transitions.

## Never
- Never reuse logos, product names, exact copy, or brand-specific wording from the reference.
- Never reproduce the reference banner pixel-for-pixel or treat its dimensions as fixed.
- Never use its illustrations, imagery, decorative marks, or distinctive assets.
- Never invent compliance claims, certifications, or enterprise guarantees for the user’s product.
- Never sacrifice readability to keep the entire announcement on one line.