## 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/prisma-io/a9579200-8b41-4bc5-a193-79d074877e51-1789073820-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/prisma-io/a9579200-8b41-4bc5-a193-79d074877e51-1789073789-full.webp
- Component on Kage: https://kage.design/component/prisma-testimonials

## Before you start
Ask the user what their product is, who it serves, and what their brand personality and visual system are. Then apply the principles below to create an original testimonial section for that product—not a copy of any reference.

## Build this section
Create a testimonial/social-proof section with a centered heading above a wide, horizontally overflowing grid of testimonial cards. The composition should feel calm, credible, editorial, and slightly kinetic: show several cards in two rows while allowing additional cards to continue beyond the left and right edges of the content area. On smaller screens, make the layout responsive and usable as a horizontal carousel or horizontally scrollable track rather than forcing tiny cards.

### Layout and alignment
- Place the section on a clean, warm-white or white background with generous vertical breathing room.
- Center the section heading in a constrained wrapper; use a short, confident headline appropriate to the user's product.
- Under the heading, use a wide testimonial viewport with an overflow-hidden outer mask or a scrollable track. Let the first and last visible cards be partially clipped to communicate that more testimonials are available.
- Arrange cards in two balanced rows on large screens. Use a consistent column width and gap, with the second row aligned to the same grid.
- Keep the card content left-aligned. Each card should have a quote area and a compact author row anchored toward the bottom so cards in a row feel consistent.
- Use realistic, product-relevant placeholder testimonials supplied by the user or generated for their audience; do not use reference copy.
- On mobile, switch to one row with one prominent card and a visible portion of the next card, or provide clear touch scrolling. Preserve readable quote lengths and comfortable padding.

### Typography hierarchy
- Use the product's display or sans-serif typeface. The heading should be strong but not oversized: approximately 32–40px on desktop, 26–32px on mobile, with tight line-height around 1.1–1.2.
- Quote text should be the primary card content at approximately 15–17px, medium weight, and 1.4–1.55 line-height.
- Author name should be smaller and semibold, around 13–14px; role and company should be 12–13px with reduced contrast.
- Use typographic quotation marks only if they suit the brand; avoid oversized decorative quote marks.

### Spacing and sizing
- Give the section approximately 96–140px of top and bottom padding on desktop and 64–88px on mobile.
- Keep 48–72px between the heading and card track.
- Use cards around 320–380px wide and 210–240px tall on desktop, with 16–20px gaps. Adjust width fluidly based on the user's layout.
- Use 24–32px card padding, with the author row separated from the quote by 24–36px.
- Maintain consistent outer gutters, typically 5–8vw or a max-width container.

### Colour, borders, and shape
- Start with a near-white background such as #FFFFFF or #FCFCFB and adapt it to the user's brand.
- Use near-black text such as #171717, dark-gray quote text such as #3F3F46, and muted metadata such as #737373.
- Give cards a very subtle border around #EAEAEA or #F0F0F0, with a restrained shadow such as 0 2px 10px rgba(0,0,0,0.03), if needed.
- Use a medium rounded radius around 16–20px. Avoid excessive elevation or highly decorative surfaces.
- Author avatars may be simple initials in small 36px square or circular containers. Use a restrained palette derived from the user's brand; do not reproduce any reference marks or logos.
- If using a track mask, add a soft white-to-transparent edge fade at the viewport boundaries, but ensure it does not reduce legibility or block interaction.

### Interaction and accessibility
- If the track is scrollable, support touch and mouse-wheel scrolling, keyboard focus, and visible previous/next controls where appropriate. Keep controls visually quiet.
- Add subtle hover treatment such as a slight border-color change or 1–2px lift; do not make cards feel like aggressive buttons unless they link to a case study.
- Respect reduced-motion preferences and avoid autoplay that prevents reading.
- Use semantic headings, blockquotes, author information, visible focus states, sufficient colour contrast, and accessible labels for carousel controls.

## Never
- Never copy the reference's logos, avatars, brand marks, product names, company names, or testimonial wording.
- Never use the reference's exact copy, illustration, imagery, or distinctive branded visual treatment.
- Never assume the user's product, audience, or brand is the same as the reference; ask first and adapt the content and colours.
- Never hide essential testimonial content behind an inaccessible or autoplay-only interaction.
- Never overcrowd the section with badges, ratings, gradients, or decorative elements that compete with the quotes.