## 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/superhuman-com/aa0f5749-a8ae-405c-9afb-679f6a47222d-1789060755-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/superhuman-com/aa0f5749-a8ae-405c-9afb-679f6a47222d-1789060721-full.webp
- Component on Kage: https://kage.design/component/superhuman-testimonials

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

## Design language

Build a single featured-testimonial section designed to create trust through focus, clarity, and generous negative space.

### Layout and alignment
- Use a full-width section with a soft, lightly tinted background distinct from the surrounding page.
- Center the entire content group horizontally and vertically within the section.
- Constrain the quote to a readable medium width, approximately 680–780px on desktop, so the text forms a compact editorial block rather than spanning the viewport.
- Stack the quote, attribution, role/company context, and supporting link in a clear vertical rhythm.
- Keep the composition intentionally sparse: one testimonial should be the visual focus, with no competing cards, avatars, logos, or decorative graphics.
- On smaller screens, reduce the horizontal padding and allow the quote to wrap naturally while preserving centered alignment.
- Use a section height driven by content and generous vertical padding rather than forcing a fixed-height panel.

### Typography hierarchy
- Make the testimonial the dominant element: use a large, modern sans-serif display size around 34–40px on desktop, with a line height around 1.15–1.25 and normal or slightly tight letter spacing.
- Use curly quotation marks as part of the quote, but avoid making them oversized decorative ornaments.
- Allow selective phrases that express the strongest benefit to use a heavier weight, such as 700, while keeping the rest at a regular weight. Apply this sparingly and only where it improves scanning.
- Set the customer’s name below the quote in a smaller but still prominent size, around 15–17px, using a dark text colour and medium weight.
- Set the role and organization in a muted 15–17px size with a comfortable line height.
- Style the supporting text link as a compact 15–16px action, with a subtle arrow or chevron indicating navigation.
- On mobile, scale the quote down to roughly 27–32px and keep the attribution legible without excessive shrinking.

### Spacing
- Use approximately 96–120px of vertical padding on desktop and 64–80px on mobile.
- Leave 24–32px between the quote and the customer name.
- Leave 6–10px between the name and role/company line.
- Leave 30–38px between the attribution and the supporting link.
- Keep the overall section rhythm calm and spacious; do not compensate for the lack of imagery with extra UI elements.

### Colour
- Use a very pale lavender or brand-tinted surface, approximately `#E9E3FF` to `#EEE9FF`, rather than a stark white background.
- Use a near-black charcoal for the quote and name, approximately `#202024`.
- Use a cool muted grey for the role and company line, approximately `#6D6A78`.
- Use a deeper violet for the supporting link, approximately `#65508F`, ensuring it remains readable against the tinted background.
- Adapt these values to the user’s brand palette while preserving strong contrast and a quiet, premium mood.

### Borders and radius
- Do not use cards, visible borders, drop shadows, or container outlines around the testimonial.
- Keep the section surface edge-to-edge and flat.
- If the surrounding design requires a boundary, use only a very subtle 1px tonal divider, approximately `#DED8F2`.
- Avoid rounded panels; the testimonial should feel like an editorial band in the page rather than a floating component.

### Interaction
- Make the supporting link a clear, keyboard-accessible text link with a subtle right-pointing chevron or arrow.
- On hover, slightly darken the link and shift the arrow a few pixels to the right; keep the transition quick and understated.
- Provide visible focus styling with a high-contrast outline or underline.
- If multiple testimonials are required for the product, preserve this same single-focus composition and use unobtrusive previous/next controls or a controlled rotation—never introduce a dense carousel UI that competes with the quote.
- Ensure the quote remains readable and stable while any testimonial changes; avoid distracting motion.

### Content guidance
- Use a concise first-person statement focused on a tangible product outcome.
- Attribute it to a real person or a clearly labeled persona only when appropriate for the user’s product.
- Keep the role and organization contextual but brief.
- Make the benefit specific and credible; avoid exaggerated claims or generic praise.

## Never
- Never copy the reference’s logo, product name, customer name, testimonial wording, role, organization, or link label.
- Never reuse the reference’s exact colour values as a fixed brand identity; reinterpret the palette for the user’s product.
- Never include logos, product names, copy, illustrations, photography, avatars, or imagery from the reference.
- Never turn the section into a dense grid of testimonial cards.
- Never add decorative imagery, oversized quotation marks, heavy shadows, gradients, or ornamental UI that weakens the focused editorial composition.
- Never sacrifice responsive readability, semantic HTML, keyboard access, or colour contrast for visual similarity.