---
version: alpha
name: "papermark.com"
description: "Design system extracted from https://www.papermark.com/ on 2026-10-28"
colors:
  background: "#ffffff"
  surface: "#f5f3ee"
  surface-2: "#dddddd"
  surface-3: "#d1d1d1"
  foreground: "#0b0b0b"
  muted-foreground: "#949494"
  primary: "#000000"
  on-primary: "#ffffff"
  secondary: "#08a87a"
  border: "#ffffff"
typography:
  headline-display:
    fontFamily: "__articulat_c65e33"
    fontSize: "92px"
    fontWeight: 500
    lineHeight: "96.6px"
    letterSpacing: "-1.84px"
  headline-lg:
    fontFamily: "Inter"
    fontSize: "40px"
    fontWeight: 500
    lineHeight: "46px"
    letterSpacing: "-0.6px"
  headline-md:
    fontFamily: "__articulat_c65e33"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: "20px"
    letterSpacing: "-0.14px"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "25.6px"
  label-md:
    fontFamily: "Inter"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.25"
  button:
    fontFamily: "__Inter_d8ebd1"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "20px"
rounded:
  none: "0px"
  sm: "4px"
  md: "6px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "36px"
  8: "80px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "4px"
    height: "40px"
    padding: "8px 16px"
  button-ghost:
    backgroundColor: "#ffffff"
    textColor: "#ffffff"
    typography: "{typography.button}"
    rounded: "6px"
    height: "32px"
    padding: "4px 10px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#0b0b0b"
    typography: "{typography.button}"
    rounded: "4px"
    height: "51px"
    padding: "14px 22px"
---

# papermark.com

## Overview

Papermark | Secure data rooms for modern dealmakers: Secure data rooms and document sharing for M&A, due diligence, fundraising, and high-stakes deals. DocSend alternative with page-level analytics, granular permissions, and audit-friendly controls.

