## 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/raycast-com/85f2a082-cb21-4e6a-8485-365ffb9d735a-1789067517-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/raycast-com/85f2a082-cb21-4e6a-8485-365ffb9d735a-1789067491-full.webp
- Component on Kage: https://kage.design/component/raycast-testimonials

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

## Design the section
Build a dark, premium testimonial component for a modern software product. The section should feel calm and spacious, using customer proof as a supporting layer rather than the entire visual focus.

### Layout and alignment
- Use a full-width section inside a centered container, capped around 1120–1200px.
- Start with a compact section heading and optional supporting sentence aligned to the container’s left edge. Keep the heading visually modest rather than oversized.
- Present testimonials as a responsive grid of two or three cards. On desktop, use equal-width columns with generous gaps; on mobile, stack the cards vertically.
- Keep all card content aligned to a consistent internal grid. Place the quote or testimonial statement near the top, then put the author identity and role toward the bottom so cards feel balanced.
- If the section includes a secondary link or call to action, center it beneath the grid with generous vertical breathing room.
- Preserve large empty margins around the component. The section should not feel densely packed.

### Typography hierarchy
- Use a clean contemporary sans-serif system or brand typeface.
- Make the testimonial quote the strongest element: approximately 20–28px desktop, medium or semibold weight, tight line-height around 1.15–1.3.
- Use a small eyebrow, category, or section label at 12–14px with medium weight and increased letter spacing if needed.
- Render author names at 13–15px with a brighter colour and medium weight. Put company, title, or context beneath in 12–14px muted text.
- Keep supporting copy concise, with 15–17px size and relaxed line-height around 1.5.
- Avoid excessive bold text; use contrast and spacing to establish hierarchy.

### Colour
- Use a near-black background around #08090A or #0A0A0B.
- Use cards around #0D0E10 or transparent black so they remain only slightly distinct from the page.
- Use primary text around #F2F2F0.
- Use secondary text around #8A8B8F and tertiary metadata around #62646A.
- Use subtle borders around rgba(255,255,255,0.12), with a slightly brighter inner or hover border if appropriate.
- If the product has an accent colour, reserve it for small links, quote marks, avatars, or focus states rather than flooding the cards.
- Maintain accessible contrast for all essential testimonial text.

### Borders, radius, and depth
- Use thin 1px outlines instead of heavy shadows.
- Give cards a generous 18–24px corner radius, adapting to the product’s existing design language.
- Use 24–32px internal padding on desktop and 20–24px on mobile.
- Keep shadows extremely subtle or omit them entirely; the component should feel integrated into the dark canvas.
- If using avatars, make them small and understated, with a circular crop and no decorative framing unless the brand requires it.

### Interaction
- Make cards subtly responsive on hover: gently brighten the border, raise the card by 1–2px, or reveal a restrained accent glow.
- Keep transitions around 160–240ms with an ease-out curve.
- If testimonials are in a carousel, provide visible previous/next controls and pagination, preserve keyboard focus states, and avoid autoplay.
- Links should have a clear hover and focus treatment without becoming visually dominant.
- Respect reduced-motion preferences.

### Content guidance
- Use short, specific customer statements that communicate an outcome or change in workflow.
- Include enough author context to make the quote credible, but do not let metadata compete with the quote.
- Vary quote lengths carefully while keeping card heights consistent through layout rather than awkward truncation.

## Never
- Never reuse the reference’s logos, product names, customer names, testimonial copy, labels, or brand-specific language.
- Never copy the exact card arrangement, dimensions, spacing, or visual treatment; adapt the principles to the user’s product and brand.
- Never use illustrations, screenshots, decorative imagery, or avatar imagery from the reference.
- Never invent recognizable companies or imply endorsements that the user has not provided.
- Never sacrifice readability for an overly dark or low-contrast aesthetic.