User journey Layout Grammar & Editorial Diagram Guide

Connect a customer’s stages, actions, and friction points.

When to use this diagram

Connect a customer’s stages, actions, and friction points. Choose this grammar when that relationship is the main question your reader needs to answer. Establish the scope and the audience before adding detail; if ownership, timing, or quantity is the real question, compare the neighboring diagram families in the directory.

How to organize the layout

Align stages on one horizontal journey and place actions, touchpoints, and pain points in consistent rows. Keep research evidence distinct from hypotheses.

What to put in your source

Name the customer scenario, stages, touchpoints, and observed friction. Include emotion or satisfaction scores only when their source is stated. Keep the source specific and review the generated result against those facts before sharing it.

The 6 Editorial Diagram Design Principles & Geometry Laws

4px Grid: Align node coordinates, widths, heights, and corner radii to multiples of four. A shared grid makes tiers line up, gives labels predictable clearance, and lets small manual adjustments remain consistent.
Orthogonal r=8 Elbows: Route off-axis architecture and flow connectors through horizontal and vertical segments with 8px rounded turns. Keep arrows away from labels. Charts such as Sankey and polar plots retain the curves their data encoding requires.
Single Accent Focal Rule: Choose a primary decision, integration point, or bottleneck as the visual focus. Reserve coral for that story and keep supporting components quiet. Labels and shapes must still communicate meaning when color is removed.
5 Semantic Color Tokens: Use --paper for the canvas, --ink for primary text, --muted for annotations, --soft for quiet boundaries, and --accent for emphasis. Change the palette without changing what each visual role means.
Instrument Serif + Geist Typography: Set editorial headings in Instrument Serif, component names in Geist, and technical annotations in Geist Mono. Distinct text roles separate the diagram’s story from implementation details without adding decoration.
WCAG AA Brand Extraction: Enter a public brand URL to extract the five-color palette. The extractor checks ink against paper at a minimum 4.5:1 contrast ratio and corrects that pair when needed. Review the full diagram separately for accessibility.