# Paper — Design System
> A connected design canvas for teams shipping with AI agents.
- **Canonical:** https://uiuxskills.com/library/paper
- **Source:** https://paper.design
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:16:52.561Z

---

---
version: alpha
name: Paper
description: A connected design canvas for teams shipping with AI agents.
tone: Modern, technical, efficient, and direct.
color-scheme: light
colors:
  primary: "#000000"
  secondary: "#181818"
  surface: "#EFEFE4"
  on-surface: "#181818"
  on-primary: "#FCFCF9"
  outline: "#E5E7EB"
  error: "#900C3F"
  surface-bright: "#F5F5F0"
  focus-ring: "#81ACEC"
  divider: "#000000"
typography:
  display-lg:
    fontFamily: Matter
    fontSize: 56px
    fontWeight: 600
    lineHeight: "1"
  headline-lg:
    fontFamily: Matter
    fontSize: 42px
    fontWeight: 600
  headline-md:
    fontFamily: Matter
    fontSize: 32px
    fontWeight: 500
  body-md:
    fontFamily: Matter
    fontSize: 16px
    fontWeight: 400
  body-sm:
    fontFamily: Matter
    fontSize: 14px
    fontWeight: 400
  label-md:
    fontFamily: Matter
    fontSize: 14px
    fontWeight: 500
  label-sm:
    fontFamily: Paper Mono
    fontSize: 12px
    fontWeight: 400
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 64px
  2xl: 128px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
  card:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.secondary}"
  badge:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.divider}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  swatch-outline:
    backgroundColor: "{colors.outline}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 200ms
  duration-medium: 400ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 3px rgba(0, 0, 0, 0.2)
  md: 0 4px 6px rgba(0, 0, 0, 0.2)
  lg: 0 10px 20px rgba(0, 0, 0, 0.3)
---

## Overview

Paper is a developer-centric design tool that bridges the gap between visual canvas and production code. The aesthetic is clean, minimalist, and enterprise-ready, prioritizing high-density information and workflow efficiency over decorative flourishes.

## Colors

The color palette is strictly functional, utilizing a high-contrast monochromatic base with specific semantic accents to guide user interaction and focus.

