## 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/adscope/d628eaa8-0259-4816-ad11-db69e3ce98d4-1789106704-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/adscope/d628eaa8-0259-4816-ad11-db69e3ce98d4-1789106621890-full.webp
- Component on Kage: https://kage.design/component/adscope-cta

## Before you start
Ask what the user's product is, who it is for, and what their brand personality and visual identity are. Then apply the principles below to create a version for that product rather than reproducing a reference design.

## Design the section
Build a compact, centered call-to-action panel for a modern product website. The section should feel like a calm closing moment: one short invitation, followed by one unmistakable action.

### Layout and alignment
- Use a full-width section with a very light warm-gray background, approximately `#F3F3F1`.
- Place a centered inner CTA panel with a white or near-white surface, approximately `#FFFFFF`.
- Give the panel generous horizontal padding, around `32–64px`, and vertical padding of approximately `48–72px`.
- Center-align all content horizontally.
- Constrain the headline to a readable width of roughly `520–680px` so it wraps into a deliberate two-line statement on desktop rather than stretching across the viewport.
- Stack the text and button vertically with approximately `24–32px` between them.
- On small screens, reduce panel padding to around `28–32px`, preserve the centered alignment, and allow the headline to wrap naturally without becoming cramped.

### Typography hierarchy
- Use a clean contemporary sans-serif with a friendly, highly legible appearance.
- Make the CTA message the only prominent text: medium-to-large display sizing, approximately `32–48px` on desktop and `28–36px` on mobile.
- Use a regular or medium weight, around `400–500`, with tight but comfortable line-height around `1.1–1.2`.
- Keep supporting text, if needed, understated at `14–18px`; do not introduce extra competing headings or labels.
- Write a concise, conversational invitation that makes the next step obvious and relevant to the user's product.

### Colour, borders, and shape
- Keep the panel mostly monochrome: near-black text such as `#111111` on a white surface.
- Use a near-black button, approximately `#000000`, with white text around `#FFFFFF`.
- Add a subtle 1px light-gray border to the panel, approximately `#D8D8D6`.
- Use a large panel radius, approximately `24–28px`, to create a soft card-like container.
- Make the button fully pill-shaped with a radius of `999px`.
- Keep shadows absent or extremely restrained; the contrast should come from spacing, surface colour, and the dark button.

### Button and interaction
- Make the button visually prominent but compact: approximately `44–60px` tall with `28–36px` horizontal padding.
- Use a short action label, ideally one line, with a font size around `15–17px` and medium weight.
- Add a subtle hover state such as a slightly lighter black, `#1F1F1F`, or a 2–4px upward movement; keep the interaction refined rather than flashy.
- Add a clear keyboard focus ring using the product's accent colour or a visible high-contrast outline.
- Ensure the entire section remains accessible with sufficient text contrast, a semantic heading, and a real button or link depending on the destination.

### Responsive behaviour
- Keep the CTA panel centered and visually balanced at every viewport width.
- Prevent the button from becoming unnecessarily wide on desktop; on narrow mobile layouts, allow it to become full-width only if the product's conversion pattern benefits from that.
- Preserve generous whitespace below the panel so the section feels like a deliberate page ending rather than a crowded footer.

## Never
- Never copy the reference's logos, product names, or exact marketing copy.
- Never reuse illustrations, imagery, or branded assets from the reference.
- Never duplicate the exact dimensions, wording, or implementation; adapt the pattern to the user's product and brand.
- Never add decorative elements that compete with the single primary action.