# Paper.design Design System

> A highly technical, blueprint-inspired canvas relying on ultra-light typography and structural grid lines.

**Source:** https://paper.design | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Paper.design operates as a structural, monochrome canvas. The system relies on a stark `#ffffff` foundation with high-contrast dark text and thin structural borders. Typography is the primary expressive tool, utilizing Matter at an ultra-light 360 weight with tight negative tracking for display, paired with Inter for dense, legible UI data. The visual language mimics a technical drafting board, avoiding decorative color entirely in favor of stark utility.

## Signature DNA
1. **Ultra-light display typography** (Matter at weight 360 with up to -1.28px tracking creates a delicate, technical editorial feel on the homepage and pricing pages).
2. **Achromatic foundation** (The primary palette is entirely monochrome, relying on `#ffffff` surfaces and thin structural borders to define space without relying on chromatic voltage).

## Family Map
No sub-brands captured in topology.

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--tw-ring-offset-color` | `#ffffff` | surface_bg, text | 31 | 1.0 | computed_style, css_variable |

### Accent
Not captured in source.

### Semantic
Not captured in source.

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Matter | 360, 400, 430, 480, 550 | heading, body | Inter | Proprietary |
| Inter | 400, 500, 600 | body, heading | Inter | OFL |
| Paper Mono | 400 | mono, caption | JetBrains Mono | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-lg` | 64px | 64px | -1.28px | 360 | Display | `h3.text-3xl.leading-none` |
| `display-md` | 48px | 48px | -0.96px | 360 | Display | `h1.text-2xl.leading-[100%]` |
| `heading-lg` | 36px | 36px | -0.36px | 600 | Section heading | `div:nth-of-type(2)` |
| `heading-sm` | 24px | 28.8px | 0.18px | 600 | Sub-section heading | `span` |
| `body-lg` | 18px | 28px | 0.18px | 400 | Primary body | `div` |
| `body-md` | 16px | 28px | -0.32px | 600 | Strong body | `span:nth-of-type(2)` |
| `body-sm` | 14px | 18px | 0.18px | 500 | UI labels | `span:nth-of-type(1)` |
| `caption` | 12px | 16px | 0.18px | 400 | Metadata | `span:nth-of-type(2)` |
| `mono-sm` | 12px | 16px | 0.18px | 400 | Code/Technical | `span:nth-of-type(1)` |

### Principles
- **Display weight stays at 360.** Matter at 360 is the editorial signature. Never bold display copy.
- **Negative letter-spacing on display.** Matter pulls -0.96px to -1.28px tighter on display sizes.
- **Positive letter-spacing on body.** Inter and Matter body sizes use +0.18px tracking for legibility.

## Spacing
**Base unit:** 4px (inferred)

| Token | Value | Occurrences |
|---|---|---|
| `spacing-xs` | 4px | 13 |
| `spacing-sm` | 8px | 52 |
| `spacing-md` | 12px | 44 |
| `spacing-lg` | 16px | 30 |
| `spacing-xl` | 40px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Sharp structural panels | 866 occurrences |
| `radius-xs` | 1px | Subtle card borders | 54 occurrences |
| `radius-sm` | 4px | Small inputs | 120 occurrences |
| `radius-md` | 8px | Standard controls | 63 occurrences |
| `radius-lg` | 20px | Elevated cards | 24 occurrences |
| `radius-pill` | 9999px | CTA buttons | 27 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `shadow-md` | `rgba(0, 0, 0, 0.12) 0px 4px 10px 0px, rgba(0, 0, 0, 0.12) 0px 2px 4px -1px, rgba(0, 0, 0, 0.12) 0px 0px 4px -1px` | Hovered cards, floating panels | 11 occurrences |

## Components

### Tier 1: Foundational

#### Surface Flat
**Role:** Base container for page sections.
**Pages observed:** https://paper.design, https://paper.design/pricing
**Spec:** Background `lab(98.8967 -0.385851 1.42193)` / Text `lab(8.244 0 -0.00000298023)` / Border `lab(8.244 0 -0.00000298023)` / Radius 0px / Padding 0px / Shadow none
**States observed:** Default | Disabled: not captured

#### Surface Padded
**Role:** Contained content regions requiring internal breathing room.
**Pages observed:** https://paper.design, https://paper.design/pricing
**Spec:** Background `lab(98.8967 -0.385851 1.42193)` / Text `lab(8.244 0 -0.00000298023)` / Border `lab(8.244 0 -0.00000298023)` / Radius 0px / Padding 40px / Shadow none
**States observed:** Default | Disabled: not captured

### Tier 2: Patterns

#### Structural Card
**Role:** Primary container for pricing tiers and feature grids.
**Pages observed:** https://paper.design, https://paper.design/pricing
**Spec:** Background `lab(98.8967 -0.385851 1.42193)` / Text `lab(8.244 0 -0.00000298023)` / Border `lab(85.9644 -0.138432 0.510156)` (1px) / Radius 1px / Padding 0px / Shadow none
**States observed:** Default | Disabled: not captured

### Tier 3: Surface-specific
Not captured in source.

## Layout
| Property | Value |
|---|---|
| Max-width | Not captured in source |
| Grid | Not captured in source |

## Responsive
Not captured in source.

## Imagery & decoration
The brand relies on structural grid lines (resembling cutting mats or drafting paper) rather than photography or illustration. Decorative elements are restricted to thin 1px borders and stark geometric divisions.

## Do's
- Do use Matter at weight 360 for all primary display headings.
- Do apply tight negative tracking (-0.96px to -1.28px) to display typography.
- Do use 0px or 1px border radii for structural cards to maintain the technical blueprint aesthetic.
- Do rely on `#ffffff` for primary backgrounds to maximize contrast with dark text.
- Do use Paper Mono for technical metadata and captions.

