Paper

Overview

Paper is a collaborative design tool built on web standards that connects teams, agents, code, and data on a single canvas. The design system embodies Architectural Minimalism—a movement that prioritizes clarity, precision, and functional beauty through restrained color palettes, geometric precision, and typographic hierarchy. The interface evokes a sense of calm professionalism: the warm, neutral background (#fcfcf9) acts as a canvas, while the deep charcoal primary (#222222) and accent blue (#81adec) provide focused visual anchors. The emotional response is one of clarity and control—users feel they are working within a well-organized, intentional space.

The brand voice is direct, precise, and unpretentious. Paper speaks in concrete terms: "the connected canvas," "nothing gets lost in translation," "ship with agents." The vocabulary avoids marketing hyperbole; instead, it emphasizes technical capability and team collaboration. Tone is calm and confident, never breathless. Example sentence in Paper's voice: "Paper connects your teams, agents, code, and data on a single design space built on web standards."

Colors

Paper's color philosophy centers on a warm, neutral foundation with strategic accent colors that guide interaction and hierarchy. The surface stack uses a refined gray palette: surface (#fcfcf9) is the primary canvas, surface-container-lowest (#efefe4) creates subtle depth for secondary surfaces, and surface-container-high (#c1c1c0) provides clear visual separation for tertiary elements. The on-surface color (#222222) is a deep charcoal—not pure black—which reduces eye strain and maintains warmth. Primary (#222222) is used for body text, primary CTAs ("download Paper"), and interactive elements in their default state. Secondary (#81adec) is the brand's signature accent blue, applied to links, focus states, and secondary CTAs ("open Paper in the browser"). This blue is derived from the bran

Typography

Paper's type system is built on Matter, a custom typeface that conveys precision and warmth. The hierarchy spans from display (64px, weight 670) for hero statements down to label-sm (14px, weight 430) for metadata. Display and headline-lg use negative letter-spacing (-0.02em, -0.015em) to create visual compression and authority; body-md and body-lg use positive letter-spacing (0.01em, 0.005em) to maintain readability at smaller sizes. Font weights range from 270 (light, rarely used) to 670 (bold, for display). The system uses weight 480 (medium) for interactive labels and weight 550 (semibold) for headlines, creating a clear distinction between content hierarchy and interactive elements. Line heights are generous: body-md uses 28px line-height on 18px type, ensuring comfortable reading. Wh

Layout

Paper uses a fluid, responsive grid system with a maximum container width of 1324px (defined via CSS custom property --content-max). The page rhythm is built on a 12-column grid that adapts across breakpoints: at mobile (< 640px), the grid uses full-width containers with 16px padding; at tablet (640px–899px), padding increases to 28px and content begins to constrain; at desktop (900px+), the grid expands to its full 1324px width with 40px–60px card padding depending on viewport. The spacing scale uses semantic tokens: unit (4px) for micro-spacing, sm (12px) for component padding, md (24px) for section gutters, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. White space is used deliberately: the hero section has lg spacing above the primary CTA, and se

Elevation & Depth

Paper uses a subtle shadow system to convey depth without introducing visual noise. The elevation scale has three levels: sm (0 1px 2px rgba(0, 0, 0, 0.05)) for minimal lift on interactive elements like buttons and small cards; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and modals; and lg (0 16px 32px -16px rgba(0, 0, 0, 0.1), 0 8px 16px -8px rgba(0, 0, 0, 0.08), 0 4px 8px -4px rgba(0, 0, 0, 0.04)) for prominent overlays and hero imagery. Shadows use a layered approach with multiple blur radii to create naturalistic depth. All interactive elements (buttons, cards, inputs) include a

Shapes

Paper's shape philosophy is Geometric Precision: rounded corners are minimal and functional, never decorative. The rounded scale uses small radii: sm (2px) for subtle softening on text inputs and small UI elements; DEFAULT (4px) for buttons, standard cards, and primary interactive surfaces; md (6px) for secondary cards and grouped components; lg (8px) for modals and elevated containers; xl (12px) for large cards and hero imagery; and full (9999px) for badges and pill-shaped elements. Buttons use DEFAULT (4px) radius, creating a slightly softened square that feels modern without appearing playf

Components

Action Elements Buttons are the primary interactive element. Button-primary uses primary color (#222222) background with on-primary text (#ffffff), 40px height, 6px 14px padding, and DEFAULT (4px) border-radius. The label uses label-md typography (16px, weight 480). On hover, the background transitions to primary-container (#424242) over 150ms (ease-out), creating a subtle darkening effect. Button-secondary uses a transparent background with a 1px border at outline-variant (#c1c1c0) and primary text color; on hover, the background fills with surface-container-low (#eaeae7). Button-ghost is used for tertiary actions and uses transparent background with on-surface-variant text; on hover, it fills with surface-container-low. All buttons include a focus ring: 0 0 0 3px rgba(129, 173, 236,

Do's and Don'ts

**Do**

• Do use primary (#222222) for body text and primary CTAs to maintain strong visual hierarchy and readability.
• Do apply secondary (#81adec) to links, focus states, and secondary CTAs to create consistent accent color usage.
• Do use the full rounded scale (2px–12px) to maintain architectural precision; avoid 0px (too austere) and 16px+ (too soft).
• Do apply elevation shadows (sm, md, lg) consistently to create depth without visual noise; always pair with 1px borders.
• Do use Matter typeface with precise letter-spacing (-0.02em for display, 0.01em for body) to maintain the brand's technical credibility.
• Do constrain content to container-max (1324px) and use lg spacing (40px) for section separation to maintain readable rhythm.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; use primary (#222222) and surface (#fcfcf9) instead to maintain warmth.
• Don't apply shadows without borders; always pair elevation with 1px outline-variant borders to define edges with precision.
• Don't use border-radius larger than 12px on standard components; it introduces visual softness that conflicts with architectural minimalism.
• Don't apply secondary color (#81adec) to body text or large surfaces; reserve it for interactive elements, links, and accents.
• Don't use font weights outside the defined scale (270–670); stick to 400 (body), 480 (labels), 550 (headlines), and 670 (display).
• Don't mix typefaces; Paper uses Matter exclusively for all text, maintaining visual cohesion and brand identity.