## 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/uini-io/ef5b466a-1fe9-4cb6-9300-79049ee31244-1789059862-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/uini-io/ef5b466a-1fe9-4cb6-9300-79049ee31244-1789059824-full.webp
- Component on Kage: https://kage.design/component/uini-testimonials

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

## Design language

Build a testimonial section for a modern software or SaaS marketing page. The component should feel confident, warm, editorial, and lightly premium, with generous whitespace and very little visual noise.

### Layout and alignment
- Use a centered section container with a maximum width of approximately 1120–1180px.
- Place a centered section heading above the testimonials. Keep the heading visually prominent but compact, with a short line such as a trust-oriented statement supplied by the user’s product context.
- Arrange six testimonial cards in a three-column grid on desktop, with two rows.
- Use a consistent horizontal gap of roughly 22–28px and a vertical gap of roughly 20–24px.
- Keep all cards aligned to the same outer edges and give them comparable heights, while allowing testimonial copy to wrap naturally.
- On medium screens, reduce the grid to two columns; on small screens, stack cards in one column. Preserve comfortable side padding of about 20–24px on mobile.
- Keep the testimonial section visually separate from the next page section through a large amount of vertical whitespace rather than a heavy divider.

### Card structure
- Each card is a rounded rectangular surface with a testimonial paragraph at the top and an identity row anchored toward the bottom.
- Use internal padding of approximately 28px, with 30–34px on larger screens if needed.
- Make the quote the dominant content: use first-person customer language focused on a concrete experience, outcome, or change in workflow.
- Keep quotes to roughly 3–6 short lines on desktop. Do not add quotation marks unless they suit the user’s brand.
- The identity row should contain a small circular avatar substitute or initials badge, followed by the person’s name and a smaller role/company line.
- Align the avatar, name, and role vertically, with about 10–12px between the avatar and text.
- If real customer photography is unavailable, use initials or a simple neutral colour badge rather than invented portraits.

### Typography hierarchy
- Use a clean contemporary sans-serif or the user’s existing brand typeface.
- Section heading: approximately 42–52px on desktop, 34–40px on mobile; medium or regular weight, tight line-height around 1.05–1.15.
- Testimonial copy: approximately 16–18px, regular weight, line-height around 1.55–1.65, and a dark near-black colour such as #202020.
- Customer name: approximately 14–15px, medium or semibold weight.
- Role/company: approximately 13–14px, regular weight, muted grey.
- Avoid overly bold headings, all-caps labels, and excessive typographic contrast.

### Colour
- Use an off-white or very light warm page background, approximately #FCFCFA or #FBFBF9.
- Cards should be white or only subtly brighter than the page, approximately #FFFFFF.
- Use near-black text around #1F1F1D and muted secondary text around #70716E.
- Add a very light neutral border around cards, approximately #E5E5E1.
- Give initials badges a restrained, varied palette such as muted blue #62A6D5, soft green #5BA467, and warm coral #E9784C. Ensure initials remain readable and accessible.
- Keep colours low-saturation and functional; do not introduce gradients or loud brand decoration unless the user’s brand calls for it.

### Borders, radius, and depth
- Use a 1px border in place of strong shadows.
- Give cards a medium-large radius of approximately 16–18px.
- Use a fully rounded avatar badge, around 44px in diameter.
- Avoid prominent drop shadows. If needed, use only a barely visible shadow such as `0 1px 2px rgba(20, 20, 18, 0.03)`.

### Interaction and responsiveness
- These cards are primarily readable content and do not need elaborate interaction.
- If cards are clickable, add a subtle border-colour or background transition on hover and a clear keyboard focus ring; do not make the whole section feel like a carousel.
- Maintain readable quote lengths and avoid fixed heights that clip content.
- Respect reduced-motion preferences and ensure text contrast meets accessibility standards.
- Use semantic markup: a section with a heading, a list or grid of testimonial items, and correctly associated author information.

## Content guidance
- Write original, believable testimonials for the user’s product, with varied voices and specific benefits.
- Prioritize evidence such as saved time, improved activation, clearer support, faster research, or better collaboration over vague praise.
- Use the product’s actual audience and terminology after asking the user for context.

## Never
- Never reuse the reference’s logos, product names, customer names, company names, or testimonial copy.
- Never copy the reference’s exact layout content, wording, or brand-specific identity details.
- Never include illustrations, decorative imagery, or stock photography from the reference.
- Never invent real customer endorsements or imply that fictional people are verified customers.
- Never use unnecessary carousel controls, badges, gradients, or heavy shadows when a simple responsive grid communicates the proof better.