---
version: alpha
name: Paper
description: Print-shop minimalism for the agent era — a warm cream-paper canvas (#fcfcf9) under near-black ink (#181818), a single periwinkle-blue accent, custom variable-font weights (480 medium, 670 bold), and halftone/CMYK/papercut craft details that make a code-and-design tool feel physical.

colors:
  # Canvas + ink (the "paper" identity)
  background: "#fcfcf9"        # color-paper-50 — warm off-white, the page
  surface: "#fcfcf9"
  surface-soft: "#efefe4"      # color-paper-100 — cream card/section tint
  surface-cream: "#f5f5f2"     # color-gray-50 — subtle warm surface
  ink: "#181818"               # color-gray-950 / off-black — primary text
  ink-pure: "#010101"          # color-off-black — deepest text
  chat-bg: "#f8f6ef"           # cursor-chat bubble cream

  # Accent — single periwinkle blue, used sparingly
  primary: "#5d8cd7"           # color-blue-500 — accent for CTA/links (contrast-safe on cream)
  blue-400: "#81adec"          # color-blue-400 — focus ring, brand blue
  blue-300: "#a4c6f7"          # color-blue-300 — light blue tint
  focus: "#81adec"             # focus ring
  selection: "#a8c8ff"         # was #8ab9ff80 — flattened over paper

  # Neutral scale (warm grays)
  gray-900: "#222222"
  gray-800: "#424242"
  gray-700: "#5b5b5b"
  gray-600: "#666666"
  gray-500: "#909090"
  gray-400: "#a8a8a8"
  gray-300: "#c1c1c0"
  gray-200: "#d7d7d6"
  gray-100: "#eaeae7"

  # Borders (flattened alpha over cream)
  border: "#d7d7d6"            # color-gray-200 — default border
  border-soft: "#eaeae7"       # hairline divider
  border-dark: "#222222"       # color-gray-900 — strong border

  # On-color
  on-primary: "#ffffff"
  on-ink: "#fcfcf9"            # paper-tone text on dark
  white: "#ffffff"
  black: "#000000"

typography:
  display-hero:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 56px
    fontWeight: 670
    lineHeight: 1.02
    letterSpacing: -1.68px
  display:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 670
    lineHeight: 1.08
    letterSpacing: -1.2px
  section-heading:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 550
    lineHeight: 1.15
    letterSpacing: -0.96px
  sub-heading:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 550
    lineHeight: 1.25
    letterSpacing: -0.48px
  card-title:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 480
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: -0.18px
  body:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 480
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 480
    lineHeight: 1.0
    letterSpacing: -0.14px
  caption:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 430
    lineHeight: 1.3
    letterSpacing: 0px
  mono-body:
    fontFamily: "Paper Mono, SFMono-Regular, Menlo, ui-monospace, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  mono-caption:
    fontFamily: "Paper Mono, SFMono-Regular, Menlo, ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  micro: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  micro: 2px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 10px
  xl: 14px
  2xl: 18px
  3xl: 24px
  pill: 9999px

components:
  # Primary CTA — dark ink on paper
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px
  button-primary-hover:
    backgroundColor: "{colors.ink-pure}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px

  # Secondary — cream surface with warm border
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px
    borderColor: "{colors.border}"

  # Accent / brand-blue button
  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px

  # Pill badge
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.gray-700}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.pill}"
    padding: 3px 10px

  # Standard card — cream surface, hairline border
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
    borderColor: "{colors.border-soft}"

  # Cream-tinted feature card
  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 32px
    borderColor: "{colors.border-soft}"

  # Input field
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 8px 12px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    borderColor: "{colors.focus}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border-soft}"

  # Code block — mono on deep ink
  code-block:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.mono-body}"
    rounded: "{rounded.lg}"
    padding: 16px 20px

  # Inline link
  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
---

# Paper Design System

## Overview

