--- version: alpha name: Papermark — dual-action closing deal CTA colors: primary: '#FFFFFF' surface: '#000000' text: '#FFFFFF' typography: primaryRole: fontFamily: Articulat, Inter, system-ui, sans-serif fontSize: 37.44px fontWeight: 500 lineHeight: 44.928px supporting: fontFamily: Inter, -apple-system, BlinkMacSystemFont, system-ui, 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 restrained black closing band pairing a white editorial headline with a filled document-sharing action and outlined demo action. Captured from https://www.papermark.com/ at 2026-10-15T06:08:08.993068+00:00. This image isolates `section.finalcta`. ## Colors primary: `#FFFFFF`; surface: `#000000`; 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 “Run your next deal on Papermark.”: 37.44px, weight 500, line height 44.928px, tracking -0.3744px. - a “Share documents securely”: 14px, weight 500, line height 21px, tracking normal. - a “Book a Demo”: 14px, weight 500, line height 21px, tracking normal. ## Layout Keep the headline left and two actions right in a single desktop row within a wide inset container. The band has measured 90px vertical padding. Use white for the primary action and a fine white outline for the secondary action so their priority remains clear. Desktop image: 1440 × 233px at a 1440px viewport. Mobile evidence: 390 × 387px at a 390px viewport. The selected element measured 1440.00 × 232.00px desktop and 390.00 × 386.19px mobile. Integer crops use the measured document coordinates; page-edge subpixel rounding is limited to one pixel. At 390px the heading wraps to two lines and the actions stack beneath it, all left-aligned. Heading size changes from 37.44px to 28px; action labels stay 14px. Preserve the different button widths instead of forcing a stretched full-width pair. ## Elevation & Depth No floating shadow is needed on the black band. The solid white primary action provides sufficient emphasis. Numeric blur/spread values were not measured; any recreation must tune them against the image. ## Shapes Use small-radius rectangular buttons and a fine arrow on the primary action; avoid oversized pill forms. ## Components A restrained black closing band pairing a white editorial headline with a filled document-sharing action and outlined demo action. 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.