Design Principle
Visual ink in charts and metrics should serve data, thresholds, and exceptions before decorative grids.
Principle
Visual ink in charts and metrics should serve data, thresholds, and exceptions before decorative grids.
Design action
Reduce grid and decoration; emphasize data marks, key points, thresholds, outlier labels, and current-state explanations.
Examples
Positive example: KPIs, trend charts, dashboards, and operational alerts need fast difference detection. Counterexample: Chart backgrounds, grids, and gradients are stronger than data marks.
Apply when
KPIs, trend charts, dashboards, and operational alerts need fast difference detection. Users need to judge state, scope, risk, or next action quickly.
Source notes
Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems. Apple HIG Layout: https://developer.apple.com/design/human-interface-guidelines/layout Material Design Layout: https://m3.material.io/foundations/layout/applying-layout NN/g Visual Design Principles: https://www.nngroup.com/articles/principles-visual-design/
Agent Directive
Reduce grid and decoration; emphasize data marks, key points, thresholds, outlier labels, and current-state explanations.