## 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/warp-dev/0d3838c7-307f-484a-8c23-3188eaa6f6f5-1789060389-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/warp-dev/0d3838c7-307f-484a-8c23-3188eaa6f6f5-1789060312-full.webp
- Component on Kage: https://kage.design/component/warp-cta

## Before you start
Ask me what my product does, who it is for, and what brand direction, colours, typography, and conversion goal I want. Then apply the principles below to create an original version for my product—not a copy of the reference.

## Build this section
Create a prominent case-study CTA section that combines a short editorial pitch on the left with a large proof-oriented preview panel on the right. The section should feel technical, confident, and evidence-led, while remaining readable and conversion-focused.

### Layout and alignment
- Use a full-width section with a saturated background and a centered inner container, approximately 1120–1180px wide.
- On desktop, use a two-column layout: a narrower text column around 42% wide and a larger media/proof column around 58% wide. Align both columns vertically around the center.
- Keep generous horizontal gutters of about 56–72px and vertical padding of about 84–104px.
- Place a small category label above the headline, followed by the main headline, supporting paragraph, and one CTA button.
- Give the right-side preview a strong rectangular presence, approximately 540–600px wide and 330–380px tall. It can contain a chart, benchmark table, dashboard crop, or other product-specific evidence.
- On screens below roughly 800px, stack the text above the preview. Let the preview become full width, with a sensible aspect ratio and reduced height.
- Keep the text column left-aligned and avoid centering the content merely to fill space.

### Typography hierarchy
- Use a technical or developer-oriented type system, such as a crisp grotesk for the headline paired with a monospace face for labels, body copy, and button text.
- Make the headline large and compact: approximately 30–42px on desktop, 1.08–1.2 line height, with medium-to-bold weight. Break the headline into deliberate lines so the outcome or transformation is immediately visible.
- Set the category label in small monospace text, around 11–13px, with increased tracking and subdued contrast.
- Use supporting copy at approximately 14–16px with a 1.5–1.65 line height and a constrained measure of about 360–430px.
- Use sentence case and clear benefit-led language. Emphasize a measurable result, efficiency gain, or meaningful customer outcome rather than a generic “learn more.”
- Set the CTA label in compact monospace or semi-monospace text, around 12–14px, with enough weight to remain legible.

### Colour and surface treatment
- Use a vivid electric blue or indigo background, approximately `#3028F5` to `#392CFF`, with white or near-white foreground text around `#F7F7F2`.
- Add a subtle technical grid or dotted-grid texture using a low-opacity light tint such as `rgba(255,255,255,0.16)`. Keep it quiet enough that it does not compete with the content.
- Make the preview panel light and high contrast, using an off-white surface around `#F4F4EE` or `#FFFFFF`, with dark charcoal content around `#171719`.
- Use the button as an inverted surface: off-white background, dark text, and no unnecessary decoration. If the product brand requires it, use a restrained accent colour while preserving strong contrast.

### Borders, radius, and spacing
- Keep the visual language crisp and engineered: use square corners or a very small radius between `0` and `4px`.
- Use a thin border around the preview, approximately `1px solid rgba(20,20,30,0.16)`, and avoid heavy shadows.
- Space the label to headline by about 24–28px; headline to paragraph by about 14–20px; paragraph to CTA by about 22–28px.
- Make the CTA approximately 138–160px wide and 40–48px tall, with 14–18px horizontal padding.
- Keep the preview comfortably separated from the copy, with a desktop gap of about 48–72px.

### Preview content and interaction
- Build the right-side panel as a credible product proof surface: for example, a compact benchmark visualization, comparison table, analytics snapshot, code output, or report excerpt relevant to the user's product.
- The preview should look intentionally designed, not like a generic placeholder. Include a clear title or caption, a few data points, labels, and one visually dominant result.
- If the preview is interactive, support hover or focus states for chart points, rows, or tabs with subtle contrast changes. Do not make interaction necessary to understand the core proof.
- Make the CTA keyboard accessible, use a visible focus state, and provide a clear hover state such as a small colour inversion or 1–2px translated movement.
- If the preview media cannot load, preserve the panel dimensions and show a well-designed fallback with meaningful structure rather than a broken image icon.

### Responsive behaviour
- At tablet widths, reduce the section padding and preview dimensions while preserving the two-column hierarchy where possible.
- At mobile widths, stack the content, reduce the headline to about 28–34px, keep the CTA easy to tap, and place the proof panel directly below it.
- Preserve the grid texture and high-contrast relationship, but reduce decorative density on small screens if it affects readability.

## Never
- Never copy the reference's logo, product name, brand name, headline, body copy, button label, benchmark figures, or other proprietary wording.
- Never reuse the reference's exact illustration, chart, screenshot, imagery, or data visualization.
- Never assume the user's product is a developer tool; adapt the proof panel and language to the product they describe.
- Never sacrifice contrast, accessibility, or responsive layout for visual similarity.
- Never add unrelated decorative imagery, generic stock photography, or a crowded background that weakens the CTA.