Papermark — dark security evidence section

---
version: alpha
name: Papermark — dark security evidence section
colors:
  primary: '#FFFFFF'
  surface: '#0A0A0A'
  text: '#FFFFFF'
typography:
  primaryRole:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
    fontSize: 26px
    fontWeight: 500
    lineHeight: 32.5px
  supporting:
    fontFamily: Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 25.6px
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 standalone near-black security section with a split heading and explanation, outlined action and five source-owned compliance badges.

Captured from https://www.papermark.com/ at 2026-10-15T06:08:07.607039+00:00. This image isolates `section.security`.

## Colors

primary: `#FFFFFF`; surface: `#0A0A0A`; text: `#FFFFFF`. 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.

- h2 “Enterprise-grade security and controls”: 26px, weight 500, line height 32.5px, tracking -0.13px.
- p “Papermark meets the highest industry standards for security, priv”: 16px, weight 400, line height 25.6px, tracking normal.
- a “More about Security”: 14px, weight 500, line height 21px, tracking normal.
- a “Details”: 13px, weight 400, line height 19.5px, tracking normal.
- a “Details”: 13px, weight 400, line height 19.5px, tracking normal.

## Layout

Arrange a narrow heading column beside a broader explanatory paragraph and outlined security link. Below, distribute five badge-and-label groups across a ruled row. The section uses measured 160px vertical padding. Treat all badges and claims as the source site’s evidence, not reusable certification for another product.

Desktop image: 1440 × 818px at a 1440px viewport. Mobile evidence: 390 × 1299px at a 390px viewport. The selected element measured 1440.00 × 817.47px desktop and 390.00 × 1298.75px mobile. Integer crops use the measured document coordinates; page-edge subpixel rounding is limited to one pixel.

At 390px the heading, explanation and action stack; badges reflow into two columns with the fifth on a final row. Heading remains 26px and body 16px/24px. The standalone crop fits exactly within the viewport width.

## Elevation & Depth

The #0A0A0A surface and subtle vertical rules separate groups without raised cards. Muted supporting text sits below white headings. Numeric blur/spread values were not measured; any recreation must tune them against the image.

## Shapes

Use monochrome badge silhouettes and low-radius outlined actions. Preserve substantial negative space around the badges.

## Components

A standalone near-black security section with a split heading and explanation, outlined action and five source-owned compliance badges. 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.