## 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/notion-com/9e072824-4b09-4216-9cff-06c643793f91-1789060359-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/notion-com/9e072824-4b09-4216-9cff-06c643793f91-1789060339-full.webp
- Component on Kage: https://kage.design/component/notion-testimonials

## Before you start
Ask the user what their product is, who the testimonials are from, and what their brand identity looks like. Then apply the principles below to create an original testimonial section for that product—do not reproduce the reference literally.

## Build a cinematic testimonial section
Create a responsive social-proof section with a large heading above a row of three testimonial cards. The section should feel editorial, confident, and human: use portraits or short testimonial-video thumbnails as atmospheric backgrounds, then layer readable content over them.

### Layout and alignment
- Place the section inside a centered container with a maximum width of roughly 1120–1200px.
- Use generous vertical whitespace above the section and a smaller, consistent gap between the heading and cards.
- Align the heading and card grid to the same left edge.
- Use a three-column grid on desktop with equal-width cards and a 20–28px gap.
- Make cards portrait-oriented, approximately 1.45–1.6 times taller than their width; use a minimum height around 420px so quotes have room to breathe.
- Collapse to one column on small screens, or use a horizontally scrollable row only if the surrounding product experience supports it. Preserve readable card widths and avoid cramped text.
- Make each card a positioning context with content anchored toward the bottom; reserve a small top zone for an optional customer mark or category label.

### Typography hierarchy
- Use a large, heavy sans-serif section heading, around 48–56px on desktop, with tight line-height around 0.95–1.05 and modest negative letter spacing. On mobile, scale it to roughly 34–40px.
- Set testimonial quotes in a contrasting serif or humanist typeface, around 18–21px with 1.35–1.5 line-height. Keep quotes to a manageable measure, typically 14–20 words per line depending on the card width.
- Use attribution text in a clean sans-serif at 13–15px, with slightly tighter line-height and enough contrast from the quote without competing with it.
- Use curly quotation marks only when they support the product’s voice; prioritise clear, authentic testimonial copy over decorative treatment.

### Colour and image treatment
- Start with a warm near-white page background such as #FAFAF8 or #FFFFFF and near-black text such as #111111.
- Give each card its own brand-neutral accent overlay—examples include coral red #E65345, deep blue #176AA3, and amber gold #C88A12—but tune these to the user’s brand palette.
- Use a full-bleed portrait or video still beneath the content. Apply a strong semi-transparent colour wash, approximately 55–75% opacity, so all cards feel related and text remains legible.
- Add a darker bottom gradient, for example rgba(0,0,0,.55) fading to transparent, behind the quote and attribution. Do not rely on colour alone for contrast.
- Keep optional customer marks monochrome or white and place them in the upper-left area with a consistent inset of roughly 22–26px.

### Borders, radius, and depth
- Use a medium-large corner radius around 12–16px, with overflow hidden so images and overlays follow the shape.
- Avoid heavy borders. If needed, use a subtle 1px rgba(0,0,0,.08) outline against the page background.
- Keep the cards flat and immersive; do not add pronounced drop shadows unless the surrounding design system requires them.

### Interaction and accessibility
- If cards represent videos or case studies, make the entire card a clear link or button and provide a visible hover state: gently increase image scale, shift the overlay, or reveal a small play/arrow affordance.
- Preserve the quote and attribution as selectable, semantic text rather than baking them into images.
- Add descriptive alt text for meaningful portraits; use empty alt text for decorative imagery.
- Ensure text maintains WCAG AA contrast across every image and accent colour, and provide keyboard focus styles that are visible against the card.
- Respect reduced-motion preferences by disabling zoom and overlay transitions when requested.

### Content structure
- Use three distinct testimonials with varied roles, companies, or customer types.
- Keep each quote specific and outcome-oriented, with the speaker’s name and role beneath it.
- Use an optional small customer label or mark at the top, but let the testimonial—not the logo—carry the section’s credibility.

## Never
- Never copy the reference’s logos, product names, customer names, exact testimonial copy, or distinctive brand marks.
- Never reuse the reference’s photographs, video stills, illustrations, or imagery.
- Never make the cards dependent on unreadable text over a busy image.
- Never use generic filler testimonials that sound identical across all cards.
- Never turn the section into a literal visual copy; adapt the layout principles, hierarchy, and atmosphere to the user’s product and brand.