## Don'ts
- Don't increase Matter heading weight above 360 for display sizes. (Wrong: Matter 600 at 48px. Right: Matter 360 at 48px. Reason: Kills the delicate editorial signature).
- Don't use heavy drop shadows for standard structural cards. (Wrong: 20px blur shadows. Right: 1px borders with 0px radius. Reason: The system relies on flat, technical boundaries).
- Don't mistake a sub-brand accent color for the parent primary. (Wrong: Setting the parent primary to a saturated blue. Right: Setting the parent primary to `#ffffff`. Reason: The parent brand is strictly monochrome).

## Similar brands
- Vercel (monochrome, highly technical typography)
- Linear (dark mode equivalent, high contrast, tight tracking)
- Raycast (utility-focused, minimal chromatic interference)

## Quick start

```css
:root {
  --tw-ring-offset-color: #ffffff;
  --font-display: 'Matter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Paper Mono', monospace;
  --shadow-md: rgba(0, 0, 0, 0.12) 0px 4px 10px 0px, rgba(0, 0, 0, 0.12) 0px 2px 4px -1px, rgba(0, 0, 0, 0.12) 0px 0px 4px -1px;
}
```

## Agent prompt examples
- "Create a pricing card using a 1px border, 1px border radius, and a flat background. Use Matter at weight 360 for the tier name."
- "Build a hero section with a `#ffffff` background. The main headline should be 64px Matter at weight 360 with -1.28px letter spacing."
- "Generate a feature grid where each cell is separated by a 1px border, using 0px border radius for the outer container."

## Known gaps
Hover states, focus states, and interactive component variations (like buttons and inputs) were not fully captured in the multi-page validation arrays. Semantic colors (success, error) are missing from the source evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://paper.design | Desktop | 2026-06-06T05:00:51.316Z |
| Pricing | https://paper.design/pricing | Desktop | 2026-06-06T05:00:51.316Z |
| About | https://paper.design/about | Desktop | 2026-06-06T05:00:51.316Z |