*   Primary (#000000): The core brand color for main CTAs and high-emphasis text.
*   Secondary (#181818): An accent color for subtle UI elements and hover states.
*   Surface (#EFEFE4): The main background color, providing a warm, paper-like texture.
*   On-Surface (#181818): Primary text color for high readability against the surface.
*   On-Primary (#FCFCF9): The text color used for high-contrast primary buttons.
*   Outline (inferred) (#E5E7EB): The border color for UI components and structural dividers.
*   Error (#900C3F): A semantic color reserved exclusively for destructive or error-based states.
*   Surface-Bright (inferred) (#F5F5F0): A lighter variant used for cards or elevated sections.
*   Focus-Ring (#81ACEC): The dedicated color for interactive focus states.
*   Divider (#000000): A sharp, high-contrast color for lists and navigation separators.

## Typography

The typography system relies on the "Matter" typeface for a neutral, technical feel, supplemented by a monospaced font for data-heavy labels.

*   Display-lg: Large, high-impact headline for hero sections.
*   Headline-lg: Secondary section headers.
*   Headline-md: Sub-headers for feature blocks.
*   Body-md: Standard body text for optimal readability.
*   Body-sm (inferred): Secondary text and captions.
*   Label-md (inferred): Standard button labels and navigation items.
*   Label-sm: Monospace labels for technical data and metadata.

## Layout

The layout follows a mobile-first responsive grid system contained within a max-width wrapper. It utilizes a 4px base unit for all spacing, ensuring a consistent vertical and horizontal rhythm. The page structure follows this sequence: nav, hero, features, social-proof, use-cases, and footer. The hero pattern features a centered headline and subhead, a primary CTA, and a secondary link, immediately supported by a large product screenshot.

## Elevation & Depth

Elevation is used sparingly to maintain a flat, minimalist aesthetic while providing necessary visual hierarchy.

*   elevation.sm: Subtle lift for small UI elements.
*   elevation.md: Standard lift for interactive cards and popovers.
*   elevation.lg: Deepest shadow for modal or drawer overlays.

## Shapes

The shape language balances technical precision with modern UI trends. Structural elements utilize sharp, clean corners, while interactive components like badges and buttons use full rounding to signal actionability.

*   `rounded.sm` (4px): Used for input fields and small UI containers.
*   `rounded.md` (8px): The standard radius for cards.
*   `rounded.lg` (16px): Used for elevated card components.
*   `rounded.full` (9999px): Reserved for badges and pill-shaped buttons.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for primary actions and transparent backgrounds for secondary actions. They rely on `{typography.label-md}` and should always feature a visible `{colors.focus-ring}` when navigated via keyboard.

### Card
Cards are defined by a `{colors.surface-bright}` background and a `{colors.outline}` border. Use `{rounded.md}` for standard cards and `{rounded.lg}` for elevated variations.

### Input Field
Input fields use `{colors.surface}` as a base with `{colors.outline}` borders. On focus, the border must transition to `{colors.focus-ring}` to indicate active state.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Use `{colors.error}` for non-destructive actions. |
| Apply `{typography.display-lg}` for hero headlines only. | Use `{typography.body-sm}` for primary content. |
| Use `{colors.divider}` for all horizontal and vertical separators. | Mix `{rounded.full}` with `{rounded.sm}` on the same component. |
| Maintain `{spacing.md}` between related UI elements. | Use shadows on flat navigation elements. |
| Use `{rounded.md}` for all card components. | Use more than two font families in a single view. |
| Ensure all interactive elements have a `{colors.focus-ring}` state. | Use `{colors.surface}` as a background for high-emphasis cards. |
| Use `{typography.label-sm}` for technical data. | Use `{typography.display-lg}` for body text. |
| Use `{colors.surface-bright}` for card backgrounds. | Use `{colors.primary}` for background fills. |

## Content Style

CTA labels are written as imperative verbs in sentence case. They should be direct and action-oriented, avoiding vague phrasing.

Headings are concrete and benefit-driven. They focus on the specific value proposition of the feature or section rather than abstract marketing claims.

Copy density is kept low. Use short, scannable paragraphs and frequent lists to break up technical information, ensuring the content remains accessible and easy to digest.

## Imagery & Icons

The imagery style is a mix of high-fidelity product screenshots and clean, minimalist iconography. Icons are generally filled and rounded to match the brand's precision. Product imagery should be presented in a way that emphasizes the "connected canvas" workflow, often showing the tool in context with other developer apps.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Paper, a modern enterprise design tool with a minimal, technical aesthetic. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.md}` — never hardcode hex values, pixel sizes, or raw font weights.
2. Use only the components defined in the spec (`button-primary`, `button-secondary`, `card`, `card-elevated`, `input-field`, `badge`, `divider`). Do not invent variants such as "button-ghost" or "card-flat".
3. Follow the Layout section for page structure (nav → hero → features → social-proof → use-cases → footer) and the 4px base spacing grid. Apply `{spacing.*}` tokens for all gaps and padding; never estimate.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it — for example, using `{colors.error}` for a non-destructive action — surface the conflict explicitly before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) is available, those values take precedence over the spec's inferred entries.

## Output contract

**Must:**
- Use all tokens by name with backtick-wrapped curly-brace syntax.
- Render all interactive components with hover, focus (`{colors.focus-ring}`), and disabled states when the spec defines them.
- Apply `{rounded.sm}` to inputs, `{rounded.md}` to standard cards, `{rounded.lg}` to elevated cards, and `{rounded.full}` to badges and pill buttons — never mix radii within a single component.
- Apply `{motion.duration-short}` and `{motion.easing-standard}` to state transitions.
- Write CTA labels as imperative verbs in sentence case, per the Content Style section.

**Must NOT:**
- Invent colors, typefaces, radii, or spacing values absent from the spec.
- Use generic system-level defaults when a named token exists.
- Add emoji, decorative flourishes, or filler copy.
- Apply elevation tokens to flat navigation elements.
- Rewrite, replace, or invent page copy, headings, button labels, or navigation items.
- Alter page structure or routing as a side effect of applying design tokens.

## When in doubt
- If a value isn't specified, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous background roles, default to `{colors.surface}`; for text on that background, use `{colors.on-surface}`; for primary actions, use `{colors.primary}`.
- For unspecified breakpoints, follow the mobile-first layout narrative; if absent, use one breakpoint at 768px.
- Inferred tokens are approximations — flag them when they appear in generated output.