Ledger: Dunkles SaaS-Dashboard-Designsystem

Web · Dunkel · Minimalistisch · SaaS · Finanzen

Ledger

Eine dichte, dunkle Oberfläche für Zahlen, mit einem Terminal-Bernstein als Akzent.

Ledger ist für Screens voller Zahlen gebaut. Es ist Dark-first, kompakt und ruhig wie ein Trading-Terminal, mit Tabellenziffern in einer Monospace-Schrift und einem bernsteinfarbenen Akzent für den aktiven Zustand und wichtige Werte.

Vorschau

Live aus den Tokens unten gerendert, in den Schriften des Systems.

Neu in 2026Planen, ausliefern und messen an einem Ort

Ein ruhiger Workspace für kleine Teams. Jede Zahl, die du brauchst, und nichts, was du nicht brauchst.

Kostenlos startenDemo buchen

Aktive Nutzer12,480

Umsatz$48.2k

Bindungsrate86%

Lade dein Team einGeschäftliche E-Maildu@firma.deRolleBearbeiter ▾Einladung senden

Letzte BestellungenKundeStatusBetragAda ParkBezahlt$1,240Lukas WeberAusstehend$380Mei ChenErstattet$96

In deinem Projekt verwenden

Füge das in Codex oder Claude Code ein. Der Agent speichert die Spezifikation als DESIGN.md und hält sich ab dann daran.

Dieses Projekt verwendet das Designsystem Ledger. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/ledger.md. Speichere sie als DESIGN.md im Projektstamm und halte dich ab jetzt bei jedem Screen daran.

Tokens

Farben

Helles 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)

Dunkles 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)

Schriften

Überschriften: IBM Plex Sans · 600
Fließtext: IBM Plex Sans · 400
Monospace: IBM Plex Mono

Schriftgrößen

display · 56/1.05 · -0.025emZwölf Boxkämpfer jagen Viktor
h1 · 36/1.15 · -0.015emZwölf Boxkämpfer jagen Viktor
h2 · 24/1.25 · -0.01emZwölf Boxkämpfer jagen Viktor
h3 · 18/1.35Zwölf Boxkämpfer jagen Viktor
body · 14/1.55Zwölf Boxkämpfer jagen Viktor
small · 12/1.45 · 0.01emZwölf Boxkämpfer jagen Viktor

Radius, Abstände und Schatten

Eckenradiussm 2pxmd 4pxlg 6pxxl 10px

Abständexs 4pxsm 8pxmd 16pxlg 24pxxl 48px

SchattenKeiner: Tiefe entsteht durch Rahmen und Farbe.

Layout

Maximale Breite: 1440px
Textbreite: 72ch
Spalten: 12
Spaltenabstand: 16px

Ideal für

SaaS-Dashboards und Admin-Panels
Fintech und Analytics
Entwickler-Tools
Datenlastige Landingpages

Dos and Don’ts

Setze Zahlen in der Monospace-Schrift mit Tabellenziffern.
Spare Bernstein für das eine Wichtige auf einem Screen auf.
Verwende nie mehr als drei Diagrammfarben gleichzeitig.
Füge keine Verläufe oder Leuchteffekte hinzu.