## 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/arc-net/a4b44bb4-fce3-4305-950f-d12af4bc9a59-1789060397-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/arc-net/a4b44bb4-fce3-4305-950f-d12af4bc9a59-1789060376-full.webp
- Component on Kage: https://kage.design/component/arc-testimonials

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

## Design the section
Build a bold, editorial testimonial section that turns social proof into a full-bleed brand moment. It should feel energetic, slightly surreal, and campaign-like while remaining legible and conversion-aware.

### Layout and alignment
- Create a full-width section with a saturated colour field and a generous vertical height, roughly 700–900px on desktop and 620–760px on mobile.
- Use a centered content column with a maximum width of about 900px for the primary quote.
- Place one prominent testimonial in the upper-middle of the section. Keep the quote to two or three lines on desktop, with a narrower readable measure on smaller screens.
- Add a small publication or customer attribution directly beneath the quote, using an all-caps or compact label treatment.
- Below the attribution, include an optional short qualification, trust note, or product caveat in a smaller width-limited block.
- Place one or two clear calls to action beneath the quote when relevant to the product. Keep them horizontally aligned on desktop and stacked on mobile.
- If the product benefits from demonstration, reserve the lower half for a cropped product screenshot, device frame, or interface preview. Let it overlap the section's lower edge rather than treating it as a separate card.
- Finish with a shallow contrasting ticker or quote rail pinned to the bottom edge. Show several short testimonials or publication references in one horizontal row; allow horizontal scrolling on narrow screens.
- Keep the primary quote, attribution, actions, and visual preview on a strong central axis. The bottom rail can use a different alignment rhythm to create movement.

### Typography hierarchy
- Use a contemporary grotesk or geometric sans with a friendly, modern feel.
- Make the primary quote large and weighty: approximately 44–64px desktop, 32–42px mobile, with tight line-height around 0.95–1.05.
- Use quotation marks sparingly and integrate them into the composition rather than making them oversized decoration.
- Set attribution at 15–20px, bold or semibold, with enough contrast to read against the background.
- Set qualification text at 12–14px with relaxed line-height and slightly reduced opacity.
- Use 13–16px semibold text for buttons and 14–17px bold text for the bottom testimonial rail.
- Keep line lengths short and preserve generous breathing room around the main quote.

### Colour and texture
- Start with a vivid electric blue or indigo base, approximately `#3028E8` to `#4338F2`.
- Add a subtle gradient or soft radial lighting variation using nearby blues and violets such as `#5B4BFF` and `#2420B8`.
- Introduce fine grain/noise at low opacity to prevent the large colour field from feeling flat. The texture should be atmospheric, not distracting.
- Use near-white text such as `#F4F3FF` for the primary quote.
- Use a slightly translucent white for secondary copy, around `rgba(244,243,255,.68)`.
- Make the primary action a pale lavender or off-white fill, approximately `#B9B6FF` or `#E8E7FF`, with deep indigo text. Use a darker translucent blue treatment for the secondary action.
- Make the bottom rail a warm off-white, approximately `#FFFDF2`, with saturated indigo text around `#3028B8`.
- Ensure all text and controls meet accessible contrast standards despite the expressive colour treatment.

### Borders, radius, and depth
- Use soft rounded corners on buttons, approximately 10–14px, with a restrained pill-like feel rather than a fully circular capsule.
- Keep the main section edge-to-edge and avoid a conventional enclosing card.
- Use a lightly rounded product preview frame, approximately 10–18px, with a subtle border or translucent highlight.
- Give the preview a soft shadow and allow it to be partially cropped to make the section feel immersive.
- Separate the bottom rail with a clean boundary, a slim border, or a playful scalloped/wavy edge if it fits the brand.

### Interaction and responsive behaviour
- Add restrained hover feedback to buttons: slight brightness increase, 1–2px lift, and a quick 160–220ms ease-out transition.
- Make the bottom testimonial rail horizontally scrollable on mobile, with clipped overflow and no visible heavy scrollbar.
- If multiple testimonials are available, support gentle auto-rotation or a manual carousel, but do not rotate so quickly that the quote cannot be read. Include accessible controls and pause behaviour.
- Keep the main testimonial stable while the product preview, ticker, or subtle background texture supplies motion.
- On mobile, reduce the quote size, stack actions, place the preview below the actions, and preserve the bottom rail as a compact horizontal strip.
- Respect reduced-motion preferences by disabling auto-rotation and nonessential movement.

## Never
- Never reuse logos, product names, publication names, customer names, or exact copy from the reference.
- Never reproduce the reference's specific browser/product screenshot, device mockup, or imagery.
- Never copy the exact composition, dimensions, decorative edge treatment, or branded visual identity; reinterpret the underlying testimonial hierarchy for the user's product.
- Never use illustrations or imagery from the reference.
- Never make the quote so large or low-contrast that attribution, qualification, or calls to action become inaccessible.