## 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/viso-now/0aea1f2c-e643-44c4-ac70-db26df0b3931-1789106576-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/viso-now/0aea1f2c-e643-44c4-ac70-db26df0b3931-1789106536289-full.webp
- Component on Kage: https://kage.design/component/viso-now-testimonials

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

## Build a quantified customer-story testimonial section
Create a wide, editorial-style testimonial block that turns one customer outcome into a strong piece of social proof. The section should feel precise, calm, and high-confidence, with the quote and attribution on the left and a four-item results grid on the right.

### Content structure
- Add a small eyebrow label above the story, optionally preceded by a tiny coloured dot. Use a generic label such as “Customer story” only if it suits the user’s product; otherwise write product-specific but original copy.
- Use a prominent multi-line testimonial or outcome statement as the primary content. Make it specific and credible, focusing on a before-and-after transformation rather than vague praise.
- Allow one key result inside the statement to use the brand accent colour for emphasis, such as a percentage, time reduction, or other measurable outcome.
- Add an attribution row below the statement with a circular avatar treatment containing initials or a neutral placeholder, followed by the customer’s name and role/company descriptor.
- On the right, show four supporting metrics in a 2×2 grid. Each item should contain an oversized value, a short result label, and a smaller contextual qualifier. Use realistic, product-relevant metrics supplied by the user or clearly marked placeholders—never invent claims that could be presented as factual.

### Layout and alignment
- Use a pale, almost-white background panel distinct from the surrounding page, with generous vertical padding.
- Constrain the content to a centred max-width container, approximately 1120–1240px, with consistent horizontal gutters.
- On desktop, divide the section into two columns: the testimonial should occupy roughly 55–60% of the width and the metrics 40–45%. Align the top of both columns near the eyebrow/story area.
- Keep the testimonial text measure controlled, approximately 480–560px, so it wraps into deliberate editorial lines rather than becoming a long paragraph.
- Build the metric area as two equal columns and two rows. Add thin horizontal rules between rows or beneath metric items; do not over-box every metric with heavy cards.
- On smaller screens, stack the story above the metric grid. Preserve the 2×2 metric layout where space allows, then collapse to a single column only when necessary.
- Ensure the attribution and metric baselines feel optically aligned, with whitespace doing most of the separation.

### Typography hierarchy
- Use a modern sans-serif with a clean, slightly humanist or geometric character. Match the user’s existing brand font when available.
- Make the testimonial the dominant text element: approximately 30–42px desktop, 1.08–1.2 line-height, medium or semibold weight. Use responsive sizing down to roughly 25–30px on mobile.
- Style the eyebrow in uppercase or small caps with generous letter spacing, around 10–12px, medium weight, and muted grey text.
- Make metric values bold and highly visible, approximately 48–64px desktop with tight line-height. Keep units such as %, ×, or /7 visually integrated with the number.
- Use 13–16px for metric labels and 11–13px for qualifiers, with enough contrast difference to establish hierarchy.
- Attribution name should be compact and semibold; role or company should be smaller and muted.

### Colour and visual language
- Start from the user’s brand palette. If no palette exists, use near-black text around `#0A0A0A`, muted secondary text around `#6F6F73`, a soft background around `#FAFAFA` or `#F8F8F8`, and dividers around `#E5E5E5`.
- Choose one restrained accent colour for the eyebrow dot and highlighted result, such as a warm magenta around `#C85BB5`, but adapt it to the product’s brand.
- Keep the majority of the section monochrome so the metrics and evidence remain the focus.
- Make all text and rules accessible against their backgrounds; do not use low-contrast grey for essential information.

### Borders, radius, and spacing
- Prefer subtle 1px dividers and whitespace over card decoration.
- Keep the main section square or use only a modest radius, approximately 0–12px, depending on the surrounding design system.
- If using an avatar circle, make it approximately 48–56px with a soft tinted background and dark initials.
- Use a spacing rhythm based on 8px increments: generous section padding, roughly 80–120px vertically on desktop; 48–72px on mobile.
- Leave approximately 24–40px between the eyebrow and testimonial, 28–40px before the attribution, and 28–48px between metric items.

### Interaction and accessibility
- This is primarily a static proof section; avoid unnecessary carousels or auto-rotating testimonials.
- If multiple customer stories are included, provide visible, keyboard-accessible controls and preserve the same layout when switching stories. Announce changes to screen readers.
- Use semantic markup: a `section` with a heading or labelled region, a `blockquote` for the testimonial, and descriptive text for every metric.
- Ensure responsive wrapping, keyboard focus states, reduced-motion support, and readable text at increased browser zoom.

### Never
- Never reuse logos, product names, customer names, exact testimonial copy, exact metrics, or distinctive wording from the reference.
- Never copy the reference’s illustrations, imagery, avatar treatment, brand marks, or proprietary visual assets.
- Never fabricate customer evidence or imply that placeholder metrics are verified results.
- Never make every item a heavy bordered card, use decorative gradients that distract from the proof, or sacrifice accessibility for visual similarity.