Papermark — cinematic data-room landing

---
version: alpha
name: Papermark — cinematic data-room landing
colors:
  primary: '#000000'
  surface: '#FFFFFF'
  text: '#0B0B0B'
typography:
  primaryRole:
    fontFamily: Articulat, Inter, system-ui, sans-serif
    fontSize: 92px
    fontWeight: 500
    lineHeight: 96.6px
  supporting:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
    fontSize: 17px
    fontWeight: 400
    lineHeight: 26.35px
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 cinematic data-room landing page with a photographic hero, oversized editorial type, a framed product demonstration, customer evidence and dark security and analytics sections.

Captured from https://www.papermark.com/ at 2026-10-15T06:07:06.636067+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.

- h1 “Close Deals Faster.”: 92px, weight 500, line height 96.6px, tracking -1.84px.
- h3 “Series B Data Room”: 26px, weight 500, line height 39px, tracking -0.26px.
- h2 “70,000+ dealmakers worldwide trust Papermark”: 14px, weight 400, line height 16.8px, tracking 0.28px.
- h2 “Real impact for real teams”: 26px, weight 500, line height 29.9px, tracking -0.13px.
- h2 “Enterprise-grade security and controls”: 26px, weight 500, line height 32.5px, tracking -0.13px.

## Layout

Overlay navigation and a left-aligned promise on a darkened full-bleed video frame. Continue through white statement and product-demo sections, a large source-owned metric, a warm-neutral rotating use-case section and a portrait testimonial. Shift to black for stories, security, analytics, the closing CTA and footer.

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

At 390px the main heading reduces from 92px to 48px, the desktop navigation becomes a menu icon, and copy wraps above the primary action. Logo rails intentionally crop moving content. The page reported a 421px scroll extent at a 390px viewport; this is a source layout limitation, not a recommended responsive pattern. Separate component crops show valid 390px bounds.

## Elevation & Depth

Darken the photographic backdrop to protect white text. Frame the product demonstration in black with a soft exterior shadow; use neutral section changes rather than floating cards everywhere. Numeric blur/spread values were not measured; any recreation must tune them against the image.

## Shapes

Prefer crisp rectangular bands, narrow-radius actions and fine dividers. Preserve the contrast between broad photography and tightly ruled product UI.

## Components

A cinematic data-room landing page with a photographic hero, oversized editorial type, a framed product demonstration, customer evidence and dark security and analytics sections. 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.