---
title: "Paper design system"
variant: extended
source: https://paper.design/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/paper-design)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Paper · Design System

> A quiet canvas for connected design work

**Theme:** light · **Industry:** design · **Source:** https://paper.design/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Paper presents a connected design workspace through a restrained, warm-neutral palette and oversized, airy product previews. Fine grid lines and modular panels give the page a technical foundation without crowding its editorial typography.

## North star

Keep the warm, open canvas dominant and let precise product panels, fine grids, and restrained typography explain the product.

## Overview

The page uses a warm, near-white canvas (#fcfcf9) with broad pale-beige bands (#efefe4), creating a soft contrast that keeps the product UI central. Near-black (#181818) anchors headings, navigation and solid download buttons; muted grays carry supporting copy, while thin gray borders outline large content panels. Blue accents are reserved for links and small interface details rather than turning the page into a saturated brand surface. Matter is the dominant typeface: large, light-weight headlines use tight tracking and short line lengths, balanced by calm body text and compact uppercase eyebrows. The layout is a centered, narrow editorial column inside a spacious page, with a persistent top navigation, oversized product screenshots and diagrams, then stacked feature and news panels. Delicate grid motifs and diagonal background geometry echo the canvas metaphor. Generous section spacing and very restrained shadows make the interface feel open, precise and quietly technical.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas White | `#fcfcf9` | `--color-canvas-white` | brand | Primary page canvas and light panel color; it also appears as the foreground color on the dark download CTA. |
| Soft Ink | `#181818` | `--color-soft-ink` | brand | Primary headings, navigation, body emphasis, links, and the dark download button. |
| Warm Field | `#efefe4` | `--color-warm-field` | surface | Broad warm-beige background band framing the main page and product sections. |
| Quiet Gray | `#666666` | `--color-quiet-gray` | neutral | Muted descriptive copy and secondary text beneath headlines. |
| Panel Hairline | `#d7d7d6` | `--color-panel-hairline` | semantic | Fine outlines and separators around content panels and card-like sections. |
| Canvas Blue | `#93b8f0` | `--color-canvas-blue` | accent | Blue link accent and one endpoint of the subtle blue gradient; keep it sparse. |
| Signal Blue | `#6da1ee` | `--color-signal-blue` | accent | Second endpoint of the subtle link gradient, used for small accent treatments. |
| Deep Charcoal | `#303030` | `--color-deep-charcoal` | neutral | Secondary dark text and fine details where primary ink would feel too strong. |
| Middle Gray | `#909090` | `--color-middle-gray` | neutral | Low-emphasis text and incidental interface details; not a defining brand surface. |
| Warm Graphite | `#434341` | `--color-warm-graphite` | neutral | Occasional secondary text, especially in dense product or supporting content. |
| Mist Surface | `#eaeae7` | `--color-mist-surface` | surface | Light gray-beige card and interface surface used to distinguish nested areas. |
| UI Divider | `#e2e2e2` | `--color-ui-divider` | semantic | Secondary card and product-interface borders; subordinate to the main hairline. |
| Mockup Gray | `#f2f2f2` | `--color-mockup-gray` | surface | Pale fill seen in small product-interface mockups, not a principal page background. |
| Stone Gray | `#8a8a88` | `--color-stone-gray` | neutral | Occasional muted heading or footer text, used sparingly. |

### Semantic aliases

`--color-canvas` → `#fcfcf9` (Canvas White) · `--color-surface` → `#efefe4` (Warm Field) · `--color-surface-2` → `#eaeae7` (Mist Surface) · `--color-text` → `#181818` (Soft Ink) · `--color-text-muted` → `#666666` (Quiet Gray) · `--color-text-subtle` → `#303030` (Deep Charcoal) · `--color-border` → `#d7d7d6` (Panel Hairline) · `--color-accent` → `#93b8f0` (Canvas Blue) · `--color-accent-2` → `#6da1ee` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#181818` | `#fcfcf9` | 17.28:1 | AAA |
| `#181818` | `#efefe4` | 15.34:1 | AAA |
| `#181818` | `#eaeae7` | 14.73:1 | AAA |
| `#666666` | `#fcfcf9` | 5.59:1 | AA |
| `#666666` | `#efefe4` | 4.96:1 | AA |
| `#666666` | `#eaeae7` | 4.76:1 | AA |
| `#303030` | `#fcfcf9` | 12.84:1 | AAA |
| `#303030` | `#efefe4` | 11.4:1 | AAA |
| `#303030` | `#eaeae7` | 10.95:1 | AAA |
| `#93b8f0` | `#fcfcf9` | 1.97:1 | fail |

### Gradients

- `linear-gradient(to right, lab(94.2188 -1.42306 5.34524) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(lab(94.2188 -1.42306 5.34524) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(to right, lab(0 0 0) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(lab(0 0 0) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(oklch(0.776395 0.0894303 257.993), oklch(0.703994 0.126381 257.994))`
- `linear-gradient(90deg, lab(96.172 0 0) 33%, lab(88.168 0 0) 33%, lab(88.168 0 0) 67%, lab(99.304 -0.0000298023 0) 67%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Matter | `--font-body` | webfont | 400, 360, 550, 480, 500 | Primary display, headings, body copy, navigation, links, and buttons. | Inter |
| -apple-system | `--font-apple-system` | system | 400, 500 | Compact captions and small product-interface labels. | Inter |

- **Matter:** Use light weights for display headlines, regular weight for copy, and modestly heavier links; headlines are tightly tracked and sentence case.
- **-apple-system:** Keep small labels neutral and unobtrusive; use regular or medium weight rather than display styling.

### Type scale — Custom (ratio ≈ 1.886, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 360 | 1 | -0.02em | — | Matter | Large hero statements and prominent section headlines. |
| h1 | 48px | 360 | 1 | -0.02em | — | Matter | Primary page headline and major introductory headings. |
| body | 18px | 400 | 1.56 | 0.01em | — | Matter | Supporting descriptions and feature explanations. |
| caption | 12px | 400 | 1.33 | 0.015em | — | -apple-system | Small product labels and image or UI annotations. |
| button | 18px | 480 | 1.56 | 0.01em | — | Matter | Download CTA text and other prominent action labels. |
| nav | 18px | 400 | 1.56 | 0.01em | — | Matter | Top-level navigation links. |
| link | 18px | 550 | 1.56 | 0.01em | — | Matter | Inline and editorial links that need added emphasis. |
| eyebrow | 14px | 500 | 2 | 0.05em | uppercase | Matter | Short uppercase labels introducing a section. |
| code | 12px | 400 | 2.33 | 0.015em | — | Paper Mono | Code snippets and technical interface text. |

OpenType features in use: `"calt"`, `"ss01"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 6, 8, 10, 12, 16, 20, 24, 30, 40 px.
- Section rhythm 60px · element gap 8px · card padding — · max content width —.

Use a centered editorial column with a slim top navigation and broad side margins. Keep the hero left-aligned, followed by a large product preview that overlaps or anchors the next visual band. Stack wide content modules vertically, combining full-width framed panels with occasional two-column feature or news rows. Thin grid lines and diagonal background shapes establish structure without increasing density. Preserve generous vertical breathing room between sections; the measured page is comfortable rather than compact. Do not infer a fixed max width from the available measurements.

## Shape & elevation

- Radius: button `4px` · card `12px` · media `50%` · link `4px` · xs `1px` · sm `2px` · md `4px` · lg `5px` · xl `6px` · 2xl `8px` · pill `9999px`
- Shadow `inset` (other): `rgba(255, 255, 255, 0.533) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.533) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.067) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.133) 0px 0px 1px 0px, rgba(0, 0, 0, 0.133) 0`
- Shadow `inset-2` (other): `rgba(255, 255, 255, 0.533) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.533) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.133) 0px 0px 1px 0px, rgba(0, 0, 0, 0.133) 0px 0px 3px -1px`
- Shadow `hairline` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 1px 0px 0px`
- Shadow `xl` (section): `rgba(0, 0, 0, 0.12) 0px 16px 32px -16px, rgba(0, 0, 0, 0.08) 0px 8px 16px -8px, rgba(0, 0, 0, 0.04) 0px 4px 8px -4px, rgba(0, 0, 0, 0.02) 0px 2px 4px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`
- Shadow `xl-2` (card): `rgba(128, 128, 128, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 93px 26px 0px, rgba(0, 0, 0, 0.01) 0px 59px 24px 0px, rgba(0, 0, 0, 0.05) 0px 33px 20px 0px, rgba(0, 0, 0, 0.09) 0px 15px 15px 0px, rgba`
- Shadow `inset-3` (other): `rgba(255, 255, 255, 0.667) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.667) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.133) 0px 0.5px 1px 0px, rgba(0, 0, 0, 0.094) 0px 0px 1px 1px, rgba(0, 0, 0, 0.067) 0`
- Motion: standard transition `0.15s ease` on interactive elements.

The overall composition is mostly flat, with thin gray panel borders doing more work than shadows. Product mockups may sit above the canvas with restrained, soft layered shadows and subtle inset highlights. Avoid heavy card elevation or dramatic depth; separation comes primarily from surface shifts, hairlines, overlap, and spacious placement.

## Imagery

Product UI screenshots and interface mockups are the main imagery, presented large and framed by pale panels. Supporting visuals are abstract canvas diagrams: delicate grid patterns, diagonal planes, and simple geometric marks. Keep these low-contrast so interface details and headlines remain legible. The page is not driven by lifestyle photography; imagery should feel like a clear view into a design workspace.

## Components

### Top navigation

A restrained horizontal header on the light canvas, with the Paper mark at left, centered product links, and sign-up at right; use dark Matter text and a subtle bottom hairline.

### Hero actions

Pair a near-black download button with a quiet text link such as “open Paper in the browser →”; the measured button uses a 4px radius and light text.

### Product canvas preview

A large product-interface image framed as a desktop design workspace, with floating panels and a subtle shadow; let it dominate the hero without adding decorative color.

### Feature panel

Use spacious, bordered modules with short headings and concise supporting copy; allow a large visual area above smaller two-column explanation rows.

### Grid section band

A pale section surface with fine grid or diagonal geometry, creating technical texture while keeping the text area calm and high-contrast.

### Editorial update cards

A two-column news-style row with image-led content, compact descriptions, and understated text links on light surfaces.

### Measured component styles

- **Primary button** (“download Paper”): background #181818 · text #fcfcf9 · radius 4px · padding 6px 14px · 480 18px Matter
- **Link** (“open Paper in the browser →”): transparent background · text #181818 · radius 0px · padding 0px · 400 18px Matter
- **Card** (“connect any agent to your canvas Connect”): background #fcfcf9 · text #181818 · radius 0px · padding 0px · 400 18px Matter
- **Navigation item** (“pricing roadmap blog changelog docs sign”): transparent background · text #181818 · radius 0px · padding 0px · 400 18px Matter

## Do

- Keep Canvas White (#fcfcf9) and Warm Field (#efefe4) as the dominant surfaces.
- Use Soft Ink (#181818) for primary text and the main download CTA.
- Set hero headlines in a light, tightly tracked sans-serif style.
- Use fine borders to define panels instead of heavy card shadows.
- Let product UI imagery occupy substantial space within the editorial layout.
- Reserve the blue accents for small links or interface details.

## Don't

- Do not introduce saturated color as a large background field.
- Do not compress the sections into a dense dashboard layout.
- Do not use heavy shadows or thick outlines on every panel.
- Do not let decorative grids compete with headline or product content.
- Do not replace the product interface focus with lifestyle photography.
- Do not style all text with the same weight or visual emphasis.

## Agent prompt

Build a new page in Paper’s quiet, product-led design language. Use Canvas White (#fcfcf9) as the main canvas and Warm Field (#efefe4) for broad section bands; use Soft Ink (#181818) for headlines, navigation, links, and the primary dark CTA. Keep supporting copy in muted gray, borders in Panel Hairline (#d7d7d6), and use Canvas Blue (#93b8f0) or Signal Blue (#6da1ee) only as restrained accents. Set large, light-weight Matter-like headlines with tight tracking, then use calm readable body text. Center the content in an editorial column, leave generous vertical space, and alternate framed product previews with modular feature panels. Add fine grid or diagonal motifs as low-contrast background texture. Favor hairlines and subtle layering over pronounced shadows; keep the interface imagery crisp and central.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Long, centered sequence of hero, product preview, feature panels, roadmap and news modules on a warm neutral canvas. | Top navigation, Download and browser actions, Scroll-led product storytelling | Warm section bands, Framed product mockups, Fine grid motifs, Modular bordered panels |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/paper-design