Ledger: 다크 SaaS 대시보드 디자인 시스템

Web · Dark · Minimal · SaaS · Finance

Ledger

숫자를 위한 촘촘한 다크 인터페이스, 터미널 앰버 포인트.

Ledger는 숫자로 가득한 화면을 위해 만들어졌습니다. 다크 우선에 촘촘하고 차분하며, 트레이딩 터미널처럼 고정폭 숫자를 모노스페이스 서체로 쓰고, 활성 상태와 핵심 값에만 앰버 포인트 하나를 둡니다.

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 Ledger design system. Its spec is at https://codexdesign.io/ko/design-systems/ledger.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.

Tokens

Colors

Light theme

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)

Dark theme

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)

Fonts

Headings: IBM Plex Sans · 600
Body: IBM Plex Sans · 400
Monospace: IBM Plex Mono

Type scale

display · 56/1.05 · -0.025emThe quick brown fox
h1 · 36/1.15 · -0.015emThe quick brown fox
h2 · 24/1.25 · -0.01emThe quick brown fox
h3 · 18/1.35The quick brown fox
body · 14/1.55The quick brown fox
small · 12/1.45 · 0.01emThe quick brown fox

Radius, spacing and shadow

Corner radiussm 2pxmd 4pxlg 6pxxl 10px

Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px

ShadowNone: depth comes from borders and color.

Layout

Max width: 1440px
Text width: 72ch
Columns: 12
Gutter: 16px

Best for

SaaS 대시보드와 관리자 패널
핀테크와 분석
개발자 도구
데이터가 많은 랜딩 페이지

Do's and don'ts

숫자는 고정폭 숫자의 모노스페이스 서체로 쓰세요.
앰버는 화면에서 가장 중요한 한 가지에만 쓰세요.
차트 색상은 한 번에 세 가지를 넘기지 마세요.
그라데이션이나 글로우 효과를 넣지 마세요.