Papermark — four-tier pricing and calculator

---
version: alpha
name: Papermark — four-tier pricing and calculator
colors:
  primary: '#000000'
  surface: '#FFFFFF'
  text: '#0B0B0B'
  accent: '#FB7A00'
typography:
  primaryRole:
    fontFamily: Articulat, Inter, system-ui, sans-serif
    fontSize: 60px
    fontWeight: 500
    lineHeight: 60px
  supporting:
    fontFamily: Inter, sans-serif
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
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 complete document-sharing pricing page with four ruled tiers, orange feature checks, segmented product and billing controls, a pricing calculator and a detailed comparison table.

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

## Colors

primary: `#000000`; surface: `#FFFFFF`; text: `#0B0B0B`; accent: `#FB7A00`. 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 “Find the plan that works for you”: 60px, weight 500, line height 60px, tracking -0.6px.
- h3 “Free”: 20px, weight 500, line height 32px, tracking -0.2px.
- h3 “Pro”: 20px, weight 500, line height 32px, tracking -0.2px.
- h3 “Business”: 20px, weight 500, line height 32px, tracking -0.2px.
- h3 “Data Rooms”: 20px, weight 500, line height 32px, tracking -0.2px.

## Layout

Lead with a left-aligned display heading and a compact source-owned trust row. Place product segments opposite billing and currency controls above four equally ruled plan columns. Follow with a calculator and dark total panel, an orange enterprise band, and a zebra-striped comparison table with black category headers.

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

At 390px the heading reduces from 60px to 36px, the controls stack, and plans become a single-column sequence. The observed selected state is annual EUR pricing. Currency, billing, calculator sliders and FAQ-like controls were not operated; do not infer their recalculation behavior.

## Elevation & Depth

Rely on fine dark rules, pale cell surfaces and an inverse calculator summary rather than heavy shadows. Reserve orange for highlighted decisions. Numeric blur/spread values were not measured; any recreation must tune them against the image.

## Shapes

Use mostly square table corners, small-radius actions and pill-shaped segmented controls and popularity badges.

## Components

A complete document-sharing pricing page with four ruled tiers, orange feature checks, segmented product and billing controls, a pricing calculator and a detailed comparison table. 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.