## 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/datafa-st/3396b937-0925-4898-ae76-13fd2ccd1a9f-1789067844-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/datafa-st/3396b937-0925-4898-ae76-13fd2ccd1a9f-1789067801-full.webp
- Component on Kage: https://kage.design/component/datafa-testimonials-2

# Build a centered social-proof testimonial section

## Before you start
Ask me what my product is, who it is for, and what its brand personality and visual system are. Then apply the principles below to my product rather than reproducing any reference literally. If I already provided brand guidelines, use those as the source of truth.

## Goal
Create a self-contained testimonial/social-proof section for a modern software product landing page. It should reassure visitors quickly and lead naturally toward a primary conversion action. Treat the testimonials as compact credibility evidence rather than a large review wall.

## Design language

### Layout and alignment
- Use a centered, single-column composition inside a wide but bounded container, approximately 720–960px wide depending on the product’s responsive layout.
- Place the section inside a large, soft-white card or panel on an off-white page background. Give the panel generous vertical breathing room, around 110–150px on desktop and 64–88px on mobile.
- Center-align the headline, supporting copy, primary CTA, and social-proof row along one vertical axis.
- Keep the content width narrow: approximately 560–680px for the headline and 460–560px for the supporting text so the message remains easy to scan.
- Use a clear vertical rhythm: headline first, supporting statement below, CTA next, then the compact proof row. Avoid adding unrelated navigation or secondary actions inside this component.
- On smaller screens, reduce horizontal padding to 20–24px, allow the headline to wrap naturally, and preserve the centered hierarchy.

### Typography hierarchy
- Use the product’s own typeface where available; otherwise use a clean contemporary sans-serif with strong legibility.
- Make the headline bold and compact, roughly 36–44px on desktop, 28–34px on mobile, with a line-height around 1.05–1.15 and slightly tight tracking.
- Make the supporting copy visibly quieter than the headline: approximately 18–21px on desktop and 16–18px on mobile, with a 1.4–1.55 line-height.
- Use short, outcome-oriented copy. The headline should communicate a valuable result, while the supporting line explains how the product helps.
- Keep the social-proof count and label at approximately 15–17px, using medium or regular weight rather than competing with the headline.

### Colour
- Use a warm or neutral page background around #FAF9F7 or #FBFAF8.
- Use a card surface around #FFFFFF or #FEFEFD.
- Use near-black text around #202124 or #222222, and muted supporting text around #66615D or #6B6B6B.
- Choose one brand accent for the CTA. A warm coral/orange in the range #E76542–#F2764F works well for an energetic product, but replace it with the user’s actual brand colour.
- Keep the social-proof row neutral and let real avatar colours provide restrained visual variation.

### Borders, shadow, and shape
- Give the outer panel a subtle 1px border around #E6E4E1 and a large radius, approximately 22–28px.
- Add only a very soft layered shadow, such as 0 3px 14px rgba(30, 30, 30, 0.05), to create separation from the page without looking elevated or glossy.
- Use a medium rounded CTA, approximately 9–12px radius, with enough horizontal padding to feel deliberate rather than pill-like.
- Avatar images should be circular, about 30–36px on desktop, with 2px light borders. Overlap them slightly by 6–10px so the row feels compact; maintain a consistent stacking order.

### Interaction and accessibility
- The CTA must have a clear hover, focus, and active state: slightly darken or shift the accent colour and preserve a visible keyboard focus ring.
- Make the entire CTA easy to tap, with a minimum target height of 44px.
- Use real image alt text for meaningful customer portraits, or mark purely decorative avatars as decorative and provide the customer count as accessible text.
- Keep contrast compliant for all text and the CTA label.
- If the product has multiple testimonials, this compact treatment may be extended into a carousel, but do not introduce auto-rotation unless it is genuinely useful. If using controls, make them keyboard accessible and expose the current slide to assistive technology.

## Content structure
1. Outcome-led headline.
2. One or two lines explaining the product benefit.
3. One primary action with a specific, low-friction label.
4. A row of 6–9 small customer avatars, followed by a concise statement such as a customer count or trust signal.

## Responsive behaviour
- Keep the section centered at all breakpoints.
- Reduce type size and panel padding on mobile rather than shrinking the CTA or avatars too far.
- Allow the proof label to wrap below the avatar row if necessary, but avoid awkward overflow.
- Ensure the panel never becomes wider than the viewport and maintains comfortable side margins.

## Never
- Never copy the reference’s logos, product names, brand marks, or exact wording.
- Never reuse the reference’s customer portraits, avatar images, illustrations, or imagery.
- Never assume the reference’s orange accent is appropriate; derive colour from the user’s product brand.
- Never make unsupported claims, fabricated review quotes, or invented customer counts.
- Never turn the section into a dense testimonial grid, a noisy logo cloud, or a visually dominant hero unless the user’s product specifically requires it.
- Never sacrifice accessibility, responsive behaviour, or clear focus states for visual similarity.