Sharp, squared-off controls, layered shadows for depth, large display type at 92px / 500, a single neutral accent on neutrals. The site ships in light mode by default. Measured from 1200 rendered elements at 1440px wide on 2026-10-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/brand-icon-1.png`: representative interface icon
- `screenshots/brand-icon-2.png`: representative interface icon
- `screenshots/brand-icon-3.png`: representative interface icon
- `screenshots/brand-icon-4.png`: representative interface icon
- `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/brand-favicon-source.png`: Favicon source
- `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/region-r1-icons.png`: r1 icons: icon placement and nearby text
- `screenshots/region-r2-context.jpg`: r2 context: page context
- `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail
- `screenshots/region-r2-icons.png`: r2 icons: icon placement and nearby text
- `screenshots/region-r3-context.jpg`: r3 context: page context
- `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail
- `screenshots/desktop-1440-dark.png`: Desktop 1440, dark mode
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page
- `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-4-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-favicon-source-upscaled.png`: Favicon source / upscaled.png
- `screenshots/media-favicon-source-optimized.webp`: Favicon source / optimized.webp
- `screenshots/media-favicon-source-favicon-16.png`: Favicon source / favicon-16.png
- `screenshots/media-favicon-source-favicon-32.png`: Favicon source / favicon-32.png
- `screenshots/media-favicon-source-favicon-48.png`: Favicon source / favicon-48.png
- `screenshots/media-favicon-source-favicon-180.png`: Favicon source / favicon-180.png
- `screenshots/media-favicon-source-favicon-192.png`: Favicon source / favicon-192.png
- `screenshots/media-favicon-source-favicon.ico`: Favicon source / favicon.ico
- `screenshots/c-button-1--rest.png`: Button 1 ("Our Customers"), rest
- `screenshots/c-button-1--hover.png`: Button 1 ("Our Customers"), hover
- `screenshots/c-button-1--focus.png`: Button 1 ("Our Customers"), focus
- `screenshots/c-link-1--rest.png`: Text link 1 ("Details"), rest
- `screenshots/c-link-1--hover.png`: Text link 1 ("Details"), hover
- `screenshots/c-link-1--focus.png`: Text link 1 ("Details"), focus
- `screenshots/c-close-button-1--rest.png`: Close / dismiss button 1, rest
- `screenshots/c-close-button-1--hover.png`: Close / dismiss button 1, hover
- `screenshots/c-close-button-1--focus.png`: Close / dismiss button 1, focus
- `screenshots/c-combobox-1--rest.png`: Combobox / custom select 1 ("EN"), rest
- `screenshots/c-combobox-1--hover.png`: Combobox / custom select 1 ("EN"), hover
- `screenshots/c-combobox-1--focus.png`: Combobox / custom select 1 ("EN"), focus
- `screenshots/c-overlay-dropdown-menu-1--open.png`: Dropdown menu 1 opened by combobox "EN"
- `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("Data Room"), rest
- `screenshots/c-nav-link-1--hover.png`: Navigation link 1 ("Data Room"), hover
- `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("Data Room"), focus
- `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1 ("Why Papermark?"), rest
- `screenshots/c-menu-button-1--hover.png`: Menu / dropdown trigger 1 ("Why Papermark?"), hover
- `screenshots/c-overlay-dropdown-menu-2--open.png`: Dropdown menu 2 opened by menu-button "Why Papermark?"
- `screenshots/c-menu-button-1--open.png`: Menu / dropdown trigger 1 ("Why Papermark?"), open (trigger)
- `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Papermark"), rest
- `screenshots/c-footer-link-1--hover.png`: Footer link 1 ("Papermark"), hover
- `screenshots/c-social-links-1--rest.png`: Social icon links 1, rest
- `screenshots/c-social-links-1--hover.png`: Social icon links 1, hover
- `screenshots/c-badge-1--rest.png`: Badge / pill / tag 1 ("Data Rooms"), rest
- `screenshots/c-rating-1--rest.png`: Rating / stars 1, rest
- `screenshots/c-card-1--rest.png`: Card 1 ("01Lincoln Property$50bil"), rest
- `screenshots/c-testimonial-1--rest.png`: Testimonial / quote card 1, rest
- `screenshots/c-list-1--rest.png`: Styled list 1 ("DocumentsData RoomsVisit"), rest
- `screenshots/c-table-1--rest.png`: Table 1 ("NameView durationView co"), rest
- `screenshots/c-table-row-1--rest.png`: Table row 1 ("SSarah Chensarah@sequoia"), rest
- `screenshots/c-accordion-1--rest.png`: Accordion / disclosure 1 ("FeaturesPage by Page Ana"), rest
- `screenshots/c-accordion-1--hover.png`: Accordion / disclosure 1 ("FeaturesPage by Page Ana"), hover
- `screenshots/c-accordion-1--open.png`: Accordion / disclosure 1 ("FeaturesPage by Page Ana"), open
- `screenshots/c-avatar-1--rest.png`: Avatar 1 ("S"), rest

## Logo and icon references

Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional.

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| surface | `#f5f3ee` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#dddddd` | Secondary surface |
| surface-3 | `#d1d1d1` | Secondary surface |
| foreground | `#0b0b0b` | Primary text |
| muted-foreground | `#949494` | Secondary text, captions |
| primary | `#000000` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#08a87a` | Secondary accent (teal) |
| border | `#ffffff` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#ffffff`, `#000000`, `#0b0b0b`, `#f5f3ee`, `#1a1a1a`, `#dddddd`, `#08a87a`, `#d1d1d1`.

Gradients in use: `linear-gradient(rgba(20, 15, 10, 0.32) 0%, rgba(10, 8, 6, 0.55) 100%)`.

The accent `#000000` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **__articulat_c65e33** for h1, h3: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.
- **Inter** for h2, body, label, button: Google Fonts (Inter).
- **__Inter_d8ebd1** for button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.

See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias.

Font link found on the page: `https://fonts.googleapis.com`

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | __articulat_c65e33 | 92px | 500 | 96.6px | -1.84px |
| headline-lg | Inter | 40px | 500 | 46px | -0.6px |
| headline-md | __articulat_c65e33 | 14px | 500 | 20px | -0.14px |
| body-md | Inter | 16px | 400 | 25.6px | normal |
| label-md | Inter | 12px | 400 | 1.25 | normal |
| button | __Inter_d8ebd1 | 14px | 400 | 20px | normal |