Paper is a design-to-code-and-back tool, and its website is a love letter to the print shop. Where most developer products reach for sterile pure-white, Paper grounds everything on a warm cream canvas (`{colors.background}`, the literal "paper" token) with deep, near-black ink (`{colors.ink}`). The effect is tactile and analog — the page reads like a fresh sheet of premium stock rather than a glowing screen. This warmth is the brand's entire thesis: software that feels physical, made for designers and agents working side by side.

The typographic system is custom and precise. The real site ships a proprietary variable sans ("Matter") with Inter as the fallback, and a proprietary "Paper Mono" for code. What makes it distinctive is the non-standard weight ladder — instead of the usual 400/500/700, Paper defines `light: 270`, `medium: 480`, `semibold: 550`, and `bold: 670`. These fractional weights give headings a confident-but-unshouty presence: bold enough to anchor, never heavy enough to feel corporate. Display sizes carry tight negative tracking that tightens as type grows, lending the big print-shop word marks ("design incredible", "anti-slop") their compressed, editorial snap.

Color is ruthlessly restrained. The palette is a warm grayscale running from cream (`{colors.background}`) through paper-cream surfaces (`{colors.surface-soft}`) to off-black ink, with exactly one chromatic accent: a soft periwinkle blue (`{colors.blue-400}`) that surfaces as the focus ring, selection highlight, and occasional brand moment. The deeper `{colors.primary}` blue carries actionable accent work where contrast matters. There are no competing hues — the craft lives instead in process textures (halftone dots, CMYK registration marks, papercut layering) borrowed straight from offset printing.

**Key Characteristics:**
- Warm cream "paper" canvas (`{colors.background}`) instead of pure white — the core brand move
- Off-black ink (`{colors.ink}`), never harsh true-black, for body and headings
- Custom variable-font weight ladder: 270 / 480 / 550 / 670 (not standard 400/500/700)
- A single periwinkle-blue accent (`{colors.blue-400}` / `{colors.primary}`) — focus, selection, brand
- "Paper Mono" for code, terminal output, and technical labels
- Print-craft texture system: halftone, CMYK, papercut detailing
- Warm neutral gray scale tuned to the cream canvas, not cool grays
- Tight negative letter-spacing on display type, relaxing toward body sizes

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): The signature warm off-white page background and primary surface.
- **Paper Cream** (`{colors.surface-soft}`): Tinted card and section background, one step warmer than the canvas.
- **Surface Cream** (`{colors.surface-cream}`): Subtle warm surface tint for nested blocks.
- **Ink** (`{colors.ink}`): Primary text and headings — off-black, slightly warm.
- **Off-Black** (`{colors.ink-pure}`): Deepest text and high-emphasis hover states.

### Accent
- **Brand Blue** (`{colors.blue-400}`): The single periwinkle accent — focus rings, selection, brand moments.
- **Accent Blue** (`{colors.primary}`): Deeper blue for actionable accents and links where contrast matters.
- **Light Blue** (`{colors.blue-300}`): Soft blue tint for highlights and decorative fills.
- **Focus** (`{colors.focus}`): Keyboard focus ring color.
- **Selection** (`{colors.selection}`): Text-selection highlight (flattened from translucent blue).

### Neutral Scale (warm grays)
- **Gray 900** (`{colors.gray-900}`): Strong borders, near-ink emphasis.
- **Gray 800–700** (`{colors.gray-800}`, `{colors.gray-700}`): Secondary text.
- **Gray 600** (`{colors.gray-600}`): Body secondary / description copy.
- **Gray 500** (`{colors.gray-500}`): Muted text, captions.
- **Gray 400–300** (`{colors.gray-400}`, `{colors.gray-300}`): Placeholders, disabled, soft fills.
- **Gray 200** (`{colors.gray-200}`): Default borders.
- **Gray 100** (`{colors.gray-100}`): Hairline dividers.

### Borders
- **Border** (`{colors.border}`): Standard component border on cream.
- **Border Soft** (`{colors.border-soft}`): Hairline dividers and card outlines.
- **Border Dark** (`{colors.border-dark}`): Strong, high-contrast outline.

