Mono：开发者文档设计系统

网页 · 浅色 · 极简 · 开发者工具

Mono

干净的白底、Geist 字体和一个钴蓝色，为文档和开发者工具设计。

Mono 是为开发者产品准备的安静系统：白色页面、Geist 和 Geist Mono、细线描边，链接和主要操作只用一个钴蓝色。代码块、表格和 API 参考是主角，不是附属品。

预览

直接用下面的设计变量和这套系统自己的字体实时渲染。

2026 新功能规划、上线和复盘，都在一个地方

为小团队准备的安静工作台。该有的数字都在，多余的一个没有。

免费开始预约演示

活跃用户12,480

收入$48.2k

留存率86%

邀请团队成员工作邮箱you@company.com角色编辑 ▾发送邀请

最近订单客户状态金额Ada Park已付款$1,240Lukas Weber待付款$380Mei Chen已退款$96

在你的项目里使用

粘贴到 Codex 或 Claude Code 里。agent 会把规范保存为 DESIGN.md，之后一直按它来设计。

这个项目使用 Mono 设计系统，规范在 https://codexdesign.io/zh/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 参考
开发者工具和命令行产品
开源项目官网
更新日志和技术博客

要做和不要做

每页靠前的位置放一段能直接运行的示例代码。
命令、路径和参数一律用 Geist Mono。
不能点的东西不要用蓝色。
不要用渐变、插画和发光效果做装饰。