## 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/bolt-new/4e91875d-336e-4c47-bec8-8771acd62040-1789073975-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/bolt-new/4e91875d-336e-4c47-bec8-8771acd62040-1789073921-full.webp
- Component on Kage: https://kage.design/component/bolt-new-cta

## Before you start
Ask me what my product is, who it is for, and what its brand personality and visual identity are. Then apply the principles below to create a version for that product rather than copying the reference.

## Design language
Build a full-width closing call-to-action section for a modern software product. It should feel like the final confident invitation after the user has explored the page.

### Layout and alignment
- Use a near-black background, approximately `#101011`, and let the section occupy a generous horizontal container, around 900–1120px wide on desktop.
- Create a two-column layout with the headline on the left and an interactive prompt or form surface on the right.
- Vertically align both columns around the middle of the section; give the section substantial top and bottom padding, approximately 160–220px on desktop, so it feels like a deliberate closing moment rather than a tightly packed banner.
- Keep the content left-aligned. The headline column should be narrower, around 38–44% of the available width, while the form column gets the remaining space.
- On smaller screens, stack the columns vertically with the headline first, reduce the section padding to roughly 88–120px, and make the form full width.
- Preserve generous empty space around the component. Do not add unrelated cards, navigation, logos, or visual decoration.

### Typography hierarchy
- Use a clean contemporary sans-serif with a slightly dense, confident appearance.
- Set the headline in bold or semibold, approximately 36–42px on desktop with a line height near 0.98–1.05; use 30–34px on mobile.
- Keep the headline to two or three short lines and make it the strongest element in the section.
- Use a muted supporting sentence only if the product needs clarification; set it around 15–17px with a 1.45 line height.
- Form placeholder text should be visibly quieter than the headline, around 14–16px.
- Use off-white text such as `#F4F4F5` for the headline and cool gray `#A1A1AA` for secondary text.

### Form and interaction
- Build the right-hand surface as a large rounded prompt composer or compact form, not a conventional narrow input.
- Give it a dark elevated fill around `#202022`, a subtle 1px border around `#343438`, and a 24–28px radius.
- Make the composer tall enough to feel like an inviting starting point: roughly 190–260px on desktop and at least 170px on mobile.
- Place the placeholder near the upper-left with comfortable internal padding of 20–24px.
- Add a clear primary action inside or attached to the composer, such as a compact button in the lower-right corner. Use the product's accent colour, but keep it visually simple and high contrast.
- On hover, slightly brighten the border and action surface; on focus, show a visible accent-coloured outline or ring without shifting the layout.
- Make the entire action keyboard accessible, with a clear focus state, sensible label, and submit behaviour appropriate to the product.
- If the product is AI-oriented, the interaction can accept a natural-language request; otherwise adapt the composer into the most relevant first action for the product.

### Spacing, borders, and radius
- Use a 4px or 8px spacing rhythm.
- Keep 24–32px between the headline and any supporting copy, and 28–40px between stacked form controls.
- Use borders sparingly: thin, low-contrast outlines should define the composer without making the section feel card-heavy.
- Use large radii on the composer and buttons, approximately 12–28px depending on the brand; avoid sharp corners unless the product's identity requires them.
- Avoid shadows or keep them extremely soft; the contrast should come from tonal layering rather than glossy effects.

### Responsive and accessibility rules
- Prevent the headline from becoming awkwardly narrow or wrapping into isolated words.
- Ensure the CTA remains usable at touch sizes of at least 44px.
- Maintain WCAG-compliant contrast, visible focus states, semantic form controls, and reduced-motion support.
- Add only subtle transitions, around 150–220ms, for border, background, and focus changes.

## Never
- Never copy the reference's logos, product names, brand marks, or exact wording.
- Never reuse the reference's copy; write new copy that fits the user's product and audience.
- Never include the reference's illustrations, screenshots, imagery, or decorative graphics.
- Never reproduce the section as a pixel-for-pixel clone; preserve the underlying split-layout CTA principles while adapting proportions, colour accents, type, and interaction to the user's brand.
- Never make the CTA rely on colour alone to communicate its state.