## Typography

### Font Family
- **Primary**: `Inter` (the real site uses custom "Matter"; Inter is the closest faithful fallback), with `system-ui, sans-serif`.
- **Monospace**: `Paper Mono`, with fallbacks `SFMono-Regular, Menlo, ui-monospace, monospace`.
- **Weight ladder**: Custom variable weights — `light: 270`, `semilight: 360`, `caption: 430`, `medium: 480`, `semibold: 550`, `bold: 670`.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 56px hero word marks — maximum print-shop impact |
| `display` | Large statement headings |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, card group headings |
| `card-title` | Feature card titles |
| `body-large` | Lead paragraphs, feature descriptions |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text, nav |
| `body-small` | Compact UI, metadata |
| `button-ui` | Buttons and interactive labels |
| `caption` | Tags, fine print |
| `mono-body` | Code blocks, terminal |
| `mono-caption` | Code labels, technical tags |

### Principles
- **Fractional weights as identity**: Use 480 for medium and 670 for bold — the in-between weights are what make Paper feel crafted, not default.
- **Tracking tightens with size**: Display type carries -1.2px to -1.68px tracking; it relaxes to near-zero at body.
- **Mono for the machine voice**: Paper Mono marks code, terminal, and technical labels — the "agent" half of the brand.

## Layout

### Spacing System
The full scale lives in the `spacing:` token block above. Base rhythm is 8px, with generous jumps (`{spacing.3xl}` 64px, `{spacing.4xl}` 96px) for the airy, gallery-like section spacing the print aesthetic depends on.

### Grid & Container
- Max content width approximately 1200px, centered
- Hero: single centered column with large vertical breathing room
- Feature sections: 2–3 column grids on cream-tinted cards
- Hairline dividers (`{colors.border-soft}`) instead of heavy rules

### Whitespace Philosophy
- **Paper as space**: The warm canvas IS the design — large empty margins read as premium stock, not emptiness.
- **Texture over decoration**: Where other systems add color, Paper adds print-process texture (halftone, CMYK marks, papercut layers).

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Page background, text blocks |
| Hairline | 1px `{colors.border-soft}` | Card outlines, dividers |
| Border | 1px `{colors.border}` | Inputs, secondary buttons |
| Soft Card | Hairline + faint warm shadow | Feature cards lifting off cream |
| Focus | 2px `{colors.focus}` ring | Keyboard focus on interactive elements |

**Shadow Philosophy**: Paper avoids heavy elevation. Depth comes from the warm border system and the contrast between cream surfaces (`{colors.surface-soft}`) and the base canvas, plus print-texture layering rather than drop shadows.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `micro` | 2px | Inline marks, tiny spans |
| `xs` | 4px | Small containers |
| `sm` | 6px | Compact controls |
| `md` | 8px | Buttons, inputs |
| `lg` | 10px | Code blocks, list items |
| `xl` | 14px | Cards |
| `2xl` | 18px | Feature cards |
| `3xl` | 24px | Large panels |
| `pill` | 9999px | Badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Off-black ink fill, paper-tone text, `{rounded.md}`. The default CTA.
- **`button-secondary`** — Cream surface with `{colors.border}` outline.
- **`button-accent`** — Periwinkle `{colors.primary}` fill for brand-forward actions.

### Pills & Badges
- **`badge`** — Cream surface, mono caption text, full pill. Often carries the technical/version label voice.

### Cards
- **`card`** — Paper surface, hairline `{colors.border-soft}` outline, `{rounded.xl}`.
- **`card-feature`** — Cream-tinted `{colors.surface-soft}` surface, `{rounded.2xl}`, generous padding.

### Inputs
- **`input`** — Paper surface, `{colors.border}` outline. Focus swaps the border to `{colors.focus}` plus a 2px ring.

### Navigation
- **`nav-bar`** — Paper header, Inter 14px weight 480 links, hairline bottom border.

