## 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/lovable-dev/7426a651-2b1e-4dbe-b0d8-bb8a847d2e81-1789060911-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/lovable-dev/7426a651-2b1e-4dbe-b0d8-bb8a847d2e81-1789060887-full.webp
- Component on Kage: https://kage.design/component/lovable-cta

## Before you start
Ask what the user's product is, who it is for, and what brand personality, colours, and typography it uses. Then apply the principles below to create an original version for that product rather than reproducing the reference.

## Build this section
Create a spacious, centered CTA section for a software product, focused on turning user intent into an immediate natural-language action.

### Layout and alignment
- Use a very light warm-white or off-white background, approximately `#FCFBF9`.
- Place the content in a narrow centered column, with a maximum width of roughly `720px`.
- Leave substantial empty space above the CTA so it feels like a calm end-cap to a page. On desktop, use approximately `240–300px` top padding; reduce this to `120–160px` on mobile.
- Stack the elements vertically and center-align them: a small eyebrow, a bold headline, then a large prompt input/card.
- Keep the headline and eyebrow aligned to the same central axis. Let the prompt composer be slightly wider than the text above it, around `580–640px` on desktop.
- On narrow screens, use horizontal padding of `20–24px`, allow the headline to wrap naturally, and make the composer full width.

### Typography hierarchy
- Use the product's own sans-serif typeface where available; otherwise use a clean modern sans-serif such as Inter, Geist, or system UI.
- Eyebrow: medium weight, around `16px`, line-height `24px`, muted grey, with concise contextual wording.
- Headline: bold or semibold, approximately `32–36px` on desktop and `28–32px` on mobile, with tight line-height around `1.05–1.15` and slightly negative tracking. The wording should promise an outcome and invite action.
- Prompt placeholder: regular `16px`, line-height `24px`, muted grey. Use a conversational, unfinished prompt that makes it obvious the user can describe what they want.
- Use near-black for the headline, approximately `#111111`, and a softer grey such as `#696969` for supporting text.

### Prompt composer
- Build a large rounded input surface beneath the headline, approximately `580–640px` wide and `110–150px` tall depending on the product's interaction needs.
- Use a white or near-white fill, approximately `#FFFFFF`, against the warmer page background.
- Add a thin neutral border around `#E4E2DF`; use a radius of approximately `28–32px` so the composer feels friendly and tactile.
- Keep the placeholder in the upper-left with generous internal padding, around `20–24px`.
- Reserve a lower control row for the primary submit action and any compact utility control. Keep these controls visually secondary to the text-entry area while ensuring the submit action is easy to discover.
- If the product supports prompting, make the composer feel like the next step in the product—not a decorative card. Provide a visible focus ring in the product's accent colour and a clear disabled/loading state.

### Colour and atmosphere
- Keep the main surface nearly monochromatic: warm white, white, black, and soft grey.
- Add only a restrained cool glow or haze near the bottom edge of the section, using a very subtle blue tint such as `#EAF4FF` fading into transparency. This should be atmospheric, not a visible illustration.
- Adapt the accent colour to the user's brand for focus, hover, and the primary submit affordance. Ensure text and controls maintain accessible contrast.

### Spacing, borders, and states
- Use a generous vertical gap of roughly `12–16px` between eyebrow and headline, and `28–36px` between headline and composer.
- Avoid extra cards, feature lists, decorative graphics, or competing buttons in this compact CTA.
- Use subtle borders rather than shadows. If a shadow is necessary, keep it diffuse and extremely light, for example `0 8px 30px rgba(20, 20, 20, 0.04)`.
- On hover, slightly darken the composer border or add a barely perceptible lift; do not create a dramatic animation.
- On focus, preserve the rounded shape and show a 2px accessible focus ring with a small offset.
- On mobile, prevent horizontal overflow and keep controls large enough for touch interaction.

### Responsive behaviour
- At desktop widths, maintain the dramatic whitespace and compact central composition.
- At tablet and mobile widths, reduce the top whitespace, scale the headline down slightly, and let the prompt card fill the available width.
- Keep the eyebrow, headline, and composer visually connected even when the headline wraps to two lines.

## Never
- Never copy logos, product names, brand marks, or proprietary UI from the reference.
- Never reuse the reference's exact headline, placeholder copy, or button labels.
- Never copy illustrations, imagery, gradients, or decorative assets from the reference.
- Never reproduce the page around this component; build only an original CTA section based on the reusable principles above.
- Never assume the reference brand's colours or typography should replace the user's own brand system.