## 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/astro-build/2448cc02-1e48-497c-9333-8941f9d81557-1789073853-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/astro-build/2448cc02-1e48-497c-9333-8941f9d81557-1789073818-full.webp
- Component on Kage: https://kage.design/component/astro-build-cta

## Before you start
Ask the user what their product is, who it is for, and what brand direction, colors, typography, and primary action they want. Then apply the principles below to create an original CTA for that product rather than reproducing the reference.

## Build this section
Create a self-contained, responsive call-to-action section for a developer-focused product. It should feel like a confident final invitation to begin using the product, with a short headline, one primary button, and an optional command or setup snippet beneath it.

### Layout and alignment
- Use a wide, shallow-to-medium-height section with a centered content column.
- Center-align all CTA content horizontally and vertically within the section.
- Keep the content column narrow enough for a compact two-line headline; target approximately 420–560px.
- Use generous vertical padding, approximately 120–180px on desktop and 80–112px on mobile.
- Stack the headline, button, and command snippet with deliberate spacing: about 28–40px below the headline, 8–12px between the button and snippet.
- Keep the section visually distinct from surrounding content with a softly rounded outer container or clipped background shape.
- On small screens, reduce headline size and horizontal padding while preserving the centered composition.

### Typography hierarchy
- Use a modern sans-serif with a sturdy, slightly technical feel.
- Set the headline in bold or extra-bold weight, around 36–44px on desktop, with tight line-height around 0.98–1.08 and balanced two-line wrapping when appropriate.
- Use a smaller button label around 15–17px with medium weight.
- Render the command snippet in a monospace font at approximately 14–16px with relaxed readability.
- Keep the CTA copy concise: one direct invitation rather than explanatory body text.

### Colour and atmosphere
- Use a dark, high-contrast base background, approximately #071326 or #080A18.
- Add a broad, low-detail gradient or radial glow behind the content: teal/cyan around #147F92 blending through deep blue #123B70 into navy/indigo #111A42.
- Keep the center behind the content calm enough for legibility; place brighter teal and blue illumination toward the sides or edges.
- Add subtle grain, sparse star-like points, or barely visible texture only if it supports the product’s brand. Keep it decorative and low contrast.
- Use near-white headline text around #F4F7FA.
- Use a white or very pale button surface around #F7F7F5 with a dark or brand-colored label.
- Use a dark translucent command surface around rgba(5, 17, 34, 0.72), with muted cool-gray text around #AAB8C8.

### Borders, shape, and depth
- Give the CTA container a medium-large radius, approximately 16–20px, with overflow hidden so the atmospheric background stays contained.
- Add a very subtle border around the container, such as rgba(150, 210, 255, 0.12).
- The primary button should be pill-shaped, around 44–52px tall, with generous horizontal padding and no heavy shadow.
- The command snippet should be a compact rounded rectangle, around 40–44px tall, with horizontal padding of 16–20px.
- Separate the command prompt symbol, command text, and copy affordance visually without making the snippet feel like a full code editor.

### Interaction
- Make the primary button clearly clickable with a restrained hover state: slight brightness increase, subtle upward movement, or a soft glow.
- Make the command snippet copy control discoverable through a copy icon or compact copy button.
- On copy, provide immediate feedback such as changing the icon or label to “Copied” for a short duration, while keeping the layout stable.
- Ensure keyboard focus rings are visible and accessible against the dark gradient.
- Preserve strong contrast and provide an accessible name for the copy control.

### Responsive and accessibility requirements
- Use semantic section, heading, link/button, and code elements where appropriate.
- Ensure the headline remains readable without relying on the decorative background.
- Avoid excessive animation; if background texture or glow animates, respect reduced-motion preferences.
- Let the command line wrap or scroll safely on narrow screens without causing horizontal page overflow.

## Never
- Never use the reference product’s logo, product name, exact headline, command, or button copy.
- Never copy the reference gradient, texture, layout measurements, or decorative star field exactly; reinterpret the atmospheric treatment for the user’s brand.
- Never include logos, product names, copy, illustrations, or imagery from the reference.
- Never make the decorative background compete with the CTA content.
- Never hide the copy interaction behind an unlabeled icon or remove visible keyboard focus.