Dashlane — framed sales CTA

---
version: alpha
name: Dashlane — framed sales CTA
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: 48px
    fontWeight: 300
    lineHeight: 52.8px
  supporting:
    fontFamily: Saans, sans-serif
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
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 closing sales call to action with a thin outlined panel, large light-weight heading, aqua primary action, outlined secondary action and dimensional brand artwork.

Captured from https://www.dashlane.com/ at 2026-10-12T06:10:16.202472+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 28px / 30.8px on mobile.

- `h2` “Experience the Dashlane difference”: 48px, weight 300, line-height 52.8px, color `rgb(252, 250, 249)`.
- `a` “Contact Sales”: 16px, weight 500, line-height 24px, color `rgb(29, 14, 9)`.
- `a` “Request a demo”: 16px, weight 500, line-height 24px, color `rgb(162, 246, 245)`.

## Layout

Treat the framed sales prompt as a full-width section, not a button crop. Keep headline and paired sales/demo actions together on desktop with decorative artwork balancing the right side. Use the measured mobile capture to stack the heading and actions; neither contact flow was submitted. Preserve the section breathing room around the central frame.

Measured desktop region: 1439.78 × 644.00px at a 1440px viewport. Measured mobile region/page: 389.78 × 361.59px at a 390px viewport. The primary image is only the selected element; use selector `#main-content section.relative` to identify its boundary. Desktop and mobile were warmed up, measured, and cropped from fresh full-page captures.

## Elevation & Depth

Use the espresso field, a thin warm border and aqua interaction emphasis. The right-side dimensional graphic and scattered background particles provide depth; the controls themselves remain flat.

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

Treat the framed sales prompt as a full-width section, not a button crop. Keep headline and paired sales/demo actions together on desktop with decorative artwork balancing the right side. Use the measured mobile capture to stack the heading and actions; neither contact flow was submitted. Preserve the section breathing room around the central frame.

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.