## 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/linear-app/3b71fb78-773e-45c4-803c-426bf7f1ae53-1789060209-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/linear-app/3b71fb78-773e-45c4-803c-426bf7f1ae53-1789060182-full.webp
- Component on Kage: https://kage.design/component/linear-testimonials

## Before you start
Ask the user what their product is, who it is for, and what their brand personality and visual identity are. Then apply the principles below to create a testimonial section tailored to that product—not a copy of the reference.

## Design the section
Build a dark, editorial-style testimonials section for the user's product. Treat the component as a calm transition between major page sections: it should feel spacious, intentional, and premium rather than like a dense review carousel.

### Layout and alignment
- Use a full-width near-black section, with content constrained to a centered max-width of approximately 1180–1280px.
- Create a clear vertical rhythm with generous top and bottom padding, approximately 96–160px on desktop and 64–96px on mobile.
- Align all text to a consistent content rail. Keep the section heading and testimonial content on the same underlying grid.
- Use a responsive editorial layout: on wide screens, arrange testimonials in two or three balanced columns or a wide quote area with supporting attribution; on narrow screens, stack them into a single column.
- Keep each testimonial compact enough to scan, but give the quote enough width and line height to feel considered.
- Separate testimonial groups with subtle vertical or horizontal rules rather than cards whenever possible. Avoid excessive boxed UI.
- If the section is followed by another section, use a quiet full-width divider to establish the transition.

### Typography hierarchy
- Use a clean modern sans-serif or the user's brand typeface.
- Make the section heading large and crisp, approximately 32–44px on desktop and 28–34px on mobile, with medium weight and slightly tight tracking.
- Set testimonial quotes in a readable 18–24px range with 1.35–1.5 line height. Use brighter text for the quote than for metadata.
- Style names, roles, companies, or other attribution details at 12–14px with moderate contrast and clear grouping.
- Keep supporting labels and navigation-like text restrained: 13–15px, with relaxed letter spacing where appropriate.
- Avoid oversized marketing claims, all-caps treatments, or too many competing text sizes.

### Colour
- Use a near-black background around `#08090A` or `#0B0C0D`.
- Use primary text around `#F2F3F4` and secondary text around `#8B8F94`.
- Use subdued dividers around `#24272A` or `rgba(255,255,255,0.12)`.
- If the user's brand has an accent colour, use it sparingly for links, small indicators, or interactive states—not for every testimonial element.
- Preserve strong but soft contrast; the mood should be quiet, polished, and focused.

### Borders and radius
- Prefer 1px low-contrast rules and understated separators.
- Use little or no radius for the editorial layout. If testimonials become individual responsive panels, use a restrained 8–12px radius.
- Do not add heavy shadows, gradients, glass effects, or decorative outlines unless they are essential to the user's brand.

### Interaction and responsive behaviour
- If testimonials are interactive, make the entire quote or a clearly labelled control discoverable and keyboard accessible.
- Use subtle hover and focus states: slightly brighter text, a gentle border change, or a small accent shift. Avoid dramatic motion.
- If using a carousel on mobile, include visible previous/next controls, an accessible label, keyboard support, and pagination indicators; do not rely on auto-rotation.
- Respect reduced-motion preferences.
- Ensure long quotes wrap naturally, attribution never becomes cramped, and the layout remains balanced from mobile through wide desktop sizes.

## Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never reproduce the reference site's exact testimonial wording, layout measurements, branding, or visual assets.
- Never invent recognizable customer identities or imply endorsements that the user has not supplied.
- Never make the section so dark or low-contrast that quotes and attribution become difficult to read.