## 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/cal-com/cdeba7c5-dd46-4ce9-ba9c-2d344d57a58b-1789060424-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cal-com/cdeba7c5-dd46-4ce9-ba9c-2d344d57a58b-1789060392-full.webp
- Component on Kage: https://kage.design/component/cal-cta

## Before you start
Ask what the user's product is, who it is for, and what its brand personality and primary conversion goal are. Then apply the principles below to create an original FAQ-adjacent CTA for that product—not a copy of the reference.

## Build the section
Create a full-width, responsive conversion CTA that appears immediately after an FAQ or other objection-handling section. It should feel like the natural next step once a visitor has read the answers.

### Layout and alignment
- Use a light, neutral page background with a centered content container, approximately 1120–1180px wide.
- Place the CTA inside a large inset panel with generous horizontal and vertical padding; on desktop it can have a subtle elevated or bordered card treatment, while on mobile it should nearly fill the viewport width with smaller gutters.
- Center-align the content: one concise headline followed by a compact row of two actions.
- Keep the content vertically balanced with generous whitespace above and below; avoid adding extra paragraphs, feature lists, or visual clutter.
- On small screens, stack the buttons or let them wrap cleanly while preserving equal visual prominence and comfortable tap targets.

### Typography
- Use the product's brand sans-serif or a similarly modern, rounded grotesk typeface.
- Make the headline bold and highly legible, approximately 44–52px on desktop and 32–38px on mobile, with tight line height around 1.05–1.15.
- Keep the headline short—roughly 3–6 words—and focused on the product's primary outcome.
- Use medium-weight button labels around 14–16px; maintain strong contrast and clear hierarchy between the primary and secondary action.

### Colour and surfaces
- Start with a near-white or very pale neutral background, approximately #F7F7F7 or #FAFAFA.
- Use near-black text, approximately #171717–#222222.
- Make the primary button near-black, approximately #202020, with white text.
- Make the secondary button white or a very pale gray, approximately #FFFFFF or #F3F3F3, with dark text.
- Keep the palette nearly monochrome unless the user's brand requires an accent; any accent should be used sparingly for focus or hover states.

### Borders, radius, and spacing
- Give the CTA panel a thin, low-contrast border such as #E5E5E5 and a soft shadow only if needed to separate it from the page.
- Use a medium-to-large panel radius, approximately 14–20px.
- Use pill-shaped buttons with a radius of 999px, around 44–48px tall, with 16–20px horizontal padding.
- Separate the headline and actions by approximately 28–36px; keep the gap between buttons around 10–14px.
- Maintain a restrained grid rhythm and align the panel with the FAQ section above.

### Interaction
- Both buttons should have clear hover, focus-visible, active, and disabled states.
- On hover, slightly increase contrast or add a subtle translate-y or shadow effect; keep motion understated.
- Include a small directional affordance such as an arrow or chevron only if it fits the product's design language.
- Ensure keyboard navigation, visible focus rings, semantic button/link elements, and touch targets of at least 44px.
- Respect reduced-motion preferences.

## Never
- Never reuse logos, product names, branded copy, slogans, illustrations, imagery, or exact button labels from the reference.
- Never reproduce the reference layout pixel-for-pixel or preserve its wording.
- Never add decorative artwork merely to fill space.
- Never make both actions visually dominant when one is clearly the primary conversion path.