# Notion-style infographics

## Visual language

Create restrained consulting-style line diagrams with a light hand-drawn character.

- Use navy, graphite, muted teal, ice blue-gray, mist, and white.
- Vary line weight slightly to avoid a mechanical wireframe feel.
- Use simple business figures, hands, documents, screens, arrows, and familiar objects.
- Keep faces minimal and adult; avoid playful cartoon proportions.
- Use solid navy or graphite sparingly to anchor the composition.
- Leave substantial negative space around each group.
- Keep all essential labels as live HTML or SVG text.

Never use yellow, gold, orange-yellow, gradients, thick black outlines, 3D, heavy shadows, or dense decoration.

## Diagram selection

Choose the diagram by relationship, not by decoration.

| Relationship in supplied content | Diagram |
| --- | --- |
| Ordered stages | Horizontal or vertical flow |
| Before and after | Split comparison |
| Change over time | Timeline |
| Two decision dimensions | Matrix |
| Levels or nested capability | Layered architecture |
| Repeated improvement | Cycle |
| Roles across stages | Swimlane |
| Inputs transformed into outputs | Input-process-output |

If the relationship is uncertain, use a clean text layout and flag the ambiguity instead of guessing.

## Editable construction rules

- Use semantic HTML for cards, lists, labels, and tables.
- Use SVG for connectors, arrows, loops, and shapes that must align precisely.
- Define arrows in `<defs>` and reuse them.
- Keep connectors behind nodes and avoid line crossings.
- Use short node labels and place longer explanations outside the diagram.
- Give every diagram an accessible label or adjacent text summary.
- Avoid rasterizing charts that users may need to edit.

## Six reusable compositions

### Flow

Use three to seven stages, one clear direction, and one highlighted current or decisive stage. Show exception paths in muted gray or risk red only when supplied.

### Comparison

Use parallel columns with matching row structure. Reserve the center for the key change or bridge; do not turn the page into two unrelated card piles.

### Timeline

Use a strong baseline, evenly spaced events, and alternating annotations only when there is enough vertical room. Encode time accurately.

### Matrix

Name both axes, keep quadrant labels short, and highlight only the cell or region supported by the content.

### Layered architecture

Stack stable foundations below user-facing or outcome layers. Use arrows only for real dependencies, not as decoration.

### Cycle

Use three to six stages around a quiet center. Ensure the starting point and feedback direction are unambiguous.

## Optional generated illustration prompt

Use generated imagery only for a non-precise supporting illustration. Include this intent in the prompt:

```text
Professional consulting-style Notion line illustration; navy, graphite, muted teal,
ice blue-gray and white; restrained marker texture; simple adult business figures;
large negative space; no yellow, gradient, 3D, heavy shadow, thick outline, or dense text;
16:9 composition; keep all precise Chinese labels out of the image.
```

Add labels later as editable HTML or SVG text.

