Visual Design Research SystemEvidence, methods, patterns, and references

Comprehensive research synthesis · Version 1.0

Design interfaces that make meaning visible.

A mobile-first reference system for visual hierarchy, evidence, color, accessibility, interaction, iconography, data visualization, and ethical UX. The interface and its embedded data use the same research model.

Explore findings
91research references
48synthesized findings
24implementation recommendations
12component playbooks

Governing doctrine

The integrated conclusion across visual evidence, perception, UX, color, and accessibility research.

A strong interface does not minimize information. It minimizes uncertainty about what matters, what belongs together, what can be acted upon, and how the conclusion was reached.

This system treats visual design as an evidence and interaction architecture. It separates durable empirical findings, formal frameworks, standards, and production precedents so future decisions can use the strongest accurate support.

Core principles

Eight rules that govern hierarchy, evidence, interaction, and accessibility.

Meaning before decoration

Every prominent visual treatment must communicate evidence, hierarchy, state, relationship, or action.

Strong color, filled containers, large typography, motion, borders, and icon backgrounds consume a limited salience budget. Remove them when they do not improve comprehension or operability.

TUFTE-VDQI TUFTE-EI TREISMAN-1980

Density is not clutter

Dense interfaces can remain highly usable when grouping, comparison, labels, and alignment are disciplined.

Do not respond to confusion by deleting information first. Diagnose ordering, representation, spacing, alignment, labels, and redundant visual chrome.

TUFTE-EI CM-1984 NNG-CONTENT-DISPERSION

Task before component

Start with the user question, decision, data type, and required comparison—not with cards, charts, or modals.

A technically polished interface can still solve the wrong problem or represent the wrong abstraction. Component choice occurs after task and evidence modeling.

MUNZNER-NESTED MUNZNER-BOOK MACKINLAY-1986

Comparison before claim

A value becomes meaningful through a baseline, target, prior state, control, distribution, or peer comparison.

Arrange comparable evidence in the same visual field. Do not force users to remember values from another tab, slide, or card.

TUFTE-VE TUFTE-VST CM-1984

Recognition before recall

Keep important options, labels, scope, state, and recovery paths visible or immediately retrievable.

Hidden interactions and unlabeled icons transfer the interface model into the user’s memory. Visible signifiers and persistent state reduce that burden.

NIELSEN-RECOGNITION NORMAN-SIGNIFIERS WIEDENBECK-1999

Accessibility as architecture

Contrast, semantics, focus, reflow, input targets, redundant encoding, and user preferences belong in the design system.

Accessibility is not a final palette audit. It determines token contracts, component states, content structure, interaction recovery, and responsive behavior.

WCAG22 USWDS-ACCESSIBILITY FLUENT-ACCESSIBILITY

Make conclusions reconstructable

Expose enough evidence, method, source, uncertainty, and comparison for readers to challenge or reproduce the conclusion.

A confidence label or signal score without an inspectable basis is an assertion. Provenance should remain quiet but accessible.

TUFTE-BE TUFTE-VST MUNZNER-NESTED

Guide first, then permit exploration

State the main finding, show the critical evidence, annotate the relationship, and then allow filtering and inspection.

Do not make users derive the thesis from an unstructured dashboard. Do not prevent them from checking the thesis against the evidence.

SEGEL-HEER-2010 ELLIPSIS-ANNOTATION SHNEIDERMAN-EYES

Research map

The major concept areas and how they inform design decisions.

Open a domain to inspect its core concepts, governing takeaway, and supporting reference keys.

Visual hierarchy & information densityHierarchy is an attention-routing system built from position, size, weight, contrast, spacing, grouping, and sequence.

Core concepts

  • salience budget
  • macro/micro reading
  • proximity as semantics
  • content dispersion
  • finding-oriented headings

Governing takeaway

One dominant focal point, a small set of secondary anchors, and quiet supporting metadata.

TUFTE-EI TUCH-2012 NNG-PROXIMITY NNG-CONTENT-DISPERSION
Visual evidence & TufteVisual storytelling should construct a truthful, inspectable argument from integrated evidence rather than decorative narrative.

Core concepts

  • graphical integrity
  • data-ink
  • small multiples
  • layering and separation
  • direct annotation
  • provenance

Governing takeaway

Show enough evidence for the reader to reconstruct the conclusion while making the principal finding immediately visible.

TUFTE-VDQI TUFTE-VE TUFTE-BE TUFTE-VST
Graphical perception & visual grammarVisual channels have different strengths. Position and length usually support more accurate quantitative comparison than area, angle, volume, or color.

Core concepts

  • visual variables
  • expressiveness
  • effectiveness
  • aligned comparison
  • task-specific encoding

Governing takeaway

Use the strongest perceptual channel appropriate to the data relationship and required precision.

BERTIN-1967 CM-1984 MACKINLAY-1986 GRAPHICAL-PERCEPTION-REVIEW
Attention, scanning & cognitionUsers scan before reading. Unique features can guide attention quickly, while combinations of subtle differences create slower visual search.

Core concepts

  • preattentive features
  • front-loaded wording
  • first impressions
  • recognizable patterns
  • aging and peripheral attention

Governing takeaway

Use one dominant visual distinction for important exceptions and keep critical information inside the primary scan path.

TREISMAN-1980 LINDGAARD-2006 TUCH-2012 OLDER-ADULT-PERIPHERY
Discoverability & interaction guidanceActions must look possible, produce timely feedback, expose state, and provide recovery.

Core concepts

  • signifiers
  • direct manipulation
  • recognition over recall
  • system status
  • progressive disclosure
  • target acquisition

Governing takeaway

Make the interaction model visible during use rather than requiring documentation or memory.

NORMAN-DOET SHNEIDERMAN-DIRECT NIELSEN-HEURISTICS FITTS-1954
Narrative, annotation & memoryEffective digital stories balance author guidance with reader agency and place explanatory annotations adjacent to supporting evidence.

Core concepts

  • guided exploration
  • annotation
  • object constancy
  • memorability
  • meaningful embellishment

Governing takeaway

State the finding, guide attention to the evidence, then permit verification and exploration.

SEGEL-HEER-2010 HEER-ROBERTSON-2007 BORKIN-2013 BORGO-2012
Color systems & palettesColor is an information-encoding system. Hue, lightness, and chroma perform different jobs and should map to explicit semantic roles.

Core concepts

  • neutral-first structure
  • semantic tokens
  • sequential palettes
  • diverging palettes
  • qualitative palettes
  • contextual color meaning

Governing takeaway

Reserve saturated color for actions, exceptions, selection, and analytical focus—not general decoration.

COLORBREWER SCHLOSS-2018 KOVESI-2015 FLUENT-COLOR
Contrast & accessible colorA color does not pass accessibility; a specific foreground/background/state pairing does.

Core concepts

  • 4.5:1 text contrast
  • 3:1 meaningful graphics
  • color not sole channel
  • focus visibility
  • forced colors
  • theme preferences

Governing takeaway

Treat WCAG as the compliance floor, then validate perception and task success in context.

WCAG-1.4.1 WCAG-1.4.3 WCAG-1.4.11 MEDIA-QUERIES-5
Icon communicationThe glyph should carry the concept; color should modify state or emphasis. Important and unfamiliar actions need visible labels.

Core concepts

  • icon plus label
  • accessible names
  • monochrome utilities
  • semantic shape grammar
  • large targets
  • redundant selected state

Governing takeaway

Use icons to reinforce meaning, not to make the user guess it.

WIEDENBECK-1999 W3C-BUTTON-NAME FLUENT-ICONS WCAG-2.5.8
Responsive & preference-aware deliveryResponsive design must preserve information and task capability while adapting representation, density, and navigation.

Core concepts

  • semantic zoom
  • 320 CSS-pixel reflow
  • text spacing
  • light/dark modes
  • increased contrast
  • reduced transparency

Governing takeaway

Change layout and representation—not the meaning or evidence available to the user.

WCAG-1.4.10 WCAG-1.4.12 CSS-COLOR-ADJUST DARKMODE-2024
Ethical interaction designEquivalent choices require equivalent clarity and effort. Interfaces should not manufacture urgency, hide consequences, or obstruct recovery.

Core concepts

  • dark patterns
  • consent parity
  • sponsorship disclosure
  • reversibility
  • transparent defaults

Governing takeaway

Optimize task success and informed decisions rather than clicks, lock-in, or accidental consent.

DARK-PATTERNS-2019 NIELSEN-HEURISTICS NORMAN-DOET

Research findings

48 synthesized findings organized by concept.

Each finding distinguishes the observed or documented insight from its practical design implication. Reference keys link directly to the detailed source register.

Visual hierarchy & information density5 findings

Information density and visual density are different variables.

High information density can remain understandable when related values are aligned, grouped, consistently labeled, and visually quiet. Sparse layouts can still be confusing when every element competes equally.

Design implication: Prefer structural clarity over indiscriminate removal of information.

TUFTE-EI CM-1984 NNG-CONTENT-DISPERSION

Hierarchy should communicate reading order before the user reads.

The first viewport should expose page identity, scope, the dominant finding, and the next useful action.

Design implication: Use position, scale, weight, and spacing before adding decorative color or containers.

LINDGAARD-2006 TUCH-2012 TUFTE-EI

Spacing is semantic.

Proximity communicates belonging. Larger gaps should separate groups; smaller gaps should bind related labels, values, and actions.

Design implication: Use spacing tokens as relationship rules, not arbitrary decoration.

NNG-PROXIMITY TUFTE-EI

Strong visual treatments require a salience budget.

Saturated color, filled badges, large icons, shadows, borders, and motion are preattentive signals. Repeating them everywhere removes hierarchy.

Design implication: Reserve strong treatments for the primary action, selected analytical focus, or genuine exception.

TREISMAN-1980 WARE-PERCEPTION TUFTE-CHARTJUNK

Finding-oriented headings outperform category-only headings for communication.

A category such as “Security” organizes content. A heading such as “Identity is becoming the control boundary for agent tools” communicates meaning.

Design implication: Use category labels as quiet context and the finding as the primary heading.

NNG-SCANNING WCAG-2.4.6 SEGEL-HEER-2010

Visual evidence & Tufte5 findings

Visual storytelling is an evidence architecture.

The strongest structure connects claim, evidence, comparison, mechanism, implication, qualification, and source.

