Paper：エディトリアルデザインシステム

Web · ライト · セリフ体 · エディトリアル · ブログ・コンテンツ

Paper

落ち着いて、控えめで、読みやすい。丁寧に組まれた本のページのように。

Paper は、丁寧に組まれた本のページのように読めます。紙のような白、ほぼ黒のインク、しっかりしたセリフ体の見出し、そして深いインクブルーのアクセント 1 色。影やグラデーション、装飾ではなく、文字、罫線、余白で見せます。

プレビュー

下のトークンから、このシステム自身のフォントでリアルタイムに描画しています。

2026 年の新機能計画も、リリースも、計測も、ひとつの場所で

小さなチームのための、落ち着いたワークスペース。必要な数字はすべて、不要なものは何もなく。

無料で始めるデモを予約

アクティブユーザー12,480

売上$48.2k

継続率86%

チームを招待仕事用メールアドレスyou@company.comロール編集者 ▾招待を送信

最近の注文顧客ステータス金額Ada Park支払い済み$1,240Lukas Weber保留中$380Mei Chen返金済み$96

プロジェクトで使う

これを Codex か Claude Code に貼り付けてください。エージェントが仕様を DESIGN.md として保存し、以降はそれに従います。

このプロジェクトでは Paper デザインシステムを使います。仕様は https://codexdesign.io/ja/design-systems/paper.md にあります。プロジェクトのルートに DESIGN.md として保存し、これからはすべての画面でそれに従ってください。

トークン

カラー

ライトテーマ

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)

ダークテーマ

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)

フォント

見出し: Source Serif 4 · 600
本文: Public Sans · 400
等幅: IBM Plex Mono

タイプスケール

display · 64/1.05 · -0.02emデザインで、画面はもっと使いやすくなる
h1 · 44/1.1 · -0.015emデザインで、画面はもっと使いやすくなる
h2 · 30/1.2 · -0.01emデザインで、画面はもっと使いやすくなる
h3 · 22/1.3デザインで、画面はもっと使いやすくなる
body · 17/1.6デザインで、画面はもっと使いやすくなる
small · 14/1.5デザインで、画面はもっと使いやすくなる

角の半径、余白、影

角の半径sm 0pxmd 2pxlg 4pxxl 8px

余白xs 4pxsm 8pxmd 16pxlg 24pxxl 48px

影なし：奥行きは枠線と色で表現します。

レイアウト

最大幅: 1200px
本文の幅: 68ch
カラム: 12
ガター: 24px

向いている用途

ブログとニュースレター
ポートフォリオとスタジオ
コンテンツ重視のランディングページ
人の温かみを感じさせたいドキュメント

やること・やらないこと

各セクションは、セリフ体の見出し 1 つで支える。
細い罫線でコンテンツを区切る。
グラデーション、グラスモーフィズム、ドロップシャドウは加えない。
1 画面でアクセントカラーを 2 色以上使わない。