Skip to content
DesignMunkDesignMunk Submit a site

Papermark

papermark.com
# Close Deals Faster.
Security Software Next.js Tailwind Homepage Inter
Share Visit site
papermark.com DESKTOP · 1440
Papermark

AI Breakdown

Design export

# Design brief: the Papermark design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/04174617/papermark-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/04174617/papermark-com-featured.webp
- On DesignMunk: https://designmunk.com/papermark/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Papermark: Dark UI, One White Button, 92px Headline

## Overview

Papermark targets deal teams, finance leaders and founders who need speed and control. The interface should feel serious, secure and efficient, with low color noise and high typographic clarity. Spacing is generous at the section level but compact inside components, supporting dense information without clutter. Dark mode is default; white is reserved for action and critical text contrast.

## Colors

- **primary (#ffffff):** High-contrast white for headlines on dark backgrounds and the primary CTA fill.
- **secondary (#5c5c5c):** Muted gray for secondary copy and meta text.
- **neutral (#0b0b0b):** Dealroom black for the app surface and hero overlays.
- **border (#374151):** Slate divider used for hairlines, outlines and subtle containers.
- **brand-lunar-rock (#c5c5c5):** Soft highlight for logos, ratings and low-stakes accents without raising luminance too much.
- **surface (#0b0b0b):** Base surface color for sections and cards.
- **on-surface (#ffffff):** Default text on dark surfaces to maintain AA+ contrast.

## Typography

- Articulat (__articulat_c65e33): Used for headline-lg (92px/1.05, 500, -0.02em) and headline-sm (40px/1.2, -0.007em). This is a custom, self-hosted font; agents cannot fetch it directly. Recommended substitutes with similar modern grotesk tone: Manrope (Google), Outfit (Google), Plus Jakarta Sans (Google).
- Inter (Google): System body and interface type (body-md 17px/1.55 400) and headline-md (60px/1.2 400). Freely available from Google Fonts; use for all body, captions and controls.
- Inter (self-hosted variant __Inter_f367f3): Tokened for headline-xs (26px/1.19). Agents should substitute standard Google Inter with the same size/weight for parity.

## Layout

Spacing scale mixes roomy sections with tight inner gaps. Use xl (152px) and lg (80px) for vertical section padding; md (36px) for container gutters and block spacing; sm (14px) for control gaps and list items; xs (6px) for micro spacing and badges. Content reads best in a centered, wide column with supporting side rails for logos or ratings. Keep dense tables and charts inside cards with md (36px) outer margins.

## Elevation & Depth

Depth is minimal. Only the small shadow is used: rgba(0,0,0,0.4) 0 10px 60px for modals or floating elements. Everywhere else, hierarchy relies on tonal steps (neutral surface vs. imagery overlays), 1px borders in #374151, and generous whitespace. Avoid colored shadows or glow effects.

## Shapes

Corners are pragmatic: 4px (rounded.sm) for buttons, inputs and chips; 8px (rounded.md) for cards and media. The small radius signals enterprise formality, while the 8px card radius softens dense blocks without feeling playful.

## Components

- Button Primary: 51px height, 14px×22px padding, 4px radius; filled #ffffff with #0b0b0b text. Use for the main conversion ("Start for free", "Start now").
- Button Secondary: 51px height, 14px×22px padding, 4px radius; dark-mode text #0b0b0b on transparent or tonal background; pair with a #374151 outline where needed.
- Button Link: Text-only action in #ffffff with 0px radius; use for inline or tertiary navigation.
- Card: #0b0b0b background, #ffffff text, 8px radius, 16px padding; apply for testimonials, tables, and charts.

### Hero Banner
- Headline uses Articulat 92px/1.05 at 500 with -0.02em letter-spacing. Background image is darkened; place certification chip above and the primary CTA left-aligned. Section padding: lg (80px)+.

### Customer Logos Strip
- Single row of grayscale logos set around #c5c5c5 on the dark surface with border separators (#374151) where needed. Caption: "TRUSTED BY 70,000+ GLOBAL COMPANIES".

### Rating Badge
- Compact cluster with star icons and "4.9 / 5.0". Use lunar-rock for icons and on-surface text. Add a 1px #374151 outline for clarity on imagery.

### Data Room Dashboard Preview
- Left navigation list and main panel with tabs (Data Room, Permissions, Analytics, Audit Log, Q&A, Branding). Use sm (14px) gaps, 8px card, and a table of viewers with initials avatars.

### Deal Value Ticker
- Animated numeral marquee inside a card; white text on neutral surface. Keep overflow hidden with 8px corners.

### Use-Case Tags Grid
- Compact chips at 4px radius with #374151 borders and #c5c5c5 text. Arrange in a responsive grid with md (36px) row gaps.

### Testimonial Card
- Quote text on a card (8px radius, 16px padding), author line below. Pair a link-style "Customer Story" as the tertiary action.

### Security & Compliance Grid
- Row of badges (SOC 2, ISO 27001, GDPR, HIPAA, CCPA) each in a bordered tile using lunar-rock text and 14px internal padding.

### Footer Mega-Menu
- Multi-column list groups with link-style buttons; columns spaced by md (36px). Use #5c5c5c for meta and #ffffff for primary links.

## Do's and Don'ts

- Do reserve #ffffff fills for the primary CTA and critical labels; keep most accents in #c5c5c5 to preserve dark-mode contrast.
- Do use lg (80px)–xl (152px) vertical padding for section blocks; components inside use sm (14px) gaps.
- Do add 1px #374151 borders around light elements sitting on photography or video.
- Don't introduce additional brand colors; this system is purposefully monochrome.
- Don't apply heavy shadows except the provided sm shadow for overlays.
- Don't round corners beyond 8px; larger radii soften the enterprise tone.

## Agent Prompt Guide

Color reference
- Text: #ffffff
- Background: #0b0b0b
- Border: #374151
- Accent: #c5c5c5

1) Build the hero section
- Background #0b0b0b with a darkened image overlay.
- H1: "Close Deals Faster." using Articulat substitute Manrope, 92px, weight 500, line-height 1.05, letter-spacing -0.02em, color #ffffff.
- Subtext: Inter 17px/1.55, color #c5c5c5.
- Primary button: 51px height, padding 14px 22px, radius 4px, background #ffffff, text #0b0b0b.
- Top-left compliance chip in Inter 13–14px, border 1px #374151.

2) Customer logos strip
- Section padding top/bottom 80px.
- Row of logos tinted to #c5c5c5 on #0b0b0b.
- Caption in Inter 17px/1.55, uppercase tracking optional, color #c5c5c5.
- Add a subtle bottom border #374151.

3) Data room preview card
- Container max-width ~1100px, outer margin 36px.
- Card background #0b0b0b, radius 8px, padding 16px, text #ffffff.
- Tabs in Inter 17px, inactive color #5c5c5c, active underline 2px #ffffff.
- Table rows with 1px #374151 separators and 14px row padding.

4) Security & compliance grid
- 5 tiles side by side on desktop; each tile 8px radius, 1px border #374151, padding 14px.
- Title in Inter 17px/1.55 #ffffff; detail link in #ffffff (button-link style).

5) Testimonial band
- Background #0b0b0b; three 8px-radius cards, 16px padding.
- Quote in Inter 17px/1.55 #ffffff; author line in #c5c5c5.
- "Customer Story" as link-style in #ffffff with no radius.

## Similar Brands

- Vercel: Dark, monochrome palette and sparse color; Papermark is more enterprise and compliance-forward, with heavier proof.
- Linear: High-contrast dark UI and restrained accents; Papermark uses larger hero type and more security messaging.
- Stripe: Precise typography and confident spacing; Papermark is more minimal in color and runs darker overall.
- DocSend: Document sharing for dealmaking; Papermark's styling is bolder in dark mode and leans harder on compliance visuals.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #5c5c5c;
  --color-neutral: #0b0b0b;
  --color-border: #374151;
  --color-brand-lunar-rock: #c5c5c5;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 92px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.05;
  --text-headline-lg-tracking: -0.02em;
  --text-headline-md-size: 60px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: 0.005em;
  --text-headline-sm-size: 40px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.2;
  --text-headline-sm-tracking: -0.007em;
  --text-headline-xs-size: 26px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 17px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.55;
  --font-articulat-c65e33: "__articulat_c65e33";
  --font-inter: "Inter";
  --font-inter-f367f3: "__Inter_f367f3";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 36px;
  --spacing-lg: 80px;
  --spacing-xl: 152px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 14px 22px;
  --button-primary-height: 51px;
  --button-secondary-text-color: var(--color-neutral);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 14px 22px;
  --button-secondary-height: 51px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #ffffff;
  --color-secondary: #5c5c5c;
  --color-neutral: #0b0b0b;
  --color-border: #374151;
  --color-brand-lunar-rock: #c5c5c5;
  --color-surface: #0b0b0b;
  --color-on-surface: #ffffff;
  --font-headline-lg: "__articulat_c65e33";
  --font-headline-md: "Inter";
  --font-headline-sm: "__articulat_c65e33";
  --font-headline-xs: "__Inter_f367f3";
  --font-body-md: "Inter";
  --text-headline-lg: 92px;
  --text-headline-md: 60px;
  --text-headline-sm: 40px;
  --text-headline-xs: 26px;
  --text-body-md: 17px;
  --tracking-headline-lg: -0.02em;
  --tracking-headline-md: 0.005em;
  --tracking-headline-sm: -0.007em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 4px;
  --radius-md: 8px;
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 36px;
  --spacing-lg: 80px;
  --spacing-xl: 152px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.361,
                    0.361,
                    0.361
                ],
                "hex": "#5c5c5c"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.043,
                    0.043,
                    0.043
                ],
                "hex": "#0b0b0b"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.216,
                    0.255,
                    0.318
                ],
                "hex": "#374151"
            }
        },
        "brand-lunar-rock": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.773,
                    0.773,
                    0.773
                ],
                "hex": "#c5c5c5"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.043,
                    0.043,
                    0.043
                ],
                "hex": "#0b0b0b"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 14,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 36,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 80,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 152,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "__articulat_c65e33",
                "fontSize": {
                    "value": 92,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 60,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": 0.005,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "__articulat_c65e33",
                "fontSize": {
                    "value": 40,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.007,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "__Inter_f367f3",
                "fontSize": {
                    "value": 26,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 17,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Papermark**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Security →
geardex.app
GearDex Creative
GearDex
wpsubscription.co
WP Subscription Ecommerce
WP Subscription
thedrive.ai
The Drive AI AI
The Drive AI
webflow.com
Webflow Design Tools
Webflow