---
title: Complete visual language catalog
description: A bilingual catalog of package-owned composition, media, surface, and responsive roles.
language: en
localizations:
  ru: report.ru.md
theme: system
layout: mixed
preset: monument
tokens:
  density: comfortable
  font: sans
  accent: teal
  width: wide
  radius: soft
---

# Complete visual language catalog

**Fictional sample.** Every observation exists only to demonstrate the authoring system. Replace it with
verified evidence before use.

:::::section{title="Evidence becomes a spatial argument" id="stage" nav="Stage" width="wide" composition="stage" viewport="full" section-density="immersive" type="display" media="mask" media-fit="cover" media-aspect="cinematic" focal="right" surface="mesh" transition="stagger" scene="progress" choreography="cascade"}
:::lead
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.
:::

![Four page layouts sharing one foundation](layout-map.svg)

:::actions{placement="auto"}
::action[Explore the visual system]{href="#mosaic" kind="primary" effect="magnetic"}
:::
:::::

::::section{title="The source stays ordinary" id="split" nav="Source" composition="split" viewport="bounded" section-density="editorial" type="editorial" surface="grain"}
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.

:::callout{kind="info" title="Boundary"}
Layout, media, and surface values come from closed registries. Unknown values fail before HTML exists.
:::
::::

:::::section{title="A mosaic changes rhythm, not meaning" id="mosaic" nav="Mosaic" width="wide" composition="mosaic" section-density="compact" media="natural" media-fit="cover" media-aspect="landscape" focal="center" surface="grid" transition="stagger" choreography="cascade"}
::::cards
:::card{title="Primary proof"}
![The shared page foundation](layout-map.svg)

The first card receives more visual area while remaining the first semantic item.
:::
:::card{title="Portable"}
Single-file embeds the local image. Directory output hashes the same confined bytes.
:::
:::card{title="Composable"}
The same section vocabulary works in document, dashboard, landing, and mixed page shells.
:::
::::
:::::

::::section{title="Long evidence keeps its context" id="story" nav="Story" width="wide" composition="story" viewport="bounded" section-density="immersive" type="display" media="natural" media-fit="cover" media-aspect="landscape" focal="left" surface="glow"}
![A stable visual reference beside the narrative](layout-map.svg)

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.
::::

:::::section{title="A stack expresses priority" id="stack" nav="Stack" composition="stack" section-density="editorial" type="editorial" surface="plain"}
::::cards
:::card{title="Read first"}
The accepted recommendation remains at the top of the authored order.
:::
:::card{title="Then verify"}
Supporting evidence follows without being removed from keyboard or reading flow.
:::
:::card{title="Finally act"}
The last card closes the sequence with a concrete next step.
:::
::::
:::::

::::section{title="Media can meet the section edge" id="bleed" nav="Bleed" width="wide" composition="flow" viewport="bounded" section-density="immersive" type="display" media="bleed" media-fit="cover" media-aspect="cinematic" focal="center" surface="mesh" interaction="depth"}
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.

![A full-bleed view contained by its semantic section](layout-map.svg)
::::

:::::section{title="Several local views can form depth" id="layers" nav="Layers" width="wide" composition="split" viewport="bounded" section-density="editorial" type="editorial" media="layers" media-fit="cover" media-aspect="portrait" focal="center" surface="grain"}
::::cards
:::card
![Foundation layer](layout-map.svg)
:::
:::card
![Evidence layer](layout-map.svg)
:::
:::card
![Decision layer](layout-map.svg)
:::
::::
:::::

:::::section{title="A gallery carries several views" id="gallery" nav="Gallery" width="wide" composition="stage" viewport="adaptive" section-density="compact" type="body" media="gallery" media-fit="cover" media-aspect="landscape" focal="center" surface="plain"}
::::cards
:::card{title="System view"}
![System view](layout-map.svg)
:::
:::card{title="Evidence view"}
![Evidence view](layout-map.svg)
:::
:::card{title="Decision view"}
![Decision view](layout-map.svg)
:::
::::
:::::

:::decision{title="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    |