Design implication: Do not separate the conclusion from the evidence needed to evaluate it.

TUFTE-VE TUFTE-BE TUFTE-VST

Graphical integrity applies to UI emphasis as well as charts.

A small change should not receive the same alarm treatment as a major change. Visual magnitude and urgency should correspond to the underlying effect.

Design implication: Calibrate size, color, and status emphasis to evidence magnitude.

TUFTE-VDQI CM-1984

Small multiples preserve context and comparison.

Repeated consistent structures let users learn the visual grammar once and focus on variation across time, environments, products, or scenarios.

Design implication: Prefer small multiples to overplotted charts or animation when comparison matters.

TUFTE-VDQI TUFTE-EI HEER-ROBERTSON-2007

Direct labels and annotations reduce decoding travel.

Labels, event markers, and explanatory notes should be placed adjacent to the evidence they describe rather than in remote legends or paragraphs.

Design implication: Annotate deployments, thresholds, policy changes, and major inflection points directly.

TUFTE-BE ELLIPSIS-ANNOTATION

Confidence and signal scores need an inspectable basis.

Readers should be able to determine the sources, independence, time window, classification logic, and uncertainty behind an analytical score.

Design implication: Expose evidence counts and method behind signal labels.

TUFTE-BE TUFTE-VST MUNZNER-NESTED

Graphical perception & visual grammar3 findings

Aligned position and length are generally the most precise common visual encodings.

Area, angle, volume, and saturation impose more perceptual estimation error for exact comparisons.

Design implication: Prefer tables, dot plots, and bars for operational and analytical precision.

CM-1984 CM-1985 GRAPHICAL-PERCEPTION-REVIEW

Truthful encoding is necessary but not sufficient.

A chart can represent the data correctly and still use an ineffective visual channel for the task.

Design implication: Evaluate both expressiveness and perceptual effectiveness.

MACKINLAY-1986 MUNZNER-BOOK

Chart choice should follow the relationship being explained.

Time, distribution, hierarchy, flow, geography, dependency, and exact comparison require different representations.

Design implication: Do not use cards or pie charts as universal defaults.

BERTIN-1967 MUNZNER-BOOK TUFTE-EI

Attention, scanning & cognition4 findings

A single distinctive visual feature can guide search faster than a conjunction of subtle features.

Finding a unique color or orientation is easier than finding an item defined by a combination such as medium-blue, thin-border, slightly different icon.

Design implication: Use one strong distinguishing property for important exceptions.

TREISMAN-1980 FIT-40-YEAR-REVIEW

The 50-millisecond result concerns visual appeal—not complete understanding.

Very brief exposure can produce stable aesthetic judgments, but it does not prove users comprehend navigation, content, or usability in that interval.

Design implication: Optimize the first viewport for immediate orientation without overstating the research.

LINDGAARD-2006 TUCH-2012

Users scan headings and leading words before committing to reading.

Meaningful headings and front-loaded labels improve the layer-cake scan pattern and reduce wasted inspection.

Design implication: Put differentiating words first and avoid generic “Learn more” actions.

NNG-SCANNING WCAG-2.4.6

Peripheral placement is a material discoverability risk for older adults.

Critical alerts and actions placed only at viewport edges can be missed, especially under clutter or complex search.

Design implication: Keep critical state and primary actions in the central reading path.

OLDER-ADULT-PERIPHERY OLDER-ADULT-EYETRACKING-REVIEW

Discoverability & interaction guidance6 findings

Signifiers must communicate what is interactive.

A passive pill that looks like a filter creates false affordance. A control that looks like text hides capability.

Design implication: Align visual treatment with actual behavior.

NORMAN-SIGNIFIERS NIELSEN-HEURISTICS

Recognition is easier than recall.

Visible labels, current filters, recent choices, state, and recovery paths reduce memory demand.

Design implication: Do not hide important options behind undocumented gestures or hover.

NIELSEN-RECOGNITION NORMAN-DOET

System status is part of the content.

Users need to know what scope is active, whether results are loading, what changed, when data refreshed, and whether an action completed.

Design implication: Use persistent scope, progress, result counts, and clear outcome feedback.

NNG-STATUS NIELSEN-HEURISTICS

Progressive disclosure works only for secondary content.

Hiding primary evidence, comparison values, or necessary controls may make a page look simpler while increasing cognitive and interaction cost.

Design implication: Keep essential meaning visible and collapse only supporting depth.

NNG-PROGRESSIVE-DISCLOSURE TUFTE-POWERPOINT

Direct manipulation should be incremental and reversible.

Visible objects, immediate feedback, preview, undo, reset, and preserved context reduce the gap between intention and outcome.

Design implication: Make filters, sorting, pinning, and generated classifications reversible.

SHNEIDERMAN-DIRECT NIELSEN-HEURISTICS

Target size and distance affect acquisition time.

A compact glyph can remain visually small while living inside a substantially larger interactive target.

Design implication: Use at least the normative minimum and larger platform targets for frequent mobile actions.

FITTS-1954 WCAG-2.5.8 APPLE-BUTTONS

Narrative, annotation & memory3 findings

Narrative and exploration should coexist.

Author guidance helps users notice the main finding. Reader control enables verification and discovery.

Design implication: Lead with a conclusion and annotation, then expose filters, detail, and raw evidence.

SEGEL-HEER-2010 SHNEIDERMAN-EYES

Animation is useful for continuity, not decoration.

Transitions can help users track reordering or changes in representation, but they can delay access and make prior states disappear.

Design implication: Use motion for object constancy and honor reduced-motion preferences.

HEER-ROBERTSON-2007 MEDIA-QUERIES-5

Minimalism and memorability are not identical.

Meaningful imagery, distinctive titles, and selective embellishment can improve recognition and recall without necessarily damaging comprehension.

Design implication: Reject arbitrary decoration, not all visual identity.

BORKIN-2013 BORKIN-2015 BORGO-2012

Color systems & palettes7 findings

Hue, lightness, and chroma are separate communication channels.

Hue distinguishes categories; lightness supports order and contrast; chroma controls emphasis and attention.

Design implication: Do not treat color as a single decorative variable.

BERTIN-1967 COLORBREWER WARE-PERCEPTION

Traditional color harmony does not guarantee usable UI color.

A harmonious palette may fail text contrast, state discrimination, dark mode, forced colors, or color-vision accessibility.

Design implication: Prioritize semantics, accessibility, discriminability, and state before brand harmony.

WCAG22 SCHLOSS-2018 FLUENT-COLOR

Palette family must match data semantics.

Sequential palettes represent ordered magnitude, diverging palettes represent deviation around a meaningful midpoint, and qualitative palettes represent unordered categories.

Design implication: Do not select a palette solely because it looks balanced.

COLORBREWER QUANT-COLORMAPS-2018

Rainbow scales create false boundaries and weak ordering.

Uneven perceptual transitions can overemphasize some ranges and flatten others.

Design implication: Use perceptually ordered sequential or diverging scales such as Viridis or Cividis where appropriate.

KOVESI-2015 VIRIDIS CIVIDIS

Color semantics are contextual and learned.

Associations can accelerate interpretation when they fit the subject, but they vary across concepts, cultures, and contexts.

Design implication: Treat “blue means trust” and similar claims as hypotheses, not universal laws.

SCHLOSS-2018 SCHLOSS-2024 ELLIOT-MAIER-2014

Neutral-first palettes preserve semantic capacity.

Neutral surfaces and text should carry most structure so saturated colors remain available for state, selection, action, and analytical focus.

Design implication: Avoid category-colored card backgrounds and multicolored metadata icons.

TUFTE-EI FLUENT-COLOR ATLASSIAN-COLOR

UI palettes and data palettes require separate contracts.

A button color communicates interaction priority; a chart color must support discrimination, ordering, and comparison. Reusing them creates semantic collisions.

Design implication: Create dedicated token namespaces for action, state, accent, and data visualization.

FLUENT-TOKENS COLORBREWER CATEGORICAL-COLOR-2023

Contrast & accessible color6 findings

Contrast is pairwise, contextual, and stateful.

A color does not pass by itself. Foreground, background, font characteristics, state, and compositing determine the result.

Design implication: Test every permitted token pairing across default, hover, pressed, selected, focused, disabled, light, dark, and forced-color modes.

WCAG-1.4.3 WCAG-1.4.11 CSS-COLOR-4

Secondary metadata still requires readable contrast.

Dates, sources, timestamps, helper text, and captions do not receive a lower contrast requirement merely because they are visually subordinate.

Design implication: Create hierarchy with typography, spacing, and placement—not illegible gray.

WCAG-1.4.3 POLARITY-2014

Color must not be the sole carrier of meaning.

Selection, warning, error, required state, and chart categories need additional text, icon, shape, position, pattern, or numeric cues.

Design implication: Design redundant encoding into components rather than adding it during audit.

WCAG-1.4.1 APPLE-ACCESSIBILITY CVD-GLOBAL-REVIEW

WCAG is the compliance floor, not the end of perceptual quality.

Passing ratios does not guarantee comfortable reading, strong hierarchy, or category discrimination.

Design implication: Combine automated checks with task testing, CVD simulation, grayscale, zoom, and real-device review.

WCAG22 VIS-INDIVIDUAL-DIFFERENCES CATEGORICAL-COLOR-2023

Light and dark appearances should be treated as separate adaptive palettes.

Polarity effects vary by user and task. Simple inversion often breaks contrast, chroma, shadows, and chart discrimination.

Design implication: Respect system preference, allow override, and validate each theme independently.

POLARITY-2009 DARKMODE-2024 APPLE-COLOR

Focus is a first-class visual layer.

Keyboard location must remain obvious on every surface, avoid clipping, differ from selection, and survive sticky headers and forced colors.

Design implication: Use dedicated focus tokens and test obscuration and scroll behavior.

WCAG-2.4.11 WCAG-2.4.13 CSS-COLOR-ADJUST

Icon communication4 findings

The icon shape should identify the concept; color should modify state.

Monochrome utility icons are easier to theme, validate, and adapt than multicolored glyphs.

Design implication: Use currentColor and semantic foreground tokens for controls.

FLUENT-ICONS CSS-COLOR-ADJUST

Visible labels materially support initial icon use.

Icon-only interfaces increase interpretation and learning demands, especially for unfamiliar or consequential actions.

