Ledger: sistema de diseño de dashboards SaaS oscuros

Web · Dark · Minimal · SaaS · Finance

Ledger

Una interfaz densa y oscura para números, con un acento ámbar de terminal.

Ledger está pensado para pantallas llenas de números. Es oscuro por defecto, compacto y sereno, como un terminal de trading, con cifras tabulares en una fuente monoespaciada y un único acento ámbar para el estado activo y los valores clave.

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/es/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

Dashboards SaaS y paneles de administración
Fintech y analítica
Herramientas para desarrolladores
Landing pages con muchos datos

Do's and don'ts

Pon los números en la fuente monoespaciada con cifras tabulares.
Reserva el ámbar para lo único que importa en una pantalla.
No uses más de tres colores de gráfico a la vez.
No añadas degradados ni efectos de resplandor.