Complete visual language catalog
Fictional sample. Every observation exists only to demonstrate the authoring system. Replace it with verified evidence before use.
The whole system on one map
Evidence becomes a spatial argument
One semantic section combines display type, confined media, a bounded full viewport, and a package-owned surface without author CSS or a custom page renderer.
The source stays ordinary
The left side carries the thesis while the authored flow on the right remains normal Markdown. Reading and focus order do not follow visual placement.
A mosaic changes rhythm, not meaning
Primary proof
The first card receives more visual area while remaining the first semantic item.
Portable
Single-file embeds the local image. Directory output hashes the same confined bytes.
Composable
The same section vocabulary works in document, dashboard, landing, and mixed page shells.
Long evidence keeps its context
The media remains visible beside a longer desktop explanation without changing document order. On narrow screens it returns to ordinary flow. This paragraph establishes the first part of the argument and keeps a comfortable reading measure.
The second part compares constraints: local resources only, deterministic output, and a package-owned presentation vocabulary. The image never becomes a background that can erase its accessible alternative.
The final part makes the boundary observable: responsive composition must change placement rather than hide overflow, and tall screens must contain real evidence instead of empty viewport-sized plates.
A stack expresses priority
Read first
The accepted recommendation remains at the top of the authored order.
Then verify
Supporting evidence follows without being removed from keyboard or reading flow.
Finally act
The last card closes the sequence with a concrete next step.
Media can meet the section edge
The source remains an ordinary confined Markdown image; the package lets it reach the visual surface edge without accepting author CSS or a remote URL.
Several local views can form depth
A gallery carries several views
System view
Evidence view
Decision view
A detail worth a closer look
The shared foundation
Every layout stands on the same foundation: one source contract, one theme, one runtime.
One claim before the evidence
A page earns attention with one sentence the reader can repeat, and only then with the proof.
The thesis recipe sets that sentence in display type at reading width, with no picture competing for it.
The same page before and after
Drag the divider or move the slider with the arrow keys; both images keep their alternative text.
Drawn like a specification
The blueprint recipe puts a drafting grid behind a hairline panel and sets captions like drawing annotations, so a system diagram reads as a specification rather than a decoration.
- Validation step
- call
- data or values
Diagram in words
Nodes: 3; flow layers: 3.
Layers along the flow
- Markdown
- Checks [Validation step]
- Page
Connections along the flow
- Markdown → Checks: parse (call)
- Checks → Page: build (data or values)
What readers said
The first page I did not have to explain before sending it.
— Fictional reviewer, support team lead
74%
of fictional pilot readers found the answer with the first search.
Motion follows the argument
- Validation step
- call
- data or values
Diagram in words
Nodes: 3; flow layers: 3.
Layers along the flow
- Roles
- Compiler [Validation step]
- Page
Connections along the flow
- Roles → Compiler: validate (call)
- Compiler → Page: render (data or values)
Declare
Authors name roles; the diagram draws its connections as it scrolls into view.
Render
44 directives compile to one page; each beat lights its part of the diagram.
The image stays in the reading flow
The closing map keeps its alternative text and reading order at every screen width and motion setting.
Use one declarative visual language
Compose semantic roles instead of generating a bespoke application for each handoff.
| Layer | Declarative role | Portable result | Runtime owner | Narrow-screen behavior |
|---|---|---|---|---|
| Composition | Spatial hierarchy | Stable reading order | Package | Returns to document flow |
| Media | Local art direction | Confined assets | Compiler | Preserves accessible text |
| Surface | Visual atmosphere | Package-owned CSS | Browser runtime | Never obscures content |