Design implication: Use icon plus persistent text for primary navigation and important functions.

WIEDENBECK-1999 NIELSEN-RECOGNITION

Accessible names describe function, not appearance.

An icon button should be named “Save article,” not “floppy-disk icon.”

Design implication: Align visible labels and programmatic names; hide decorative SVGs from assistive technology.

W3C-BUTTON-NAME WCAG-2.4.6

Icon containers consume disproportionate salience.

A colored circle or rounded square behind an icon makes minor metadata appear operationally important.

Design implication: Reserve containers for major actions, identity, strong state, or visible target boundaries.

TREISMAN-1980 TUFTE-CHARTJUNK FLUENT-ICONS

Responsive & preference-aware delivery3 findings

Responsive design should adapt representation, not remove evidence.

Mobile layouts may transform a table into labeled comparison rows, but should not silently drop columns needed for understanding.

Design implication: Define semantic zoom levels for overview, section, item, and detail.

WCAG-1.4.10 MUNZNER-BOOK SHNEIDERMAN-EYES

Sticky headers need one measured offset contract.

Independent fixed heights cause stacked or overlapping headers when content wraps, browser text scales, or safe areas change.

Design implication: Measure the app header and expose one CSS variable used by every sticky subheader and scroll margin.

WCAG-2.4.11 WCAG-1.4.10

Preference-aware delivery is broader than dark mode.

Interfaces can respond to color scheme, increased or reduced contrast, forced colors, reduced motion, and reduced transparency.

Design implication: Treat these as supported design-system modes, not component exceptions.

MEDIA-QUERIES-5 CSS-COLOR-ADJUST

Ethical interaction design2 findings

Equivalent choices need equivalent clarity and effort.

Consent, rejection, enrollment, cancellation, and destructive recovery should not be asymmetrically designed to advance business goals.

Design implication: Audit choice prominence, wording, defaults, and effort symmetry.

DARK-PATTERNS-2019 NIELSEN-HEURISTICS

Engagement metrics are not task-success metrics.

More clicks may indicate interest or may indicate confusion, poor discoverability, and unnecessary interaction cost.

Design implication: Measure location time, comparison accuracy, recovery, comprehension, confidence, and accessibility outcomes.

MUNZNER-NESTED NIELSEN-HEURISTICS DARK-PATTERNS-2019

Implementation recommendations

Prioritized actions for future HTML, dashboards, explainers, and enterprise design systems.

P0 establishes the information and accessibility foundation. P1 defines the core experience. P2 adds advanced analytical and machine-readable capability.

P0 · Foundation6 recommendations

P0System foundation

Adopt a task-to-visual contract before rendering.

Prevents card-first and chart-first generation.

Implementation guidance
  • Identify audience and decision
  • Define primary questions and comparisons
  • Classify data types and uncertainty
  • Select interaction and density requirements
  • Choose the representation only after the contract is complete
MUNZNER-NESTED MUNZNER-BOOK
P0Content model

Use a claim–evidence–comparison–implication schema.

Creates a reusable communication unit for articles, cards, presentations, and AI-generated summaries.

Implementation guidance
  • Claim: what changed
  • Evidence: what supports it
  • Comparison: compared with what
  • Explanation: likely mechanism
  • Implication: why it matters
  • Qualification: uncertainty or exception
  • Provenance: source and method
TUFTE-VE TUFTE-BE SEGEL-HEER-2010
P0Design tokens

Build primitive, semantic, and component token layers.

Separates intent from implementation and enables safe remapping across themes and preferences.

Implementation guidance
  • Primitive palette values
  • Semantic roles for text, surface, action, state, focus, and data
  • Component-specific state tokens
  • Independent light, dark, increased-contrast, and forced-color mappings
FLUENT-TOKENS USWDS-COLOR CSS-COLOR-4
P0Accessibility

Create an allowed contrast-pair matrix.

Contrast belongs to permitted token combinations, not individual colors.

Implementation guidance
  • Normal text ≥ 4.5:1
  • Large text ≥ 3:1
  • Meaningful graphics and boundaries ≥ 3:1
  • Validate every interactive state
  • Test final composited colors, not source alpha values
WCAG-1.4.3 WCAG-1.4.11
P0Evidence

Make analytical classifications inspectable.

Signal, confidence, priority, and risk labels must be auditable.

Implementation guidance
  • Show source count and independence
  • Expose time window
  • Document classification rules
  • Separate observed fact from inference and forecast
  • Provide source links and limitations
TUFTE-VST TUFTE-BE
P0Semantics

Use semantic HTML as the structural baseline.

Improves navigation, accessibility, printing, parsing, and future LLM extraction.

Implementation guidance
  • Landmarks for header, nav, main, aside, footer
  • Logical heading hierarchy
  • time, figure, figcaption, table, details, summary
  • Buttons for actions and anchors for navigation
  • Accessible names aligned with visible labels
W3C-HEADINGS WCAG-2.4.6 W3C-BUTTON-NAME

P1 · Core implementation14 recommendations

P1Mobile hierarchy

Make the first mobile viewport answer four questions.

The user needs orientation before exploration.

Implementation guidance
  • What is this
  • What scope or time period is active
  • What is the principal finding
  • What is the next useful action
LINDGAARD-2006 TUCH-2012 NNG-STATUS
P1Mobile navigation

Use one sticky app header and measured sticky section headers.

Prevents overlapping sticky layers when text wraps or browser settings change.

Implementation guidance
  • Measure header with ResizeObserver
  • Write height to --app-header-height
  • Use the variable for section header top offsets
  • Set scroll-padding and scroll-margin from the same contract
  • Honor safe-area insets
WCAG-2.4.11 WCAG-1.4.10
P1Information density

Use cards only for self-contained conceptual objects.

Lists and tables are more efficient for repeated scanning and exact comparison.

Implementation guidance
  • Cards for distinct stories and recommendations
  • Compact lists for headlines
  • Tables for repeated attributes
  • Small multiples for repeated trends
  • Detail views for one-entity depth
NNG-CARD-LIST CM-1984 TUFTE-EI
P1Metadata

Place supporting metadata in one predictable footer region.

Prevents dates, source, tags, and signal from competing with title and meaning.

Implementation guidance
  • Title first
  • Summary or finding second
  • Evidence or implication third
  • Metadata footer last
  • No passive date or source pills
TUFTE-VDQI NORMAN-SIGNIFIERS
P1Search

Provide modal search across findings, methods, components, and sources.

A long research system requires direct retrieval, not only navigation.

Implementation guidance
  • Keyboard shortcut and visible trigger
  • Search title, summary, tags, keys, and citation wording
  • Filter by content type and evidence class
  • Return anchors with context snippets
  • Keep search dismissible and keyboard operable
NIELSEN-RECOGNITION WCAG-1.4.13 W3C-BUTTON-NAME
P1Scope

Keep active scope visible.

Users can misinterpret filtered data as the complete dataset.

Implementation guidance
  • Current section
  • Active filters
  • Result count
  • Sort order
  • Data completeness
  • Last refresh time when applicable
NNG-STATUS SHNEIDERMAN-EYES
P1Interaction

Make filtering and editing reversible.

Undo and reset reduce risk and support exploration.

Implementation guidance
  • Visible selected state
  • Clear all
  • Undo destructive changes
  • Preserve prior view state
  • Preview transformations before apply
SHNEIDERMAN-DIRECT NIELSEN-HEURISTICS
P1Icons

Use icon plus text for important or unfamiliar actions.

Labels reduce interpretation and learning demands.

Implementation guidance
  • Use conventional icons only for compact repeated utilities
  • Provide accessible names
  • Use currentColor
  • Keep glyph and target size separate
  • Do not depend on tooltip-only explanation
WIEDENBECK-1999 W3C-BUTTON-NAME FITTS-1954
P1Color

Use a neutral-first semantic palette.

Preserves saturated color for meaningful state, action, selection, and analytical focus.

Implementation guidance
  • Neutral canvas and surfaces
  • Readable primary, secondary, and metadata text
  • Dedicated action colors
  • Dedicated semantic status roles
  • Separate accent and data palettes
TUFTE-EI FLUENT-COLOR ATLASSIAN-COLOR
P1Data visualization

Choose palette family from data semantics.

Color order and category meaning must correspond to the underlying relationship.

Implementation guidance
  • Sequential for low-to-high
  • Diverging around a meaningful midpoint
  • Qualitative for unordered categories
  • Cyclic for connected endpoints
  • Avoid rainbow scales
COLORBREWER KOVESI-2015 QUANT-COLORMAPS-2018
P1Data visualization

Prefer direct labels and shared scales.

Reduces legend lookup and makes comparison spatial rather than memorial.

Implementation guidance
  • Label lines at endpoints
  • Annotate important events
  • Keep small-multiple scales consistent
  • Show exact values on demand
  • Expose baselines and units
TUFTE-BE CM-1984 ELLIPSIS-ANNOTATION
P1Responsive

Define semantic zoom levels.

Mobile should adapt representation without deleting evidence.

Implementation guidance
  • Overview: counts and major changes
  • Section: compact findings and comparisons
  • Item: summary, evidence, implication
  • Detail: method, sources, raw values
SHNEIDERMAN-EYES WCAG-1.4.10 MUNZNER-BOOK
P1Preferences

Support light, dark, contrast, forced-color, motion, and transparency preferences.

Accessibility and environmental needs extend beyond one theme toggle.

Implementation guidance
  • Respect system defaults
  • Allow explicit override
  • Persist user choice
  • Validate each mode independently
  • Avoid mechanical inversion
MEDIA-QUERIES-5 CSS-COLOR-ADJUST DARKMODE-2024
P1Focus

Create a focus-ring token that works across all surfaces.

Focus must remain visible, unclipped, and distinct from selection.

Implementation guidance
  • Use inner and outer contrast where necessary
  • Test light, dark, brand, and semantic backgrounds
  • Avoid overflow clipping
  • Ensure sticky layers do not obscure focus
  • Test forced colors
WCAG-2.4.11 WCAG-2.4.13

P2 · Advanced capability4 recommendations

P2Data exploration

Add linked highlighting across related evidence.

Coordinated views turn disconnected components into an analytical system.

Implementation guidance
  • Highlight related findings and sources
  • Connect timeline events and metrics
  • Subdue unrelated context without removing it
  • Keep focus and selection semantics distinct