Type scale in use: 10px, 11px, 12px, 13px, 14px, 16px, 26px, 40px, 43px, 92px. Base body size 16px.

The hero heading (h1) renders at 92px / 500, start aligned, up to 804px wide, tracking -1.84px. Sample: "Close Deals Faster.".

See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages.

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 36, 80 (px).
- Flex and grid gaps: 4, 8, 12, 16, 24, 28, 32, 64 px.
- Content max width: 1280px, centred.
- Breakpoints: 480px, 640px, 768px, 980px, 1024px.
- Header: 32px tall, relative, background `rgba(0, 0, 0, 0)`; 0 nav links at nullpx / null.

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(59, 130, 246, 0.5) 0px 0px 0px 0px`
- shadow-2: `rgba(0, 0, 0, 0.18) 0px 30px 80px 0px`
- shadow-3: `rgba(0, 0, 0, 0.4) 0px 10px 60px 0px`

## Shapes

- Buttons: 4px
- Inputs: 4px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, sm 4px, md 6px, full 9999px

## Components

### Button, primary

Background `#000000`, text `#ffffff`, border 1px solid transparent, radius 4px, height 40px, padding 8px 16px, 14px / 400. Sample label: "Start now".

### Button, ghost

Background transparent (it sits on `#ffffff`, so place it on that colour), text `#ffffff`, border none, radius 6px, height 32px, padding 4px 10px, 14px / 400. Sample label: "Why Papermark?".

### Button, secondary

Background `#ffffff`, text `#0b0b0b`, border 1px solid transparent, radius 4px, height 51px, padding 14px 22px, 14px / 500. Sample label: "Start for free".

### Link

