## 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/getincredible-com/e2886fef-b68a-4ec0-9c25-0cadbf1e05de-1789067377-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/getincredible-com/e2886fef-b68a-4ec0-9c25-0cadbf1e05de-1789067365-full.webp
- Component on Kage: https://kage.design/component/getincredible-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 guide the section. Then apply the principles below to create an original CTA for that product rather than reproducing the reference.

## Build this component
Create a compact, left-aligned call-to-action section for a product landing page. It should feel trustworthy, direct, and unusually restrained: one prominent action, one supporting text link, and an optional legal or informational footer beneath them.

### Layout and alignment
- Place the section inside a wide responsive page container, roughly 80–92% of the viewport width with a sensible maximum width.
- Align every element to the same left edge; do not centre the CTA.
- Stack the controls vertically with a small, deliberate gap: primary button first, supporting link below it.
- Add a generous vertical gap before the legal copy so it reads as a separate informational layer.
- Keep the legal copy constrained to a readable line length, but allow it to span wider than the controls when appropriate.
- On small screens, preserve the left alignment and let text wrap naturally. Avoid forcing the button or legal copy beyond the viewport.

### Typography hierarchy
- Use a clean sans-serif typeface or the product’s existing brand font.
- Make the primary button label bold and highly legible, around 18–20px on desktop and 16–18px on mobile.
- Set the supporting link in a smaller, medium-weight text style, around 15–17px, with a clear underline or another unmistakable link treatment.
- Render legal or regulatory text at approximately 10–12px with a comfortable line height of 1.45–1.6. Use a slightly smaller or lighter italic line for a final disclaimer only when the content genuinely needs that distinction.
- Maintain strong contrast for the action and supporting link; legal text may be quieter but must remain readable and meet accessibility contrast requirements.

### Colour and surface
- Use a near-black primary action, approximately #050505 to #111111, with white text around #FFFFFF.
- Keep the surrounding section close to white, approximately #FFFFFF or #FAFAFA.
- Use near-black for the supporting link and a muted charcoal for legal copy, approximately #4A4A4A to #666666.
- On hover and focus, slightly lighten or darken the button surface and retain a clearly visible focus ring; do not rely on colour change alone.

### Borders, shape, and spacing
- Give the primary button a pill shape with a radius of approximately 999px.
- Use generous horizontal padding, around 30–36px, and vertical padding around 13–17px; size it to its label rather than making it full width.
- Avoid borders on the primary button unless the brand system requires one. If used, keep it subtle and the same colour family as the button.
- Use a small gap of roughly 12–16px between button and link, then approximately 28–44px before the legal block.
- Keep the legal block visually quiet: no card, shadow, coloured panel, or decorative ornament unless the user’s brand system calls for one.

### Interaction and accessibility
- Make the whole pill button an obvious primary link or button with a concise action label relevant to the user’s product.
- Make the secondary text an independent link to supporting information.
- Provide visible keyboard focus states for both interactive elements.
- Ensure the button has an accessible name, sufficient touch area, and does not depend on hover to communicate its purpose.
- If the legal copy contains required disclosures, do not truncate it or hide it behind interaction.

## Never
- Never use the reference’s logos, product names, brand names, or exact copy.
- Never copy the reference’s legal wording; generate appropriate, product-specific placeholder disclosure text or omit it when not needed.
- Never reuse illustrations, imagery, icons, or decorative assets from the reference.
- Never turn this into a centred hero, a multi-button banner, or a visually heavy card.
- Never sacrifice legal-text readability for visual minimalism.