## 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/convex-dev/1b90134a-1727-4d68-9c37-d8b1750ddf17-1789074852-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/convex-dev/1b90134a-1727-4d68-9c37-d8b1750ddf17-1789074817179-full.webp
- Component on Kage: https://kage.design/component/convex-cta

## Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, typography, and primary conversion goal should guide the section. Then apply the principles below to create an original CTA for that product rather than reproducing any reference content.

## Design language

Build a self-contained, responsive CTA section for a developer-focused or technical product. It should feel like a focused launchpad: a strong promise at the top, a believable setup interaction in the middle, and a small set of decisive actions below.

### Layout and alignment
- Use a wide, centered section with a maximum content width of approximately 1080–1180px.
- Place the section on a near-black, warm charcoal surface and give it a subtle rectangular grid or technical field in the background.
- Keep the grid aligned to the section bounds; use thin, low-contrast horizontal and vertical lines rather than a prominent pattern.
- Center-align the headline and supporting line.
- Below the heading, place a dark, elevated interaction panel with a maximum width of about 700–760px. The panel should be visually narrower than the background field so it reads as the focal object.
- Inside the panel, use one full-width primary setup row followed by two equal-width fields or prompts in a two-column layout.
- Put the action buttons beneath the panel, centered, with a small gap between a secondary outlined action and a primary filled action.
- On small screens, collapse the lower two-column row into a vertical stack, reduce section padding, and let buttons become full-width or wrap cleanly.

### Typography hierarchy
- Use a bold, compact sans-serif for the main headline, around 28–32px on desktop, with tight line-height and strong weight.
- Use a smaller italic or softly expressive supporting line beneath it, around 18–21px, to add warmth and contrast to the technical UI.
- Use uppercase micro-labels inside the panel with generous letter spacing, approximately 10–11px, to establish a terminal/control-panel feel.
- Use readable 13–15px text for field contents and helper copy. Keep labels visibly quieter than interactive content.
- Use a confident 14px button label with medium-to-bold weight.

### Colour
- Use a deep warm-black page or section background near `#120F0E` or `#171211`.
- Use a panel surface around `#211918`, with a slightly darker inner field near `#160F0F`.
- Use warm off-white for the headline and key labels, around `#F4F0EA`.
- Use muted warm gray for supporting text, around `#B8ABA5`.
- Use a saturated orange or coral accent for the primary action, approximately `#E96236` to `#F47742`.
- Keep grid lines subtle, around `rgba(220, 205, 195, 0.12)`.
- Decorative pixels may use a restrained mix of dusty blue, coral, tan, and pale yellow, but they must remain secondary to the CTA.

### Borders, depth, and radius
- Give the outer section a very subtle border or inset edge, not a bright frame.
- Use a 1px low-opacity border around the central panel, approximately `rgba(240, 220, 210, 0.16)`.
- Use a medium radius on the panel, around 10–14px, and smaller 4–6px radii on terminal fields.
- Create depth with a soft, broad shadow and a faint dark outer outline rather than glossy effects.
- The primary button should be pill-shaped, around 999px radius; the secondary button should use the same pill geometry with a transparent fill and light border.

### Interaction
- Make the copy/setup row feel actionable: include a leading prompt or small circular status/icon area, a clear instruction, and a copy affordance on the right.
- Make the copy affordance a real button with an accessible label, hover feedback, and a temporary copied state.
- Style command or prompt fields like terminal inputs: dark inset background, monospace or terminal-inspired text, and a small leading prompt symbol.
- Add subtle hover transitions: buttons may brighten or lift by 1–2px, while borders and copy controls become more visible.
- Preserve keyboard focus with a clear warm outline or ring; never rely on colour alone to indicate state.
- Make the primary action the visually dominant route and the secondary action a lower-commitment alternative.
- Keep decorative background elements non-interactive and hide or simplify them on narrow screens if they interfere with legibility.

### Content structure
- Write a short, outcome-oriented headline specific to the user’s product.
- Add one concise supporting line that communicates speed, durability, confidence, or another relevant brand promise.
- Use the panel to show a product-relevant setup instruction and one or two example commands/prompts, without making the UI feel like a full form.
- Keep the section scannable: one promise, one activation moment, and two actions.

## Never
- Never copy logos, product names, slogans, exact copy, commands, or labels from the reference.
- Never reproduce the reference’s decorative shapes, illustrations, pixel arrangements, or imagery.
- Never use the reference’s exact typography, spacing measurements, component proportions, or colour values as a literal skin.
- Never make the grid, terminal panel, or decoration compete with the headline and primary action.
- Never omit responsive behaviour, semantic HTML, accessible labels, keyboard focus states, or a functional copy interaction when a copy control is shown.