# Illustration Brief — House Style and Figure Register **Course:** Introduction to AI **Status:** All figures are placeholders. None have been generated. **Intended pipeline:** generate with OpenAI image models, then replace the placeholder block in the lesson HTML. Every figure placeholder in the course carries its own art direction inline, in the lesson file. This document holds the rules that apply to **all** of them, plus the register of what exists. --- ## 1. House style ### 1.1 The prohibitions — these matter more than the positive rules The visual clichés of AI illustration actively undermine a course whose entire argument is that these systems are prediction machines rather than minds. **None of the following may appear anywhere in the course's illustration set:** - Humanoid robots, robot hands, or android faces - Glowing brains, brains made of circuitry, or brain/chip hybrids - Blue neural-network node-and-edge webs used decoratively - Binary digits raining down a screen - Glowing hexagonal grids, HUD overlays, or "digital" particle effects - A human hand and a robot hand reaching toward each other - Anthropomorphised assistants of any kind If a generated image contains any of these, regenerate it. The prohibition is not aesthetic fastidiousness — each of these images asserts something the course spends fifteen lessons arguing against. ### 1.2 The positive style **Archival editorial illustration and technical diagram.** The reference points are a well-made economics textbook, a *Scientific American* cutaway from the 1970s, and the diagrams in a good engineering manual — not a technology company's marketing site. - **Explanatory over decorative.** Every figure must carry an argument that the prose states. If the image could be swapped for a different image without changing the lesson, it should not exist. - **Legible at print size.** Figures are reproduced in the PDF at roughly 90 mm wide. Any text inside an image must survive that. Test before accepting. - **Restrained.** Flat or lightly modelled forms, generous white space, no gradients doing emotional work. - **Honest with data.** Where a figure plots real numbers, axes are labelled, the source is in the caption, and a non-zero axis origin is stated in the caption. Figure 11.1 is the test case. ### 1.3 Palette Sampled from the Webspinner Academy logo (`images/Webspinner-Academy-Logo.png`), not invented, so that figures and brand share one identity. | Role | Hex | Use | | --- | --- | --- | | Ground | `#00040c` | Deep navy field; the logo's own background | | Shadow blue | `#183048` | Deepest structural tone | | Mid blue | `#306078` · `#487890` | Structure, secondary forms | | Silver-blue | `#90a8c0` · `#a8c0d8` · `#c0d8d8` | Primary figure tone, highlights | | Column gold | `#a87848` · `#906030` | **Accent only.** The element the eye should land on | | Paper | `#f8f7f4` | Light-ground figures | | Ink | `#14181e` | Text and rules on light ground | | Caution | `#8f3a2a` | Failure states, warnings, the thing that goes wrong | **Discipline:** gold is the accent, not a fill. In most figures fewer than 10% of pixels should be gold, and those pixels should be the point of the image. ### 1.4 Output specification - **Resolution:** as stated per figure; generally 3200 × 1800 px for 16:9. - **Format:** PNG for generation; convert to WebP for the web with PNG fallback, matching the `assets/brand/` pattern. - **Location:** `courses/intro-to-ai/assets/figures/` - **Filename:** the figure slug, lowercased — `fig-01-01.png`. - **Accessibility:** every figure needs real alt text describing what it shows, not "diagram." The `
` is not a substitute. ### 1.5 Replacing a placeholder In the lesson file, replace the entire `
…
` with: ```html [what the image shows, specifically] ``` Leave the `
` in place — it carries the citation. Then run `node scripts/validate.mjs`; the figure checks will confirm nothing broke. --- ## 2. Figure register 16 figures across 15 lessons — Lesson 1 has two, every other lesson has one. Full art direction for each is in the lesson file, in the placeholder block. | Slug | Lesson | Title | Aspect | Priority | | --- | --- | --- | --- | --- | | `FIG-01-01` | 1 | The founding document | 3:2 | Medium | | `FIG-01-02` | 1 | Two braids, not one thread | 16:9 | **High** — carries the lesson | | `FIG-02-01` | 2 | Two boards, two arguments | 16:9 | High | | `FIG-03-01` | 3 | A sentence, tokenised | 3:1 | **High** — hardest to explain in prose | | `FIG-04-01` | 4 | Two closing moves | 16:9 | High | | `FIG-05-01` | 5 | Model, tools, loop | 16:9 | **High** — reused conceptually in L10, L15 | | `FIG-06-01` | 6 | The scoring table that makes bluffing rational | 4:3 | **High** — the course's best single explanation | | `FIG-07-01` | 7 | Saturation, drawn | 16:9 | Medium — will need refreshing with the lesson | | `FIG-08-01` | 8 | Broad supply, concentrated demand | 21:9 | High | | `FIG-09-01` | 9 | The sovereignty stack | 4:3 | High | | `FIG-10-01` | 10 | The transferable template | 16:9 | Medium | | `FIG-11-01` | 11 | Two lines that separate | 16:9 | **Highest** — real data, will be screenshotted | | `FIG-12-01` | 12 | One object, three lenses | 16:9 | Medium | | `FIG-13-01` | 13 | Same power source, two factories | 16:9 | **High** — the course's best analogy | | `FIG-14-01` | 14 | Two loops, one difference | 16:9 | High | | `FIG-15-01` | 15 | Recall versus grounding | 16:9 | **High** — the capstone image | ### 2.1 Figures requiring special care **`FIG-11-01` — Two lines that separate.** This plots real employment data and will be screenshotted and argued with. It must be accurate, its axis origin must be disclosed in the caption (it does not start at zero), and the source line must include the paper's revision date. If the underlying study is revised, this figure is revised. Do not generate it decoratively; build it from the actual series or mark it explicitly as schematic. **`FIG-07-01` — Saturation, drawn.** Bound to a high-volatility lesson. Expect to regenerate every two quarters. Consider building it in a form that is cheap to update. **`FIG-13-01` — Same power source, two factories.** The most demanding image in the set, because the argument is carried entirely by the difference between two panels. If a viewer cannot see why the right-hand factory is faster without reading the caption, it has failed. **`FIG-06-01` — The scoring table.** This one is close to pure information design and may be better built as HTML/SVG than generated. A generated image of a table is a common failure mode; consider hand-building. --- ## 3. Caption discipline Captions carry three things, in this order: 1. **The figure number in bold** — `Figure 1.2.` 2. **What the figure argues**, in one sentence — not what it depicts. 3. **The source**, with an endnote reference where the figure plots cited data. Where a chart's axis does not start at zero, or where a figure is schematic rather than plotted from data, the caption says so. Figure 11.1's caption is the model: > **Figure 11.1.** Indexed employment, Nov 2022 = 100. Vertical axis does not begin at zero. Source: > Stanford Digital Economy Lab / ADP, data through June 2026, revised 12 August 2026. --- ## 4. Prompt scaffold A starting point for generation. The per-figure brief in the lesson file supplies the middle section. ``` An archival editorial illustration in the style of a well-made economics textbook or a 1970s Scientific American technical cutaway. Flat to lightly modelled forms, generous white space, no gradients, no glow effects. [ PASTE THE FIGURE BRIEF FROM THE LESSON FILE HERE ] Palette: deep navy #00040c, shadow blue #183048, mid blue #306078, silver-blue #a8c0d8, warm paper #f8f7f4, ink #14181e. Antique gold #a87848 used ONLY as a sparing accent on the single element the viewer should look at first. Any text in the image must remain legible when the image is reproduced 90 mm wide. Do NOT include: humanoid robots, robot hands, glowing brains, circuit-board brains, decorative neural-network node webs, falling binary digits, hexagonal grids, HUD overlays, particle effects, or a human hand reaching toward a robot hand. ``` --- ## 5. Acceptance checklist Before a generated figure replaces a placeholder: - [ ] Contains none of the prohibited elements in §1.1 - [ ] Carries the argument the prose states — swapping it would change the lesson - [ ] All internal text legible at 90 mm print width - [ ] Gold used as accent only, on the element that matters - [ ] Alt text written, specific, not "diagram" - [ ] Caption states the argument, not the depiction, and cites any plotted data - [ ] Non-zero axis origins or schematic status disclosed in the caption - [ ] Exported at the stated resolution, WebP + PNG, into `assets/figures/` - [ ] `node scripts/validate.mjs` passes