98
AA
44 tokens
primarysecondarybaseraisedprimarydefaultsuccessdanger
Live preview
ledger · rendered from tokens
Color
Typography
2xl
xl
lg
base
sm
xs
Components
Buttons
Inputs
Fintech
Selection
Notifications
AutoManual
Feedback
successdangerwarninginfo
Tokens validatedAll contrast checks pass WCAG AA.
Data
AMRKJD+5
2,847+12%
Storage64%
Navigation
OverviewTokensActivity
Home/Library/Item
123
Cards
Pro
$12/ mo
Unlimited exports
Private systems
Priority support
Radius, shadow & spacing
sm
md
lg
full
sm
md
Use this system
Three ways to drop Ledger into your workflow.
Save the file for your tool — your agent then generates UI in Ledger, automatically.
CCClaude Code
CLAUDE.mdRepo root — Claude Code reads it automatically.
CuCursor
.cursor/rules/ledger.mdcProject rule — applied to every generation.
WsWindsurf
.windsurfrulesRepo root — Cascade reads it automatically.
GCGitHub Copilot
.github/copilot-instructions.mdRepo-wide custom instructions for Copilot.
The system
Brand & Voice
Exact, calm, and credible. Ledger handles money, so nothing is ambiguous. Numbers are tabular, states are unmistakable, and the palette signals trust without feeling cold.
Layout & Grid
Data-dense but legible. A 12-column grid with tabular-figure tables, right-aligned
amounts, and clear surface.sunken zones for summaries.
Components
Buttons
Primary uses color.brand.primary; destructive actions always use
color.state.danger with a confirm step.
Data tables
Rows separate with border.default; positive deltas use color.state.success,
negative use color.state.danger.
Accessibility
All financial figures meet AA contrast and never rely on color alone — deltas carry a sign and an icon.
Do & Don't
- Use tabular numerals for any monetary value.
- Pair every state color with text or an icon.
- Don't use more than one accent hue in a single dense view.
Tokens
Color (14)
Tokens
breakpoint
iconography
motion
radius
shadow
spacing
typography
zIndex
Export
One source of truth, five formats — copy or download any of them.
design.md108 lines
1
---2
$schema: https://designmd.in/schema/v1.json3
id: ledger4
name: Ledger5
title: Ledger — Trustworthy Fintech6
version: 1.0.07
category: fintech8
tags: [fintech, trust, blue, precise, data]9
author: designmd10
license: CC-BY-4.011
updatedAt: 2026-06-1912
colorMode: [light, dark]13
tokens:14
color:15
brand:16
primary: { value: "oklch(0.50 0.15 250)", type: color }17
secondary: { value: "oklch(0.55 0.13 162)", type: color }18
onBrand: { value: "oklch(0.99 0 0)", type: color }19
text:20
primary: { value: "oklch(0.23 0.02 250)", type: color }21
muted: { value: "oklch(0.45 0.02 250)", type: color }22
link: { value: "{color.brand.primary}", type: color }23
surface:24
base: { value: "oklch(0.99 0.003 250)", type: color }25
raised: { value: "oklch(0.975 0.005 250)", type: color }26
sunken: { value: "oklch(0.955 0.008 250)", type: color }27
border:28
default: { value: "oklch(0.91 0.01 250)", type: color }29
state:30
success: { value: "oklch(0.52 0.14 162)", type: color }31
danger: { value: "oklch(0.52 0.20 25)", type: color }32
warning: { value: "oklch(0.56 0.13 75)", type: color }33
info: { value: "oklch(0.52 0.13 245)", type: color }34
typography:35
family:36
sans: { value: "IBM Plex Sans, system-ui, sans-serif", type: fontFamily }37
mono: { value: "IBM Plex Mono, ui-monospace, monospace", type: fontFamily }38
scale:39
xs: { value: "0.75rem", type: dimension }40
sm: { value: "0.875rem", type: dimension }41
base: { value: "1rem", type: dimension }42
lg: { value: "1.25rem", type: dimension }43
xl: { value: "1.5rem", type: dimension }44
"2xl": { value: "2rem", type: dimension }45
weight:46
regular: { value: 400, type: fontWeight }47
medium: { value: 500, type: fontWeight }48
semibold: { value: 600, type: fontWeight }49
leading:50
tight: { value: 1.2, type: number }51
normal: { value: 1.5, type: number }52
tracking:53
tight: { value: "-0.01em", type: dimension }54
spacing:55
base: { value: "0.25rem", type: dimension }56
radius:57
sm: { value: "0.25rem", type: dimension }58
md: { value: "0.5rem", type: dimension }59
lg: { value: "0.75rem", type: dimension }60
full: { value: "9999px", type: dimension }61
shadow:62
sm: { value: "0 1px 2px oklch(0 0 0 / 0.06)", type: shadow }63
md: { value: "0 4px 12px oklch(0 0 0 / 0.08)", type: shadow }64
motion:65
duration:66
fast: { value: "120ms", type: duration }67
base: { value: "200ms", type: duration }68
easing:69
standard: { value: "cubic-bezier(0.4, 0, 0.2, 1)", type: cubicBezier }70
breakpoint:71
sm: { value: "640px", type: dimension }72
md: { value: "768px", type: dimension }73
lg: { value: "1024px", type: dimension }74
zIndex:75
dropdown: { value: 1000, type: number }76
modal: { value: 1300, type: number }77
iconography:78
style: { value: "geometric, 2px stroke, square joins", type: descriptor }79
---80
81
# Ledger Design System82
83
## Brand & Voice84
Exact, calm, and credible. Ledger handles money, so nothing is ambiguous.85
Numbers are tabular, states are unmistakable, and the palette signals trust86
without feeling cold.87
88
## Layout & Grid89
Data-dense but legible. A 12-column grid with tabular-figure tables, right-aligned90
amounts, and clear `surface.sunken` zones for summaries.91
92
## Components93
### Buttons94
Primary uses `color.brand.primary`; destructive actions always use95
`color.state.danger` with a confirm step.96
97
### Data tables98
Rows separate with `border.default`; positive deltas use `color.state.success`,99
negative use `color.state.danger`.100
101
## Accessibility102
All financial figures meet AA contrast and never rely on color alone — deltas103
carry a sign and an icon.104
105
## Do & Don't106
- Use tabular numerals for any monetary value.107
- Pair every state color with text or an icon.108
- Don't use more than one accent hue in a single dense view.