Ledger
The design system for dgoodenough's data projects. Greyscale carries structure; color carries meaning. Built from four influences: Aligulac's dense tables, FiveThirtyEight's headline numerals, McMaster-Carr's speed, and a lifetime of Excel.
Principles
| # | Rule | In practice |
|---|---|---|
| 1 | Greyscale carries structure; color carries meaning. | green = have / happened red = missing / never yellow = pending / upcoming |
| 2 | Tables are the first-class citizen. | Black header bands, real gridlines, right-aligned tabular numerals. |
| 3 | Numbers are the headline. | Lead with the stat, big and bold; the sentence explains it. |
| 4 | Speed is design. | System fonts, no frameworks, minimal DOM, static hosting. |
| 5 | Density over whitespace. | Compact paddings; show the data, not the chrome. |
Palette
Dark by default — the data glows against grey chrome. Greyscale for structure; each
semantic accent has a solid form (text, lines) and a fill form (cell backgrounds —
Excel conditional formatting). A "newsprint" light variant (.ledger-light)
exists for print-adjacent projects and is forced when printing.
Type
System sans stack — zero webfont latency. All numerals tabular.
The ledger table
The canonical artifact (after the collection tracker that started it): band header, gridlines, zebra, conditional-formatting fills.
| YEAR | Have | Total | % |
|---|---|---|---|
| 2019 | 66 | 108 | 61.1% |
| 2020 | 91 | 130 | 70.0% |
| 2021 | 58 | 101 | 57.4% |
| 2022 | 119 | 124 | 96.0% |
| 2018 | 0 | 72 | 0.0% |
| 2023 | — | — | pending |
Controls
Data bar
Heatmap ramp
Single-hue grey→green: more green = more of the thing. Never/absent = paper; red fill = highlighted absence; yellow = upcoming.