## 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-1789067841-4.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-3

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

## Design the section
Build a lightweight testimonial strip with three evenly distributed columns inside a centered, wide content container. Keep the section visually open: use whitespace and alignment rather than card backgrounds, shadows, or decorative containers to separate testimonials.

### Layout and alignment
- Use a responsive three-column grid on desktop with generous horizontal gaps; collapse to one column or a horizontally scrollable track on small screens.
- Center-align each testimonial's rating, quote, and attribution as one vertical unit.
- Keep each column's content width constrained so quotes remain readable and line lengths feel deliberate.
- Place the repeated rating at the top, the quote beneath it, and the customer identity row at the bottom with consistent vertical spacing.
- Align attribution rows consistently across columns where possible, while allowing quote lengths to remain natural.
- Give the section generous top and bottom padding so it feels like a pause between major page sections.

### Typography hierarchy
- Use a compact five-star rating in a warm yellow, approximately `#F2C21A`; keep the stars visually prominent but smaller than the quote.
- Set testimonial copy in a dark neutral, approximately `#292827`, at around 16–18px with a 1.45–1.6 line-height.
- Use bold or semibold emphasis sparingly within quotes to draw attention to outcomes or memorable phrases; use a pale warm-yellow highlight behind selected words rather than underlines.
- Style the person's name in semibold dark text, around 15–16px.
- Style the company or role in a muted gray, approximately `#77736D`, around 14–15px.
- If the section needs a label, use a small uppercase or eyebrow treatment in a restrained accent colour, but do not let it compete with the testimonials.

### Spacing, borders, and shape
- Use a generous grid gap, approximately 48–72px on desktop, and 28–36px vertically on mobile.
- Keep the quote-to-attribution gap around 26–34px and the rating-to-quote gap around 22–28px.
- Avoid visible card borders and filled panels in the default state. If separation is necessary, use a very subtle 1px divider in approximately `#E8E5DF`.
- Use a warm off-white page background around `#FCFBF9` or adapt it to the user's brand background.
- Keep avatar images small and circular, around 32–40px, with a simple neutral fallback if no portrait is available. Do not make avatars the visual focus.
- Use modest corner radii, around 8–12px, only for highlighted text, avatars, or interactive controls—not for large testimonial cards.

### Interaction and responsive behaviour
- Testimonials are primarily static proof; avoid unnecessary carousels, autoplay, or distracting motion.
- If there are more than three items on mobile, allow a clear swipeable row or stack them vertically, preserving readable quote widths and visible attribution.
- If testimonials link to customer stories, make the whole attribution or an explicit text link keyboard accessible with a subtle hover colour change.
- Respect reduced-motion preferences and ensure star icons have an accessible label such as “5 out of 5 stars.”
- Maintain strong contrast for all text and never rely on the yellow highlight alone to communicate meaning.

## Never
- Never use logos, product names, customer names, company names, domains, or exact copy from the reference.
- Never reproduce the reference's specific testimonial wording, highlighted phrases, identities, or imagery.
- Never add illustrations, decorative photography, or unrelated imagery from the reference.
- Never turn the section into a dense set of bordered cards, a loud review badge, or an autoplaying carousel unless the user's product requirements specifically call for it.
- Never copy the reference layout so literally that the result feels branded to another product; adapt colours, type scale, content length, and responsive behaviour to the user's product and brand.