Figma UI Design Library Β· v1.0 Β· March 2026
Few / Tufte
Design Library
visual-selection-framework-v3.md
A systematic design library encoding the visual principles of Edward Tufte and Stephen Few. Every token, component, and chart type implements graphical integrity β€” maximising data-ink ratio, eliminating chartjunk, and enforcing a Lie Factor of 1.0.
16
Color Tokens
10
Type Tokens
20
Components
10
Chart Types
8
Anti-Pattern Pairs
Core Principles
01 / LIE FACTOR
Graphical Integrity
Lie Factor = Effect in graphic Γ· Effect in data
Every bar, axis, and area must be proportional to the data it represents. A Lie Factor of 1.0 is the standard; anything above 1.0 overstates, anything below understates.
Rule: Y-axis always starts at zero for bar charts. Never truncate bars to exaggerate differences. Bubble area, not diameter, encodes value.
Click for deep dive β†’
02 / DATA-INK RATIO
Maximise Data-Ink
Data-Ink Ratio = Data-ink Γ· Total ink in graphic
Every pixel serves the data. Erase everything that doesn't encode information: tick marks, grid backgrounds, decorative borders, redundant labels, gradient fills, drop shadows.
Rule: Prefer range-frame axes. Use no fill or single-hue fills. Remove legends when direct labels are possible. No 3D β€” ever.
Click for deep dive β†’
03 / PREATTENTIVE
Preattentive Attributes
Length > Area > Angle > Hue
The visual cortex processes length and 2D position before conscious thought. Design exploits this: bars (length) are decoded faster and more accurately than pie wedges (angle) or bubbles (area).
Rule: Prefer bars over pies. Use position over size. Use saturation over hue when encoding continuous scale. Limit to ≀4 distinct hues per chart.
Click for deep dive β†’
04 / CHARTJUNK
Eliminate Administrative Debris
Chartjunk = Non-data ink βˆ’ erasable structure
Tufte coined "chartjunk" for all visual elements that obscure the data signal: moirΓ© patterns, heavy gridlines, decorative pictograms, 3D extrusions, and color noise.
Rule: Gridlines in #d8d4ce only. No fills behind charts. No icons in charts. No gradient axes. Anti-patterns page shows every rule violation.
Click for deep dive β†’
05 / DIRECT LABELS
No Legends β€” Label Directly
Eye travel = Legend lookups Γ— distanceΒ²
Legends force readers to look away from the data, decode a color mapping, then look back. Direct labels β€” placed adjacent to the element they describe β€” eliminate this cognitive tax.
Rule: Label bar ends directly. Label line ends at rightmost point. Label map regions inline. Use badge cells in tables instead of separate legend keys.
Click for deep dive β†’
06 / MACRO / MICRO
Overview + Detail Simultaneously
Sparkline: word-sized Β· data-intense Β· context-rich
Tufte's principle of "micro/macro readings" β€” the design should work at multiple scales: readable as a whole gestalt and inspectable at each individual data point without switching views.
Rule: Embed sparklines in tables alongside numeric values. Use small multiples with a shared Y-scale. Avoid modals unless the data cannot fit the primary view.
Click for deep dive β†’
Source Bibliography
Author Work Year Key Contribution to This Library
Edward R. Tufte The Visual Display of Quantitative Information 1983 Data-ink ratio, chartjunk, lie factor, sparklines, range-frame axes
Edward R. Tufte Envisioning Information 1990 Small multiples, micro/macro readings, color restraint
Stephen Few Show Me the Numbers 2004 Perceptual encoding hierarchy, table design rules, direct labels
Stephen Few Information Dashboard Design 2006 Bullet graph, dashboard layout, single-screen constraint, KPI hierarchy
Few / Tufte Visual Selection Decision Framework v3 2026 1+1=3 effect, horizontal tendency, Shneiderman mantra, quartile plot, range-frame scatter
Library Structure β€” 6 Pages
Page 1
πŸ“– About
Cover, principles (Lie Factor, Data-Ink, anti-patterns), bibliography, page index.
Page 2
🎨 Foundations
16 color tokens, 10 type tokens, 9 spacing tokens, 2 theme variants.
Page 3
🧩 Components
4 atoms, 6 molecules, badge variants, KPI chips/cards, table row, section header.
Page 4
πŸ“Š Chart Library
10 chart types, each with anatomy callouts and ❌/βœ… do/don't pair.
Page 5
πŸ“‹ Template
Full dashboard assembled from components β€” mirrors ai-market-report section order.
Page 6
🚫 Anti-Patterns
8 side-by-side ❌ wrong / βœ… right pairs with rule citations.