## 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/datafa-st/3396b937-0925-4898-ae76-13fd2ccd1a9f-1789067842-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/datafa-st/3396b937-0925-4898-ae76-13fd2ccd1a9f-1789067801-full.webp
- Component on Kage: https://kage.design/component/datafa-cta

# Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, and primary conversion goal the section should support. Then apply the principles below to create an original version for that product—not a copy of the reference.

## Build an AI-agent integration CTA section
Create a polished, centered CTA section for a software product that connects to AI coding agents, automation tools, or developer workflows. The section should communicate the integration in seconds, make the next action obvious, and show a believable product outcome below the CTA.

### Layout and alignment
- Use a warm off-white page background, approximately `#faf9f7` or `#fbfaf8`.
- Constrain the content to a centered max width of roughly 900–1050px.
- Stack the section vertically: headline, supporting paragraph, primary CTA, secondary text link, then a large product-preview panel.
- Keep the text block centered with a readable width of around 680–760px.
- Add generous vertical rhythm: approximately 56–72px above the headline, 18–24px between headline and paragraph, 26–32px before the CTA, 12–16px between primary and secondary actions, and 44–64px before the preview.
- Position a few very subtle abstract integration markers or neutral decorative shapes around the upper text area only if they support the product story. They should sit behind or outside the main reading path and never distract from the CTA.
- Place the preview at nearly full content width. On small screens, allow it to scale down cleanly or become horizontally scrollable without clipping the key content.

### Typography hierarchy
- Use a modern sans-serif with strong readability and slightly tight display tracking.
- Set the headline in a bold or extra-bold weight, around 44–52px on desktop and 32–38px on mobile, with approximately 1.05–1.12 line height.
- Use a supporting paragraph at 17–19px desktop, 15–17px mobile, with a 1.6 line height and muted dark-gray colour.
- Make the primary CTA label short, specific, and action-oriented. Use 15–16px medium or semibold type.
- Keep the secondary link visually quieter at 14–15px.
- Use sentence case for controls and avoid excessive uppercase text except for small, optional category labels inside the preview.

### Colour and emphasis
- Use near-black for the headline, approximately `#222222` or `#1f1f1f`.
- Use muted charcoal for body copy, approximately `#666563`.
- Choose one warm, high-contrast accent for the primary CTA—such as coral-orange `#e96843`, orange-red `#e76540`, or a brand-appropriate equivalent.
- Use white or a very light neutral for the CTA text, approximately `#fffaf7`.
- The preview should use a deep near-black surface, approximately `#111111`, with slightly lighter charcoal containers around user input or result content, approximately `#202020`.
- Preserve strong contrast and do not use decorative colour that competes with the main action.

### Borders, radius, and depth
- Give the primary button a medium-large radius of about 8–10px, with a subtle warm shadow or glow on hover.
- Give the preview a generous 18–24px radius and a fine light-gray outer border, approximately `#e5e3df`, plus a soft shadow.
- If the preview resembles an application window, add a restrained top bar with a thin divider and three small status dots; keep these generic and decorative.
- Use thin, low-contrast borders around inner preview cards, approximately `#383838`.
- Avoid excessive shadows elsewhere; the page should feel calm and editorial.

### Product preview content
- Show a compact, realistic workflow result rather than a generic blank dashboard. For example, include a user question or command, a small processing/status line, and a structured answer with metrics, categories, or next steps.
- Keep the preview content legible but subordinate to the CTA. Use a clear left-aligned content column inside the dark panel with generous internal padding.
- The preview should demonstrate the benefit of asking a natural-language question and receiving useful product data or an actionable result.
- Use invented, product-neutral sample data relevant to the user's product; do not reuse reference wording or numbers.

### Interaction and responsive behaviour
- The primary CTA should have clear hover, focus-visible, and pressed states: slightly darken or shift the accent colour, raise the shadow subtly, and preserve keyboard visibility.
- The secondary link should underline or change colour on hover without becoming as prominent as the primary button.
- Decorative elements may have a very restrained float or fade animation, but respect `prefers-reduced-motion`.
- On mobile, reduce the headline size, stack actions naturally, tighten the preview padding, and keep the preview's most important result visible above the fold.
- Ensure all actions have accessible names, visible focus states, sufficient contrast, and touch targets of at least 44px.

## Never
- Never use logos, recognizable brand marks, or trademarked integration icons from the reference.
- Never use the reference product name, domain, headline, CTA labels, supporting copy, sample questions, metrics, or exact wording.
- Never copy the reference's decorative placements, preview content, or visual composition pixel-for-pixel.
- Never include illustrations or imagery from the reference; use CSS shapes and an original interface preview if visual support is needed.
- Never make the CTA ambiguous, bury the primary action, or add multiple equally prominent buttons.