Figure index

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	1 · Executive summary
FIG-02	Fragmented journey versus unified	3 · Problem
FIG-03	Four-layer system architecture	5 · Architecture
FIG-04	Mindshare signal composition	6 · Intelligence and data
FIG-05	The nine-product stack	7 · Product suite
FIG-09	Four-phase roadmap	12 · Roadmap
FIG-10	Revenue utilities and access utilities	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:

<!--figure:FIG-01-->

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 must be updated together.