Mono：開発者ドキュメントデザインシステム

Web · ライト · ミニマル · 開発者ツール

Mono

真っ白なページ、Geist の書体、コバルトブルー 1 色。ドキュメントと開発者ツールのために。

Mono は、開発者向けプロダクトのための静かなシステムです。白いページ、Geist と Geist Mono、ヘアラインの枠線、そしてリンクと主なアクションに使うコバルトブルー 1 色。コードブロック、表、API リファレンスが主役で、後回しにはしません。

プレビュー

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

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

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

無料で始めるデモを予約

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

売上$48.2k

継続率86%

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

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

プロジェクトで使う

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

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

トークン

カラー

ライトテーマ

background#FFFFFFoklch(1 0 0)
foreground#0B0C0Eoklch(0.154 0.005 264.432)
card#FFFFFFoklch(1 0 0)
card-foreground#0B0C0Eoklch(0.154 0.005 264.432)
popover#FFFFFFoklch(1 0 0)
popover-foreground#0B0C0Eoklch(0.154 0.005 264.432)
primary#2450E6oklch(0.507 0.231 265.456)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#F2F3F5oklch(0.964 0.003 264.542)
secondary-foreground#0B0C0Eoklch(0.154 0.005 264.432)
muted#F4F5F7oklch(0.97 0.003 264.542)
muted-foreground#5D6470oklch(0.501 0.021 261.29)
accent#EEF0F3oklch(0.954 0.005 258.325)
accent-foreground#0B0C0Eoklch(0.154 0.005 264.432)
destructive#C7271Foklch(0.539 0.196 28.712)
border#E3E5E9oklch(0.922 0.006 264.531)
input#D4D7DDoklch(0.879 0.009 264.518)
ring#2450E6oklch(0.507 0.231 265.456)
chart-1#2450E6oklch(0.507 0.231 265.456)
chart-2#0F9F6Eoklch(0.622 0.133 162.239)
chart-3#D97706oklch(0.666 0.157 58.318)
chart-4#DB2777oklch(0.592 0.218 0.584)
chart-5#64748Boklch(0.554 0.041 257.417)

ダークテーマ

background#0B0C0Eoklch(0.154 0.005 264.432)
foreground#EDEEF0oklch(0.949 0.003 264.542)
card#121316oklch(0.187 0.006 271.067)
card-foreground#EDEEF0oklch(0.949 0.003 264.542)
popover#121316oklch(0.187 0.006 271.067)
popover-foreground#EDEEF0oklch(0.949 0.003 264.542)
primary#6B8CFFoklch(0.671 0.174 269.263)
primary-foreground#0B0C0Eoklch(0.154 0.005 264.432)
secondary#1A1C20oklch(0.226 0.008 264.395)
secondary-foreground#EDEEF0oklch(0.949 0.003 264.542)
muted#16181Boklch(0.208 0.007 258.367)
muted-foreground#8E95A1oklch(0.668 0.02 261.32)
accent#1E2125oklch(0.246 0.009 255.592)
accent-foreground#EDEEF0oklch(0.949 0.003 264.542)
destructive#FF6B61oklch(0.71 0.183 26.597)
border#24272Coklch(0.272 0.01 260.702)
input#2D3036oklch(0.309 0.012 264.391)
ring#6B8CFFoklch(0.671 0.174 269.263)
chart-1#6B8CFFoklch(0.671 0.174 269.263)
chart-2#34D399oklch(0.773 0.153 163.223)
chart-3#FBBF24oklch(0.837 0.164 84.429)
chart-4#F472B6oklch(0.725 0.175 349.761)
chart-5#94A3B8oklch(0.711 0.035 256.788)

フォント

見出し: Geist · 600
本文: Geist · 400
等幅: Geist Mono

タイプスケール

display · 60/1.05 · -0.025emデザインで、画面はもっと使いやすくなる
h1 · 40/1.1 · -0.02emデザインで、画面はもっと使いやすくなる
h2 · 28/1.2 · -0.01emデザインで、画面はもっと使いやすくなる
h3 · 20/1.3デザインで、画面はもっと使いやすくなる
body · 16/1.55デザインで、画面はもっと使いやすくなる
small · 13/1.45デザインで、画面はもっと使いやすくなる

角の半径、余白、影

角の半径sm 4pxmd 6pxlg 8pxxl 12px

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

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

レイアウト

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

向いている用途

開発者向けドキュメントと API リファレンス
開発ツールと CLI
オープンソースプロジェクトのサイト
変更履歴と技術ブログ

やること・やらないこと

どのページも、上のほうに動くコードサンプルを示す。
コマンド、パス、フラグはすべて Geist Mono で組む。
クリックできないものに青を使わない。
グラデーション、イラスト、グローで飾らない。