SHNEIDERMAN-EYES MUNZNER-BOOK
P2Density

Offer compact and comfortable density modes.

Different users and tasks require different amounts of visible context.

Implementation guidance
  • Compact for scanning and comparison
  • Comfortable for touch and explanation
  • Reading mode for long-form content
  • Do not change the information model between modes
NNG-CONTENT-DISPERSION VIS-INDIVIDUAL-DIFFERENCES
P2Machine readability

Embed the same research data as structured JSON.

Future agents should not have to reconstruct concepts from styled DOM fragments.

Implementation guidance
  • Stable IDs and citation keys
  • Explicit relationships between findings and sources
  • Separate source type and claim language
  • Include version, generated date, and methodology
  • Provide JSON export from the SPA
MUNZNER-NESTED TUFTE-BE
P2Validation

Measure task success rather than engagement alone.

Clicks and time-on-page can reflect confusion rather than value.

Implementation guidance
  • Time to locate
  • Comparison accuracy
  • Comprehension of primary finding
  • Error and recovery rate
  • Keyboard and mobile completion
  • Decision confidence
MUNZNER-NESTED NIELSEN-HEURISTICS DARK-PATTERNS-2019

Component communication playbook

Purpose, anatomy, recommended use, and failure modes for complex UI components.

Sticky application headerGlobal identity, search, mode controls, and section navigation.

Anatomy

  • Product title
  • Current document scope
  • Search trigger
  • Theme and density controls
  • Horizontally scrollable section navigation on mobile

Use

  • Keep height compact
  • Measure actual height
  • Use text labels for non-obvious controls
  • Maintain visible focus
  • Honor safe-area insets

Avoid

  • Multiple independent fixed headers
  • Large hero content inside sticky region
  • Icon containers for every control
  • Hiding search behind an unfamiliar icon
WCAG-2.4.11 NORMAN-SIGNIFIERS FITTS-1954
Sticky section headerMaintain local context in long research pages.

Anatomy

  • Section number or category
  • Finding-oriented title
  • Concise section purpose
  • Optional count

Use

  • Use the global measured offset
  • Allow the next section to push the prior header away
  • Keep it shorter than the global header
  • Set matching scroll-margin

Avoid

  • Stacking several sticky subsection levels
  • Fixed pixel offsets
  • Repeating long descriptions in the sticky state
WCAG-2.4.11 NNG-STATUS
Research finding rowCommunicate one conclusion and its operational implication.

Anatomy

  • Finding title
  • Evidence summary
  • Why it matters
  • Citation keys

Use

  • Lead with the conclusion
  • Keep evidence and implication adjacent
  • Use reference keys as quiet verification links
  • Group by domain

Avoid

  • Generic category titles
  • Large status badges
  • Multiple card backgrounds inside the row
SEGEL-HEER-2010 TUFTE-BE NNG-SCANNING
Content cardRepresent one self-contained story, recommendation, or conceptual object.

Anatomy

  • Linked title
  • Summary
  • Evidence or implication
  • Single metadata footer

Use

  • Use neutral surfaces
  • Make the title the main anchor
  • Keep metadata quiet
  • Use one local primary action

Avoid

  • Cards for repeated exact comparison
  • Category-colored backgrounds
  • Date, source, signal, and tag pills together
  • Large decorative icons
NNG-CARD-LIST TUFTE-EI NORMAN-SIGNIFIERS
Dense comparison tableSupport scanning and exact comparison across repeated attributes.

Anatomy

  • Descriptive caption
  • Aligned headers
  • Sortable columns
  • Row labels
  • Optional detail disclosure

Use

  • Align numbers
  • Use typography and separators before color
  • Make sort state explicit
  • Preserve labels when transformed for mobile

Avoid

  • Heatmap-only exact values
  • Saturated status rows
  • Low-contrast metadata
  • Silent column removal on mobile
CM-1984 WCAG-1.4.10 WCAG-1.4.3
Status and alertCommunicate information, success, warning, or error with recovery.

Anatomy

  • Semantic icon
  • State name
  • Message
  • Optional action

Use

  • Use color, icon, and text
  • Explain recovery
  • Use role-specific foreground/background pairs
  • Reserve bold treatment for urgent states

Avoid

  • Colored dot only
  • White text on unchecked yellow
  • Using gray for both secondary and disabled
  • Warnings that visually overpower errors
WCAG-1.4.1 WCAG-1.4.11 ATLASSIAN-COLOR
Icon controlProvide compact recognition for a conventional action.

Anatomy

  • Button target
  • Monochrome SVG
  • Accessible name
  • Optional persistent label

Use

  • Use currentColor
  • Keep target larger than glyph
  • Use visible label for primary or unfamiliar action
  • Test every state and forced colors

Avoid

  • Multicolored utility icons
  • Tooltip-only meaning
  • Tiny click targets
  • Same glyph for conflicting concepts
WIEDENBECK-1999 W3C-BUTTON-NAME FLUENT-ICONS WCAG-2.5.8
Filter control and scope barNarrow information while preserving visible context.

Anatomy

  • Filter label
  • Selected state
  • Result count
  • Clear/reset action
  • Current sort and scope

Use

  • Use aria-pressed or native state
  • Use check or removal affordance in addition to color
  • Update count and status
  • Keep reset visible

Avoid

  • Passive tags styled as filters
  • Color-only selection
  • Hidden active filters
  • No path back to all results
NIELSEN-RECOGNITION NNG-STATUS SHNEIDERMAN-DIRECT
Analytical chartExpose a relationship, trend, distribution, or comparison.

Anatomy

  • Finding-oriented title
  • Units and scope
  • Appropriate encoding
  • Direct labels
  • Annotation
  • Source and method

Use

  • Use position and length for precise comparison
  • Match color family to data
  • Show baselines and uncertainty
  • Provide tabular alternative when needed

Avoid

  • 3D effects
  • Rainbow scales
  • Remote legends
  • Dual axes without compelling justification
  • Animation replacing comparison
CM-1984 COLORBREWER TUFTE-VE KOVESI-2015
Citation referenceLet readers verify a concept and reuse accurate attribution language.

Anatomy

  • Stable key
  • Source title and link
  • Evidence class
  • Use-for summary
  • Recommended citation language
  • Boundary or caveat

Use

  • Use the strongest accurate verb
  • Distinguish standard, study, review, framework, practice, and draft
  • Link claims to source keys

Avoid

  • Presenting framework as proof
  • Treating draft as current requirement
  • Quote aggregators when primary source exists
WCAG22 TUFTE-VDQI MUNZNER-NESTED
Sponsored content blockDisclose commercial content while providing enough information for an informed evaluation.

Anatomy

  • Clear sponsorship label
  • Product or service name
  • Problem addressed
  • Material differentiation
  • Verification caveat
  • Destination link

Use

  • Keep disclosure visible
  • Use equivalent readability
  • Separate claims from editorial assessment
  • State what should be independently verified

Avoid

  • Native-looking undisclosed promotion
  • Urgency theater
  • Oversized visual prominence
  • Editorial endorsement implied by styling
DARK-PATTERNS-2019 TUFTE-BE

Validation methods

Research-backed design reviews and task-success tests.

01

Task-to-visual contract

Are we representing the right user task and data relationship?

  1. State audience and decision
  2. List primary questions
  3. Identify required comparisons
  4. Classify data types and uncertainty
  5. Choose visual and interaction idioms
  6. Define success metrics
MUNZNER-NESTED MUNZNER-BOOK
02

Five-second orientation test

Does the first viewport communicate identity, scope, priority, and action?

  1. Show the screen briefly
  2. Ask what it was about
  3. Ask what appeared most important
  4. Ask what action was available
  5. Compare answers with intended hierarchy
LINDGAARD-2006 TUCH-2012
03

Blur and squint test

Does macro hierarchy remain visible without reading details?

  1. Blur or defocus the screen
  2. Identify dominant region
  3. Identify secondary anchors
  4. Check whether metadata competes
  5. Reduce strong treatments that do not represent priority
TUFTE-EI TREISMAN-1980
04

Grayscale and color-removal test

Can the interface still communicate state and distinction without hue?

  1. Render in grayscale
  2. Locate selected and error states
  3. Compare chart categories
  4. Verify links and controls remain identifiable
  5. Add redundant labels, shapes, patterns, or position
WCAG-1.4.1 CVD-GLOBAL-REVIEW
05

Erasure test

Does each prominent visual element earn its perceptual cost?

  1. Remove border, shadow, tint, icon container, or badge
  2. Re-evaluate grouping and meaning
  3. Keep the element removed if comprehension does not decline
  4. Add context back only where it supports decoding
TUFTE-VDQI TUFTE-CHARTJUNK
06

Scan-path test

Does the likely eye path follow the intended communication sequence?

  1. Mark first fixation candidate
  2. Trace headings and leading words
  3. Identify interruptions by metadata
  4. Check that primary action follows understanding
  5. Verify critical content is not peripheral
NNG-SCANNING OLDER-ADULT-PERIPHERY
07

Interaction-signifier test

Does every visual treatment accurately predict behavior?

  1. Inspect every pill, underline, icon, and colored region
  2. Ask whether it looks interactive
  3. Verify selected, disabled, loading, and error states
  4. Check visible and accessible labels
  5. Remove false affordances
NORMAN-SIGNIFIERS NIELSEN-HEURISTICS
08

Contrast-pair matrix

Do all permitted token pairings pass in every state and mode?

  1. Enumerate semantic foreground/background combinations
  2. Test text and non-text thresholds
  3. Test hover, pressed, selected, focus, and disabled
  4. Test light, dark, and forced colors
  5. Validate rendered alpha composition
WCAG-1.4.3 WCAG-1.4.11 CSS-COLOR-4
09

Keyboard and focus audit

Can the full workflow be completed with visible, unobscured focus?

  1. Tab through in DOM order
  2. Open and close dialogs
  3. Operate filters and details
  4. Verify sticky layers do not obscure focus
  5. Test forced-colors focus visibility
WCAG-2.4.11 WCAG-2.4.13 W3C-BUTTON-NAME
10

Mobile reflow and semantic zoom audit

Does the experience preserve meaning at narrow widths and enlarged text?

  1. Test 320 CSS-pixel equivalent width
  2. Increase text and spacing
  3. Check table transformations
  4. Verify sticky offsets and safe areas
  5. Confirm no evidence is silently removed
