Ledger：深色 SaaS 后台设计系统

网页 · 深色 · 极简 · SaaS · 金融

Ledger

为数字而生的紧凑深色界面，配一个终端琥珀色强调色。

Ledger 专为满屏数字的界面设计：深色优先、紧凑、安静，像一台交易终端。数字用等宽字体和等宽数字，琥珀色只用于选中状态和关键数值。

预览

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

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

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

免费开始预约演示

活跃用户12,480

收入$48.2k

留存率86%

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

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

在你的项目里使用

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

这个项目使用 Ledger 设计系统，规范在 https://codexdesign.io/zh/design-systems/ledger.md 。把它保存为项目根目录的 DESIGN.md，之后所有界面都遵循它。

设计变量

颜色

浅色主题

background#F7F8F5oklch(0.978 0.004 121.56)
foreground#0F1210oklch(0.178 0.006 156.53)
card#FFFFFFoklch(1 0 0)
card-foreground#0F1210oklch(0.178 0.006 156.53)
popover#FFFFFFoklch(1 0 0)
popover-foreground#0F1210oklch(0.178 0.006 156.53)
primary#0F1210oklch(0.178 0.006 156.53)
primary-foreground#FFB224oklch(0.817 0.164 75.837)
secondary#ECEFE8oklch(0.948 0.01 125.682)
secondary-foreground#0F1210oklch(0.178 0.006 156.53)
muted#EEF0EAoklch(0.952 0.008 121.632)
muted-foreground#5A615Boklch(0.485 0.013 149.661)
accent#E8EBE3oklch(0.936 0.011 123.464)
accent-foreground#0F1210oklch(0.178 0.006 156.53)
destructive#C42B1Coklch(0.536 0.191 30.071)
border#DDE1D9oklch(0.904 0.012 128.604)
input#CDD2C8oklch(0.857 0.015 128.652)
ring#9A5B00oklch(0.531 0.119 65.118)
chart-1#9A5B00oklch(0.531 0.119 65.118)
chart-2#1F7AA8oklch(0.55 0.108 236.451)
chart-3#4C7A12oklch(0.526 0.137 131.678)
chart-4#6B4FB0oklch(0.506 0.148 293.715)
chart-5#B83A68oklch(0.543 0.166 2.048)

深色主题

background#0C0E0Doklch(0.161 0.004 164.497)
foreground#E6E9E4oklch(0.93 0.007 132.418)
card#131614oklch(0.196 0.006 156.616)
card-foreground#E6E9E4oklch(0.93 0.007 132.418)
popover#131614oklch(0.196 0.006 156.616)
popover-foreground#E6E9E4oklch(0.93 0.007 132.418)
primary#FFB224oklch(0.817 0.164 75.837)
primary-foreground#0C0E0Doklch(0.161 0.004 164.497)
secondary#1B1F1Coklch(0.234 0.008 153.266)
secondary-foreground#E6E9E4oklch(0.93 0.007 132.418)
muted#181B19oklch(0.218 0.006 156.698)
muted-foreground#8F978Foklch(0.667 0.015 145.407)
accent#1F2420oklch(0.254 0.01 151.376)
accent-foreground#E6E9E4oklch(0.93 0.007 132.418)
destructive#FF6B5Boklch(0.709 0.184 28.716)
border#262B27oklch(0.283 0.01 151.457)
input#2E342Foklch(0.317 0.012 150.29)
ring#FFB224oklch(0.817 0.164 75.837)
chart-1#FFB224oklch(0.817 0.164 75.837)
chart-2#5BC0F2oklch(0.767 0.118 232.744)
chart-3#9BD35Aoklch(0.803 0.163 130.156)
chart-4#B58CF2oklch(0.719 0.149 301.282)
chart-5#F25B8Coklch(0.681 0.189 3.524)

字体

标题: IBM Plex Sans · 600
正文: IBM Plex Sans · 400
等宽: IBM Plex Mono

字号阶梯

display · 56/1.05 · -0.025em设计让界面更好用
h1 · 36/1.15 · -0.015em设计让界面更好用
h2 · 24/1.25 · -0.01em设计让界面更好用
h3 · 18/1.35设计让界面更好用
body · 14/1.55设计让界面更好用
small · 12/1.45 · 0.01em设计让界面更好用

圆角、间距和阴影

圆角sm 2pxmd 4pxlg 6pxxl 10px

间距xs 4pxsm 8pxmd 16pxlg 24pxxl 48px

阴影不用阴影，层次靠边框和颜色。

布局

最大宽度: 1440px
正文宽度: 72ch
栏数: 12
栏间距: 16px

适合

SaaS 后台和管理面板
金融科技和数据分析
开发者工具
数据密集的落地页

要做和不要做

数字用等宽字体和等宽数字。
琥珀色只留给每屏最重要的一件事。
同时出现的图表颜色不超过三种。
不要加渐变和发光效果。