The design system for my data projects — a small set of CSS tokens, a written guide, and a matplotlib style. Greyscale carries structure; color carries meaning.
▶ Live specimen: https://dgoodenough.github.io/style/
| File | What it is |
|---|---|
tokens.css |
Design tokens (CSS custom properties) + a small component layer (.band, .table-ledger, .stat, .btn, .bar) |
STYLE.md |
The principles and usage rules |
ledger.mplstyle |
Matching matplotlib style for Python charts |
index.html |
The specimen page — the guide, shown in itself |
Influences: Aligulac's dense tables, FiveThirtyEight's headline numbers, McMaster-Carr's speed, UDisc's consistency — and a lifetime of Excel (black header bands, hairline grids, red/green conditional formatting).
The semantic core: green = positive/have/happened · red = negative/missing/never · yellow = pending/upcoming, each with a solid and a pale-fill form. Everything else is greyscale.
Projects vendor a pinned copy of tokens.css (no runtime dependency on this repo).
First consumer: FIFAGami.
MIT License.