Colour `#000000`, no underline at rest, weight 400.

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (29 of 87 in the checklist, 44 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 18 state changes, 2 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary:

| Component | Variants | States measured | Sample |
| --- | --- | --- | --- |
| Button | outline, secondary-icon-right lg, ink, outline-icon-right, ghost-icon-right sm, outline lg, outline sm | hover, focus | "Our Customers" |
| Text link | plain, plain, plain, plain | hover, focus | "Details" |
| Close / dismiss button | ghost | hover, focus |  |
| Combobox / custom select | outlined | hover, focus, open | "EN" |
| Navigation link | plain | hover, focus | "Data Room" |
| Menu / dropdown trigger | ghost | hover, open | "Why Papermark?" |
| Pagination | default | rest only |  |
| Footer | default | rest only | "FooterPSharing documents, secu" |
| Footer link | plain | hover | "Papermark" |
| Social icon links | default | hover |  |
| Badge / pill / tag | inverse-square | rest only | "Data Rooms" |
| Rating / stars | default | rest only |  |
| Card | flat | rest only | "01Lincoln Property$50billionRe" |
| Testimonial / quote card | filled-media-top | rest only |  |
| Styled list | default | rest only | "DocumentsData RoomsVisitorsAna" |
| Table | default | rest only | "NameView durationView completi" |
| Table row | default | rest only | "SSarah Chensarah@sequoia.com4:" |
| Accordion / disclosure | details | hover, open | "FeaturesPage by Page Analytics" |
| Avatar | 28px-round | rest only | "S" |
| Image / figure | aspect-1, aspect-1, aspect-3.72 | rest only |  |
| Video / media embed | default | rest only |  |
| Logo strip | default | rest only | "|||||" |
| Icon | outline-14px, filled-28px, filled-16px | rest only |  |
| Eyebrow / kicker | default, default | rest only | "Workspace" |

Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Icon button, Toggle / segmented control, Button group, Floating action button, Text input, Search field, Textarea, Select (native), Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Header / navbar, Breadcrumb, Tabs, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Theme toggle, Language / region switch, Tooltip, Popover, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Pricing card / plan, Feature item (icon + title + text), Stat / metric, List row / menu row, Avatar stack, Divider, Code block / inline code, Keyboard key, Blockquote, Carousel / slider, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Content container.

## Dark Mode

Both themes exist; the default render is light and the dark theme was reached via class dark. Token pairs, light → dark:

| Token | Light | Dark |
| --- | --- | --- |
| background | `#ffffff` | `#030712` |
| surface | `#f5f3ee` | `#000000` |
| surface-2 | `#dddddd` | `#0b0b0b` |
| surface-3 | `#d1d1d1` | `#1a1a1a` |
| foreground | `#0b0b0b` | `#0b0b0b` |
| primary | `#000000` | `#ffffff` |
| on-primary | `#ffffff` | `#111111` |
| secondary | `#08a87a` | `#08a87a` |
| border | `#ffffff` | `#121620` |

Dark-theme shadows: `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(59, 130, 246, 0.5) 0px 0px 0px 0px`; `rgba(0, 0, 0, 0.18) 0px 30px 80px 0px`; `rgba(0, 0, 0, 0.4) 0px 10px 60px 0px`

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1280px |  | 16px | 92px, 1 line, start | 32px, 0 links | media behind/overlapping text | 4→4 col; 2→1 col; 4→4 col | content-width |
| laptop 1024px | 864px |  | 16px | 65.5px, 1 line, start | 32px, 0 links | media behind/overlapping text | 4→4 col; 2→1 col; 4→4 col | content-width |
| tablet 768px | 720px |  | 16px | 49.2px, 1 line, start | 32px, 0 links | media behind/overlapping text | 4→2 col; 5→3 col; 6→1 col | 1 full-width |
| phone 390px | 342px |  | 16px | 48px, 2 lines, start | 0px, 0 links | media behind/overlapping text | 4→1 col; 2→1 col; 4→1 col | 1 full-width |

- H1 goes 92px → 48px (52%), 1 → 2 lines.
- No navigation links or hamburger detected at 390px; mobile navigation behavior is unverified.
- Card grids: 4 columns → 1 column on phones (gap normal → 40px normal).
- Body text is 16px at the sampled desktop and phone widths.
- 1 buttons stretch full-width on phones.
- Horizontal overflow at 768, 390px (the source has a responsive bug; do not copy it).
- Section top padding 90px → 80px.

## Interaction & Motion

251 elements carry transitions; typical 0.15s with ease, mostly on color, border-color, background-color. 2 running keyframe animations (l11marquee 38s infinite; ping 1s infinite).

- Hover on button-primary ("Start now"): background #000000 → #000000e6; cursor pointer; transition color, filter | 0.25s, 0.25s | ease, ease | delay 0s, 0s.
- Hover on button-secondary ("Our Customers"): background transparent → #ffffff14; cursor pointer; transition background, color, border-color | 0.2s, 0.2s, 0.2s | ease, ease, ease | delay 0s, 0s, 0s.
- Hover on body-link ("ISO 27001 certified · SOC 2 Type II"): text #ffffffbf → #fffffff2, underline appears; cursor pointer; transition color | 0.2s | ease.
- Focus on button-primary: outline 2px solid rgba(0, 0, 0, 0), offset 2px.
- Focus on body-link: outline 1px auto rgb(16, 16, 16), offset 1px.
- No tooltips: nothing on the page carries tooltip attributes or roles and no tooltip styles exist. Do not add tooltips when rebuilding.
- Hover/click menus: below the trigger, 6px gap, left edges aligned; #ffffff, radius 6px, padding 0px 0px, shadow yes; 14 items, 118px tall, 16px, padding 0px 0px, with descriptions; appears after a delay; hides within 400ms of leaving (transition or unmount).
- 4 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Use `#000000` where supported by measured component or regional evidence; its accent role is inferred.
- Do keep body text at 16px in Inter and headings in __articulat_c65e33.
- Do match corner radii per element class (buttons 4px, cards 0px); do not pick one radius for everything.
- Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows.
- Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Page background comes from body; large surface colors remain in the palette.
- Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents.