## 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/replicate-com/18021eac-ea1d-469d-8210-9b10eacb77c7-1789073923-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/replicate-com/18021eac-ea1d-469d-8210-9b10eacb77c7-1789073887-full.webp
- Component on Kage: https://kage.design/component/replicate-cta

## Before you start
Ask the user what their product does, who it is for, and what brand, tone, and primary action they want to promote. Then apply the principles below to create an original version for that product rather than reproducing this reference.

## Build a dark enterprise conversion section
Create a full-width website section that communicates operational scale, reliability, and commercial readiness. It should feel like a technical product landing page: confident, minimal, data-informed, and slightly editorial.

### Layout and alignment
- Use a deep charcoal background, approximately `#1E1E1E` or `#202020`, with a centered content container around 960–1120px wide.
- Start with a centered CTA block. Keep the heading, supporting paragraph, and button in one narrow column, with generous space above and below.
- Follow it with a compact social-proof row or responsive grid of customer/company wordmarks. Treat these as neutral text placeholders or user-provided assets, not decorative imagery. On mobile, wrap them into two columns or a horizontally scrollable row.
- Below the proof, add a two-column feature grid. Each card should have a thin warm accent border, a technical visual or data treatment at the top, then an accent-colored heading and a short explanatory paragraph.
- Keep the cards equal in width and align their top borders and internal padding. Collapse to one column below roughly 720px.
- Use a consistent outer gutter of 24–32px on small screens and 48–80px on large screens. The section should have substantial vertical padding, approximately 88–128px.

### Typography hierarchy
- Use a clean sans-serif with a technical, modern feel; use a monospaced face only for data labels, prices, or chart annotations.
- The main heading should be medium-weight, approximately 42–52px on desktop with tight line-height around 1.05–1.15; reduce to 32–38px on mobile.
- Supporting copy should be 18–20px, line-height 1.4–1.55, and constrained to approximately 650px so it remains easy to scan.
- Use 16px for the CTA label and 24–30px for feature-card headings. Keep body copy around 16–18px with comfortable line-height.
- Make proof names visibly lighter or brighter than surrounding content but avoid oversized branding that competes with the CTA.

### Colour and visual system
- Base background: deep charcoal `#1E1E1E`.
- Primary text: warm white `#F3F1EE`.
- Secondary text: muted gray `#C8C5C1`.
- Accent: burnt orange/red, approximately `#D94720`, with a brighter hover state around `#F05A2A`.
- Use the accent for CTA borders, card rules, chart lines, bars, headings, and small links. Keep it controlled so the section remains sophisticated rather than neon.
- Data visuals should be abstract and product-relevant: a small line chart, usage bars, pricing rows, status metrics, or system diagram. They should support the message without becoming a full illustration.

### Borders, radius, and spacing
- Prefer sharp or barely rounded geometry: 0–3px radius for cards and buttons.
- Use 1px borders with low-contrast gray for internal data rows and the warm accent for primary card boundaries and the CTA button.
- Do not use heavy shadows. Let the dark surface, fine rules, and spacing establish hierarchy.
- Give the CTA block at least 28–40px between heading, paragraph, and button; leave 64–96px before the proof row.
- Separate the proof row from the feature cards by approximately 72–104px.

### Interaction and responsive behavior
- Make the outlined CTA a clear keyboard-focusable link or button. On hover, fill it with the accent colour and switch its text to the dark background, using a short 150–220ms transition.
- Add a subtle accent shift or underline to text links on hover.
- Preserve readable contrast and visible focus rings.
- Ensure charts and data panels are decorative or accessible through nearby explanatory text; never rely on colour alone to communicate meaning.
- On small screens, center the CTA, allow proof items to wrap, stack feature cards, and reduce chart detail rather than forcing horizontal overflow.

### Content pattern
- Use a concise scale or reliability-oriented headline appropriate to the user's product.
- Add one paragraph explaining the business outcome and reducing perceived implementation risk.
- Use one action-oriented CTA focused on enterprise plans, contact, deployment, or the product's equivalent high-intent next step.
- The lower cards should explain two complementary benefits, such as automatic capacity management and usage-based economics, adapted to the user's actual offering.

## Never
- Never use the reference's logos, product names, company names, or exact copy.
- Never copy the reference's charts, illustrations, data values, or distinctive visual compositions exactly.
- Never add unrelated stock photography, decorative imagery, or generic AI artwork.
- Never make the section depend on inaccessible colour-only cues, tiny text, or low-contrast borders.
- Never treat this as a pixel-perfect replica; preserve the underlying hierarchy and design principles while making the result native to the user's brand.