Data Visualization System

Requirement

Charts, infographics, Gantt plans, and schematic box layouts must make INTO Consulting evidence easier to understand across proposals, decks, status updates, investor presentations, and documentation.

Constraints

• Use Warm Light and Blueprint Dark only.
• Use the canonical chart palette: teal for the answer or active series, gray for context, Saffron #FFC64F for restrained signal, semantic green for favorable deltas, and red only for critical contrast.
• Every exhibit must preserve the editorial rhythm: label, pause, display, argument, evidence, recovery space.
• Every figure must expose unit, period, population or denominator, source, method or calculation basis, and note when the data is not self-evident.
• Do not use gradients on charts except for the approved light area below a single line chart.
• Do not use vendor-logo collages as architecture diagrams unless the medium specifically requires vendor recognition.

Bet

Most chart quality comes from choosing the right evidence form, writing the conclusion as the title, and removing decoding work. This costs some visual variety, but it makes proposal and deck exhibits faster to read and easier for AI agents to generate consistently.

Failure Modes

• Chart titles are neutral labels instead of conclusions.
• Legends make readers decode color instead of reading direct labels.
• Axes hide the scale, especially line charts that do not start at zero.
• Bar charts are built from headline-like categories without quantified values, source, method, or assumption.
• Gantt plans show timing but not sequence, dependency, or milestone meaning.
• Architecture diagrams become generic vendor stacks instead of designed explanations of how the system works.
• Decoration is mistaken for authority: gradients, icons, shadows, and colors are added without a data job.
• Chart, KPI, table, annotation, axis, or source-note text is shrunk until the exhibit technically fits but cannot be read.

Research Anchors

• Jonathan A. Schwabish, “An Economist’s Guide to Visualizing Data,” American Economic Association: https://www.aeaweb.org/articles?id=10.1257/jep.28.1.209
• Financial Times Visual Vocabulary: https://github.com/Financial-Times/chart-doctor/blob/main/visual-vocabulary/README.md
• Datawrapper guidance on direct labeling: https://www.datawrapper.de/blog/automatically-label-values-in-line-charts/
• C4 model for architecture diagram abstraction: https://c4model.com/

Exhibit Anatomy

Layer	Rule
Figure label	Small mono label with figure number, topic, or medium context.
Takeaway title	A sentence that states the conclusion. Avoid neutral chart labels.
Data contract	Unit, period, population or denominator, source, method or calculation basis, and axis exception if needed.
Visual evidence	The chart, table, Gantt plan, schematic, or infographic.
Annotation	One to three short notes explaining a change, target, risk, or dependency.
Source note	Bottom note with source, assumption, and caveat.

Minimum Text Floors

Use brand/typography-spacing-system.md for the full floor table. Data exhibits need stricter review because agents are tempted to shrink the small parts.

• Browser/workshop chart labels: 0.75rem absolute minimum.
• Browser/workshop chart annotations: 0.8125rem minimum.
• Browser/workshop table cells: 0.875rem absolute, 1rem preferred.
• Browser/workshop KPI labels: 0.8125rem minimum; KPI explanations: 0.9375rem preferred.
• Source notes and footnotes: 0.6875rem absolute, 0.75rem preferred.
• Reader-first slide chart labels: 10pt absolute.
• Presented slide chart labels: 12pt absolute.
• Reader-first slide table cells: 12pt absolute, 14pt preferred.
• Presented slide table cells: 16pt absolute, 18pt preferred.

If a chart, table, KPI, or source note needs to go below the floor, the exhibit is too dense. Split it, widen it, reduce series/categories, move detail to the appendix, or change the chart type.

Quantified Basis Gate

A chart is invalid until the reader can see how the values exist.

Required:

• Unit.
• Period.
• Population or denominator.
• Source.
• Method or calculation basis.
• Sample, assumption, or caveat when relevant.
• Axis range and zero exception when relevant.

Do not turn qualitative headlines into a bar chart. If the values are illustrative, label them as illustrative and state the assumption. If the basis is directional but not numeric, use a ranked evidence table, direct-label comparison, confidence scale with method note, or decision list instead.

Chart Choice

Job	Default form	Rule
Compare categories	Horizontal bar	Sort by value when rank matters. Bars start at zero.
Show time	Line chart	Use endpoint labels. If the y-axis is cropped, label the range.
Show rough composition	Pie or composition chart	Use only for one whole with a few parts. If comparison matters, use bars.
Show plan and dependency	Gantt	Show workstream, period, milestone, sequence, and dependency.
Show a single metric	KPI card	Include value, unit, period, prior-period delta, and cause or implication.
Show architecture or workflow	Schematic box layout	Use layers, boxes, verbs, and governance/evidence boundaries.

Advanced Chart Patterns

Advanced charts are allowed when their shape reduces decision work. They are not a license for novelty. Each advanced chart needs a conclusion title, figure label, unit, period, population or denominator when relevant, method or assumption, and source note on the slide. Most advanced charts use sequential reveal; bind motion to templates/decks/slide-system.md#slide-motion-catalog.

