Design System
v1.0 / 2026
A design language rooted in Edward Tufte's principles: maximize the data-ink ratio, eliminate chartjunk, and treat information density as a form of beauty. Every pixel should either present data or aid in its reading.
Color serves data, not decoration. Ink and paper tones create the reading surface; semantic data colors are chosen for perceptual uniformity and colorblind safety.
Ink & Paper
Data Colors
Semantic
Three faces, each with a purpose. IBM Plex Sans for UI and labels. IBM Plex Mono for data and figures, with tabular numerals. Source Serif for narrative annotations in the Tufte tradition.
0123456789 Ag
0123456789 Ag
0123456789 Ag
A 4px base unit creates consistent rhythm. Tighter spacing between related data elements; generous margins between chart panels for visual separation.
Controls should be visible but recessive. No drop shadows, no gradients, no rounded corners. Interaction surfaces are identified by border, not ornamentation.
Data input controls follow the same restrained vocabulary. Labels above, minimal borders, focus states that use the primary data color for consistency.
ISO 8601 format
Dashboard KPI panels. Each card shows a primary metric, trend delta, and an inline sparkline. Dense but legible.
Revenue
$4.2M
+12.4% vs prior
Users
1.84M
+8.1% vs prior
Churn Rate
3.2%
+0.4pp vs prior
Avg. Order
$67
-0.2% vs prior
The workhorse of data display. Thin horizontal rules only, right-aligned numbers, embedded inline bar charts for at-a-glance comparison. No zebra striping; hover state suffices.
| Region | Q1 | Q2 | Q3 | Q4 | Total | Distribution | Trend |
|---|---|---|---|---|---|---|---|
| North America | 1,284 | 1,392 | 1,547 | 1,683 | 5,906 | ||
| Europe | 892 | 934 | 1,021 | 1,108 | 3,955 | ||
| Asia Pacific | 743 | 812 | 891 | 967 | 3,413 | ||
| Latin America | 312 | 287 | 334 | 401 | 1,334 | ||
| Middle East | 156 | 178 | 192 | 213 | 739 |
Table 1. Regional sales figures (units, thousands). Inline bar charts show relative share; sparklines show quarterly trend direction.
Tufte's preferred method for comparing patterns across categories. Same scale, same axes, repeated for each facet. The eye compares shapes rather than decoding legends.
Jan
342
Feb
387
Mar
412
Apr
478
May
521
Jun
556
Figure 1. Weekly transaction volume by month. Each panel shows 7 days (Mon-Sun). Consistent vertical scale across all panels enables direct comparison of seasonal patterns.
Horizontal bars are the most readable chart form for categorical comparison. Label on the left, value on the right, minimal grid. The bar itself is the data-ink.
Figure 2. Global desktop browser share. Source: StatCounter, Dec 2025.
Design Note
Horizontal bars outperform vertical bars when category labels are long. The label sits on the same scan line as the bar, eliminating the need for rotated or truncated text.
Cleveland dot plots use less ink than bar charts while maintaining precision. Position along a common scale is the most accurate visual encoding for quantitative data.
Figure 3. Median response times, p50 latency. Dots positioned on a common scale enable precise comparison without the visual weight of full bars.
Marginal annotations in the Tufte tradition. A thin left border signals importance without shouting. Color encodes severity, not area fills.
Note
Correlation does not imply causation. This dataset shows association between variables but cannot establish a causal relationship without controlled experiments.
Data Quality
Records from 2023-Q2 contain 3.4% missing values in the revenue column. Totals for that period are estimated using linear interpolation.
Breaking Change
The API response format changed on 2025-06-01. Historical data before this date uses the legacy schema and may require transformation.
Validated
All statistical tests pass at the 95% confidence level. Sample size exceeds minimum power requirements (n=2,400 vs. required n=1,800).
Compact status indicators using the data font. Monospaced type ensures alignment in tables and lists.
| Metric | Value | Status |
|---|---|---|
| Uptime | 99.97% | healthy |
| Error Rate | 0.12% | nominal |
| Latency p99 | 842ms | elevated |
Above all else show the data. Maximize the data-ink ratio, within reason. Erase non-data-ink, within reason. Erase redundant data-ink, within reason. Revise and edit.
Edward Tufte, The Visual Display of Quantitative InformationI
Every drop of ink on a graphic should present new information. Borders, fills, shadows, and gradients that do not encode data are chartjunk. Remove them until only the data remains.
II
Repeat the same chart structure for different slices of the data. The viewer's eye learns the format once, then reads meaning from shape variations across panels. This is cheaper cognitively than animation or interaction.
III
The visual representation of data should be directly proportional to the numerical quantities it represents. A bar twice as tall should represent a value twice as large. Truncated axes, 3D effects, and area distortions violate this contract.
IV
Word-sized graphics embedded in text or tables. Intense, simple, data-dense. A sparkline provides context (trend, variance, range) without leaving the sentence or row where the data lives.
V
A well-designed data graphic can present hundreds of numbers in a small space without overwhelming the reader. Density is not clutter. Clutter is a failure of design, not of information.
VI
Annotations, labels, and narrative should live alongside the data, not in separate legends or footnotes. Direct labeling eliminates the cognitive overhead of legend lookup.