> For the complete documentation index, see [llms.txt](https://docs.visionmakers.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.visionmakers.io/whitepaper/figures.md).

# Figure index

All seven whitepaper figures, how they are built and how to change them

The whitepaper contains seven figures. All seven are **drawn, not placeholders**, and all are
built directly against the brand kit.

## The seven figures

| ID | Figure | Section |
| --- | --- | --- |
| **FIG-01** | [Insight-to-action loop](/whitepaper/executive-summary#fig-01) | 1 · Executive summary |
| **FIG-02** | [Fragmented journey versus unified](/whitepaper/problem#fig-02) | 3 · Problem |
| **FIG-03** | [Four-layer system architecture](/whitepaper/architecture#fig-03) | 5 · Architecture |
| **FIG-04** | [Mindshare signal composition](/whitepaper/intelligence#fig-04) | 6 · Intelligence and data |
| **FIG-05** | [The nine-product stack](/whitepaper/products#fig-05) | 7 · Product suite |
| **FIG-09** | [Four-phase roadmap](/whitepaper/roadmap#fig-09) | 12 · Roadmap |
| **FIG-10** | [Revenue utilities and access utilities](/whitepaper/utilities#fig-10) | 10 · Token utilities |

## How they are built

Each figure is **hand-authored inline SVG**, not a raster export. That choice has four
consequences worth knowing:

**They are theme-aware.** Every colour is a CSS variable rather than a literal, so one figure
renders correctly on white and on pure black. Switch the theme on any page and the diagrams
follow, no second asset, no `prefers-color-scheme` image swap.

**They are sharp at any size.** Vector, so they survive zoom, retina displays and print.

**They are small.** The entire set is roughly 50 KB of markup. A single PNG of one of these at
the specified resolution would exceed that.

**They use real text.** Labels are live `<text>` in Figtree, so they are selectable, searchable
and readable by screen readers through each figure's `aria-label` and caption.

## Where they live

| Thing | Location |
| --- | --- |
| Figure source | `content/figures/FIG-xx.html` |
| Plain-text caption for Markdown twins | `content/figures/FIG-xx.txt` |
| Shared drawing helpers | `scripts/build-figures.py` |
| Theme variables | `--fig-*` in `src/app/globals.css` |

A figure is placed in the prose with a single marker:

```
> **FIG-01**: A plain-language question becomes a signed transaction without leaving one surface.
```

The HTML renderer substitutes the SVG; the Markdown twin at `/<path>.md` substitutes the
one-line caption instead, so the plain-text version stays readable rather than carrying a wall
of vector markup.

## The specification they follow

| Property | Value |
| --- | --- |
| Typeface | Figtree, weight 500–600 for emphasis, 400 for body. Sentence case |
| Small labels | System monospace, uppercase, letter-spaced |
| Accent | `linear-gradient(90deg, #00C2FF 0%, #00F0B0 100%)`: once per figure |
| Ink | `#06121F` light / `#ECECEC` dark |
| Muted | `#6B7A86` light / `#A1A1A1` dark |
| Surfaces | `#FFFFFF` / `#F4F8FA` light · `#0A0A0A` / `#141414` dark |
| Borders | `#E6EDF1` light / `#242424` dark |
| Radius | 8–12px panels · 999px pills |
| Numerals | Tabular |

Three rules are load-bearing and should survive any future edit:

1. **One accent per figure.** The gradient marks the single most important element, the action button, the shared foundation, the cumulative supply line. Everything else is ink or grey. Adding a second accent flattens the hierarchy.
2. **Real interface fragments, never crypto metaphor.** Balances, routes, leaderboards and alerts. No coins, chains, rockets or robots.
3. **The pinwheel mark is a fixed asset.** None of these figures draws it. If a future figure needs it, composite the supplied PNG from the brand kit, never trace or generate it.

## Changing a figure

The SVG partials in `content/figures/` are the source of truth, edit one directly and the
change appears on next build. `scripts/build-figures.py` holds the shared drawing helpers
(`card`, `pill`, `sparkline`, `mono`, the gradient definitions) that the set was authored with;
use them if you are adding a figure, so a new one inherits the same geometry and theme variables
rather than reintroducing hard-coded colours.

Figure numbering is not contiguous. The set was authored as ten and three were withdrawn with
the section they illustrated, so the live set runs FIG-01 to FIG-05, FIG-09 and FIG-10.
Keeping the original numbers means the remaining figures did not have to be renamed.

**FIG-10** carries live product data. If a product gains or loses a revenue line, it and the
tables in [section 10](/whitepaper/utilities) must be updated together.