## 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/speechmark/77b904ee-7a59-4d24-b7d4-3e274188b21e-1789106592-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/speechmark/77b904ee-7a59-4d24-b7d4-3e274188b21e-1789106544280-full.webp
- Component on Kage: https://kage.design/component/speechmark-testimonials

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

## Build this component
Create a full-width testimonial section designed to sit between major landing-page sections. Make the customer quote the primary visual and emotional focus, with a compact attribution beneath it.

### Layout and alignment
- Use a generous, responsive section with a strong coloured background and a centered content container.
- Keep the content column left-aligned rather than centered; on desktop, constrain it to roughly 760–980px so the quote forms a readable editorial measure.
- Provide substantial vertical padding, approximately 120–150px on desktop and 72–96px on mobile.
- Place the quote near the upper-middle portion of the section, with the attribution directly below and aligned to the same left edge.
- Add a small amount of quiet decorative geometry near the top edge—such as partially cropped overlapping circles or soft abstract shapes. Keep it subtle and secondary to the text.
- On narrow screens, reduce the quote size and padding while preserving the left alignment and clear hierarchy. Avoid forcing the quote into an awkward centered layout.

### Typography hierarchy
- Treat the testimonial as editorial display copy: large, italic, high-contrast text with generous line-height and natural wrapping.
- Use a refined serif or humanist italic display face for the quote if it suits the user’s brand; otherwise use the brand’s expressive display style with an italic or slanted treatment.
- Target approximately 48–64px quote text on desktop, 34–42px on mobile, with 1.08–1.2 line-height and slightly negative tracking where appropriate.
- Keep the attribution much quieter: approximately 13–16px, regular or medium sans-serif text, with the person’s name slightly stronger than their role or context.
- Avoid quotation marks unless they are a deliberate part of the brand system; the typography itself should signal that this is a testimonial.

### Colour
- Use a saturated, confident background tone, approximately deep cobalt blue such as #2467C3 or #286DCA. Adapt the hue to the user’s brand palette rather than treating this value as fixed.
- Set the testimonial in a warm off-white, approximately #F4F1E8, rather than stark white.
- Use a lower-contrast tint for the attribution, approximately #9FBCE1, while keeping it comfortably readable.
- For the decorative circles, use slightly lighter or darker blue overlays around #3478D2 and #1F5DB4 with restrained opacity.
- Ensure text contrast meets accessibility requirements, especially for the attribution.

### Borders, shapes, and spacing
- Prefer a clean, borderless colour field. Do not add a card container, shadow, or visible outer frame.
- Use large, soft geometric circles with full rounding and partial cropping at the section edge to create depth without becoming illustration.
- If an avatar is included, use a small circular, abstract colour mark or initials only when the user has suitable testimonial data; do not invent a portrait.
- Keep roughly 28–40px between the final quote line and attribution, and 8–12px between the person’s name and role line.
- Maintain a restrained, editorial rhythm: one dominant quote, one compact attribution, generous surrounding negative space.

### Interaction and accessibility
- This can be a static testimonial, but if there are multiple testimonials, provide discreet previous/next controls or pagination outside the main reading flow.
- Make controls keyboard accessible, with visible focus states and accessible labels.
- Respect reduced-motion preferences; any quote transition should be subtle and never distract from reading.
- Use semantic markup such as a `figure`, `blockquote`, and `figcaption`, and ensure the section remains legible at zoom and on small screens.

## Never
- Never use the reference brand’s logo, product name, testimonial wording, person name, role, or other identifying copy.
- Never copy the exact typeface, dimensions, decorative arrangement, or colour values if they do not fit the user’s brand.
- Never use imagery, portraits, illustrations, or invented customer details from the reference.
- Never make the quote so wide, small, or low-contrast that it loses its editorial impact.
- Never turn the testimonial into a generic bordered card when the design calls for a bold, immersive section.