## 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-1789060564-9.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-faq

## Before you start
Ask the user what their product is, who it serves, and what their brand identity is. Then apply the principles below to create a version for their product rather than reproducing the reference.

## Build an editorial testimonial grid
Create a social-proof section with six customer testimonial cards arranged in a three-column by two-row grid on desktop. The section should feel calm, premium, human, and editorial: let the quoted experiences carry the visual weight instead of adding decorative graphics or an oversized heading.

### Layout and alignment
- Place the grid inside a centered content container with a maximum width of approximately 1040–1120px.
- Use three equal-width columns with a compact, consistent gap of about 14–18px horizontally and vertically.
- On desktop, keep every card the same overall height within each row, with content aligned to the top and attribution anchored near the bottom so the grid feels orderly even when quote lengths differ.
- Use generous outer margins and avoid stretching cards edge to edge across the viewport.
- At tablet widths, switch to two columns; at narrow mobile widths, use one column with a 12–16px gap.
- Maintain a minimum horizontal page padding of 20px on mobile and roughly 32px on larger screens.

### Card structure
- Each card is a lightly contrasting, near-white surface on a warm off-white page background.
- Add a short quote as the primary content, using real customer language with varied but controlled lengths. Use typographic quotation marks or a subtle quote treatment, but do not add a large decorative quote icon.
- Place a compact attribution row toward the bottom: a small circular avatar, then the person’s name in a darker, semibold style, followed by role and company in smaller muted text.
- If relevant to the product, include a tiny monochrome credibility marker beside the attribution, but keep it secondary and unobtrusive.
- Keep the attribution row horizontal and vertically centered; allow the role/company line to wrap gracefully on small cards.

### Typography
- Use a clean modern sans-serif with a slightly editorial feel; use the user’s brand font when available and a neutral system fallback otherwise.
- Quote text: approximately 16px desktop, 15–16px mobile, 1.55–1.65 line height, regular weight, and a dark charcoal such as `#242321`.
- Customer name: approximately 13–14px, semibold, with the same dark charcoal.
- Role and company: approximately 12–13px, regular weight, in a soft gray such as `#8A8580`.
- Keep quote line lengths comfortable inside each card, with approximately 24–26px internal horizontal padding and 26–30px vertical padding.

### Colour, borders, and shape
- Use a warm cream page background around `#F4F0EA` or adapt it to the user’s brand palette.
- Use card surfaces around `#FBF9F6` or `#FCFAF7`, with a subtle border such as `1px solid #E5E0D9`.
- Use restrained contrast; this component should feel softer than a stark white dashboard.
- Give cards a medium rounded corner radius of approximately 20–22px.
- Avoid heavy shadows. If depth is needed, use an extremely subtle shadow such as `0 1px 2px rgba(40, 32, 24, 0.03)`.
- Avatar images should be circular, approximately 36–40px, with a neutral fallback background if an image is unavailable.

### Interaction and accessibility
- The cards may remain static, but add a very subtle hover treatment on desktop: a slight border darkening or 1px upward translation, never a dramatic lift.
- If testimonials link to a case study or profile, make the whole card or a clearly defined area keyboard accessible and show a visible focus ring.
- Preserve readable contrast, semantic blockquote markup, meaningful alt text for avatars, and responsive text wrapping.
- Do not allow hover effects to change card heights or disturb grid alignment.

### Content behavior
- Use six concise testimonials that demonstrate different outcomes, use cases, or customer types.
- Keep each quote to roughly 2–5 lines on desktop when possible, but prioritize authentic content over forced uniformity.
- Use believable names, roles, and organizations generated for the user’s product; do not reuse content from the reference.

## Never
- Never copy the reference’s logos, product names, customer names, testimonial copy, or company names.
- Never use the reference’s portraits, avatars, illustrations, or imagery.
- Never reproduce the exact brand, wording, data, or visual identity of the reference.
- Never add a large hero treatment, decorative illustration, or unrelated imagery that competes with the testimonials.
- Never sacrifice accessibility, responsive behavior, or content authenticity to make every quote identical in length.