Diagram System

Requirement

Diagrams explain workflows, systems, schedules, and evidence. They should look designed for INTO Consulting, not embedded from a productivity tool.

Constraints

• Diagrams must work in Warm Light and Blueprint Dark.
• Diagrams must use brand tokens for color, type, strokes, and backgrounds.
• Evidence-first diagrams are part of the brand-code layer, but only when they make the system, schedule, or decision easier to understand.
• Diagrams must remain readable when exported to PDF, Slides, Docs, social, or video.
• Motion must respect prefers-reduced-motion.

Bet

Most diagram quality comes from hierarchy, containment, spacing, and restrained motion. This avoids overdesigned infographics while preventing default-tool screenshots from looking dropped into the brand.

Failure Modes

• All diagram labels have the same size and weight.
• Gridlines are too heavy or too dense.
• Diagrams use many colors where labels and structure would do the work.
• Motion animates everything at once and adds noise instead of meaning.
• Containers are too tight, especially around labels and axes.
• A diagram is used as decoration when a two-column explanation, table, or chart would make the point faster.
• Nodes are visually related by proximity but not related by the underlying system, sequence, ownership, or evidence chain.

Typography Levels

Level	Use	Rule
Level 1	Phase or section label.	Primary navigational anchor. Larger than body, often 1.125-1.375rem at standard web scale.
Level 2	Structural label, week marker, axis label, figure label.	Small mono or small caps, 0.625-0.6875rem at standard web scale, 20-30% opacity.
Level 3	Body/supporting description.	Inherits body style, slightly reduced opacity, supporting rather than dominant.

Grid, Axis, And Strokes

• Gridlines are hairline and low opacity.
• Use roughly 5-7 horizontal gridlines for a typical 200-300px chart.
• Axis labels should be small, quiet, and aligned for scanning.
• Do not label every point when direct labels or bar labels already make the value clear.
• Bars and timeline blocks can use a subtle direction gradient only when it reinforces time or progress.

Containers And Space

• Minimum internal desktop padding: 2rem.
• Minimum internal mobile padding: 1.5rem.
• Leave 2.5-3rem from section padding edge to the diagram boundary when the diagram is the primary exhibit.
• Row height in timeline and Gantt diagrams should be at least 2x the row label font size.
• Related nodes sit closer together than unrelated nodes. Use distance, alignment, layer labels, and hairlines before adding color or boxes.

Purpose Gate

A diagram is valid only when it explains a system, workflow, sequence, dependency, decision path, architecture, ownership model, or evidence chain.

Required:

• Purpose is stated by the slide title or lead.
• Direction or sequence is visible.
• Nodes are grouped by real relationship.
• Non-obvious connectors are labelled with verbs.
• Source, assumption, or provenance is visible when the diagram claims an external fact.
• Static export is readable without presenter narration.

If the same content reads better as a table, chart, or two-column executive argument, use that form instead.

Schematic Box Layouts

Use brand/data-visualization-system.md for architecture, tech-stack, AI workflow, and operating-model schematics.

• Default layers: user/client surface, INTO orchestration layer, and evidence/governance layer.
• Use seven primary boxes or fewer.
• Group secondary systems before adding another node.
• Label non-obvious arrows with verbs.
• Use logos only when vendor recognition is essential to the reader’s task.

Color

• Use fewer colors than expected.
• Use petrol or the teal scale for the active or answer series.
• Use gray scale and opacity for context, scaffolding, future states, and secondary series.
• Use Saffron only for milestones, warnings, or distinct signal.
• If removing color makes the diagram unreadable, the structure is too weak.

Motion

Motion should enact meaning.

• Timeline: bars fill sequentially from left to right.
• Funnel: sections collapse toward the outcome.
• Progress: fill moves toward a target.
• Assembly: pieces move from scattered to composed.
• Comparison: columns rise from the same baseline.

Use cubic-bezier(0.16, 1, 0.3, 1) for precision motion. Avoid bounce, spring, decorative page-load animation, and animation below the fold before it is visible. Always provide a static fallback through prefers-reduced-motion.

Designed vs. Embedded Checklist

• Does the diagram have at least three typographic levels?
• Are gridlines at hairline weight and low opacity?
• Does the section background create a reading mode shift?
• Do colors reference the brand token system?
• Does motion enact the meaning of the data or structure?
• Is the diagram using the fewest colors that accurately represent the data?
• Does the diagram have at least 2rem internal desktop padding?
• Is there a prefers-reduced-motion fallback?

Agent Rule

Do not paste default Miro, Notion, spreadsheet, or slide-tool diagrams into final collateral. Rebuild them with INTO typography, token color, low-opacity gridlines, clear padding, and motion only when the motion explains the content. For architecture and workflow explanations, start from the schematic box layout before inventing a new diagram structure.