Paper: 에디토리얼 디자인 시스템

Web · Light · Serif · Editorial · Blogs and content

Paper

차분하고 에디토리얼하며 읽기 편한, 잘 짜인 책의 한 페이지처럼.

Paper는 잘 짜인 책의 한 페이지처럼 읽힙니다. 종이 흰색, 거의 검은 잉크, 탄탄한 헤드라인 세리프, 짙은 잉크 블루 포인트 하나. 그림자, 그라데이션, 장식 대신 타이포그래피, 선, 여백으로 승부합니다.

Preview

Rendered live from the tokens below, in the system's own fonts.

New in 2026Plan, ship and measure in one place

A calm workspace for small teams. Every number you need, nothing you don't.

Start freeBook a demo

Active users12,480

Revenue$48.2k

Retention86%

Invite your teamWork emailyou@company.comRoleEditor ▾Send invite

Recent ordersCustomerStatusAmountAda ParkPaid$1,240Lukas WeberPending$380Mei ChenRefunded$96

Use it in your project

Paste this into Codex or Claude Code. The agent saves the spec as DESIGN.md and follows it from then on.

This project uses the Paper design system. Its spec is at https://codexdesign.io/ko/design-systems/paper.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.

Tokens

Colors

Light theme

background#F6F6F3oklch(0.972 0.004 106.473)
foreground#1A1C20oklch(0.226 0.008 264.395)
card#FFFFFFoklch(1 0 0)
card-foreground#1A1C20oklch(0.226 0.008 264.395)
popover#FFFFFFoklch(1 0 0)
popover-foreground#1A1C20oklch(0.226 0.008 264.395)
primary#23408Eoklch(0.397 0.134 265.312)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#E9EBF1oklch(0.94 0.008 271.326)
secondary-foreground#1A1C20oklch(0.226 0.008 264.395)
muted#EDEDEAoklch(0.945 0.004 106.476)
muted-foreground#5C5F66oklch(0.485 0.012 267.263)
accent#E6E8EEoklch(0.931 0.008 271.325)
accent-foreground#1A1C20oklch(0.226 0.008 264.395)
destructive#B42318oklch(0.5 0.182 29.513)
border#DCDDD8oklch(0.895 0.007 115.718)
input#CFD0CAoklch(0.855 0.008 114.245)
ring#23408Eoklch(0.397 0.134 265.312)
chart-1#23408Eoklch(0.397 0.134 265.312)
chart-2#2F6B57oklch(0.482 0.071 168.864)
chart-3#A9741Coklch(0.599 0.117 74.246)
chart-4#7A4E7Eoklch(0.491 0.091 323.901)
chart-5#5B6B7Doklch(0.521 0.034 251.525)

Dark theme

background#14161Boklch(0.2 0.01 268.16)
foreground#ECEAE4oklch(0.937 0.008 91.486)
card#1B1E24oklch(0.235 0.012 264.3)
card-foreground#ECEAE4oklch(0.937 0.008 91.486)
popover#1B1E24oklch(0.235 0.012 264.3)
popover-foreground#ECEAE4oklch(0.937 0.008 91.486)
primary#8EA6E8oklch(0.732 0.1 268.539)
primary-foreground#14161Boklch(0.2 0.01 268.16)
secondary#242832oklch(0.277 0.019 267.979)
secondary-foreground#ECEAE4oklch(0.937 0.008 91.486)
muted#20232Aoklch(0.256 0.014 267.019)
muted-foreground#9BA0A9oklch(0.705 0.014 262.365)
accent#272B33oklch(0.288 0.016 264.291)
accent-foreground#ECEAE4oklch(0.937 0.008 91.486)
destructive#F0705Eoklch(0.694 0.162 29.892)
border#2E323Boklch(0.317 0.017 266.408)
input#383D47oklch(0.359 0.019 264.308)
ring#8EA6E8oklch(0.732 0.1 268.539)
chart-1#8EA6E8oklch(0.732 0.1 268.539)
chart-2#7DBFA6oklch(0.753 0.077 168.435)
chart-3#E0B25Eoklch(0.788 0.115 80.839)
chart-4#C29BC6oklch(0.739 0.075 323.251)
chart-5#A3B1C2oklch(0.755 0.029 253.286)

Fonts

Headings: Source Serif 4 · 600
Body: Public Sans · 400
Monospace: IBM Plex Mono

Type scale

display · 64/1.05 · -0.02emThe quick brown fox
h1 · 44/1.1 · -0.015emThe quick brown fox
h2 · 30/1.2 · -0.01emThe quick brown fox
h3 · 22/1.3The quick brown fox
body · 17/1.6The quick brown fox
small · 14/1.5The quick brown fox

Radius, spacing and shadow

Corner radiussm 0pxmd 2pxlg 4pxxl 8px

Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px

ShadowNone: depth comes from borders and color.

Layout

Max width: 1200px
Text width: 68ch
Columns: 12
Gutter: 24px

Best for

블로그와 뉴스레터
포트폴리오와 스튜디오
콘텐츠 중심 랜딩 페이지
사람 냄새가 나야 하는 문서

Do's and don'ts

섹션마다 세리프 헤드라인 하나가 중심을 잡게 하세요.
얇은 선으로 콘텐츠를 구분하세요.
그라데이션, 글래스모피즘, 드롭 섀도를 더하지 마세요.
한 화면에 포인트 색을 하나보다 많이 쓰지 마세요.