Dashlane — business trial registration screen

---
version: alpha
name: Dashlane — business trial registration screen
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

A two-column trial-registration section pairing product benefits with a violet form panel, labeled business fields and a wide aqua submit action in its untouched initial state.

Captured from https://www.dashlane.com/business-password-manager/try at 2026-10-12T06:10:39.634434+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.

- `h2` “Start your free 14-day trial”: 72px, weight 300, line-height 79.2px, color `rgb(252, 250, 249)`.
- `p` “Get full access to Omnix™ Password Management & Credential Protection for proactive s”: 18px, weight 300, line-height 27px, color `rgb(252, 250, 249)`.
- `p` “Secure Vault for employees”: 16px, weight 300, line-height 24px, color `rgb(252, 250, 249)`.
- `p` “Secure Sharing across teams”: 16px, weight 300, line-height 24px, color `rgb(252, 250, 249)`.
- `p` “Admin Controls & Policies”: 16px, weight 300, line-height 24px, color `rgb(252, 250, 249)`.
- `p` “Credential Risk Detection”: 16px, weight 300, line-height 24px, color `rgb(252, 250, 249)`.
- `p` “Credential Risk Alerts sent in real time”: 16px, weight 300, line-height 24px, color `rgb(252, 250, 249)`.
- `p` “Integrations for SSO, SCIM, SIEM, & more”: 16px, weight 300, line-height 24px, color `rgb(252, 250, 249)`.

## Layout

On desktop, place the 72px introductory headline and checklist to the left and the form panel to the right. Group first/last name and company/company-size fields in paired rows while email, job title and phone take full width. At 390px the source section stacks and the headline reduces to 48px. Keep labels outside the fields and terms directly beneath the action. No information was entered, no form was submitted and no trial was started.

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

## Elevation & Depth

The form is a purple-gray bordered panel on espresso. Inputs are transparent dark fields with light outlines and small corner radii. Use the aqua full-width action as the clear end of the field sequence. Validation and success states are untested.

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

On desktop, place the 72px introductory headline and checklist to the left and the form panel to the right. Group first/last name and company/company-size fields in paired rows while email, job title and phone take full width. At 390px the source section stacks and the headline reduces to 48px. Keep labels outside the fields and terms directly beneath the action. No information was entered, no form was submitted and no trial was started.

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.