WCAG-1.4.10 WCAG-1.4.12
11

Evidence integrity audit

Can the reader reconstruct the conclusion?

  1. Separate observed fact, interpretation, forecast, and recommendation
  2. Show baseline and units
  3. Expose source and time window
  4. Show uncertainty and exclusions
  5. Verify visual magnitude matches data magnitude
TUFTE-VDQI TUFTE-VST TUFTE-BE
12

Task-success validation

Does the interface improve understanding and decisions?

  1. Measure time to locate
  2. Measure comparison accuracy
  3. Test comprehension of key finding
  4. Record error and recovery
  5. Assess decision confidence
  6. Segment by device and user needs
MUNZNER-NESTED VIS-INDIVIDUAL-DIFFERENCES

Anti-pattern register

Common visual, interaction, accessibility, and evidence failures.

Hierarchy

  • Equal visual weight for every card
  • Multiple saturated accent colors in one viewport
  • Pills for passive dates, sources, counts, and metadata
  • Large colored icon containers for minor attributes
  • Borders and shadows around every nested region
  • Oversized utility-page hero sections
  • Centered alignment for dense analytical content

Interaction

  • Important controls visible only on hover
  • Unfamiliar icon-only primary actions
  • Filters with no visible reset
  • State changes without feedback
  • Disabled controls without explanation
  • Irreversible deletion
  • Dragging as the only operation
  • Auto-advancing carousels
  • Accordions hiding primary evidence

Color

  • Rainbow scales for ordered data
  • Red and green as the sole distinction
  • Low-contrast metadata
  • Yellow text on white
  • One brand color used for links, focus, selection, information, and chart series
  • Mechanical light-to-dark inversion
  • Transparent essential foregrounds
  • Arbitrary emotional color claims

Visualization

  • Choosing a chart before defining the question
  • Pie charts for small precise differences
  • Bubble size for critical quantitative values
  • 3D effects
  • Dual axes without compelling justification
  • Inconsistent scales across small multiples
  • Remote legends when direct labels are possible
  • Signal scores without methodology

Responsive

  • Fixed sticky offsets that assume one header height
  • Silent removal of comparison fields on mobile
  • Desktop card spacing stretched from mobile
  • Tiny icon targets
  • Focus clipped by overflow
  • Critical actions only at screen edges

Evidence & ethics

  • Mixing observed facts with inference
  • Hiding source or uncertainty
  • Sponsored material styled as editorial
  • Preselected consent
  • Artificial urgency or scarcity
  • Making enrollment easy and cancellation difficult
  • Optimizing clicks instead of task success

Research reference library

91 sources with evidence class, citation wording, application, and boundaries.

Showing 91 of 91

Tufte & visual evidence9 sources

TUFTE-VDQIThe Visual Display of Quantitative InformationGraphical integrity, data-ink ratio, lie factor, small multiples, data density, and high-resolution displays. Framework
Use for
Graphical integrity, data-ink ratio, lie factor, small multiples, data density, and high-resolution displays.
Reference as
Tufte argues that visual displays should maximize meaningful data communication while reducing graphical elements that do not support interpretation.
Do not overstate
Do not claim controlled UX research proves that maximizing data-ink always produces the best interface.
Open source
TUFTE-EIEnvisioning InformationLayering and separation, micro/macro readings, visual complexity, color and information, escaping flatland, and multidimensional data. Framework
Use for
Layering and separation, micro/macro readings, visual complexity, color and information, escaping flatland, and multidimensional data.
Reference as
Tufte proposes layering and separation as mechanisms for presenting complex information without fragmenting it.
Best future application
Dense dashboards, card alternatives, multivariate displays, maps, comparative matrices, and semantic hierarchy.
Open source
TUFTE-VEVisual Explanations: Images and Quantities, Evidence and NarrativeCause and effect, processes, motion, before-and-after evidence, decision-making, and Challenger analysis. Framework
Use for
Cause and effect, processes, motion, before-and-after evidence, decision-making, and Challenger analysis.
Reference as
Tufte emphasizes that explanations should show mechanisms, comparisons, sequence, and causes rather than presenting isolated outcomes.
Best future application
Incident timelines, deployment analysis, before-and-after views, causal hypotheses, and process visualization.
Open source
TUFTE-BEBeautiful EvidenceIntegrating prose, numbers, diagrams, images, annotations, and provenance into one evidential structure. Framework
Use for
Integrating prose, numbers, diagrams, images, annotations, and provenance into one evidential structure.
Reference as
Tufte treats words, numbers, images, diagrams, and motion as complementary forms of evidence that should be evaluated for quality, relevance, and integrity.
Best future application
Claim–evidence structures, source attribution, annotated charts, sparklines, and multimodal reports.
Open source
TUFTE-SFESeeing with Fresh Eyes: Meaning, Space, Data, TruthObservation, analytical seeing, typography, meaning, spatial reasoning, and truth in presentation. Framework
Use for
Observation, analytical seeing, typography, meaning, spatial reasoning, and truth in presentation.
Reference as
Tufte frames visual reasoning as a discipline of sustained observation rather than merely choosing an attractive representation.
Best future application
Reframing UI problems before choosing cards, charts, or interaction patterns.
Open source
TUFTE-VSTVisual and Statistical Thinking: Displays of Evidence for Making DecisionsDecision evidence, multivariate reasoning, causal analysis, comparison, and the Challenger case. Framework
Use for
Decision evidence, multivariate reasoning, causal analysis, comparison, and the Challenger case.
Reference as
Tufte argues that decision displays should arrange relevant variables together so the reader can test relationships and alternative explanations.
Best future application
Executive decision support, incident review, risk analysis, and evidence-based recommendations.
Open source
TUFTE-POWERPOINTThe Cognitive Style of PowerPointEvidence fragmentation, low-resolution presentation, bullet hierarchies, and slide-driven reasoning. Framework
Use for
Evidence fragmentation, low-resolution presentation, bullet hierarchies, and slide-driven reasoning.
Reference as
Tufte criticizes presentation formats that fragment related evidence and prevent direct comparison.
Best future application
Avoiding “one metric per card,” excessive tab segmentation, wizard-only inspection, and sparse layouts that increase memory burden.
Open source
TUFTE-SLOPEGRAPHSlopegraphs for Comparing GradientsTwo-point change, rank movement, before-and-after values, direction, and magnitude. FrameworkPractice
Use for
Two-point change, rank movement, before-and-after values, direction, and magnitude.
Reference as
Tufte recommends slopegraphs when the analytical task is to compare changes between two meaningful states.
Boundary
They become difficult to read when too many series overlap or labels cannot be placed clearly.
Open source
TUFTE-CHARTJUNKChartjunkVisual elements that consume attention without supporting the data or interpretation. FrameworkPractice
Use for
Visual elements that consume attention without supporting the data or interpretation.
Reference as
Tufte uses “chartjunk” to criticize visual treatments that compete with, obscure, or distort the evidence.
Boundary
Do not use the term as a blanket objection to all illustration, branding, or visual personality.
Open source

Visual grammar & perception10 sources

BERTIN-1967Semiology of Graphics: Diagrams, Networks, MapsPosition, size, shape, orientation, value, texture, and hue as distinct visual variables. Framework
Use for
Position, size, shape, orientation, value, texture, and hue as distinct visual variables.
Reference as
Bertin established a systematic visual grammar in which graphical variables have different capacities for expressing categories, order, and quantity.
Best future application
Choosing whether a distinction should be encoded by position, lightness, hue, size, or shape.
Boundary
Bertin’s taxonomy is foundational theory, not a current accessibility specification.
Open source
CM-1984Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical MethodsRelative accuracy of position, length, angle, slope, area, volume, and color-based encodings. Primary
Use for
Relative accuracy of position, length, angle, slope, area, volume, and color-based encodings.
Reference as
Cleveland and McGill found that judgments based on aligned position and length were generally more accurate than judgments based on area or volume.
Best future application
Justifying bars, dots, aligned values, and tables over bubbles, radial gauges, or 3D forms.
Boundary
Treat the ordering as a population-level empirical pattern, not an immutable rule for every task or individual.
Open source
CM-1985Graphical Perception and Graphical Methods for Analyzing Scientific DataExtending graphical-perception findings to scientific data analysis. Primary
Use for
Extending graphical-perception findings to scientific data analysis.
Reference as
Cleveland and McGill used perceptual evidence to motivate graphical methods that support more accurate quantitative comparison.
Best future application
Technical dashboards, scientific reporting, and analytical interfaces.
Open source
CM-1986An Experiment in Graphical PerceptionAdditional controlled evidence on graphical decoding tasks. Primary
Use for
Additional controlled evidence on graphical decoding tasks.
Reference as
Subsequent Cleveland and McGill experiments further evaluated how accurately viewers decode different graphical forms.
Use when
A design review needs stronger support than a general visualization guideline.
Open source
GRAPHICAL-PERCEPTION-REVIEWA Review of Graphical Perception ResearchContemporary synthesis and qualification of classic encoding hierarchies. Review
Use for
Contemporary synthesis and qualification of classic encoding hierarchies.
Reference as
Later graphical-perception research broadly supports the importance of encoding choice while showing that outcomes vary by task, chart construction, and population.
Best future application
Avoiding overly rigid references to a single universal encoding hierarchy.
Open source
VIS-INDIVIDUAL-DIFFERENCESIndividual Differences in Visualization PerceptionVariability among users in chart decoding and visualization performance. Primary
Use for
Variability among users in chart decoding and visualization performance.
Reference as
Visualization performance can vary meaningfully across individuals, so population-level design rankings should not replace testing with the intended audience.
Best future application
Accessibility, expert-versus-novice interfaces, and configurable visualization modes.
Open source
MACKINLAY-1986Automating the Design of Graphical Presentations of Relational InformationExpressiveness and effectiveness criteria. Framework
Use for
Expressiveness and effectiveness criteria.
Reference as
Mackinlay formalized the distinction between representing the data truthfully and selecting an effective perceptual encoding.
Best future application
Explaining why a truthful chart can still be a poor chart.
Open source
MUNZNER-NESTEDA Nested Model for Visualization Design and ValidationSeparating domain problems, data/task abstraction, visual encoding and interaction, and implementation algorithms. Framework
Use for
Separating domain problems, data/task abstraction, visual encoding and interaction, and implementation algorithms.
Reference as
Munzner’s nested model identifies distinct failure modes at the domain, abstraction, encoding and interaction, and algorithmic layers.
Best future application
Task-first design reviews and diagnosing whether a UI failure is conceptual or merely presentational.
Open source
MUNZNER-BOOKVisualization Analysis and DesignVisualization task abstraction, idiom selection, data types, validation, interaction, and scalability. Framework
Use for
Visualization task abstraction, idiom selection, data types, validation, interaction, and scalability.
Reference as
Munzner provides a systematic methodology for moving from domain questions to data abstractions and appropriate visual idioms.
Best future application
Formal visualization design standards and generated chart-selection logic.
Open source
WARE-PERCEPTIONInformation Visualization: Perception for DesignVisual attention, pattern recognition, color perception, motion, spatial cognition, and preattentive processing. FrameworkReview
Use for
Visual attention, pattern recognition, color perception, motion, spatial cognition, and preattentive processing.
Reference as
Ware synthesizes vision science into practical principles for designing perceptually effective information displays.
Best future application
Salience, chart readability, visual search, color, and motion decisions.
Open source

