paper.design

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.

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.