## 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/prisma-io/a9579200-8b41-4bc5-a193-79d074877e51-1789073821-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/prisma-io/a9579200-8b41-4bc5-a193-79d074877e51-1789073789-full.webp
- Component on Kage: https://kage.design/component/prisma-cta

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

## Build this component
Create a prominent closing CTA section for a modern developer or software product. It should sit inside a generous page section and feel like a calm, premium conversion moment rather than a dense marketing block.

### Layout and alignment
- Use a wide container, approximately `min(1248px, calc(100vw - 32px))`, with a large outer rounded frame.
- Give the frame generous padding, around `32px`; on mobile reduce this to `16px`.
- Place a second inner panel inside the frame, with a subtle inset edge and rounded corners.
- Center-align all content within the inner panel.
- Stack the content vertically: headline, supporting paragraph, three short proof points, then a two-button action row.
- Keep the content column readable: headline max-width around `620px`, paragraph max-width around `580px`.
- Use generous vertical breathing room, approximately `80–112px` on desktop and `56–72px` on mobile.
- Arrange proof points in a horizontal row on wide screens and a vertical or wrapped stack on narrow screens. Keep each item short and let the check icon provide the visual scan point.
- If this CTA is followed by footer navigation, preserve a substantial gap below the panel so the CTA feels like a distinct final section.

### Typography hierarchy
- Use a clean contemporary sans-serif, preferably the product’s existing UI font.
- Make the headline bold or semibold, approximately `42–48px` with `0.95–1.05` line-height on desktop; scale to `32–36px` on mobile.
- Use a compact two-line headline when the message benefits from emphasis, but never force awkward wrapping.
- Set the supporting paragraph around `16–18px`, with approximately `1.5` line-height and a muted neutral colour.
- Set proof points at `14–15px`, medium weight, with strong enough contrast for scanning.
- Keep button labels short, action-oriented, and visually prominent.

### Colour and atmosphere
- Use a pale near-white outer frame, approximately `#F7F8F8`, with a very subtle cool border around `#DDE1E2`.
- Create an abstract, low-contrast inner background using soft blurred pastel washes rather than a literal illustration: cyan around `#BCEEF0`, warm yellow around `#F4E8A5`, blush pink around `#F3D6D5`, and lavender or cool blue around `#DDE5F4`.
- Keep the centre behind the text relatively light and quiet so readability remains high.
- Add soft radial gradients, diffuse blur, and very low-opacity texture if desired; avoid sharp decorative shapes that compete with the CTA.
- Use near-black text around `#151515` and muted body copy around `#6C6C6C`.
- Give the three check icons small, distinct accents such as cyan `#3DBCC5`, yellow `#D6B83E`, and coral `#D9828B`, while keeping the labels neutral.

### Borders, radius, and depth
- Use a large outer radius around `24px` and an inner radius around `16px`.
- Keep borders extremely subtle: approximately `1px` solid with low-opacity neutral colour.
- Avoid heavy drop shadows. If depth is needed, use a broad, low-opacity shadow such as `0 12px 40px rgba(30, 40, 45, 0.06)`.
- The primary button should be a dark pill with a radius of `999px`, white text, and comfortable horizontal padding around `24px`.
- The secondary button should be a transparent or translucent light button with a thin dark-neutral border, matching pill radius, and dark text.

### Interaction and responsive behaviour
- Add a subtle hover treatment to the primary button: slightly lighten the background, raise it by `1px`, or increase the soft focus glow.
- On secondary-button hover, strengthen the border and add a faint neutral background.
- Provide visible keyboard focus rings with strong contrast for both actions.
- Keep buttons side by side on desktop and stack them or allow a comfortable wrap on mobile.
- Ensure the pastel background remains decorative only: maintain WCAG-readable text contrast and avoid animated gradients that distract from the action.
- Respect reduced-motion preferences if any background shimmer or button transition is included.

### Content guidance
- Write a concise headline tied to the user’s desired outcome.
- Follow with one sentence explaining the value or reducing perceived risk.
- Use exactly three proof points when space permits: one about fit or workflow, one about capability, and one about trust, flexibility, or pricing.
- Make the first button the primary conversion action and the second a lower-commitment path such as pricing, documentation, demo, or comparison.

## Never
- Never reuse the reference’s logos, product names, brand marks, or exact copy.
- Never copy the reference’s specific headline, proof-point wording, button labels, or footer navigation.
- Never use the reference’s exact decorative geometry, imagery, illustrations, or identifiable visual assets.
- Never assume the user’s product is a developer tool; adapt the language and proof points to the user’s actual product.
- Never sacrifice readability for the pastel background or add decoration that overwhelms the conversion message.