Attention, hierarchy & scanning8 sources

TREISMAN-1980A Feature-Integration Theory of AttentionFeature search, conjunction search, preattentive attributes, and selective attention. PrimaryFramework
Use for
Feature search, conjunction search, preattentive attributes, and selective attention.
Reference as
Treisman and Gelade distinguished rapid search for a unique visual feature from slower search requiring combinations of features.
Best future application
Exception highlighting, selected states, and limiting the number of visual properties required to find an item.
Boundary
Do not summarize this as “any brightly colored element is processed instantly.”
Open source
FIT-40-YEAR-REVIEWForty Years After Feature Integration TheoryCurrent interpretation and qualification of feature-integration theory. Review
Use for
Current interpretation and qualification of feature-integration theory.
Reference as
Later research has revised and expanded feature-integration theory while retaining the importance of feature-based attention and search.
Best future application
When a design decision needs a contemporary source rather than the 1980 paper alone.
Open source
LINDGAARD-2006Attention Web Designers: You Have 50 Milliseconds to Make a Good First ImpressionRapid judgments of visual appeal. Primary
Use for
Rapid judgments of visual appeal.
Reference as
Lindgaard and colleagues found that visual-appeal judgments formed after very brief exposure could remain consistent with judgments formed after longer exposure.
Do not say
“Users understand the interface in 50 milliseconds” or “usability is determined in 50 milliseconds.”
Open source
TUCH-2012The Role of Visual Complexity and Prototypicality Regarding First Impression of WebsitesVisual complexity, familiar structural patterns, and first impressions. Primary
Use for
Visual complexity, familiar structural patterns, and first impressions.
Reference as
Tuch and colleagues found that visual complexity and prototypicality influence immediate aesthetic evaluations of websites.
Best future application
Supporting recognizable information architecture and controlling first-viewport complexity.
Open source
NNG-SCANNINGF-Shaped Pattern of Reading on the WebScanning behavior, front-loaded wording, headings, and line structure. Practice
Use for
Scanning behavior, front-loaded wording, headings, and line structure.
Reference as
NN/g’s eye-tracking work observed recurring scanning patterns, including the F-pattern, particularly in poorly formatted or text-heavy content.
Do not say
“All users always read in an F pattern.” NN/g explicitly treats it as one of several possible patterns.
Open source
NNG-PROXIMITYThe Law of ProximityGrouping related elements through spacing. PracticeFramework
Use for
Grouping related elements through spacing.
Reference as
Proximity communicates relationships, making spacing a semantic design variable rather than mere decoration.
Best future application
Card internals, metadata rows, headings, filters, and section separation.
Open source
OLDER-ADULT-EYETRACKING-REVIEWEye-Tracking Research on Older Adults: Systematic ReviewAge-related visual search, fixation, attention, and interface evaluation. Review
Use for
Age-related visual search, fixation, attention, and interface evaluation.
Reference as
Research on older adults indicates that clutter, peripheral placement, and complex visual search can create disproportionate difficulty for aging users.
Best future application
Designing for older adults, accessible travel tools, dense dashboards, and critical workflows.
Open source
OLDER-ADULT-PERIPHERYOlder Adults Fail to See Peripheral InformationPeripheral placement, attention distribution, and age-related discoverability. Primary
Use for
Peripheral placement, attention distribution, and age-related discoverability.
Reference as
Eye-tracking evidence suggests that older adults can be less likely to notice information placed outside their primary scan path.
Best future application
Avoiding critical actions or alerts only at viewport edges.
Open source

Interaction & discoverability12 sources

NORMAN-DOETThe Design of Everyday ThingsSignifiers, mappings, feedback, conceptual models, affordances, and execution/evaluation gaps. Framework
Use for
Signifiers, mappings, feedback, conceptual models, affordances, and execution/evaluation gaps.
Reference as
Norman argues that interfaces should make possible actions discoverable and should provide visible feedback about system state and outcomes.
Best future application
Buttons, filters, controls, loading states, errors, and state transitions.
Open source
NORMAN-SIGNIFIERSSignifiers, Not AffordancesDistinguishing what an object permits from what communicates how to use it. FrameworkPractice
Use for
Distinguishing what an object permits from what communicates how to use it.
Reference as
Norman distinguishes affordances from signifiers: the interface must visibly communicate where and how an action can be performed.
Best future application
Avoiding false affordances, passive pills that resemble buttons, and hidden controls.
Open source
SHNEIDERMAN-EYESThe Eyes Have It: A Task by Data Type Taxonomy for Information Visualizations“Overview first, zoom and filter, then details on demand.” Framework
Use for
“Overview first, zoom and filter, then details on demand.”
Reference as
Shneiderman proposes an information-seeking sequence that begins with orientation, supports narrowing, and then exposes detail.
Boundary
Treat it as a design mantra, not a universal experimental law.
Open source
SHNEIDERMAN-DIRECTDirect Manipulation: A Step Beyond Programming LanguagesVisible objects, incremental actions, reversibility, and immediate feedback. Framework
Use for
Visible objects, incremental actions, reversibility, and immediate feedback.
Reference as
Shneiderman characterizes direct manipulation through visible objects, rapid incremental operations, and reversible actions.
Best future application
In-place filters, drag-and-drop, previews, editable classifications, and undo.
Open source
NIELSEN-HEURISTICS10 Usability Heuristics for User Interface DesignSystem visibility, control, consistency, error prevention, recognition, recovery, and minimalism. FrameworkPractice
Use for
System visibility, control, consistency, error prevention, recognition, recovery, and minimalism.
Reference as
Nielsen’s heuristics provide a broad inspection framework for identifying common interaction and comprehension failures.
Do not say
“These ten rules have been experimentally proven to cover every usability failure.”
Open source
NIELSEN-RECOGNITIONRecognition Rather Than RecallVisible options, labels, histories, defaults, and applied filter state. Practice
Use for
Visible options, labels, histories, defaults, and applied filter state.
Reference as
Interfaces should reduce memory burden by making relevant options, state, and prior information visible or readily retrievable.
Best future application
Persistent filters, labeled icons, recent items, and visible current scope.
Open source
NNG-STATUSVisibility of System StatusLoading, saving, filtering, refresh time, completion, and system feedback. Practice
Use for
Loading, saving, filtering, refresh time, completion, and system feedback.
Reference as
NN/g recommends timely, understandable feedback that communicates the current state of the system.
Best future application
AI generation, data refreshes, filter result counts, and long-running operations.
Open source
NNG-PROGRESSIVE-DISCLOSUREProgressive DisclosureShowing essential functions first while retaining access to advanced or secondary detail. Practice
Use for
Showing essential functions first while retaining access to advanced or secondary detail.
Reference as
Progressive disclosure can reduce initial complexity when hidden content is secondary and its availability remains discoverable.
Boundary
It should not hide primary findings, required controls, or evidence necessary for comparison.
Open source
NNG-CARD-LISTCard View Versus List ViewChoosing among cards, compact lists, and comparison structures. Practice
Use for
Choosing among cards, compact lists, and comparison structures.
Reference as
Cards support browsing distinct objects, while lists and tables generally support denser scanning and comparison.
Best future application
Avoiding card-only interfaces for repeated, comparable data.
Open source
NNG-CONTENT-DISPERSIONContent DispersionExcessive whitespace, mobile layouts stretched onto desktop, and information fragmentation. Practice
Use for
Excessive whitespace, mobile layouts stretched onto desktop, and information fragmentation.
Reference as
NN/g uses content dispersion to describe layouts in which related information is spread so widely that understanding and comparison require unnecessary navigation or memory.
Open source
WIEDENBECK-1999The Use of Icons and Labels in an End User Application ProgramIcons alone versus labels and icon-plus-label interfaces. Primary
Use for
Icons alone versus labels and icon-plus-label interfaces.
Reference as
Wiedenbeck found performance and learning differences among icon-only, label-only, and icon-plus-label conditions, with text labels materially supporting initial use.
Boundary
Do not generalize the result into a claim that every conventional icon always requires visible text in every context.
Open source
FITTS-1954The Information Capacity of the Human Motor System in Controlling the Amplitude of MovementPointer-target size, distance, acquisition time, and placement. Primary
Use for
Pointer-target size, distance, acquisition time, and placement.
Reference as
Fitts’s work models target-acquisition difficulty as a relationship between distance and target width.
Best future application
Mobile controls, icon buttons, frequent actions, and avoiding small targets.
Boundary
Do not reduce Fitts’s law to “make every element as large as possible.”
Open source

Narrative & memorability6 sources

