Studio Blue
#5d8cd7Brand icon mark, decorative vector accent — cool blue against warm cream is the only chromatic tension in the marketing surface
Paper
paper.designWebsite preview
The design language
Paper uses a warm-paper-studio language: a cream ivory canvas instead of white, calm monochrome typography in a custom display face, and a single cool blue accent that does almost no UI work. The two-tone headline (dark first line, mid-gray continuation) is the signature move — it treats the hero copy as a composition of weights rather than a single block. Surfaces sit flat on the page with one barely-there card shadow, borders are hairline, and the product feels like a printed notebook page under cool studio light. Most of the chromatic energy lives inside the product screenshot; the marketing surface around it stays restrained, near-achromatic, and grid-quiet.
Color palette
brand
Wash Blue
#81adecLighter blue used for soft body accents and nav underlines
neutral
Bone Canvas
#efefe4Page background — warm cream instead of white, the signature surface that makes the whole site feel like a notebook page
Paper White
#fcfcf9Primary page canvas and white card surfaces. Do not promote it to the primary CTA color
Bright Card
#ffffffPure white card surface for highest elevation, code panels, product chrome
Mist
#f3f3f4Subtle alternate band background, soft dividers in long pages
Ash Gray
#e3e3e3Card backgrounds in denser sections, soft grouping surface
Stone
#d7d7d6Hairline borders, card outlines, surface separators
Smoke
#c1c1c0Secondary borders, diagram strokes, muted dividers
Pewter
#a8a8a8Icon strokes, low-priority borders, decorative vector fills
Graphite
#909090Secondary body text, the lighter half of the two-tone headline, heading accents
Slate
#83837eSubdued heading and link text, warm-gray captions
Iron
#666666Helper text, metadata, tertiary copy
Lava
#434341Near-black emphasis text, slightly softer than full ink for long reads
Carbon
#222222Near-black used in nav chrome and high-contrast text
Ink
#181818Primary text, nav active state, filled button background — neutral dark, not chromatic
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
64px · 360 · 1 · -1.28px trackingThe quick brown fox jumps
heading
48px · 360 · 1.14 · -0.96px trackingThe quick brown fox jumps
heading-sm
36px · 600 · 1.2 · -0.36px trackingThe quick brown fox jumps
subheading
24px · 600 · 1.3 · 0.1px trackingThe quick brown fox jumps
body-lg
18px · 400 · 1.75 · -0.18px trackingThe quick brown fox jumps
text-16
16px · 600 · 1.75The quick brown fox jumps
body
14px · 500 · 1.56 · -0.14px trackingThe quick brown fox jumps
text-12
12px · 400 · 1.33The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Matter
- Weights
- 360, 400, 480, 500, 550
- Sizes
- 14px, 18px, 48px, 64px
- Line height
- 1.00, 1.56, 2.00
- Letter spacing
- -1.28px at 64px, -0.96px at 48px, -0.28px at 14px
- Fallback
- Söhne, Inter Tight, or a humanist geometric like Manrope
- Features
- "calt" on, "ss01" on
Display and headline face — custom, wide stance, unusual light-to-medium weights (360 is whisper-thin). Carries the hero, the two-tone headline split, and large pull quotes. Tight tracking on display (-0.0200em at 64px) gives the type a composed, editorial feel
Additional typeface
Inter
- Weights
- 400, 500, 600
- Sizes
- 12px, 14px, 16px, 18px, 24px, 36px
- Line height
- 1.20, 1.40, 1.50, 1.56, 1.75, 2.00
- Letter spacing
- -0.30px at 12px, -0.14px at 14px, -0.16px at 16px, -0.18px at 18px, 0.10px at 24px
- Fallback
- Inter (native), or system-ui
- Features
- "calt" on
UI and body face — captions, button labels, nav, metadata, product chrome. Tight negative tracking on small sizes (-0.0100em at 12–14px) keeps dense UI legible
Additional typeface
Paper Mono
- Weights
- 400
- Sizes
- 11px, 12px
- Line height
- 1.33, 2.55
- Letter spacing
- 0.17px at 11px, 0.19px at 12px
- Fallback
- JetBrains Mono, IBM Plex Mono
- Features
- "calt" on
Code, file paths, version labels, tiny metadata. Loose positive tracking (+0.0150em to +0.0160em) at small sizes gives the mono a calm, terminal-like cadence
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 96px
- Card padding
- 32px
- Element gap
- 8px
Border radius
tags
9999pxcards
8pxbuttons
4pxheroPanels
20pxlargeCards
12pximageFrames
24pxSpacing scale
2px3px4px6px7px8px10px12px14px16px18px24px30px32px36px40px42px44px60px64px120px172px173pxGuidelines
Do
- Use #181818 as the only filled-button background — never introduce a chromatic CTA color
- Split headlines into two visual weights: first line in Ink (#181818), continuation in Slate (#83837e), both at the same Matter display size
- Set the page background to Bone Canvas (#efefe4); reserve #ffffff for elevated cards and product chrome only
- Use 4px radius for buttons and tags, 8px for cards, 12–24px for product frames — never mix these scales on the same surface
- Keep the body in Matter 18px weight 400 at #666666 with 1.75 line-height for editorial calm
- Use the three-layer card shadow only on product screenshots and floating tool panels — marketing cards stay flat with hairline borders
- Limit blue (#5d8cd7) to the brand mark, decorative vectors, and code accents — never as a button fill or large text color
Don’t
- Don't add a chromatic accent for CTAs, links, or active states — the action language is neutral dark, period
- Don't use white (#ffffff) as the page background; the cream canvas is the signature and replacing it kills the look
- Don't bold inline keywords inside body copy — the tone is uniform, not emphatic
- Don't apply the card shadow to headings, logos, or icon rows — it belongs only to the product screenshot and floating panels
- Don't set the two-tone headline in two different sizes or two different fonts; the effect comes from identical Matter metrics with different fill colors
- Don't use saturated semantic colors (red/green/yellow) for status — if needed, use Pewter or Iron instead
- Don't add gradients — the system is flat, warm, and achromatic, with the product screenshot providing the only visual richness
Components
Filled Dark Button
Primary action — the only filled button in the system#181818 background, #fcfcf9 text, 4px radius, 6px 14px padding, Inter 14px weight 500, no border. Used for 'download Paper' and equivalent primary CTAs. Lowercase label, no trailing arrow.
Ghost Link Button
Secondary action — paired with the filled buttonTransparent background, #181818 text, no border, Inter 14px weight 500, trailing arrow glyph (→) at 6px gap. Used for 'open Paper in the browser →' and other soft CTAs.
Nav Link
Top-bar navigation itemInter 14px weight 400, #181818 text, 8px horizontal padding, no underline. 'downloads' is set in weight 500 as the active endpoint. Right-aligned cluster: 'sign up' in weight 400, 'downloads →' in weight 500.
Brand Wordmark
Site logoWord 'Paper' in Inter 16px weight 600, #181818, preceded by a 14×14 #5d8cd7 rounded-square mark. The blue mark is the only saturated color in the header.
Two-Tone Headline
Hero and section headingMatter weight 400 at 64px / 48px, split across two visual weights: first line in #181818, continuation lines in #83837 at the same size. Tracking -1.28px at 64px, -0.96px at 48px. Line height 1.00–1.14 — the lines stack tight, almost overlapping, for a composed editorial feel.
Eyebrow Label
Section pre-title, status markerInter 12px weight 500, #909090, often lowercase ('used in production by designers at', 'open alpha'). Optional 8px gap to the heading below.
Lead Paragraph
Body copy under hero and section headlinesMatter 18px weight 400, #666666, line-height 1.75, max-width ~56ch. No drop-cap, no bold inline emphasis — the tone is calm and expository.
Product Screenshot Card
Hero visual and feature showcaseWhite (#fcfcf9) surface, 8px radius, 32px padding around the app chrome, elevated with the three-layer card shadow. Contains traffic-light dots top-left, a sidebar of file names, and a right-side properties panel — all rendered as flat product UI inside the card.
Logo Cloud
Social proof bandSingle row or two-row grid of customer logos, Pewter (#83837e) monochrome, 40–48px tall, 32–40px gap, centered. No dividers, no card wrapping. Eyebrow 'used in production by designers at' centered above.
Code Block (Claude Code panel)
Developer-facing feature illustrationRounded panel with 8px radius, 12–24px padding, #fcfcf9 background, hairline #d7d7d6 border. Body in Paper Mono 11–12px weight 400. File paths and code keywords colored with brand blue (#5d8cd7), comment lines in #909090. No syntax-highlight rainbow — palette stays near-monochrome.
Ghost Card
Marketing card without shadow#fcfcf9 background, 1px #d7d7d6 border, 8px radius, 24–32px padding. Used when the product card would feel too heavy — text-only groupings, plan summaries, simple feature blocks.
Geometric Pattern Overlay
Decorative page-edge treatmentSubtle thin-line isometric grid in #d7d7d6, drawn at ~20% opacity, anchored to the upper-right corner of the hero and select sections. Never full-bleed, always clipped to a triangular wedge. Provides spatial depth without adding color.
Surfaces & elevation
Level 0
Bone Canvas
#efefe4Page background — warm cream, the signature base
Level 1
Paper White
#fcfcf9Card and panel surfaces floating on the canvas
Level 2
Bright Card
#ffffffPure white elevation for product chrome and code panels
Level 3
Mist
#f3f3f4Alternate band and inset surface
Shadows are used sparingly and only for one purpose: making the product screenshot and a few floating tool panels feel lifted off the page. Marketing cards, logos, and content blocks stay flat — they rely on the cream canvas, hairline borders, and white surface contrast to define themselves. No decorative drop shadows on headings or icons.
Product card, elevated panel
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
Popover, floating tool palette
rgba(0, 0, 0, 0.08) 0px 8px 8px -4px, rgba(0, 0, 0, 0.08) 0px 2px 4px -2px, rgba(0, 0, 0, 0.08) 0px 1px 1px -1px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px
Layout & imagery
Layout
Centered max-width container at 1200px with comfortable side gutters on a full-bleed Bone Canvas. The hero is a left-aligned text block (eyebrow → two-tone headline → lead → button pair) with the product screenshot card centered below, slightly wider than the text column. Subsequent sections are centered single-column with eyebrow + two-tone heading + lead + content block, separated by 96px vertical gaps. Logo cloud sits as a centered band between hero and the first product section. The page uses a consistent rhythm: eyebrow → headline → lead → visual or content, never asymmetric or magazine-style. Navigation is a flat top bar with left-aligned logo and right-aligned CTA cluster; no sticky shadow, no mega-menu.
Imagery
Almost no marketing photography. The single hero visual is a product screenshot of the Paper app itself, presented inside a white card with the three-layer shadow. Customer logos appear as flat monochrome wordmarks in a centered cloud. A faint isometric line grid in #d7d7d6 sits in the upper-right corner of the hero and repeats on select sections, providing spatial depth without color. Iconography (in the product UI) is line-based at ~1.5px stroke, monochrome, using Pewter and Iron.
Design notes
Agent Guide
**Quick Color Reference** - page background: #efefe4 (Bone Canvas) - card surface: #fcfcf9 (Paper White) or #ffffff (Bright Card) - text primary: #181818 (Ink) - text secondary: #83837e (Slate) or #666666 (Iron) - border / hairline: #d7d7d6 (Stone) - brand accent: #5d8cd7 (Studio Blue) — icons and code only, never buttons - primary action: #181818 (filled action) **3 Example Component Prompts** 1. *Hero section on Bone Canvas (#efefe4).* Two-tone headline: first line 'design incredible' in Matter weight 400 at 64px, color #181818, letter-spacing -1.28px; second line 'the connected canvas for teams shipping with agents' in same Matter 64px weight 400, color #83837e, line-height 1.0. Lead paragraph: Matter 18px weight 400, #666666, line-height 1.75, max-width 56ch. Button row: filled 'download Paper' — #181818 background, #fcfcf9 text, Inter 14px weight 500, 4px radius, 6px 14px padding. Ghost 'open Paper in the browser →' — transparent, #181818 text, Inter 14px weight 500, trailing arrow. 2. *Product screenshot card.* White #fcfcf9 surface, 8px radius, 32px padding around the app chrome, elevated with the three-layer card shadow (rgba(0,0,0,0.12) 0 4px 10px, 0 2px 4px -1px, 0 0px 4px -1px). Traffic-light dots top-left in #c1c1c0, sidebar in #909090, main canvas white. Right panel uses #f3f3f4 inputs with 4px radius. 3. *Logo cloud band.* Centered eyebrow 'used in production by designers at' in Inter 12px weight 500, #909090. Below, a centered grid of customer wordmarks in #83837e, 40px tall, 40px gap, single row or 2-row wrap. No card wrapper, no dividers, no per-logo backgrounds.
Two-Tone Headline System
The headline is a two-line composition at the same Matter size: line 1 in #181818 weight 400, line 2 in #83837e weight 400, both at 64px (display) or 48px (heading). Tracking tightens with size (-1.28px at 64px, -0.96px at 48px). Line-height 1.0–1.14 makes the lines almost touch. Never bold, never italic, never a different font. This is the single most recognizable type move in the system.
Surface and Border Language
Three layers stack: Bone Canvas (#efefe4) for the page, Paper White (#fcfcf9) for cards, Bright Card (#ffffff) for the highest-elevation product chrome. Hairline #d7d7d6 borders replace shadows on every marketing surface; the three-layer shadow is reserved for the product screenshot and one or two floating panels. Stone (#d7d7d6) and Smoke (#c1c1c0) are the only two border colors; never use a chromatic stroke.
Similar brands
Linear
Same cream-tinted neutral palette, hairline borders, and a single dark filled button as the only CTA weight
Vercel
Compact density, tight display tracking, and a marketing surface that stays achromatic while the product UI carries the color
Figma
Design-tool hero with a large product screenshot card centered below a left-aligned text block on a soft neutral canvas
Pitch
Editorial two-tone headlines mixing dark and mid-gray at the same size, calm sans-serif body, product-first composition
Notion
Warm near-white page background instead of pure white, hairline-bordered ghost cards, monochrome iconography
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