Chart	Use When	Wrong When	Anatomy Notes	Source Note	Motion
Waterfall	Explaining movement from one value to another, such as a P&L bridge or attribution decomposition.	The audience only needs rank, share, or time trend.	Start and end bars are teal/petrol answer bars; positive/negative movement uses gray context unless Saffron marks the single signal. Direct labels sit on or above each bar. Axis starts at zero unless the bridge is explicitly indexed.	State unit, period, method for each movement, and any illustrative assumption.	Evidence stage: start/end visible first, movement steps reveal in order, then callout. Reduced motion shows final state.
Sankey	Flow magnitude between categories is the story, and source, route, and destination all matter.	The path count is small enough for a table, or exact comparison matters more than flow reading.	Keep nodes few, label nodes directly, use teal for the primary flow and gray for secondary flows. Saffron appears only for a warning, leak, or handoff. Avoid rainbow flows.	State unit, period, source system, and whether flow totals are sampled, modelled, or complete.	Schematic build: nodes appear before connectors. Reduced motion shows final flow with all labels.
Treemap	Proportion inside a hierarchy is the story and the hierarchy is meaningful to the decision.	Readers need precise comparison across many similarly sized categories.	Largest block carries the answer color; context blocks stay gray; Saffron marks one signal block only. Labels stay inside blocks only when readable; otherwise use attached callouts.	State whole, unit, period, hierarchy definition, and treatment of “other.”	Evidence stage with largest block first, then peer blocks. Reduced motion shows final state.
Small multiples	The same chart shape repeated across categories makes comparison faster than one crowded chart.	Each panel needs a different scale or the story is a single aggregate.	Same axes, same range, same direct-label placement. Teal marks the pattern of interest; gray carries context. Saffron is reserved for one milestone or outlier.	State shared unit, period, source, denominator, and whether axes are shared.	Evidence stage by panel row or column. Reduced motion shows all panels.
Before/after pair	The story is a paired state change, such as current vs. future workflow, baseline vs. pilot, or pre/post adoption.	The two states are not comparable or the “after” state is speculative without a labelled assumption.	Always paired and conclusion-led. Use identical measures, aligned baselines, and matched labels. Teal marks the recommended/future state; gray marks baseline; Saffron marks one caution.	State baseline source, future-state assumption, unit, period, and method for the comparison.	Focus zoom on the changed element only after both states are visible. Reduced motion shows both states with a static highlight.
Combo bar and line	One axis is volume and the other is rate, and the relationship between them is the conclusion.	A dual-axis chart would make scale decoding more important than the decision, or one measure can be split into a clearer small multiple.	Use bars for volume and a line for rate. Direct labels identify both measures. Keep axis ranges visible. Teal marks the main volume series; Saffron may mark a threshold or exception line.	State both units, period, source, denominator for the rate, and any axis exception.	Evidence stage: bars reveal first, line second, threshold/callout last. Reduced motion shows final state.

Metric Delta Notation

• Use ⏶ for upward numeric movement and ⏷ for downward numeric movement.
• The triangle shows direction only. Color and copy explain whether the move is favorable, unfavorable, cautionary, or neutral.
• Use semantic green for favorable movement, critical red for unfavorable movement, Saffron for caution or watch status, and gray for neutral context.
• Always explain direction when lower is better: ⏷ 6d vs. prior. Lower is positive.
• Do not rely on triangle or color alone; include cause or implication in KPI cards and source notes when space allows.

Axis, Grid, And Labels

• Prefer direct labels over legends.
• Use tabular numerals for values.
• Gridlines are hairline and low opacity. Five to seven gridlines is usually enough.
• Bar charts start at zero.
• Line charts can use tighter axes only when the axis range is visible and useful.
• Remove chart borders unless the frame helps separate evidence from page prose.
• Avoid dual-axis charts. If two measures need to be compared, split the chart or use small multiples.
• Do not use 3D charts.

Color

• Teal and petrol identify the answer, active series, ordered series, or trend.
• Gray identifies context, baseline, inactive states, and scaffolding.
• Saffron identifies a distinct signal: warning, target, comparison, milestone, or handoff.
• Red is reserved for critical contrast.
• If the chart needs more colors than teal, gray, Saffron signal, semantic green, and critical red, group, filter, split, or change the chart type before expanding the palette.

Gantt Plans

Gantt plans are for project management when timing, sequence, dependencies, and milestones matter.

• Show the workstream labels clearly.
• Keep timeline gridlines quiet.
• Use Saffron only for real milestones or decision points.
• Label dependencies with verbs when the sequence is not obvious.
• Avoid compressing dense Gantt plans into small cards. Use a full-width row in decks, proposals, and review pages.

Schematic Box Layouts

Use schematics for architecture diagrams, tech stacks, AI workflow systems, and client operating models. The schematic is a designed explanation, not an inventory of vendors.

Default layer sequence:

1. User / Client Surface: the human tools, inputs, and outputs.
2. INTO Orchestration Layer: agents, workflow logic, routing, validation, and assembly.
3. Evidence / Governance Layer: data, approvals, logs, controls, and exports.

Rules:

• Use seven primary boxes or fewer.
• Group secondary systems instead of adding more nodes.
• Use three text levels: mono layer label, structural box label, short body description.
• Default to n8n-style rounded node cards for workflow and architecture schematics. Dog-tag pills are reserved for compact legend-like diagrams.
• Use a low-opacity dot-matrix or hairline-grid background when the schematic needs to read as a working canvas.
• Put the input port at the top-left of the node and the output port at the bottom-right of the node.
• Match each node eyebrow and glyph color to its node role, then use the same hue as a low-alpha card background or border.
• Use one small currentColor glyph per node only when it clarifies the tool, role, channel, or control.
• Keep the glyph and node eyebrow on one left-aligned row to preserve vertical space inside the card.
• Use Bezier or elbow connectors instead of straight divider lines when the route has workflow meaning.
• Connectors should visually terminate at node ports. Do not add separate dots to connector paths; the node input/output ports are the terminal dots.
• Place edge labels below the connector line.
• Use hairline connectors and label non-obvious arrows with verbs.
• Keep box copy short enough to read at deck distance.
• Use logos only when vendor recognition is essential to the reader’s task.

Agent Rule

When generating a chart-heavy or diagram-heavy artifact, choose the exhibit from the communication job before styling it. Always write the conclusion up top, expose the data contract and quantified basis, use the fewest colors that work, and route architecture or workflow explanations through the schematic box layout before inventing a custom diagram.