SEGEL-HEER-2010Narrative Visualization: Telling Stories with DataAuthor-driven versus reader-driven presentation, narrative genres, annotations, and guided exploration. PrimaryFramework
Use for
Author-driven versus reader-driven presentation, narrative genres, annotations, and guided exploration.
Reference as
Segel and Heer describe narrative visualization as a balance between guided communication and reader-controlled exploration.
Best future application
Briefings that state a finding first and then permit evidence inspection.
Open source
HEER-ROBERTSON-2007Animated Transitions in Statistical Data GraphicsAnimated state transitions, object constancy, filtering, reordering, and changes in graphical representation. Primary
Use for
Animated state transitions, object constancy, filtering, reordering, and changes in graphical representation.
Reference as
Heer and Robertson found that carefully designed animated transitions can help viewers track changes between visualization states.
Boundary
Do not say animation is always better. It can impede exact comparison and accessibility.
Open source
BORKIN-2013What Makes a Visualization Memorable?Recognition, memorability, titles, visual distinctiveness, and imagery. Primary
Use for
Recognition, memorability, titles, visual distinctiveness, and imagery.
Reference as
Borkin and colleagues found systematic differences in visualization memorability and identified characteristics associated with stronger recognition.
Best future application
Qualifying extreme interpretations of minimalist design.
Open source
BORKIN-2015Beyond Memorability: Visualization Recognition and RecallWhat viewers remember from visualizations, not merely whether they recognize having seen them. Primary
Use for
What viewers remember from visualizations, not merely whether they recognize having seen them.
Reference as
Later Borkin research investigated which visualization elements viewers recognize and recall over time.
Best future application
Editorial explainers, executive communication, and durable visual storytelling.
Open source
BORGO-2012An Empirical Study on Using Visual Embellishments in VisualizationEffects of meaningful embellishment on comprehension and memory. Primary
Use for
Effects of meaningful embellishment on comprehension and memory.
Reference as
Borgo and colleagues found that some forms of meaningful visual embellishment can support memory without necessarily reducing comprehension.
Boundary
This does not justify arbitrary decoration or data distortion.
Open source
ELLIPSIS-ANNOTATIONAuthoring Narrative Visualizations with EllipsisAnnotations as first-class parts of narrative visualization. PrimaryPractice
Use for
Annotations as first-class parts of narrative visualization.
Reference as
Narrative visualization systems can treat text, arrows, highlights, and graphical annotations as explicit evidence-guidance elements.
Best future application
Directly annotating deployments, threshold crossings, and major findings.
Open source

Color theory & palettes10 sources

COLORBREWERColorBrewer 2Choosing palette families that match data structure. FrameworkPractice
Use for
Choosing palette families that match data structure.
Reference as
ColorBrewer distinguishes sequential palettes for ordered magnitude, diverging palettes for deviations around a midpoint, and qualitative palettes for unordered categories.
Best future application
Maps, heatmaps, risk scales, variance displays, and category colors.
Detailed guidance
Sequential, Diverging, and Qualitative Schemes
Open source
SCHLOSS-2018Color Inference in Visual CommunicationHow users infer mappings between colors and concepts. PrimaryFramework
Use for
How users infer mappings between colors and concepts.
Reference as
Schloss and colleagues show that color meanings are shaped by learned concept associations and contextual expectations.
Best future application
Status semantics, category assignments, legends, and culturally sensitive color choices.
Boundary
Do not treat associations such as “blue means trust” as universal psychological laws.
Open source
SCHLOSS-2024Color Semantics in Human CognitionCurrent synthesis of color-concept associations, semantic inference, and lightness–magnitude expectations. Review
Use for
Current synthesis of color-concept associations, semantic inference, and lightness–magnitude expectations.
Reference as
Current color-semantics research indicates that color mappings can support interpretation when they align with learned and contextually relevant expectations.
Best future application
Semantic-token design and data-color mapping.
Open source
SEMANTIC-COLOR-2013Selecting Semantically Resonant Colors for Data VisualizationCategory-color mappings such as blue for oceans or yellow for bananas. Primary
Use for
Category-color mappings such as blue for oceans or yellow for bananas.
Reference as
Lin and colleagues found that semantically resonant category-color assignments improved speed in chart-reading tasks compared with a standard palette.
Best future application
Category palettes where concepts have recognizable color associations.
Boundary
Semantic resonance must still be balanced with contrast and category discriminability.
Open source
ELLIOT-MAIER-2014Color Psychology: Effects of Perceiving Color on Psychological FunctioningQualifying claims about color affecting behavior and cognition. Review
Use for
Qualifying claims about color affecting behavior and cognition.
Reference as
Reviews of color psychology report contextual effects but also substantial boundary conditions and unresolved questions.
Best future application
Rejecting simplistic statements such as “blue always creates trust” or “orange always improves conversion.”
Related open-access review
Color and Psychological Functioning
Open source
KOVESI-2015Good Colour Maps: How to Design ThemPerceptual uniformity, lightness progression, and problems with rainbow color scales. FrameworkPractice
Use for
Perceptual uniformity, lightness progression, and problems with rainbow color scales.
Reference as
Kovesi argues for color maps whose perceived progression more consistently follows the underlying numeric progression.
Best future application
Sequential heatmaps, scientific data, risk intensity, and avoiding rainbow scales.
Open source
VIRIDISIntroduction to the Viridis Color MapsAn implementation precedent for perceptually ordered, color-vision-aware scales. Practice
Use for
An implementation precedent for perceptually ordered, color-vision-aware scales.
Reference as
Viridis provides a practical family of continuous palettes designed to remain perceptually ordered and usable under grayscale and common color-vision deficiencies.
Boundary
Cite Kovesi or primary color-map research for theory; cite Viridis for implementation precedent.
Open source
CIVIDISOptimizing Colormaps with Consideration for Color-Vision DeficiencyThe Cividis palette and color-vision-aware continuous scale construction. PrimaryPractice
Use for
The Cividis palette and color-vision-aware continuous scale construction.
Reference as
Cividis was developed to provide a perceptually appropriate continuous scale with improved accessibility for common color-vision deficiencies.
Best future application
Scientific or operational heatmaps requiring continuous quantitative color.
Open source
QUANT-COLORMAPS-2018An Empirical Assessment of Quantitative ColormapsEmpirical comparison of quantitative color scales. Primary
Use for
Empirical comparison of quantitative color scales.
Reference as
Empirical color-map research shows that quantitative interpretation depends on perceptual ordering, discrimination, and task characteristics.
Best future application
Selecting continuous palettes based on performance rather than appearance alone.
Open source
CATEGORICAL-COLOR-2023The Effects of Color Palette and Category Count on Multiclass ScatterplotsCategory count, palette discriminability, and interpretation accuracy. Primary
Use for
Category count, palette discriminability, and interpretation accuracy.
Reference as
Categorical palette effectiveness declines as category count and discrimination demands increase.
Best future application
Limiting simultaneous series, using direct labels, filtering, shapes, or small multiples.
Open source

Accessibility & contrast16 sources

WCAG22How to Meet WCAG 2.2: Quick ReferenceCurrent WCAG 2.2 success criteria, levels, techniques, and failures. Standard
Use for
Current WCAG 2.2 success criteria, levels, techniques, and failures.
Reference as
“WCAG 2.2 Level AA requires…”
Best future application
Accessibility acceptance criteria, automated testing, and design-system gates.
Open source
WCAG22-UNDERSTANDINGUnderstanding WCAG 2.2Intent, examples, benefits, techniques, and failure conditions. StandardPractice
Use for
Intent, examples, benefits, techniques, and failure conditions.
Reference as
“W3C’s Understanding document explains that…”
Boundary
For contractual or legal language, cite the underlying success criterion as the requirement.
Open source
WCAG-1.4.1Understanding 1.4.1: Use of ColorProhibiting color as the only means of communicating information, actions, responses, or distinctions. Standard
Use for
Prohibiting color as the only means of communicating information, actions, responses, or distinctions.
Reference as
WCAG 2.2 SC 1.4.1 requires that color not be the only visual means used to communicate meaningful information.
Open source
WCAG-1.4.3Understanding 1.4.3: Contrast MinimumMinimum text contrast. Standard
Use for
Minimum text contrast.
Reference as
WCAG 2.2 Level AA requires at least 4.5:1 for normal text and 3:1 for large text, subject to defined exceptions.
Open source
WCAG-1.4.6Contrast EnhancedAAA text contrast. Standard
Use for
AAA text contrast.
Reference as
WCAG 2.2 Level AAA requires 7:1 for normal text and 4.5:1 for large text, subject to defined exceptions.
Open source
WCAG-1.4.11Understanding 1.4.11: Non-Text ContrastMeaningful icons, control boundaries, graphical objects, and interactive states. Standard
Use for
Meaningful icons, control boundaries, graphical objects, and interactive states.
Reference as
WCAG 2.2 Level AA requires visual information needed to identify UI components and states to have at least 3:1 contrast against adjacent colors.
Open source
WCAG-2.4.6Understanding Headings and LabelsDescriptive headings and labels. Standard
Use for
Descriptive headings and labels.
Reference as
WCAG requires headings and labels to describe their topic or purpose.
Open source
W3C-HEADINGSHeadings That Reflect Page OrganizationSemantic heading hierarchy. Practice
Use for
Semantic heading hierarchy.
Reference as
W3C recommends nested headings that reflect the content hierarchy rather than headings chosen only for appearance.
Open source
WCAG-1.4.10Understanding ReflowResponsive presentation at an equivalent width of 320 CSS pixels. Standard
Use for
Responsive presentation at an equivalent width of 320 CSS pixels.
Reference as
WCAG requires content to reflow without loss of information or functionality, except where two-dimensional layout is essential.
Open source
WCAG-1.4.12Understanding Text SpacingSurviving user-adjusted line, paragraph, word, and character spacing. Standard
Use for
Surviving user-adjusted line, paragraph, word, and character spacing.
Reference as
WCAG requires content to remain usable when users override specified text-spacing properties.
Open source
WCAG-2.4.11Focus Not Obscured: MinimumSticky headers, overlays, scroll containers, and keyboard focus. Standard
Use for
Sticky headers, overlays, scroll containers, and keyboard focus.
Reference as
WCAG 2.2 Level AA requires that a focused component not be entirely hidden by author-created content.
Open source
WCAG-2.4.13Focus AppearanceEnhanced focus size and contrast. Standard
Use for
Enhanced focus size and contrast.
Reference as
WCAG 2.2 SC 2.4.13 defines enhanced focus-appearance requirements at Level AAA.
Important
Do not identify SC 2.4.13 as an AA requirement.
Open source
WCAG-2.5.8Target Size: MinimumMinimum pointer-target sizing or sufficient target spacing. Standard
Use for
Minimum pointer-target sizing or sufficient target spacing.
Reference as
WCAG 2.2 Level AA generally requires pointer targets to be at least 24×24 CSS pixels or satisfy a defined spacing or exception condition.
Open source
WCAG-1.4.13Content on Hover or FocusTooltips, popovers, and supplemental hover/focus content. Standard
Use for
Tooltips, popovers, and supplemental hover/focus content.
Reference as
WCAG requires qualifying hover or focus content to be dismissible, hoverable, and persistent under specified conditions.
Open source
W3C-BUTTON-NAMEButton Has an Accessible NameIcon buttons and programmatic labeling. Standard
Use for
Icon buttons and programmatic labeling.
Reference as
Interactive buttons require a meaningful accessible name that describes their function.
Best future application
aria-label , visible labels, icon buttons, and automated accessibility tests.
Open source
WCAG3-DRAFTWCAG 3.0 Working DraftMonitoring future accessibility models, outcome-based requirements, and evolving contrast methods. Draft
Use for
Monitoring future accessibility models, outcome-based requirements, and evolving contrast methods.
Reference as
“The March 3, 2026 WCAG 3 working draft explores…”
Never write
“WCAG 3 currently requires…”
Open source

