Paper – design, share, ship

Design Specification — Paper – design, share, ship

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FCFCF9), ink text (#000000), a vivid accent (#ACC4E4). All type is set in var(--default-font-family). Detected font weights: 400, 500, 600. Detected style signatures: gradient-rich / aurora; technical / mono accents; dark-mode aware.

Logo asset(s): https://paper.design/logos/companies/0-ramp.svg · https://paper.design/logos/companies/1-vercel.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(to bottom,#81adec,#5d8cd7)
• linear-gradient(to bottom,#a4c6f7,#5d8cd7)
• linear-gradient(in oklab 90deg,#f4f4f4 33%,#ddd 33%,#ddd 67%,#fdfdfd 67%)
• linear-gradient(in oklab 90deg,lab(96.172% 0 0) 33%,lab(88.168% 0 0) 33%,lab(88.168% 0 0) 67%,lab(99.304% -.0000298023 0) 67%)
• linear-gradient(in oklab 90deg,#0002 33%,#0004 33%,#0004 67%,#ffffff28 67%)
• linear-gradient(in oklab 90deg,lab(0% 0 0/.133) 33%,lab(0% 0 0/.267) 33%,lab(0% 0 0/.267) 67%,lab(100% 0 0/.157) 67%)
• linear-gradient(to right,#efefe41px,transparent 1px),linear-gradient(to bottom,#efefe41px,transparent 1px)

Typography

Primary typeface: var(--default-font-family) — stack: var(--default-font-family)

Font stacks (most used first)

• var(--default-font-family)
• Inter
• Matter,system-ui
• var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji")
• ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
• -apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif
• var(--font-mono)
• Matter
• Paper Mono
• monospace

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 500, 600

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• inset 0 -.05em .5em #ffffff0f,inset 0 -.15em #000000e6,inset 0 .25em .5em #ffffff06,0 0 0 .075em #ffffff26,0 .08em .17em #000000f2
• 0 0 0 1px #80808026,0 93px 26px #0000,0 59px 24px #00000003,0 33px 20px #0000000d,0 15px 15px #00000017,0 4px 8px #0000001a
• inset 0 1px #ffffff1f,inset 0 -1px #0000001f
• 0 16px 32px -16px #0000001f,0 8px 16px -8px #00000014,0 4px 8px -4px #0000000a,0 2px 4px #00000005,0 0 0 1px #00000014
• inset 0 -.05em .5em #00000006,inset 0 .05em #fffffff2,inset 0 .25em .5em #00000006,inset 0 -.05em #00000026,0 0 0 .05em #0000001f,0 .08em .17em #0003
• inset 0 -.05em .5em #00000006,inset 0 .05em #fffffff2,inset 0 .25em .5em #00000006,inset 0 -.025em .05em #00000026,0 0 0 .05em #0000001f,0 .04em .05em #0003

Layout

Container max-width: 899px

Grid columns (largest detected grid): 3

Breakpoints

• 640px
• 720px
• 899px
• 900px
• 1080px
• 1140px
• 1471px
• 1600px

Animation & Motion

Transitions

• background .15s ease-out,transform .1s ease-out
• translate 60ms,box-shadow 60ms
• transform .15s cubic-bezier(.16,1,.3,1)
• color .15s ease-out
• opacity .15s ease-out

Easing curves

• var(--tw-ease,ease)
• cubic-bezier(.16,1,.3,1)
• cubic-bezier(.25,0,.4,1)

Keyframes

@keyframes marquee { 0%{transform:translate(0)} to{transform:translateX(var(--marquee-offset))} }
@keyframes cursor-reveal { 0%{opacity:0;scale:.5} to{opacity:1;scale:1} }
@keyframes cursor-exit { 0%{opacity:1;scale:1} to{opacity:0;scale:.5} }
@keyframes terminal-chunk-in { 0%{opacity:0;filter:blur(2px);transform:translateY(4px)}to{opacity:1;filter:blur();transform:translateY(0)} }
@keyframes doc-video-playback { 0%{opacity:0;scale:.8}20%{opacity:1;scale:1}80%{opacity:1;scale:1}to{opacity:0;scale:.8} }

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “download Paper”

button-secondary — sample text: “download Paper”

navigation-link

CTA labels found on page

• download Paper

> Page contains canvas/WebGL elements — consider ambient effects layers.

Source Design Tokens (CSS custom properties)

:root {
  --color-blue-300: #a4c6f7;
  --color-blue-400: #81adec;
  --color-blue-500: #5d8cd7;
  --color-blue-600: #4570bc;
  --color-gray-50: #f5f5f2;
  --color-gray-100: #eaeae7;
  --color-gray-200: #d7d7d6;
  --color-gray-300: #c1c1c0;
  --color-gray-400: #a8a8a8;
  --color-gray-500: #909090;
  --color-gray-600: #666;
  --color-gray-700: #5b5b5b;
  --color-gray-800: #424242;
  --color-gray-900: #222;
  --color-gray-950: #181818;
  --color-paper-50: #fcfcf9;
  --color-paper-100: #efefe4;
  --color-black: #000;
  --color-white: #fff;
  --color-paper: var(--color-paper-50);
  --color-cream: var(--color-paper-100);
  --color-off-black: var(--color-gray-950);
  --color-root: var(--color-cream);
  --color-background: var(--color-paper);
  --color-foreground: var(--color-off-black);
  --color-note-surface: #f7f7f1;
  --color-gray: var(--color-gray-500);
  --color-dark-gray: var(--color-gray-600);
  --color-border: var(--color-gray-200);
  --color-border-dark: var(--color-gray-900);
  --color-blue: var(--color-blue-400);
  --color-light-blue: var(--color-blue-300);
  --color-focus: #81adec;
  --color-selection: #8ab9ff80;
  --spacing: 1px;
  --spacing-vw: calc(1vw - var(--scrollbar-width)/100);
  --container-content: calc(var(--body-width) - 32px);
  --default-font-family: Matter,system-ui;
  --font-mono: "Paper Mono","SFMono-Regular",Menlo,ui-monospace,monospace;
  --text-xs: 14px;
  --text-xs--line-height: 20px;
  --text-xs--letter-spacing: .015em;
  --text-sm: 16px;
  --text-sm--line-height: 24px;
  --text-sm--letter-spacing: .015em;
  --text-base: 18px;
  --text-base--line-height: 28px;
  --text-base--letter-spacing: .01em;
  --text-lg: 24px;
  --text-lg--line-height: 32px;
  --text-lg--letter-spacing: .005em;
  --text-xl: 30px;
  --text-xl--line-height: 38px;
  --text-xl--letter-spacing: -.015em;
  --text-2xl: 40px;
  --text-2xl--line-height: 48px;
  --text-2xl--letter-spacing: -.015em;
  --text-3xl: 48px;
  --text-3xl--line-height: 52px;
  --text-3xl--letter-spacing: -.02em;
}

Do's and Don'ts

Do

• Do reserve the accent #ACC4E4 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FCFCF9; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 400, 500, 600.
• Do align spacing to the 4px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #FCFCF9;
  --color-border: #D7D7D6;
  --color-primary: #81ADEC;
  --color-accent: #ACC4E4;
  --color-surface: #EFEFE4;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #C1C1C0;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #000000;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FCFCF9;
  --color-surface-container: #FCFBFD;
  --color-surface-container-high: #F9F9F9;
  --color-surface-container-highest: #F7F7F1;
  --font-sans: var(--default-font-family);
  --font-size-display: 56px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 1px;
  --radius-md: 8px;
  --radius-lg: 48px;
  --shadow-sm: 0 0 0 1px #80808026,0 93px 26px #0000,0 59px 24px #00000003,0 33px 20px #0000000d,0 15px 15px #00000017,0 4px 8px #0000001a;
  --shadow-md: inset 0 1px #ffffff1f,inset 0 -1px #0000001f;
  --shadow-lg: 0 16px 32px -16px #0000001f,0 8px 16px -8px #00000014,0 4px 8px -4px #0000000a,0 2px 4px #00000005,0 0 0 1px #00000014;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 40px;
  --space-xl: 60px;
  --tracking-display: -.015em;
  --tracking-label: .015em;
  --container-max: 899px;
}