## 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/ramp-com/ad2900d9-6fba-4f32-a572-3ba7a6ce9831-1789060917-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ramp-com/ad2900d9-6fba-4f32-a572-3ba7a6ce9831-1789060875-full.webp
- Component on Kage: https://kage.design/component/ramp-cta

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

## Build this section
Create a compact, centered email-capture CTA that sits immediately above a dark website footer. The section should feel like a calm final conversion moment: one short headline, one inline form, and no unnecessary supporting content.

### Layout and alignment
- Use a full-width light surface, approximately `#ffffff`, with a generous vertical height relative to its content.
- Center the entire CTA horizontally in a narrow content column.
- Place a concise headline above the form with a small, deliberate gap.
- Use a single horizontal form on desktop: a wide email input joined visually to a compact action button on the right. Keep the overall form width around 480–520px, with the input taking most of the space.
- Add generous empty space above the headline and below the form so the component feels premium and unhurried.
- Transition into the footer with a pronounced, smooth bottom corner treatment: use large bottom-left and bottom-right radii, around `28–36px`, or an equivalent curved overlap.
- On small screens, stack the input and button vertically while preserving the centered alignment and comfortable side padding of 20–24px.

### Typography
- Use the product’s brand sans-serif or a clean modern sans-serif fallback.
- Set the headline in a dark near-black such as `#161616`, with a medium-to-semibold weight and an approximate size of 24–26px on desktop, reduced slightly on mobile.
- Keep the headline to one short sentence or phrase; it should communicate a practical benefit rather than explain the form.
- Use muted gray placeholder text around `#6b6b6b`, approximately 16px, with enough contrast to remain legible.
- Use a clear, confident button label in 15–16px semibold type.

### Form styling
- Give the complete form a thin, subtle border around `#dedede` and a soft radius of approximately 11–13px.
- Use a very light input background, around `#fafafa`, and keep the field visually quiet so the action button is the focal point.
- Make the button a vivid brand-accent colour; if no brand colour is available, use a bright electric yellow-lime around `#e5f500` with dark text around `#171717`.
- Give the button a slightly smaller inset margin than the outer form, around 4px, and a radius of 8–10px.
- Add a restrained hover state: gently darken or shift the accent colour, and use a short 150–200ms ease transition. Keep keyboard focus clearly visible with a 2px focus ring in the brand accent or an accessible contrasting colour.
- Validate the email field and expose a concise inline error without causing the layout to jump. On success, replace or update the action state clearly while keeping the component compact.

### Footer relationship
- Place a deep charcoal footer directly below the curved CTA surface, approximately `#181818` or `#191919`.
- Start the footer content with generous top padding, around 110–130px, so the dark area has breathing room after the curve.
- Use a responsive multi-column link layout with small, muted labels and links. The footer is supporting context, not part of the CTA’s visual focal point.
- Keep footer text in off-white and gray tones, such as `#f4f4f4` for headings and `#a4a4a4` for secondary links.

### Accessibility and responsiveness
- Use a real `<form>` with a properly associated email label; a visually hidden label is acceptable if the placeholder remains secondary.
- Ensure the button is keyboard reachable and has a visible focus state.
- Maintain at least 44px touch targets and sufficient colour contrast.
- At widths below roughly 640px, stack controls, make them full width, and reduce decorative corner radii only if needed to preserve space.

## Never
- Never use the reference product’s logo, product name, headline, button copy, footer copy, or other branded wording.
- Never copy the exact layout dimensions or text; adapt the hierarchy and principles to the user’s product and brand.
- Never include illustrations, stock imagery, decorative graphics, or logos from the reference.
- Never make the CTA visually noisy with extra cards, badges, testimonials, or unnecessary explanatory paragraphs.
- Never rely on placeholder text alone as the form label or use inaccessible low-contrast states.