Dashlane — dark enterprise pricing and matrix

---
version: alpha
name: Dashlane — dark enterprise pricing and matrix
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: SaansMono, monospace
    fontSize: 16px
    fontWeight: 300
    lineHeight: 17.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

An espresso-colored pricing page with three plan panels, aqua actions, a violet enterprise tier, a detailed feature matrix, customer quotes and pricing FAQs.

Captured from https://www.dashlane.com/pricing at 2026-10-12T06:05:24.091421+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` “Plans and pricing”: 72px, weight 300, line-height 79.2px, color `rgb(252, 250, 249)`.
- `h2` “Credential Protection”: 28px, weight 300, line-height 30.8px, color `rgb(252, 250, 249)`.
- `h2` “Password Management”: 28px, weight 300, line-height 30.8px, color `rgb(252, 250, 249)`.
- `h2` “Enterprise”: 28px, weight 300, line-height 30.8px, color `rgb(252, 250, 249)`.
- `h2` “Credential security for all organizations”: 56px, weight 300, line-height 61.6px, color `rgb(252, 250, 249)`.
- `h3` “Credential Protection”: 24px, weight 300, line-height 26.4px, color `rgb(252, 250, 249)`.
- `h3` “Password Management”: 24px, weight 300, line-height 26.4px, color `rgb(252, 250, 249)`.
- `h2` “Our customers say it best”: 56px, weight 300, line-height 61.6px, color `rgb(252, 250, 249)`.

## Layout

Center the desktop pricing heading and place three plans in a row. Carry the same plan hierarchy into the comparison matrix below. At 390px the title reduces from 72px to 48px and the visible order puts Enterprise first; plan titles reduce from 28px to 20px. Do not claim the billing toggle, accordion, or checkout works from this static capture; none was submitted or purchased.

Measured desktop region: 1440.00 × 7611.00px at a 1440px viewport. Measured mobile region/page: 390.00 × 8521.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

Favor thin borders and flat surfaces. The enterprise card gets a purple fill and a brighter top label, while the other cards retain the espresso field. Aqua marks availability and primary actions. Preserve currency and billing context as captured rather than translating the source amounts.

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

Center the desktop pricing heading and place three plans in a row. Carry the same plan hierarchy into the comparison matrix below. At 390px the title reduces from 72px to 48px and the visible order puts Enterprise first; plan titles reduce from 28px to 20px. Do not claim the billing toggle, accordion, or checkout works from this static capture; none was submitted or purchased.

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.