## 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/mintlify-com/71224961-d985-451b-9e35-e02eddcee178-1789060646-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mintlify-com/71224961-d985-451b-9e35-e02eddcee178-1789060616-full.webp
- Component on Kage: https://kage.design/component/mintlify-gallery-2

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual identity are. Then apply the principles below to create an original version for that product rather than reproducing the reference.

## Build this section
Create a responsive social-proof section made of testimonial cards followed by a clear transition into a latest-content or updates section. The section should feel calm, credible, spacious, and editorial—not like a dense review carousel.

### Layout and alignment
- Use a centered content container with a subtle vertical rule or edge alignment cue on the left, if it fits the product's brand.
- Present testimonials in a three-column grid on desktop. Use equal-width cards with consistent heights and a modest horizontal and vertical gap.
- Let each card contain an attribution row near the top and the testimonial body below it. Keep all text left-aligned.
- For responsive layouts, collapse to two columns at medium widths and one column on small screens; preserve comfortable card padding and avoid horizontal overflow.
- After the testimonial grid, leave a noticeably generous vertical pause before the next section. Use this whitespace as a deliberate transition rather than filling it with decoration.
- Introduce the next section with a horizontal header row: a small vertical accent line and large heading on the left, plus a compact action button on the right. Stack the heading and button on narrow screens.

### Card anatomy
- Each testimonial card should include a small avatar, abstract brand mark, or neutral identity tile, followed by a person's name and role/company line.
- Keep the testimonial copy visually dominant after the attribution, with enough line-height to remain readable.
- Use varied but realistic testimonial lengths while maintaining a consistent overall rhythm.
- Do not add star ratings unless they are genuinely appropriate to the user's product.

### Typography
- Use a modern sans-serif with a highly legible body cut; use the product's own font if available.
- Use approximately 14–16px for testimonial text and 13–14px for attribution metadata.
- Use a 32–40px semibold heading for the updates transition on desktop, scaling to 28–32px on mobile.
- Keep body line-height around 1.45–1.6 and metadata line-height around 1.3–1.4.
- Use restrained weight contrast: semibold for names and section headings, regular for quotes and roles.

### Spacing
- Set the desktop container width around 1080–1180px, with 24–32px horizontal page padding.
- Use approximately 16px card gaps and 18–24px card padding.
- Give the attribution row around 26–32px of height, with 12–16px between it and the testimonial copy.
- Preserve a large transition gap of roughly 160–220px between the card grid and the updates header, reducing it on mobile.
- Give the updates header 40–64px of vertical breathing room and align its bottom edge with the action button.

### Colour and surface
- Start with a warm off-white page background around `#FCFCFA` or `#FAFAF8`.
- Use near-black primary text around `#151515`, muted metadata around `#5F625F`, and a very light neutral card surface around `#F7F7F3`.
- Define card borders with a subtle warm gray such as `#E7E7E1`; keep contrast low and avoid heavy shadows.
- Use one restrained brand accent for the section marker, approximately `#2A9D78`, but adapt it to the user's brand colour.
- Use a near-black filled action button around `#111111` with white text for strong but compact emphasis.

### Borders, radius, and controls
- Give cards a small radius around 5–8px and a 1px low-contrast border.
- Keep card surfaces mostly flat; if using a shadow, make it extremely soft and nearly imperceptible.
- Use a compact action button with 10–14px horizontal padding, 9–12px vertical padding, a 4–6px radius, and a subtle right-arrow or chevron.
- On hover, slightly darken the button or raise its contrast; provide visible keyboard focus styles.
- If testimonial cards are interactive, use a restrained border or surface transition on hover, but do not make the entire section feel animated.

### Content and accessibility
- Write concise, believable testimonials specific to the user's product category, but do not reuse any reference wording.
- Use semantic section, heading, list, and button/link elements.
- Ensure text and controls meet accessible contrast requirements, and provide meaningful alt text for any identity marks or avatars.
- Keep the grid understandable without relying on colour alone.

## Never
- Never copy the reference's logos, product names, people, companies, testimonial wording, or button label.
- Never use the reference's illustrations, imagery, avatars, or brand marks.
- Never reproduce the exact text, layout proportions, or visual identity; use the structural principles to create a version that belongs to the user's product.
- Never make the cards overly glossy, crowded, or dependent on a carousel interaction when a simple grid is clearer.