### Code & Technical
- **`code-block`** — Deep ink background, paper-tone Paper Mono text, `{rounded.lg}` — the "agent / machine" surface.

### Distinctive Components
- **Print-texture decoration**: Halftone dot fields, CMYK registration marks, and papercut layered shapes used as section atmosphere — Paper's signature visual craft.
- **Tool icon strip**: Integrations (VS Code, GitHub, Claude, Terminal) shown as a monochrome icon row that connects the design and code halves of the product.

## Do's and Don'ts

### Do
- Use the cream `{colors.background}` canvas, not pure white — the warmth is the brand
- Use off-black `{colors.ink}` for text, never harsh true-black for body
- Use the fractional weight ladder (480 medium, 670 bold)
- Keep blue (`{colors.blue-400}` / `{colors.primary}`) as the single accent — focus, selection, occasional CTA
- Reach for print texture (halftone, CMYK, papercut) instead of extra colors
- Tighten letter-spacing as type grows
- Use Paper Mono for code and technical labels

### Don't
- Don't swap the cream canvas for pure white `{colors.white}`
- Don't introduce a second accent hue — periwinkle blue is the only chromatic note
- Don't use standard 500/700 weights where 480/670 belong
- Don't use heavy drop shadows — depth is border + cream-tint contrast
- Don't put positive tracking on display headings
- Don't use cool, blue-tinted grays — the neutral scale is warm

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, tighter padding |
| Tablet | 600–900px | 2-column grids begin |
| Desktop | 900–1200px | Full card grids, max content width |
| Large | >1200px | Centered, generous cream margins |

### Touch Targets
- Buttons use comfortable 10px vertical padding
- Nav links at 14px with adequate spacing
- Pill badges have 10px horizontal padding for tap targets

### Collapsing Strategy
- Hero word marks: 56px → scale down, maintaining negative tracking proportionally
- Navigation: horizontal links → menu toggle
- Feature cards: 3-column → 2-column → single column
- Section spacing: 96px → ~48px on mobile

### Image Behavior
- Light/dark product screenshots maintain rounded `{rounded.2xl}` framing at all sizes
- Print textures simplify on mobile to preserve performance

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Paper cream `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Gray 600 `{colors.gray-600}`
- Primary CTA: Ink `{colors.ink}` fill, paper-tone text
- Accent: Periwinkle `{colors.primary}` / `{colors.blue-400}`
- Border: `{colors.border-soft}` hairline
- Focus ring: `{colors.focus}`

### Example Component Prompts
- "Create a hero on a warm cream `{colors.background}` canvas. Headline at 56px Inter weight 670, line-height 1.02, letter-spacing -1.68px, color `{colors.ink}`. Subtitle at 18px weight 400, `{colors.gray-600}`. Dark CTA (`{colors.ink}` fill, 8px radius, 10px 18px padding) plus a cream ghost button with `{colors.border}` outline."
- "Design a feature card: cream `{colors.surface-soft}` surface, 18px radius, 32px padding, hairline `{colors.border-soft}` outline. Title 20px Inter weight 480, body 16px weight 400 in `{colors.gray-600}`."
- "Build a pill badge: `{colors.surface-soft}` background, `{colors.gray-700}` text, 9999px radius, 3px 10px padding, 12px Paper Mono."
- "Create a code block: `{colors.ink}` background, paper-tone `{colors.on-ink}` text, Paper Mono 14px, 10px radius, 16px 20px padding."

### Iteration Guide
1. Always start on the cream canvas — `{colors.background}`, never pure white
2. Use fractional weights: 480 for medium, 670 for bold
3. Keep exactly one accent hue (periwinkle blue); everything else is warm grayscale
4. Tighten tracking as type grows; relax it at body sizes
5. Add print texture (halftone / CMYK / papercut) where you'd otherwise add color
6. Paper Mono for code and machine voice, Inter for everything else

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Paper. Brand names and trademarks belong to their respective owners.