docs(blog): four inline SVG figures for 'The Ontology Is the Software'

[objectstack-fleet]

Fixes #22948
Clause-②: no

Four figures drawn for the essay "The Ontology Is the Software", as the card specifies: inline SVG rendered by server components, readable under both themes, one italic caption each. The essay's prose and frontmatter are unchanged: its diff is eight added lines (four figure elements and their blank lines) and zero removed.

Written by an os-dev run dispatched from seat domain:devx#2, session https://claude.ai/code/session_011hRnra93sK5Q2gTYYTbdJR.

What changed

File	Change
apps/docs/components/figures/primitives.tsx	New. The drawing kit: colour roles as Tailwind class pairs (a light value plus its dark: value), a type scale, Box, Circle, Arrow (drawn polygon heads, no SVG markers), EdgeLabel, Drawing (an svg with role="img", title, desc, a viewBox and 100 percent width) and Figure (the plate plus an italic figcaption).
apps/docs/components/figures/three-interfaces.tsx	New. Three interfaces, one user.
apps/docs/components/figures/one-definition.tsx	New. Four places to one definition.
apps/docs/components/figures/ontology-runs.tsx	New. The ontology runs.
apps/docs/components/figures/three-routes.tsx	New. Three routes for enterprise knowledge.
apps/docs/components/figures/index.ts	New. Barrel for the four.
apps/docs/mdx-components.tsx	Registers the four figure components beside Mermaid.
content/blog/the-ontology-is-the-software.mdx	Four figure elements, each with its caption.

Figure	Section	Placed after
Four places to one definition	What an enterprise actually wants to say	the paragraph ending "the only form a computer could run.", before "Here is the same sentence written once"
The ontology runs	Why code recedes	the paragraph "The ontology becomes the asset and the code becomes a derivative."
Three interfaces, one user	Why now	the closing Karpathy paragraph, at the end of the section
Three routes for enterprise knowledge	What it is not	the "Not the industry's semantic layer" paragraph

How it works

• Theme. Every colour is a Tailwind class pair, so a figure follows the dark class next-themes puts on the html element, not the OS preference. The figures are server components with no client script; the essay stays a static (SSG) route.
• Width: stacked, not scaled. Each figure draws its content twice: a wide drawing (viewBox 840 units wide) from the lg breakpoint (1024 px) up, and a stacked drawing (360 units wide, capped at 440 px) below it. The hidden drawing is display: none, which also removes it from the accessibility tree, so a screen reader meets each figure once. Scaling the wide drawing to a 390 px phone would set its 12.5-unit text at about 5 px.
• Fonts. No font-family is set anywhere in a figure. The computed family on figure text is the page's own stack, and the essay requests the same three woff2 files as a blog post without figures.
• Links. The figures reference no file, so the lychee lane has nothing new to check.
• Labels. Every label is the essay's or the deck's wording. The deck's decade labels over the three eras are left out, because the card asks for no numbers. The only quantities are the phrases "forty years" and "a few hundred thousand lines of code", which the essay and the card already use.

Measurements

Built site (next start on the build at fa8dda4), the preinstalled Chromium, 1280 px and 390 px, each theme set through the site's own storage key with the OS preference set to the OPPOSITE scheme.

Figure	SVG at 1280 px	SVG at 390 px	Figure with caption, 1280 / 390	Min text contrast, light / dark	Smallest text, 1280 / 390
Four places to one definition	814 x 262	332 x 440	864 x 344 / 358 x 518	7.16 / 8.75	12.1 px / 11.4 px
The ontology runs	814 x 328	332 x 533	864 x 410 / 358 x 611	5.25 / 5.25	12.1 px / 10.9 px
Three interfaces, one user	814 x 247	332 x 438	864 x 329 / 358 x 516	5.25 / 5.25	11.6 px / 10.9 px
Three routes for enterprise knowledge	814 x 324	332 x 899	864 x 406 / 358 x 977	6.46 / 6.46	11.1 px / 10.5 px

• Contrast method. For every text element, its resolved fill and the fill of the topmost shape under its centre (or the plate) are resolved to sRGB through a canvas, alpha-composited, and scored with the WCAG 2.x relative-luminance ratio. Across 366 readings (92 texts per wide run, 91 per stacked run, two themes each), none is below 4.5:1. The lowest, 5.25:1, is indigo-100 text on the indigo-600 runtime and agent boxes.
• Captions. 18.16:1 light, 15.71:1 dark, italic, 14 px. One line at 1280 px, two at 390 px.
• Connectors (non-text, 3:1 target). At least 4.2:1 light and 4.84:1 dark, each measured against the shape under the line's midpoint.
• Follows the class, not the OS. In every run, html.dark matched the site theme while the OS preference was the opposite, and the figures took the site theme's palette. The site's own "Toggle Theme" button flipped figure text from lab(7.8) to lab(98.3) without a reload.
• Geometry. Every text sits inside its box and the viewBox, with no text-on-text or connector-on-text overlap: 0 problems under the site's font stack in the built page, and 0 under DejaVu Sans (the widest common fallback face) in a scratch render. There is no horizontal page overflow at 390 px.
• Smallest text. The "Business systems" label at 11.5 units (10.5 px at 390, 11.1 px at 1280); the uppercase eyebrows are 12 units.

Gates (at fa8dda4)

• pnpm --filter @objectstack/docs build under scripts/pm/os-verify-lock.sh: VERDICT command-exit 0. /en/blog/the-ontology-is-the-software was prerendered (SSG), and git status was clean after the build's spec generators ran.
• pnpm --filter @objectstack/docs typecheck under the lock: VERDICT command-exit 0. tsc --noEmit --listFiles lists all seven changed TypeScript files in the program.
• node scripts/pm/dispatch-gates.mjs --commands --repo objectstack-ai/objectstack (no paths, change set from merge base 51b43a8) derived 31 commands. All 31 ran with exit 0, and --ran reports "31 run, 0 NOT-MEASURED". On its first run check:doc-formula-expressions exited 3 (prerequisite not met, no verdict); it went green after turbo run build --filter=@objectstack/formula --filter=@objectstack/lint.
• pnpm check:docs-image-tag: exit 0. It is a roster family, not in the derived set, and was run because the card names it.
• NOT MEASURED: the lychee link lane, because lychee is not installed in this container; the essay diff adds zero link targets. CI's Build Docs job and the workspace type-check lanes run in CI.

Acceptance notes

• The card puts "Three interfaces, one user" in "Why now", and that is where it is. Its idea is stated in the essay's opening paragraphs, before the first heading. Inside "Why now" it sits at the end of the section, after the Karpathy paragraph on generations of software, rather than after "three conditions had to mature", where three eras could be read as the three conditions.
• Deck labels are kept verbatim even where they are uneven ("Route one", "Route two", "Third route").
• The stacked "Three routes" drawing is the tallest, 899 px on a 390 px phone.
• Observation, no change here: the blog article's prose-neutral and dark:prose-invert classes produce no CSS under fumadocs' own typography plugin, which defines neither modifier. Prose colours switch through the fd tokens under the dark class.
• Changeset: none. apps/docs is private, content/blog publishes nothing, and packages/** is untouched, so the label is skip-changeset.

---

Generated by Claude Code