Dashlane — espresso and aqua security landing

---
version: alpha
name: Dashlane — espresso and aqua security landing
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: 72px
    fontWeight: 300
    lineHeight: 79.2px
  supporting:
    fontFamily: Saans, sans-serif
    fontSize: 18px
    fontWeight: 300
    lineHeight: 27px
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

An enterprise security homepage using an espresso background, light-weight oversized type, aqua actions, animated product artwork, violet proof cards, and a framed closing CTA.

Captured from https://www.dashlane.com/ at 2026-10-12T06:07:18.637437+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 48px / 52.8px on mobile.

- `h1` “Prevent credential breaches”: 72px, weight 300, line-height 79.2px, color `rgb(252, 250, 249)`.
- `h2` “Protect more. Manage less.”: 56px, weight 300, line-height 61.6px, color `rgb(252, 250, 249)`.
- `h3` “Stop credential risk in the browser”: 56px, weight 300, line-height 61.6px, color `rgb(252, 250, 249)`.
- `h3` “An encrypted vault for every credential”: 48px, weight 300, line-height 52.8px, color `rgb(252, 250, 249)`.
- `h3` “Share access without sharing risk”: 48px, weight 300, line-height 52.8px, color `rgb(252, 250, 249)`.
- `h3` “Turn browser telemetry into action”: 48px, weight 300, line-height 52.8px, color `rgb(252, 250, 249)`.
- `h3` “Detect phishing risks that email filters miss”: 48px, weight 300, line-height 52.8px, color `rgb(252, 250, 249)`.
- `h3` “Remediate credential risk, faster”: 48px, weight 300, line-height 52.8px, color `rgb(252, 250, 249)`.

## Layout

Use approximately 80px desktop side gutters and a split headline/product-art hero. Follow with a logo row, source-provided metrics, tabbed capabilities, a case study, testimonial carousel, compliance proof and closing CTA. At 390px the headline drops from 72px to 48px, side gutters become approximately 20px, and the two hero actions stack above the product art. The capture shows one animation and carousel state, not all interactions.

Measured desktop region: 1440.00 × 6700.00px at a 1440px viewport. Measured mobile region/page: 390.00 × 7469.00px at a 390px viewport. The primary image is the complete desktop page; mobile evidence is the opening 390 × 844px viewport, not proof of every lower-page interaction.

## Elevation & Depth

Use thin warm-light borders, restrained corner rounding and purple-gray proof surfaces against the brown background. Reserve aqua for primary actions and selected text accents. The testimonial rail deliberately exposes part of the next card; do not mistake that source overflow treatment for a cropped capture. Source statistics and quotes have not been independently validated.

## 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

Use approximately 80px desktop side gutters and a split headline/product-art hero. Follow with a logo row, source-provided metrics, tabbed capabilities, a case study, testimonial carousel, compliance proof and closing CTA. At 390px the headline drops from 72px to 48px, side gutters become approximately 20px, and the two hero actions stack above the product art. The capture shows one animation and carousel state, not all interactions.

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.