## 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/sentry-io/7f1d8e63-d1c6-4f27-8b0e-be764e2f10af-1789073905-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/sentry-io/7f1d8e63-d1c6-4f27-8b0e-be764e2f10af-1789073848-full.webp
- Component on Kage: https://kage.design/component/sentry-testimonials

## Before you start
Ask the user what their product is, who it is for, and what their brand identity looks like. Then apply the principles below to create a version for that product—do not reproduce the reference literally.

## Build a dark testimonial section
Create a standalone customer-testimonials section for a software product. The composition should feel editorial, confident, and developer-oriented rather than like a conventional card carousel.

### Layout and alignment
- Use a deep full-width background section with a centered content container, approximately 1120–1200px wide.
- Add generous vertical padding, around 96–140px on desktop and 64–88px on mobile.
- Place a large headline in the upper-left area of the container. Keep the heading width constrained so it wraps into two or three intentional lines.
- Use a three-column testimonial grid beneath the heading, with consistent column starts and generous horizontal gaps of roughly 48–72px.
- On medium screens, reduce the gap and allow narrower columns; on small screens, stack the testimonials vertically while preserving clear separation between entries.
- Align each quote, attribution, avatar, and role within its own column. Avoid enclosing each testimonial in a visible card unless the product’s brand specifically calls for it.

### Typography hierarchy
- Use a modern sans-serif with strong weight contrast and excellent readability. A system stack or a geometric grotesk is appropriate.
- Set the section heading in a bold or extra-bold display style, approximately 48–64px on desktop with tight line-height around 0.95–1.05. Scale to roughly 36–44px on mobile.
- Make one meaningful word or phrase in the heading a vivid accent colour to create a visual focal point.
- Set testimonial quotes in an italic or subtly expressive style, around 18–21px with 1.25–1.4 line-height. Keep the text readable and avoid overly thin weights.
- Use compact attribution names in a semibold or bold style, around 14–16px.
- Set job titles and company context below each name in a smaller, muted 13–15px size with comfortable line-height.

### Colour
- Use a near-black indigo-purple background such as #171225 or #1B142A.
- Use warm off-white for the primary heading and quote text, such as #F7F5F2.
- Use a saturated pink-magenta accent for the highlighted heading phrase, such as #F238A8 or #E83C9D.
- Quote marks may use a small two-tone gradient or a pair of warm accents, for example #FFB347 and #F04C9A, while remaining understated.
- Use a softened lavender-gray such as #B8B0C7 for secondary attribution text.
- Maintain strong contrast and do not introduce many competing colours.

### Quote and attribution treatment
- Begin each testimonial with a small decorative pair of quotation marks positioned above the quote. Make them visually distinctive but compact.
- Keep quote lengths varied enough to create a natural editorial rhythm, while ensuring the three columns still feel balanced.
- Place attribution beneath the quote with a small circular avatar or abstract monogram placeholder, approximately 48–56px diameter.
- Keep the avatar visually simple and brand-neutral; it can use a light background with a small initials treatment or generic mark generated for the user’s product.
- Position the person’s name and role to the right of the avatar on larger screens. On narrow screens, retain a clean horizontal attribution row.

### Borders, radius, and spacing
- Prefer no outer borders around the testimonial columns. The background and spacing should define the structure.
- If separators are needed, use extremely subtle 1px lines in a low-opacity pale lavender, never heavy card outlines.
- Use small or no corner radii for the editorial layout; avatar circles should be fully round.
- Leave approximately 28–36px between the quote mark and quote, 24–32px between quote and attribution, and 8–12px between the person’s name and role.

### Interaction and responsive behaviour
- This section can be static, but support a gentle hover state on each testimonial: slightly brighten the quote mark or shift the quote colour without causing layout movement.
- If the content set is larger than three testimonials, use a minimal carousel or “show more” interaction that preserves the editorial layout and includes accessible keyboard controls.
- Ensure focus states are visible and keyboard navigation is logical.
- Respect reduced-motion preferences and avoid autoplaying testimonial transitions.

### Content guidance
- Write concise, specific customer statements that communicate an outcome, not generic praise.
- Include a real-sounding person name, role, and company context supplied by the user or represented with neutral placeholders.
- Keep the section focused on trust and practical product value; do not overload it with ratings, badges, or extra calls to action.

## Never
- Never copy the reference’s logos, product names, customer names, testimonial copy, or exact wording.
- Never reuse the reference’s brand identity or present the result as an imitation of that company.
- Never include the reference’s illustrations, imagery, screenshots, or decorative assets.
- Never use the reference’s exact layout proportions, typography, colours, or spacing as fixed values; adapt the principles to the user’s product and brand.
- Never use fabricated customer claims as if they were verified; clearly use placeholders or user-provided proof where necessary.