## 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/strawberrybrowser-com/0a6dd4bb-409f-4c45-aa48-6abac7e2076e-1789060563-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/strawberrybrowser-com/0a6dd4bb-409f-4c45-aa48-6abac7e2076e-1789060532-full.webp
- Component on Kage: https://kage.design/component/strawberrybrowser-testimonials

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

## Build a testimonial section with an editorial, human feel
Create a responsive social-proof section for the user's product. It should feel like a considered magazine layout rather than a standard SaaS review grid: a strong central statement or section heading, generous vertical breathing room, and a collection of testimonial cards arranged with gentle variation in size and position.

### Layout and alignment
- Use a warm, light background and a centered max-width container of roughly 1100–1200px.
- Introduce the section with a large, compact heading positioned around the upper-middle of the viewport or section. Keep the heading width constrained so it forms two or three balanced lines.
- Below the heading, place testimonials in a loose editorial mosaic: use two or three columns on desktop, with one larger feature quote balanced by smaller supporting cards. Do not make every card identical.
- Align the overall composition to a consistent container grid even when card heights vary. Let whitespace do some of the visual work.
- Collapse to a single-column stack on small screens, preserving a clear reading order and comfortable side padding of about 20–24px.
- Keep the section visually calm and avoid dense UI controls, filters, or excessive metadata.

### Typography hierarchy
- Use a modern sans-serif with a slightly friendly, substantial appearance; use the user's brand font when available.
- Make the section heading bold and prominent, approximately 40–56px on desktop and 30–38px on mobile, with tight line-height around 0.98–1.08.
- Render testimonial quotes at approximately 18–24px with a 1.25–1.4 line-height. The featured quote may be larger, around 28–34px.
- Use smaller author details around 12–14px, with the person’s name slightly heavier than their role or company.
- Avoid all-caps body copy. If an eyebrow is needed, use restrained uppercase lettering with generous tracking.

### Colour and visual tone
- Start with an off-white or warm cream background, approximately `#F7F4EE` or `#FAF8F3`, rather than pure white.
- Use near-black text such as `#20211F` or `#252522` for strong contrast.
- Use a very pale neutral for card surfaces, approximately `#FFFDF9`, with one restrained brand accent—such as a muted berry, coral, green, or blue—for quotation marks, small labels, or emphasis.
- Keep colour blocks subtle and purposeful; the testimonial content should remain the focus.

### Cards, borders, and radius
- Give cards a thin, low-contrast border such as `1px solid #E6E2DA` and, where appropriate, a barely visible shadow like `0 8px 24px rgba(35,32,25,0.04)`.
- Use medium rounded corners, approximately 14–20px. Avoid overly playful pills unless the user's brand calls for them.
- Create hierarchy through card size, padding, and placement rather than heavy decoration.
- Use generous internal padding: roughly 28–40px on desktop and 22–26px on mobile.
- Include author attribution at the bottom of each card, optionally with a small neutral avatar placeholder or initials, but do not let avatars dominate the layout.

### Interaction and accessibility
- If cards are clickable, provide a subtle hover treatment: slightly lift the card, deepen the border contrast, or shift the accent colour. Keep motion quick and understated.
- Respect `prefers-reduced-motion` and do not rely on animation to communicate meaning.
- Use semantic headings, blockquotes, and accessible author information. Maintain visible keyboard focus states.
- If there are more testimonials than fit naturally, use a deliberate carousel or “read more” interaction only when necessary; do not add controls merely for decoration.

### Content guidance
- Use believable, product-specific testimonial structure with a concise quote, full name, role, and organisation. Generate original placeholder content that matches the user's product and audience.
- Mix quote lengths so the mosaic has natural rhythm, but keep each testimonial easy to scan.
- Prefer concrete outcomes, changed behaviour, or an emotionally specific observation over generic praise.

### Never
- Never copy the reference's logos, product names, testimonial copy, illustrations, characters, screenshots, or imagery.
- Never reproduce the exact composition, card arrangement, wording, or brand identity from the reference.
- Never use the reference product's colours or typography unless they independently fit the user's brand.
- Never fill the section with invented logos, stock imagery, or decorative visuals that compete with the testimonials.