Dashlane — security-leader testimonial carousel

---
version: alpha
name: Dashlane — security-leader testimonial carousel
colors:
  primary: rgb(162, 246, 245)
  text: rgb(252, 250, 249)
  surface: rgb(32, 15, 10)
  panel: rgb(43, 37, 56)
typography:
  heading:
    fontFamily: Saans, sans-serif
    fontSize: 56px
    fontWeight: 300
    lineHeight: 61.6px
  supporting:
    fontFamily: Saans, sans-serif
    fontSize: 28px
    fontWeight: 300
    lineHeight: 33.6px
omitted:
- section: spacing
  reason: Exact geometry is recorded in Layout; no unobserved global spacing scale
    is inferred.
- section: rounded
  reason: Shapes are described from the capture; no global corner scale is inferred.
- section: components
  reason: This reference uses prose composition rules rather than an invented component-token
    API.
---

## Overview

A testimonial rail with an oversized light heading, circular navigation controls, purple-gray quote cards, customer logos and compact author attribution.

Captured from https://www.dashlane.com/ at 2026-10-12T06:08:54.471544+00:00. This is a static reference in a logged-out browser, not a tested application flow.

## Colors

primary: `rgb(162, 246, 245)`; text: `rgb(252, 250, 249)`; surface: `rgb(32, 15, 10)`; panel: `rgb(43, 37, 56)`. Text and action values are computed CSS samples; decorative artwork contains additional colors and is not reduced to a fabricated palette.

## Typography

Use the measured families and sizes rather than substituting an unrelated display face. The matching heading is measured at 36px / 39.6px on mobile.

- `h2` “Trusted by security leaders”: 56px, weight 300, line-height 61.6px, color `rgb(252, 250, 249)`.
- `p` ““With Dashlane, we’ve been able to take a more intelligent, proactive approach to red”: 28px, weight 300, line-height 33.6px, color `rgb(252, 250, 249)`.
- `p` “Aidan Turner”: 18px, weight 300, line-height 27px, color `rgb(252, 250, 249)`.
- `p` “Manager of Identity & Access Management, Downer Group”: 12px, weight 300, line-height 18px, color `rgb(252, 250, 249)`.
- `p` ““I had little to no insight into credential health and exposure for non-domain accoun”: 28px, weight 300, line-height 33.6px, color `rgb(252, 250, 249)`.
- `p` “Mike Parkin”: 18px, weight 300, line-height 27px, color `rgb(252, 250, 249)`.

## Layout

At desktop width, show the first wide card and a deliberate preview of the next card. Keep customer logo at the top, quote in the middle, and portrait/name/role together at the bottom. The mobile capture presents the first card with the heading above it; desktop arrow controls are not visible in this mobile state. Carousel controls were not activated. These are source testimonials, not newly asserted endorsements.

Measured desktop region: 1439.78 × 806.56px at a 1440px viewport. Measured mobile region/page: 389.78 × 589.19px at a 390px viewport. The primary image is only the selected element; use selector `#main-content section:has(button[aria-label="Next testimonial"])` to identify its boundary. Desktop and mobile were warmed up, measured, and cropped from fresh full-page captures.

## Elevation & Depth

Use a thin light card border, modest rounding and a flat violet-gray fill on espresso. Small circular portrait crops and circular arrow controls soften the otherwise rectangular composition. Preserve enough card padding for long quotes; do not compress the quote into a decorative caption.

## Shapes

Follow the silhouette visible in this reference, including the relative contrast between rectangular content blocks and decorative artwork. Sampled text nodes have no intrinsic radius; that does not imply every surrounding card is square. Do not infer hover elevation, focus rings, or animation curves from this still image.

## Components

At desktop width, show the first wide card and a deliberate preview of the next card. Keep customer logo at the top, quote in the middle, and portrait/name/role together at the bottom. The mobile capture presents the first card with the heading above it; desktop arrow controls are not visible in this mobile state. Carousel controls were not activated. These are source testimonials, not newly asserted endorsements.

All depicted copy, illustration, product data and any customer proof come from the source page. Retain attribution when discussing source examples; replace marketing claims with your own verified content when adapting the pattern. Only explicitly described responsive states were inspected.

## Do's and Don'ts

- Do preserve the section hierarchy, text wrapping and measured spacing relationships.
- Do keep readable labels and meaningful action text when adapting this layout.
- Don't reuse source customer claims as your own evidence.
- Don't claim tested validation, checkout, account creation, keyboard navigation or carousel behavior; these were not exercised.