Color vision & polarity5 sources

CVD-PREVALENCEWorldwide Prevalence of Red-Green Color DeficiencyPrevalence estimates and population variation. PrimaryReview
Use for
Prevalence estimates and population variation.
Reference as
Congenital red-green color-vision deficiency is considerably more prevalent among males, though prevalence varies by ancestry and population.
Boundary
Do not present a single percentage as universally applicable.
Open source
CVD-GLOBAL-REVIEWColor-Vision Deficiency: A Global PerspectiveBroader contemporary context, acquired deficiencies, prevalence, and practical implications. Review
Use for
Broader contemporary context, acquired deficiencies, prevalence, and practical implications.
Reference as
Color accessibility must consider both congenital and acquired color-vision limitations.
Best future application
Moving beyond the phrase “colorblind safe.”
Open source
POLARITY-2009Text–Background Polarity Affects PerformancePositive-polarity versus negative-polarity reading performance. Primary
Use for
Positive-polarity versus negative-polarity reading performance.
Reference as
Controlled studies have found performance advantages for dark text on light backgrounds in some reading and proofreading tasks.
Boundary
Do not conclude that light mode is universally more accessible for every user and condition.
Open source
POLARITY-2014Positive Display Polarity Is Particularly Advantageous for Small Character SizesCharacter size and polarity interaction. Primary
Use for
Character size and polarity interaction.
Reference as
Positive-polarity advantages can be especially relevant when text is small.
Best future application
Dense tables, metadata, mobile interfaces, and long-form reading.
Open source
DARKMODE-2024Dark Mode in Data Visualization: Individual DifferencesMeasured performance, individual preference, and variation across users. Primary
Use for
Measured performance, individual preference, and variation across users.
Reference as
Recent visualization research found that polarity effects differ among users and that stated preference does not always match measured performance.
Best future application
Supporting both light and dark appearances rather than declaring one universally superior.
Open source

CSS color & preference specifications4 sources

CSS-COLOR-4CSS Color Module Level 4Lab, LCH, Oklab, OkLCh, alpha composition, wide-gamut spaces, and color interpolation. Standard
Use for
Lab, LCH, Oklab, OkLCh, alpha composition, wide-gamut spaces, and color interpolation.
Reference as
CSS Color 4 defines modern perceptual color-space functions including lab() , lch() , oklab() , and oklch() .
Best future application
Building perceptually controlled color ramps and theme tokens.
Boundary
A perceptual color space does not itself guarantee WCAG contrast or color-vision accessibility.
Open source
CSS-COLOR-5CSS Color Module Level 5color-mix() , relative color syntax, light-dark() , and evolving contrast functions. DraftStandard
Use for
color-mix() , relative color syntax, light-dark() , and evolving contrast functions.
Reference as
CSS Color 5 defines emerging color-modification and adaptation functions.
Boundary
Check browser support and specification status before treating a feature as a production baseline.
Open source
MEDIA-QUERIES-5Media Queries Level 5prefers-color-scheme , prefers-contrast , forced-colors , and prefers-reduced-transparency . Standard
Use for
prefers-color-scheme , prefers-contrast , forced-colors , and prefers-reduced-transparency .
Reference as
Media Queries Level 5 exposes user and device preferences that allow interfaces to adapt color and presentation.
Important
Do not use an unqualified prefers-contrast query when the distinction between more and less matters.
Open source
CSS-COLOR-ADJUSTCSS Color Adjustment Module Level 1color-scheme , forced-color adaptation, and user-agent color adjustment. Standard
Use for
color-scheme , forced-color adaptation, and user-agent color adjustment.
Reference as
CSS Color Adjustment defines how authored colors interact with user-preferred schemes and forced-color environments.
Best future application
High-contrast themes and Windows forced-colors support.
Open source

Design-system precedents10 sources

FLUENT-TOKENSFluent 2 Design TokensPrimitive, alias, and component-token architecture. Practice
Use for
Primitive, alias, and component-token architecture.
Reference as
Fluent separates raw palette values from semantic and component-specific roles.
Best future application
Theme remapping, interaction states, and eliminating hardcoded colors.
Open source
FLUENT-COLORFluent 2 ColorNeutral, brand, status, and shared color roles. Practice
Use for
Neutral, brand, status, and shared color roles.
Reference as
Fluent uses neutral, brand, status, and generic color families rather than relying only on primary and secondary colors.
Open source
FLUENT-ACCESSIBILITYFluent 2 AccessibilityApplied contrast, keyboard, focus, touch, and accessibility guidance. Practice
Use for
Applied contrast, keyboard, focus, touch, and accessibility guidance.
Reference as
Fluent applies WCAG-oriented contrast expectations to text, essential icons, and UI components.
Open source
FLUENT-ICONSFluent 2 IconographyIcon geometry, sizing, consistency, and filled versus regular states. Practice
Use for
Icon geometry, sizing, consistency, and filled versus regular states.
Reference as
Fluent uses a consistent icon grammar and provides state-compatible icon variants.
Best future application
Standardizing icon weight, bounding boxes, and selected states.
Open source
ATLASSIAN-COLORAtlassian Design System: ColorSemantic color roles, emphasis levels, interaction states, and warning foregrounds. Practice
Use for
Semantic color roles, emphasis levels, interaction states, and warning foregrounds.
Reference as
Atlassian separates semantic colors from interchangeable accent colors and defines role-specific foregrounds for bold status surfaces.
Best future application
Warning contrast, semantic tokens, and avoiding arbitrary category color meanings.
Open source
USWDS-COLORUSWDS Color TokensAccessible token grades and predictable contrast relationships. Practice
Use for
Accessible token grades and predictable contrast relationships.
Reference as
USWDS organizes colors into graded token families designed to support repeatable contrast selection.
Best future application
Enterprise contrast matrices and government-grade accessibility.
Open source
USWDS-ACCESSIBILITYUSWDS AccessibilityApplied accessibility governance and component expectations. Practice
Use for
Applied accessibility governance and component expectations.
Reference as
USWDS treats accessibility as a system-level design and implementation responsibility rather than a final audit step.
Open source
APPLE-COLORApple HIG: ColorAdaptive color, hierarchy, semantic color, light/dark appearance, and system colors. Practice
Use for
Adaptive color, hierarchy, semantic color, light/dark appearance, and system colors.
Reference as
Apple recommends adaptive semantic colors and cautions against using color as the sole means of communication.
Open source
APPLE-ACCESSIBILITYApple HIG: AccessibilityRedundant encoding, text, contrast, motion, touch, and assistive technology. Practice
Use for
Redundant encoding, text, contrast, motion, touch, and assistive technology.
Reference as
Apple recommends reinforcing color with labels, icons, shapes, or other distinguishable cues.
Open source
APPLE-BUTTONSApple HIG: ButtonsButton hierarchy, labeling, and practical touch-target sizing. Practice
Use for
Button hierarchy, labeling, and practical touch-target sizing.
Reference as
Apple recommends comfortably sized, clearly labeled controls and commonly uses a 44-point interaction target as a platform guideline.
Boundary
Distinguish Apple’s platform guidance from WCAG’s normative 24-CSS-pixel minimum.
Open source

Ethical interaction design1 sources

DARK-PATTERNS-2019Dark Patterns at Scale: Findings from a Crawl of 11K Shopping WebsitesDark-pattern taxonomy, manipulation, coercion, hidden costs, obstruction, urgency, and deceptive defaults. Primary
Use for
Dark-pattern taxonomy, manipulation, coercion, hidden costs, obstruction, urgency, and deceptive defaults.
Reference as
Mathur and colleagues identified 1,818 dark-pattern instances across approximately 11,000 shopping websites and classified them into 15 types and seven broader categories.
Best future application
Consent, cancellation, sponsored content, destructive actions, subscription flows, and equivalent-choice presentation.
Boundary
This paper documents a large sample of shopping sites; do not treat its prevalence estimate as universal across all digital products.
Open source

Citation language guide

Use the strongest accurate verb for each evidence class.

Evidence classRecommended wordingUsage boundary
StandardWCAG 2.2 requires…Use for normative requirements and final technical specifications.
Primary researchThe experiment found…Describe the population, task, and boundary when material.
ReviewThe review concludes…Use to summarize a body of evidence or qualify classic findings.
FrameworkThe framework proposes…Do not present conceptual models as experimental proof.
Practice guidanceThe practitioner guidance recommends…Use for applied patterns and production precedent.
DraftThe current working draft explores…Never present draft language as a current requirement.

LLM-friendly research data

The page and embedded JSON share stable IDs, relationships, and citation keys.

Data contract

The structured payload is embedded in <script type="application/json" id="research-data">. Future systems can extract it without interpreting layout or CSS.

meta

Version, generation date, description, schema version, and entity counts.

principles

Governing rules with summaries, detailed implications, and reference relationships.

domains

Concept taxonomy, key concepts, takeaways, and source keys.

findings

Stable findings with domain, evidence summary, design impact, and citations.

recommendations

Prioritized implementation actions, rationale, steps, and evidence.

components

Component purpose, anatomy, recommended use, anti-patterns, and sources.

methods

Validation questions, test steps, and supporting research.

references

Source key, evidence class, URL, use, citation wording, application, and boundary.

antiPatterns

Grouped failure modes suitable for review agents and automated linting prompts.

Press Esc to closeType to search