# paper.design

Source: https://paper.design/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, swiss, calm, technical, confident, premium, serious
Colors: #f4f4ef, #d3d3d0, #0d0e17, #afafaa, #8f8e8a, #303135, #71716f, #4e4f4f
Type (h1): Matter · 48px/48px · 360 · tracking -0.96px — "design incredible"
Type (h2): Matter · 48px/48px · 360 · tracking -0.96px — "the connected canvas for teams shipping with agents"
Type (h3): Matter · 18px/28px · 550 · tracking 0.18px — "connect any agent to your canvas"
Type (body): Matter · 18px/28px · 400 · tracking 0.18px — "Paper connects your teams, agents, code, and data on a single design space built"
Type (small): -apple-system · 12px/12px · 500 · tracking 0.18px — "Copy link"
Type (button): Matter · 18px/28px · 480 · tracking 0.18px — "download Paper"
Button (primary): "download Paper" — fill #181818, text #fcfcf9, radius 4px, border 0px, padding 6px 14px, height 40px, type 18px/480
Radii: 4px (21), 8px (5), 5px (4), 41.2425px (3), 12px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/paper-design/hero.webp?v=8eb27c3e
- Page crop (mid-1): https://media.lvly.design/library/paper-design/mid-1.webp?v=2cd94612
- Page crop (mid-2): https://media.lvly.design/library/paper-design/mid-2.webp?v=1b5f3335
- Hero (mobile): https://media.lvly.design/library/paper-design/mobile-hero.webp?v=747a5b60
- Full page (desktop): https://media.lvly.design/library/paper-design/full.jpg?v=f735d66e
- Full page (mobile): https://media.lvly.design/library/paper-design/mobile-full.jpg?v=71907132
- Clip preview (mp4): https://media.lvly.design/library/paper-design/video-t0cy3k.preview.mp4?v=566384b2

Paper's landing page is a warm-paper canvas — an off-white `#f4f4ef` ground covering 88% of the frame — with a design-tool aesthetic that treats the page itself like an artboard: hairline canvas rulers and a faint isometric grid bleed in from the right edge, feature blocks sit inside selection-handle frames with tiny corner squares, and a dotted pixel grid peeks out of the bottom-right. Typography is a single family (Matter) at a light 360 weight for the 48px display, set in all-lowercase, with the headline running as a two-tone stack — near-black first line, mid-gray continuation — and tight −0.96px tracking. Color is almost entirely tonal gray; the only "accent" is the near-black `#0d0e17` fill on the one CTA button, so the product screenshots (a light editor UI, a dark terminal pane, syntax-coloured code) supply every hue. The whole thing reads as a serious, quietly confident tool for people who already know what a canvas is.

## Steal-worthy details

- Two-tone headline: line one in near-black, lines two and three in a muted gray at the same size and weight — hierarchy through color, not scale.
- All-lowercase everywhere: nav ("pricing roadmap blog changelog docs"), headline, CTA labels ("download Paper", "open Paper in the browser →"). Reads as calm and unfussy.
- The page performs the product: faint rulers + a gray diagonal/isometric grid on the right margin, feature cards framed by selection handles (4px corner squares), a dotted pixel grid in the footer corner — the marketing page looks like the canvas.
- Product shot as a layered composite: the editor screenshot has a floating terminal window overlapping its bottom-left showing MCP tool calls, so "agents" is shown rather than claimed.
- One filled CTA (near-black, 4px radius, no shadow) beside a plain text-link secondary with a trailing arrow — the primary/secondary pair with zero decoration.
- Ultra-light display weight (360) against an 18px/28px body — generous body size keeps the light headline from feeling thin.
- Hairline nav divider and a single hairline under the header; near-invisible borders (`#d3d3d0`) do all the structural work.

## Style recipe

Ground the page on warm off-white `#f4f4ef`, never pure white; use `#d3d3d0` for every hairline and `#afafaa`/`#8f8e8a` for secondary text. Reserve near-black `#0d0e17` for the display headline's first line, body text at 18px/28px, and the single primary button; give no other element a saturated color — let embedded product imagery carry all hue. Set everything in one neutral grotesk (Matter or an Inter/Geist-class substitute) with a light display weight (~350–400) at 48px/48px and −0.02em tracking, and write headings, nav and button labels in lowercase. Build headline hierarchy by color, not size: first line foreground, continuation lines in mid-gray. Buttons: 4px radius, no shadow, solid `#0d0e17` fill with off-white text; secondary actions are plain text with a trailing "→". Frame feature blocks with hairline rectangles that carry 4px square handles at the corners, and decorate margins with faint technical texture — rulers, a thin isometric grid, a dotted pixel grid — at near-background contrast. Keep radii small (4px primary, 8px for cards, 12px max on screenshots) and let 1px lines, not shadows or fills, define structure. Motion should be minimal; density comes from the product imagery, not from the chrome around it.