Papermark — shared sign-up and sign-in welcome screen

---
version: alpha
name: Papermark — shared sign-up and sign-in welcome screen
colors:
  primary: '#000000'
  surface: '#FFFFFF'
  text: '#0B0B0B'
typography:
  primaryRole:
    fontFamily: Inter, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  supporting:
    fontFamily: Inter, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
omitted:
- section: spacing
  reason: Measured geometry and responsive composition are documented below; no global
    spacing scale is inferred.
- section: rounded
  reason: Observed silhouettes and measured radii are described in Shapes rather than
    inventing a brand scale.
- section: components
  reason: This reference documents observed composition in prose, not an inferred
    component API.
---

## Overview

A shared sign-up/sign-in welcome screen pairing a compact email-and-provider form with a photographic testimonial panel. One public entry serves both account flows.

Captured from https://app.papermark.com/login at 2026-10-15T06:05:36.143194+00:00. This is a complete page/screen reference, not an isolated element.

## Colors

primary: `#000000`; surface: `#FFFFFF`; text: `#0B0B0B`. Values summarize measured surfaces and visually reviewed foregrounds; illustration and photograph colors are not a complete brand palette. Retain the observed light/dark contrast rather than applying the accent to every element.

## Typography

The primary token is a sampled heading; supporting typography is sampled independently. Generated font-loader aliases are normalized to portable family names.

- h3 “Share documents. Not attachments.”: 14px, weight 400, line height 20px, tracking normal.
- p “or”: 16px, weight 400, line height 24px, tracking normal.
- p “By continuing, you agree to Papermark's Terms of Service and Priv”: 12px, weight 400, line height 16px, tracking normal.
- p “"We raised €50M Fund with Papermark Data Rooms.Secure, branded, a”: 20px, weight 400, line height 36px, tracking normal.
- a “Welcome to Papermark”: 16px, weight 400, line height 24px, tracking normal.

## Layout

Divide desktop into a white form region and a light-gray evidence region. Keep the brand above a narrow left form with email, a black Continue action, an or separator and four provider options. The right panel contains a portrait, source testimonial attribution and a logo grid. Preserve vertical rhythm between the primary and secondary methods.

Desktop image: 1440 × 1000px at a 1440px viewport. Mobile evidence: 390 × 844px at a 390px viewport.

At 390px the supporting testimonial region is hidden and the form occupies a single column with roughly 35px gutters. The welcome heading wraps, while all provider choices remain full width. Email, Google, LinkedIn, passkey and SAML controls were inspected without submitting or opening identity-provider pages.

## Elevation & Depth

Keep the form flat on white; the right pale surface supplies separation. Inputs and provider actions use subtle borders instead of deep shadows. Numeric blur/spread values were not measured; any recreation must tune them against the image.

## Shapes

Use small-radius input and button rectangles, centered provider labels and a rectangular portrait with lightly rounded corners.

## Components

A shared sign-up/sign-in welcome screen pairing a compact email-and-provider form with a photographic testimonial panel. One public entry serves both account flows. Preserve the hierarchy and grouping described above rather than mixing this composition with unrelated page modules. This capture records one visible state; hover, focus, validation, menus and successful transactions are untested unless explicitly described. No credentials were entered and no form was submitted. Source-owned customer statements, prices and certifications remain source claims, not independently verified facts.

## Do's and Don'ts

- Do preserve the responsive grouping, reading order and measured type hierarchy.
- Do use original content and only substantiated claims when adapting this layout.
- Do keep labels readable and provide accessible focus and reduced-motion behavior in a new implementation; these are recommendations, not verified source behavior.
- Don't treat a static animation frame as proof of timings, easing or all interaction states.
- Don't reproduce source overflow or use decorative padding at the expense of readable mobile content.