## 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-6.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-testimonials

# Before you start
Ask the user what their product is, who it serves, and what brand personality, typeface, colour palette, and conversion goal they want. Then apply the principles below to that product rather than reproducing the reference literally.

## Build a testimonial wall section
Create a responsive testimonials section that feels like a curated wall of customer feedback: editorial, credible, lightweight, and conversion-oriented. The section should stand on its own and work as a reusable component in the user's product website.

### Structure and alignment
- Use a very light neutral page background, with a centered content container capped around 1120–1240px.
- Center-align the section introduction: a small pill label, a bold headline, a muted supporting paragraph, and a compact CTA row beneath it.
- Keep the intro narrower than the card wall so the heading remains highly readable; use a max width of roughly 700–850px.
- Place the testimonial wall below the intro with a small but deliberate separation, around 48–72px.
- Use a three-column masonry-style layout on desktop. Let cards have natural, varied heights rather than forcing every card into equal rows. Offset columns or allow cards to stack independently to create an editorial rhythm.
- On tablet, use two columns; on mobile, collapse to one column and preserve generous horizontal padding of 20–24px.
- Keep the wall aligned to the same outer container as the section intro. Avoid a carousel as the primary presentation: the value comes from seeing multiple independent voices at once.

### Content pattern
- Each card should include a small circular avatar or neutral avatar placeholder, a person’s name, and a muted role, company, or social handle.
- Follow the metadata with one or more concise paragraphs of testimonial copy. Support line breaks and mixed-length quotes so the masonry layout feels natural.
- Optionally highlight product mentions or relevant phrases with the product’s accent colour, but keep this subtle and accessible.
- Use realistic but fictional content generated for the user’s product. Vary the testimonial length and customer profile while keeping the claims specific and believable.
- Include enough cards to make the wall feel substantial: approximately 6–9 on desktop, with additional cards available below the fold if appropriate.

### Typography
- Use a modern sans-serif with a confident, slightly tight display face for the headline and a neutral, highly legible sans-serif for body copy if the brand supports a pairing.
- Section label: 12–13px, medium weight, compact line height.
- Headline: approximately 44–58px on desktop, 34–42px on mobile; use a heavy or bold weight, tight tracking around -0.04em, and a line height around 0.98–1.08.
- Supporting paragraph: 16–18px, line height 1.45–1.6, in a softened neutral colour.
- CTA labels: 14–15px, medium weight.
- Card metadata: 14–15px, with the name slightly darker or heavier than the role/handle.
- Card body: 15–16px, line height 1.45–1.6. Make text comfortable to scan and never reduce it below 14px.

### Colour
- Start from a near-white neutral background such as #F7F7F6 or #F5F5F4.
- Use near-black for the headline and primary text, such as #171717 or #202020.
- Use a cool or warm gray for supporting text, such as #8A8A8A or #737373.
- Use white or #FCFCFC for cards, with a very subtle tinted surface if the brand needs more separation.
- Use a dark charcoal primary CTA around #242424 with white text; use a white or pale-gray secondary CTA with dark text.
- Derive accent highlights from the user’s brand rather than assuming a purple accent. A restrained accent can be used for linked product mentions or small social details.

### Borders, radius, and depth
- Give cards a thin, low-contrast border such as 1px solid #E2E2E0.
- Use a soft radius around 12–16px for testimonial cards and 999px for the label pill.
- Keep shadows extremely subtle or omit them. If used, prefer a diffuse shadow such as 0 4px 16px rgba(0,0,0,0.04).
- Add a faint divider or quiet section boundary only if needed to distinguish the testimonial area from adjacent content.
- Avatars should be circular, approximately 36–44px, with a small gap to the author metadata.

### Interaction and accessibility
- Make primary and secondary CTAs visibly distinct, with compact horizontal padding and a small arrow or directional icon only if it fits the brand.
- Add hover states to buttons: slightly darken or raise contrast, and animate over 150–200ms.
- If testimonial cards link to an external review or social post, make the whole card or an explicit source affordance keyboard accessible; do not rely on hover alone.
- Respect reduced-motion preferences. Keep masonry readable without animation, and ensure focus states have a clear 2px outline.
- Use semantic headings, lists or grouped article elements for testimonials, alt text for avatars, and sufficient colour contrast.

### Responsive behaviour
- On small screens, center the intro but allow long supporting copy to remain comfortably readable.
- Stack CTAs when their combined width becomes too large.
- Collapse the masonry wall to one column; do not shrink cards until the copy becomes cramped.
- Keep card padding around 16–20px on mobile and 20–24px on desktop.
- Prevent overflow from long names, handles, or links by wrapping them gracefully.

## Never
- Never copy the reference site’s logos, product names, customer names, handles, testimonial wording, or exact claims.
- Never reuse the reference’s illustrations, imagery, avatars, brand marks, or recognizable visual assets.
- Never reproduce the exact layout dimensions, card placement, copy, typography, or colour treatment as a pixel-for-pixel clone.
- Never imply endorsements, customer identities, or performance claims that the user has not provided.
- Never make the testimonial wall inaccessible, unreadable on mobile, or dependent on hover to reveal important content.