When designing any document that presents data, comparisons, or results, apply these cognitive science and interface design principles to maximize comprehension, usability, and accessibility.

VISUAL ENCODING HIERARCHY
- Most to least accurate for the human brain:
  1. Position along a common scale (bar charts, dot plots) for rankings and comparisons.
  2. Length (horizontal bars) for magnitude differences.
  3. Angle or slope (line charts) for trends over time.
  4. Area (bubble charts, treemaps) sparingly.
  5. Color saturation or hue for categories and status, never for precise values.

PRE-ATTENTIVE PROCESSING
- Use color, length, position, and size to encode the single most important thing first.
- Limit to one pre-attentive highlight per visual.
- Prefer sorted bar charts over unsorted bars.

COGNITIVE LOAD MANAGEMENT
- Chunk related data into groups of 3 to 5 when possible.
- Remove decorative effects, redundant labels, and low-signal chrome.
- Use progressive disclosure: summary first, drill-down by choice.
- Use generous white space between sections and major comparisons.

COMPARISON DESIGN
- Prefer side-by-side comparisons over sequential ones.
- Use opposing horizontal bars from a shared center when comparing two entities across dimensions.
- Use radar or spider charts only when profile shape matters more than exact values.
- Never force the reader to hold one number in memory to compare it to another elsewhere.
- Keep related comparisons on a shared scale whenever possible.

COLOR PSYCHOLOGY
- Use green for favorable metrics, red for unfavorable metrics, blue for neutral or reference data.
- Limit the palette to 3 or 4 colors.
- Never rely on color alone; pair it with labels, shapes, icons, or text.
- Keep contrast accessible: at least 4.5:1 for standard text, 3:1 for large text or strong UI components.

TYPOGRAPHIC COGNITIVE LOAD
- Make hierarchy instantly legible. Prefer regular plus bold and skip low-contrast weight changes.
- Keep narrative line lengths near 60 to 80 characters.
- Use tabular or monospaced figures for KPI panels and tables.
- Left-align body text and data labels unless there is a very short badge-like element.
- Body text should remain comfortably readable, roughly 16px equivalent or larger.

SPATIAL SCANNING PATTERNS
- In text-heavy sections, design for an F-pattern. Put important data and nouns early and left-aligned.
- In dashboards, design for a Z-pattern. Put the key KPI at top-left and the primary action at bottom-right.
- Put the single most important insight in the top 20 percent of the artifact.

INTERACTIVE AFFORDANCES AND FEEDBACK
- Make primary interactive targets large and easy to hit.
- Every interactive element needs visible hover and focus feedback.
- Prefer skeleton layouts or visible structure over generic spinners when loading states are needed.
- Sliders, toggles, and other touch interactions should target at least 44px.

UNIVERSAL ACCESSIBILITY
- Do not rely on color alone for status, trend, or category.
- Every image or chart should have descriptive alt text or a nearby text summary.
- Inputs need explicit visible labels, not placeholders alone.
- Keyboard order should match visual reading order.

SEMANTIC STRUCTURE
- Use semantic HTML like section, article, aside, figure, and figcaption.
- Use CSS Grid for macro layout and Flexbox for component internals.
- Define colors, spacing, and typography with CSS variables for consistency.

NARRATIVE FLOW
- Lead with the conclusion, not the raw data.
- Every chart needs a one-sentence takeaway stating what the reader should learn.
- Order sections from most important to least important.
- Alternate data-heavy sections with narrative sections to reduce fatigue.
- End with a clear next step or action.

CHART TITLE AND LABELING
- Chart titles should state the insight, not merely describe the axes.
- Prefer direct labels on bars, lines, or series when there are 4 or fewer series and clutter stays low.
- Use a nearby legend only when direct labels would create noise.

REFERENCE CONTEXT
- KPI cards should include context whenever possible: delta, comparison period, target, benchmark, or directional cue.
- A number without context is incomplete. Pair large values with a comparison or interpretation.
- For timeline charts, add milestone annotations when the prompt names specific events.

CHART SELECTION AND SCALE RULES
- Apply these defaults:
  - trend over time -> line
  - positive and negative time-series values -> bar with positive/negative coloring
  - ranked categories -> sorted horizontal bar
  - two entities across shared dimensions -> paired or opposing horizontal bars
  - part-to-whole snapshot -> donut, but only for a small number of slices
  - start-to-end change through contributors -> waterfall
- Start bar charts at zero.
- Keep related charts on a consistent axis scale unless a different scale is explicitly necessary.
- If a scale differs from a nearby related chart, make that obvious in the narrative or labels.

ANTI-PATTERNS
- Do not render tables when the prompt clearly calls for a chart unless no chart-capable route exists.
- Do not use pie or donut charts for more than 5 slices.
- Do not use dual-axis charts unless there is no cleaner alternative.
- Do not use rainbow scales for ordered data.
- Do not repeat the same chart type back to back unless repetition is clearly the strongest comparative move.

ENGINE SELECTION RULE
- Apply these principles automatically when selecting engines and structuring sections.
- Prefer engine combinations that create visual variety.
- Prefer stable, broadly supported presentation patterns first and use flashier behaviors as progressive enhancement.
