Ledger：ダーク SaaS ダッシュボードデザインシステム

Web · ダーク · ミニマル · SaaS · 金融

Ledger

数字のための高密度なダーク UI。ターミナルのようなアンバーのアクセント。

Ledger は、数字でいっぱいの画面のために作られています。ダークファーストでコンパクト、トレーディングターミナルのように落ち着いていて、数字は等幅書体の等幅数字で表し、アンバー 1 色をアクティブな状態と重要な値に使います。

プレビュー

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

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

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

無料で始めるデモを予約

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

売上$48.2k

継続率86%

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

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

プロジェクトで使う

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

このプロジェクトでは Ledger デザインシステムを使います。仕様は https://codexdesign.io/ja/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 ダッシュボードと管理画面
フィンテックとアナリティクス
開発者向けツール
データが多いランディングページ

やること・やらないこと

数字は等幅書体の等幅数字で組む。
アンバーは、画面でいちばん大切な 1 か所のために取っておく。
チャートの色は一度に 3 色を超えて使わない。
グラデーションやグローの効果は加えない。