## 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/tally-so/8873d519-e012-4a77-bd60-f7e8803b75a7-1789060954-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/tally-so/8873d519-e012-4a77-bd60-f7e8803b75a7-1789060926-full.webp
- Component on Kage: https://kage.design/component/tally-cta

# Build a centered CTA with testimonial and FAQ follow-through

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colours, typography, and primary conversion goal are. Then apply the principles below to my product rather than reproducing the reference literally.

## Goal
Create a spacious, editorial conversion section for a modern software product. It should make the next step feel easy and low-risk: a concise CTA at the top, a strong piece of social proof beneath it, and a compact FAQ list that addresses common objections.

## Structure
- Use a white or near-white page background and a single centered content column.
- Start with a CTA block centered in the viewport. Keep the text column relatively narrow so the headline and supporting copy feel intentional rather than stretched.
- Place a bold, benefit-led headline above one or two lines of supporting copy.
- Put one prominent primary button directly below the copy. The button should communicate a low-friction next step and may include a small trailing arrow or directional icon.
- Leave generous vertical space between the CTA and testimonial so the CTA has room to breathe.
- Follow with a centered testimonial quote, limited to a readable maximum width. Include a compact attribution row with an optional circular avatar, name, and role.
- Finish with a left-aligned FAQ heading and a full-width list of horizontal accordion rows. Each row should contain a question on the left and a chevron on the right.
- On smaller screens, reduce horizontal padding, preserve the hierarchy, allow the quote to wrap naturally, and keep FAQ rows comfortably tappable.

## Layout and alignment rules
- Align the CTA and testimonial to the page center; align the FAQ heading and rows to the shared content container.
- Use a max-width around 960–1040px for the overall section and a narrower 620–760px measure for CTA and testimonial text.
- Create clear vertical rhythm with large section gaps rather than decorative containers or dense cards.
- Keep the primary action visually close to its supporting copy.
- Use a consistent content gutter of roughly 24px on mobile and 32–48px on desktop.

## Typography
- Use a friendly, contemporary sans-serif or the product’s brand typeface.
- CTA headline: bold or extra-bold, approximately 36–42px desktop, 30–34px mobile, with tight line-height around 1.05–1.15.
- Supporting copy: regular or medium weight, approximately 20–24px desktop and 18–20px mobile, with a comfortable 1.25 line-height.
- Testimonial quote: bold or semibold, approximately 28–34px desktop and 22–26px mobile, with tight but readable line-height around 1.1–1.2. Keep it visually prominent without overpowering the CTA.
- Attribution name: 16–18px semibold; role: 14–15px in a muted colour.
- FAQ heading: 32–38px bold desktop and 28–32px mobile. FAQ labels: 16–18px semibold.
- Use near-black for primary text, approximately #171717–#242424, and muted grey such as #6F6F6F for secondary text.

## Colour and visual treatment
- Prefer a clean background around #FFFFFF or #FCFCFB.
- Use one saturated brand colour for the primary button; as a starting point, consider a vivid blue around #087AC1, then adapt it to the product brand.
- Button text should be white or another high-contrast colour.
- Use subtle neutral rules around #E8E8E8–#EEEEEE for FAQ separators.
- If adding small celebratory accents, keep them sparse, abstract, and secondary to the content. They must not compete with the CTA or resemble a specific illustration from the reference.

## Borders, radius, and controls
- Make the primary button compact but generous enough for a clear click target: roughly 44–52px tall with 14–20px horizontal padding.
- Use a modest radius around 8–10px for the button, or match the product’s existing control language.
- Avoid card borders around the CTA and testimonial; the whitespace is the main grouping device.
- FAQ rows should use 1px horizontal separators, with no heavy outer border. Give each row at least 52–60px of vertical height.
- Use a simple chevron icon with a 20–24px hit area and sufficient contrast.

## Interaction and accessibility
- Give the button clear hover, focus-visible, pressed, and disabled states. A hover state can darken the brand colour slightly, for example toward #066AA8.
- Make the entire FAQ row keyboard accessible and expandable, using a real button or disclosure pattern rather than a non-semantic clickable div.
- Animate accordion expansion subtly with height/opacity or a layout-safe transition; do not delay access to the answer.
- Maintain visible focus rings, strong colour contrast, semantic heading order, descriptive button text, and an accessible name for any avatar or decorative element.
- Ensure the layout works without imagery and remains compelling if no testimonial photo is available.

## Never
- Never copy the reference’s logo, product name, brand wording, testimonial text, FAQ questions, or button copy.
- Never reuse the reference’s exact layout dimensions, decorative marks, avatar, illustrations, or imagery.
- Never assume the user’s product is a form builder or use product-specific claims from the reference.
- Never make the CTA vague, bury the primary action, or use decorative elements that reduce readability.
- Never sacrifice responsive behaviour, keyboard access, semantic HTML, or visible focus states for visual similarity.