# ProDyn / Threadline Design System Manual — v2.2

Version: 2.2 — 2026-09-05 (supersedes 2.1 — 2026-08-13)
Scope: ProDyn, Promethean Dynamic, Threadline by ProDyn, and related operational web artifacts.
Canonical repository: https://github.com/cygnostik/prodyn-design-system
Web guide: https://agent.prodyn.ai/dsm/ — separately deployed; a repository update does not update that site.
Canonical token files: `/dsm/tokens.css` (source of truth) · `/dsm/tokens.json` (machine-readable mirror)

What's new in 2.2: the [Motion Design add-on](motion/guide.md) joins the canon with four tested interaction primitives (M15–M18), a visual field guide, engine-selection recipes, authoring contracts, portable agent entrypoints and executable quality gates. Existing M1–M14 implementations and numeric token values are retained. The approved ProDyn.ai document-header lockup remains unchanged.

Retained from 2.1: M8 Login Particle Veil is promoted unchanged from the `/ui` login to the default whole-page atmosphere. Decorative page grids are retired. M10 remains available only for explicit technical/diagnostic compositions, not as a default page background. All earlier v2.0 token, motion, data-display, telemetry, component, and naming decisions remain in force.

---

## 0. Binding rules (read first, agents)

1. **No raw values.** No hex color, px radius, shadow, easing, or font-family anywhere outside `tokens.css`. Reference tokens only. Component geometry, normalized interpolation, font-file declarations and print page dimensions are implementation data, not permission for new brand colors, easing or type roles.
2. **Colors are roles**, not swatches. A new color requires a new DSM-reviewed role — never inline one.
3. **Motion comes from the registry** (M1–M18). Agents pick primitives; they do not invent motion. Every primitive has a visible specimen and a composed reduced-motion state. New motion = new registry entry via DSM review.
4. **Corners are square** by default. `--r-soft` (2px) is rare; `--r-dot` (50%) is for dots and circles only.
5. **Restraint colors** (copper, ok/warn/alert): ≈5% visual presence maximum, exception-marking only.
6. **Charts are inline SVG or canvas.** No chart libraries.
7. **Redaction is server-side.** Blur (`--blur-redact`) marks already-safe placeholders; sensitive data never reaches the browser.
8. **Breakpoints:** 640 / 768 / 1024 / 1200 only. Wide-phone (640–767) must be explicitly tested.
9. **No project codenames** in the DSM or any public artifact.
10. **Ambient loops alternate/breathe** — nothing snaps to frame zero. Reduced motion always leaves a composed static frame.
11. **Default page atmosphere is M8.** Use the exact shared Login Particle Veil implementation. Do not place decorative square or dot grids behind whole pages. Functional grids inside charts, maps, scopes, media frames, and telemetry surfaces remain allowed. Dense reading and motion-comparison surfaces may deliberately omit ambient loops so the content or demonstrated interaction owns attention; the motion field guide does this.
12. **Mechanism is not identity.** Native APIs, GSAP, Motion, Rive and other engines implement registered behavior. A library choice does not authorize arbitrary new effects or waive M13 approval.
13. **Motion has a lifecycle.** Preserve semantic content and focused-node identity; handle interruption, reset, runtime reduced preference, offscreen/hidden state and persisted history restoration. Never restart sound on Back.
14. **Prove rendering.** Verify actual intermediate output and final static state, rendered font glyphs, unavailable APIs, no-JS meaning, keyboard and wide-phone behavior; a successful import or screenshot alone is insufficient.

---

## 1. Design thesis

ProDyn pages should feel like operational instruments, not SaaS brochures. The visual field is dark, quiet, technical, and restrained. Cyan appears as signal, status, and proof of life. Motion suggests telemetry, current, smoke, or memory activity. The logo remains naked and trusted. The layout leaves room for the system to breathe.

The strongest ProDyn page has four traits: a near-black operational field; ivory mass for type and hierarchy; sparse cyan signal moments; a real sense of systems moving behind glass. Do not brighten the whole page just to make it feel designed — the dark field is part of the identity.

## 2. Brand posture

**Public category:** Threadline by ProDyn is continuity infrastructure for agents that need to stay coherent, useful, and operational over time.

**Visual tone:** operational not ornamental · technical but not stock cyberpunk · dark but not muddy · sparse but not empty · confident not hype-driven.

**Copy tone:** blunt operational phrasing, concrete nouns, active verbs. Avoid: "unlock the power of", "revolutionize", "all-in-one", "AI brain", "automated magic", generic cybersecurity theater.

## 3. Logo standard

Use the actual ProDyn logo asset (`/pd-logo.png`), displayed naked: transparent background, placed directly on the dark field, its own cyan glow doing the work. No circle, badge, shield, rounded square, avatar chip, ring, card, or icon box. Never regenerate it with an image model for exact-brand use; never substitute generic PD letters. Acceptable support: page-level atmosphere behind the section, subtle radial light, clean sizing. The scalable flame-mark source is `prodyn-fire-logo.svg` (project archive).

## 4. Color system

| Role | Token | Value | Use |
|---|---|---:|---|
| Deep background | `--pd-field` | `#050A0F` | primary page field |
| Near-black void | `--pd-void` | `#02070B` | hero depth, negative space |
| Section background | `--pd-section` | `#0A1219` | alternate dark panel field |
| Surface | `--pd-surface` | `rgba(237,232,228,.025)` | faint content panels |
| Border | `--pd-line` | `rgba(237,232,228,.08)` | thin separations |
| Primary ivory | `--pd-ivory` | `#EDE8E4` | main text and display type |
| Muted ivory | `--pd-ivory-muted` | `rgba(237,232,228,.58)` | body and support text |
| Dim ivory | `--pd-ivory-dim` | `rgba(237,232,228,.36)` | metadata, microcopy |
| Primary cyan | `--pd-signal` | `#30B0D0` | labels, signal, status, selected |
| Deep cyan | `--pd-cyan-deep` | `#20708A` | gradients, bars, low-signal depth |
| Electric cyan | `--pd-spark` | `#22D3EE` | tiny active highlights only |
| Plasma core | `--pd-plasma-core` | `#EAFBFF` | white-hot flame/plasma cores (derived) |
| Trace highlight | `--pd-trace` | `#87ECFF` | chart traces and data values ONLY |
| Copper Restraint | `--pd-copper` | `#C85A2E` | intervention, priority, escalation, hand-off |
| Copper deep | `--pd-copper-deep` | `#8F3F20` | warm depth, underpaint |
| Copper soft | `--pd-copper-soft` | `rgba(200,90,46,.16)` | contained warm tint |

Cyan is instrumentation: if everything glows, nothing is signal. Copper remains the ~5% warm tertiary — never normal links, default buttons, broad backgrounds, body text, logo aura, or repeated chrome.

### State colors (official, locked 2026-07-18)

| State | Token | Value | Use |
|---|---|---:|---|
| OK / live / up | `--pd-ok` | `#43D48A` | health, live rails, up-trends |
| Watch / warn | `--pd-warn` | `#E4A43A` | watch states, degrading trends |
| Alert / error | `--pd-alert` | `#E14B5A` | errors, failures, blockers |

Same restraint discipline as copper: state colors mark exceptions, they do not decorate. Border tints at .32–.34 of the state color on chips and badges.

## 5. Numeric tokens

`tokens.css` is canonical; `tokens.json` mirrors it for tooling. Key values:

**Type scale (role-named):** `--fs-micro` 11 (HUD) · `--fs-meta` 12 · `--fs-body-sm` 14 · `--fs-body` 16 · `--fs-lead` 18 · `--fs-h3` 23 · `--fs-h2` 28 · `--fs-h1` clamp(32,4vw,56) · `--fs-display` clamp(34,5vw,74) · `--fs-hero` clamp(54,8vw,112).
Line heights: tight 1.05 · heading 1.2 · body 1.6 · relaxed 1.7.
Letter spacing: hud .12em · hud-wide .18em · label .08em · display −.02em · display-tight −.065em.

**Spacing (4px grid):** 4 / 8 / 12 / 16 / 20 (default card padding) / 24 / 32 / 40 / 56. Section rhythm: 40 / 64 / 96 — varied deliberately. Off-grid legacy values (10, 15, 18, 22) normalize to the grid on next touch.

**Shape:** `--r-0` 0 — the default; the brand is rectilinear. `--r-soft` 2px rare (tactical bars, chips). `--r-dot` 50% circles only. Borders: hairline 1px, signal edge 2px.

**Light:** glow specs are numbers, not vibes — `--glow-signal-sm` 0 0 6px cyan .60 · `--glow-signal` 0 0 12px 2px .45 · `--glow-signal-lg` 0 0 24px 6px .30 · `--glow-spark` 0 0 8px 2px .50 · `--glow-core` 0 0 16px 6px .55 · `--glow-copper` 0 0 10px 2px .35. Atmosphere blur 60px; fuse blur 1.5px.

**Alpha steps:** ghost .03 (surfaces) · line .08 · rest .12 (hidden-until-hover UI) · dim .36 · muted .58.

**Motion:** fast .3s (hover) · med .45s (reveals) · slow .9s (entrances) · breathe 2.4s · flame band 1.2–5.8s staggered · ambient 9s · ambient-slow 24s. Easings: brand ease-in-out (ambient, always alternate) · enter cubic-bezier(.22,1,.36,1) · hover ease.

**Layout:** breakpoints 640 (wide phone — critical) / 768 / 1024 / 1200, min-width. Z registry: atmo 1 · content 10 · nav 100 · overlay 1000.

**Charts:** trace 3px round caps · trace glow drop-shadow(0 0 8px cyan .25) · grid `--pd-line` · area fill .28→0 · bars 2px · nodes r3–4 · standard trend panel viewBox 760×170 with 3 gridlines.

**Telemetry:** `--blur-redact` 5px (cosmetic marker on server-redacted placeholders) · CRT scanlines 1px per 3px at alpha .14, breathe 7s · feed row entrance .3s.

## 6. Typography system

| Role | Font | Use |
|---|---|---|
| Display / hero / brand tech | Oxanium | H1, large numbers, product headers |
| Readable body / decks / cards | PP Neue Machina Plain | paragraphs, explanations, long copy |
| HUD / metadata / status | Departure Mono | nav labels, timestamps, telemetry, counters |
| Impact / editorial | PP Neue Machina Inktrap | rare manifesto lines only |

**License gate:** PP Neue Machina was uploaded as Free-for-Personal-Use. Do not publicly serve or redistribute PPNM webfonts until the commercial/web license is confirmed. Public pages fall back to Oxanium for the body role until the gate clears.

**Loading rules:** self-host WOFF2 only — no Google Fonts, Cloudflare, Adobe, Fontshare, or any font CDN. Load only what the page uses; preload at most two above-the-fold fonts with `crossorigin`; preload URL must exactly match `@font-face` src. `font-display: swap` for brand-critical display, `optional` only for genuinely cosmetic HUD. When actual brand HUD glyphs are required, use `swap` and verify rendered glyph usage; font loading alone is not proof.

**Font distribution:** the DSM package ships Oxanium and Departure Mono at `/dsm/assets/fonts/`. When building a new site, copy them to that site's own `/assets/fonts/` and reference locally — the starter snippet below assumes site-local paths:

```css
@font-face {
  font-family: 'Oxanium ProDyn';
  src: url('/assets/fonts/Oxanium-wght.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Departure Mono ProDyn';
  src: url('/assets/fonts/DepartureMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
```

## 7. Layout grammar

**Hero:** left-aligned or asymmetric; large type mass, quiet supporting deck; one atmosphere system in the negative space; thin operational nav and metadata.
**Panels:** faint surfaces, hairline borders, no heavy shadows; numbers, labels, status strips for operational content; density like an instrument panel, not a feature grid.
**Grids:** dense grids allowed when they read as inventory, telemetry, or capability maps. Never the icon-in-circle three-card SaaS pattern.
**Spacing:** generous section breathing (40/64/96, varied), compact cards, deliberate stable left gutters.

## 8. Motion registry (M1–M18) — the reviewed set

Agents select from this registry. Numeric specs are binding; legacy reference implementations ship in `/dsm/components/` and `/dsm/registry/`. Interaction extensions live in `/dsm/motion/`; their exact contracts are in [registry.json](motion/registry.json). Existing M1–M14 specimens remain unchanged.

- **M1 · Footer smoke stream** (css) — **DEFAULT FOOTER.** Exact prodyn.ai source implementation: `/dsm/assets/m1-footer-smoke-stream.css`; complete component: `/dsm/components/footer-smoke-stream.html`. Two blurred blue radial fields drift for 30s and 24s, alternating from +3vw to −18vw with a 1vh vertical shift and .98 terminal scale. Three 4px cyan particles cross right-to-left at 14s / 19s / 16s with 0s / 4s / 9s delays. Do not increase particle count, add another field, or substitute the retired canvas approximation. Generally include on polished pages unless motion would distract.
- **M2 · Telemetry scan** (css). Keyframes hold 0–16% top, travel, rest 55–100%; gradient band ≤12% alpha; one per panel maximum.
- **M3 · Particle drift** (css/canvas). Small cyan points appear/fade; CSS drift for marquee rails (translateX −50% − 11px loop); sizes 1.5–5px; alpha .2–.7.
- **M4 · Wave grid** (css/svg). Cyan points/lines as a low-frequency signal field; alpha ≤.15.
- **M5 · Isolinear memory layer** (css/svg). Behind-glass trace plates: front + reverse networks with registration offset, optional ghost grid; slow sparse light travel; low contrast; no franchise styling, labels, or bright neon. Full construction guidance: §14.
- **M6 · Plasma flame** (css). Component: `/dsm/components/plasma-flame.html`. Variants `layered` / `particles` / `full` via `data-variant`; **default full**. Blue-fire physics: white-hot core → spark sheath → signal body → deep-cyan skirt; flicker band 1.2–5.8s alternating; ships with the hidden 3-dot switcher (rest alpha .12, wake on hover, localStorage persistence); one scale knob `--flame-u`.
- **M7 · Starfield constellation** (canvas). Density W×H/18500 clamped 42–96; link distance <136px, link alpha (1−d/136)×.12; pointer repulsion r160 @ .18; speeds ±.22; edge wrap; DPR cap 2.
- **M8 · Login particle veil** (canvas) — **DEFAULT whole-page atmosphere.** Exact shared implementation: `/dsm/assets/m8-login-particle-veil.js` with `/dsm/assets/m8-login-particle-veil.css`. 80 rising particles vy −(.2+.4r); halo double-draw at 2× radius, .15 alpha; sine pulse .005–.015; links <150px @ .08, width .5. This is the unchanged `/ui` login background effect. Use it instead of decorative page grids.
- **M9 · Magnetic Confinement · Toroidal Plasmics** (canvas) — **LOCKED canonical motion reference.** Component: `/dsm/components/magnetic-confinement-toroidal-plasmics.html` (legacy alias `/dsm/components/toroidal-containment.html`). Use the exact camera-locked build from the prodyn.ai homepage: 14-coil ivory cage at 1.38r; 8 helical magnetic field lines and 170 plasma glints on θ = θ₀ + qφ at q 2.2; 12 poloidal sections; phosphor persistence via rgba(2,7,11,.30); perspective camera d=620; diagnostic scan walks φ every 14s; slow idle precession. No square/circle/orbit fallback. Reduced motion leaves a composed static frame.
- **M10 · Beam & grid substrate** (css) — **explicit-use legacy primitive.** Fixed conic beam (from 210° at 70% 12%, alpha .085, opacity .7); 76px grid alpha .023–.034 with vertical fade mask. Do not use as a default whole-page background. It is reserved for a deliberate technical/diagnostic composition where a grid carries meaning.
- **M11 · Live data stream + visual redaction** (js/css). Mono feed rows: time (`--pd-trace`) · state tag · message; entrance .3s enter-ease translateY(8px); newest row ivory, history dims; top fade mask; ≤40 rows in DOM. Redacted spans: `filter: blur(var(--blur-redact))` + `user-select:none` on placeholder text only — see rule 7.
- **M12 · CRT phosphor overlay** (css). Scanlines 1px per 3px at alpha .14; vignette to rgba(2,7,11,.42); slow 7s alternate breathe (never strobe); phosphor text = signal color with 6px/18px double glow. Console/telemetry surfaces only — never marketing pages.
- **M13 · 3D memory manifold** (webgl) — **gated heavy option.** Three.js topology renders require explicit approval per page, lazy-load, canvas containment, and a mandatory static fallback image. Not part of the default kit.
- **M14 · Holographic asset drift** (css) — **source-derived.** Exact prodyn.ai current-focus asset treatment: 7s ease-in-out alternate translateY 0→−9px; cyan `drop-shadow(0 0 22px rgba(48,176,208,.35))`; grounded by a 56% × 18px cyan radial ellipse blurred 5px. Use for one meaningful transparent/cutout asset, never a decorative card grid. Component: `/dsm/components/holographic-asset-drift.html`.

### 8.1 Interaction add-on — M15–M18

The [visual field guide](motion/index.html) is a Learn surface: still while reading, explicit replay for comparison. These four primitives are additive, not replacements for M1–M14.

| ID | Approved behavior | Clock / baseline | Reduced/static result |
|---|---|---|---|
| **M15 · Signal acquisition** | One normalized state drives a finite SVG trace and acquisition indication. | `--t-slow`, `--ease-enter`; no autonomous replay. | Complete semantic result immediately; reset invalidates old completion. |
| **M16 · Spatial continuity** | Stable DOM items move from previous to new geometry after semantic reorder. | `--t-med`, `--ease-enter`; one transform owner. | New DOM order immediately, same focused node. |
| **M17 · Kinetic typography** | Short meaningful copy gains controlled emphasis; original text stays accessible. | `--t-slow`, `--ease-enter`; actual Oxanium weight axis only. | Complete final text, no transient copies or delayed reading. |
| **M18 · Aperture transit** | One bounded input controls a reveal aperture and related marker. | Direct input mapping; no background loop. | Static geometry and semantic output agree; decorative filters absent. |

All are illustrated, not production telemetry. Bind any claimed production progress to real state. Reuse the contracts, not just a GIF: [patterns](motion/patterns.md), [engine selection](motion/engines.md), [authoring](motion/authoring.md), [verification](motion/verification.md). Heavy graphics and editor toolchains remain optional. A documented runtime capability is not a bundled vendor dependency or tested editor entitlement.

Native tokens' near-zero reduced-duration fallback is not sufficient lifecycle control. Each new component must cancel its own JS work and explicitly compose the stable state; its local reduced CSS removes decorative animation/transition rather than merely shortening it. Don't globally change existing primitives to make a new specimen pass.

## 9. Data display standards (D1–D10)

- **D1 · Trend panel** (svg). viewBox 760×170, 3 gridlines `--pd-line`, trace 3px round caps + glow, area gradient .28→0; primary `--pd-trace`, secondary `--pd-ok`; inline SVG only.
- **D2 · Capability lane** (css). Square card; bottom bar 2px wide as var(--w), gradient signal→ok, 18px glow at .45; value in `--pd-trace` display type.
- **D3 · State chips** (css). Mono 10px, ls .13em, radius `--r-soft`; neutral / ok / warn / alert; border tint .32–.34 of state color.
- **D4 · Stat tile** (css). Mono micro label + display numeral; square, hairline border, field rgba(2,7,11,.36–.42); grids of 2 or 4.
- **D5 · Signal field** (svg). Gradient-stroked bezier curves (0→.60→0 cyan/ok stops, 2px); faint 1px polyline net at .14; node dots r3–4 @ .48; closing-section atmosphere.
- **D6 · Status dot** (css). 6–7px `--r-dot`; state color + `--glow-signal-sm`; pulse 2s ease-in-out opacity 1→.4; pair with mono label.
- **D7 · Mission clock** (js). Format `T-YYYY.DDD // HH:MM:SS` (day-of-year); mono, dim ivory, ls .1em; 1s updates; header top-right slot.
- **D8 · System status badge** (css). D3 chip variant with pulsing 6px dot; one system-level badge per header.
- **D9 · Metric rail block** (css). Sidebar compact D2: mono label + 4px bar; fill gradient deep→signal (copper pair for warm states); 12px glow; label inherits state color when warm.
- **D10 · Cockpit grid** (css). Full-viewport instrument layout: columns 280px rail / 1fr; rows 60px header / 1fr stage / 350px stream; gap 24px; 2px cyan-deep header rule; single column below 768.

## 10. Telemetry side toolkit & A1 pipeline

The telemetry set (M11–M13, D7–D10) is an approved **side toolkit**: prebuilt, fully tokenized surfaces used when a page earns real live data — not default page furniture.

**A1 · Zero-I/O telemetry pipeline (architecture standard):** agent buffers telemetry in RAM (zero disk writes) → volatile Redis (alpine, localhost-bound, `--save "" --appendonly no`) → PHP TelemetryTranslator applies deterministic hashes and static dictionary maps — irreversible; no raw paths, IPs, or keys ever leave the server → frontend polls the translated feed. Fits the standard stack (PHP/MySQL/Redis) with no Node at the edge.

**Redaction rule (binding):** redaction happens server-side in the translator. The browser only ever receives safe placeholders; `--blur-redact` marks them visually. Blur is costume, never containment.

## 11. Iconography

Phosphor Icons, naked, only when useful. Inline/local SVG from `@phosphor-icons/core` on static/PHP pages; tree-shaken `@phosphor-icons/react` on React surfaces. Regular weight default; Bold for active/alert; Duotone rare. No icon circles, badges, boxes, shields; no icon wallpaper.

## 12. Component standards

**Buttons:** outlined cyan rectangle or restrained solid cyan primary; quiet ivory outline or text link secondary; square corners; no gradients, no pill candy.
**Cards:** faint surface, thin border, optional mono label and numeric marker; no heavy shadow; no decorative left border except the 2px tactical signal in numbered inventory blocks.
**Navigation:** small uppercase mono/HUD labels; low contrast until hover/active; minimal chrome.
**Data/telemetry:** Departure Mono for timestamps, counts, statuses; cyan for live/selected; ivory for value mass; explanatory prose secondary.
**Forms** (from the reference login): inputs on rgba(48,176,208,.06) field with .2 cyan border, square corners, focus = signal border + 12px glow .15; labels mono 10px ls .1em; submit = outlined cyan, hover fills signal with field-color text.

## 13. Motion and atmosphere principles

Motion communicates system state and must still look good as a screenshot. Ambient loops are seamless: alternating/breathing transforms, fade-to-zero resets, or phase-staggered layers — no one-way loops that visibly snap. Everything respects `prefers-reduced-motion` and freezes composed.

## 14. Optional primitive: isolinear features

Restrained operational-glass motif for memory, continuity, signal routing, machine state. Translucent rectilinear plates with subtle internal trace geometry; layered depth from front-face and reverse-face trace offsets (never perfectly mirrored); faint glass edges and quiet specular response; always abstract and unlabeled. Build with at least two trace passes plus optional ghost grid; vary line weight subtly; sparse pads, junctions, lane breaks, stepped orthogonal branches. Depth via transparency, blur separation, faint reflection, quiet parallax. Motion, if any: slow sparse light through small trace segments, long idle states. Allowed: hero negative space, dark panel layers, console modules, very-low-contrast backgrounds, drifting depth objects. Disallowed: franchise names or copied silhouettes, faux LCARS, bright neon, busy wallpaper, center-stage props, cute holograms, glossy collectible renders. Test: "transparent technical memory material behind the interface" = keep; "cool sci-fi decoration" = reduce.

## 15. Anti-patterns

Never default to: purple/blue SaaS gradient hero; three-card icon-circle feature grid; logo in a container; shields/crests unless requested; AI brain / robot head / neural globe; glowing blobs everywhere; wavy SVG dividers; Roboto/Montserrat/Poppins as primary; bright cyberpunk overload; identical section heights and padding; visible meta-disclaimer scaffolding; rounded corners on cards/buttons/inputs; font CDNs; chart libraries; invented motion outside the registry; project codenames in public artifacts.

## 16. Implementation posture

Default delivery: (1) HTML5, CSS, minimal vanilla JavaScript; (2) PHP for data-backed pages; (3) MySQL or Redis when persistence/cache is needed; (4) Node only when the runtime need is real; (5) choose React/GSAP/vector/graphics/physics engines only for a justified implementation requirement, using the [motion engine guide](motion/engines.md); they are not the default stack or automatic permission for a new visual primitive. Performance: small font preloads, no external render-blocking resources, lazy images with dimensions, reduced-motion respected, intentional static screenshots.

## 17. Package contents (/dsm/)

```
/dsm/
├── index.html                              public style guide
├── prodyn-threadline-design-system.md      this document (canonical for agents)
├── prodyn-threadline-design-system.pdf     print document
├── tokens.css                              CANONICAL token source
├── tokens.json                             machine-readable mirror and extension routing
├── motion/                                 M15–M18 field guide, contracts, chapters and PDF
├── assets/
│   ├── m8-login-particle-veil.css          default page-atmosphere placement
│   ├── m8-login-particle-veil.js           exact shared M8 implementation
│   ├── m1-footer-smoke-stream.css           exact prodyn.ai M1 footer motion
│   ├── m14-holographic-asset-drift.css      exact prodyn.ai M14 asset motion
│   └── fonts/                              Oxanium-wght.woff2 · DepartureMono-Regular.woff2
├── components/
│   ├── footer-smoke-stream.html                     M1 canonical prodyn.ai footer
│   ├── particle-drift.html                          M3 specimen
│   ├── wave-grid.html                               M4 specimen
│   ├── isolinear-memory-layer.html                  M5 specimen
│   ├── plasma-flame.html                            M6 full reference
│   ├── plasma-flame-specimen.html                   M6 compact specimen
│   ├── starfield-constellation.html                 M7 specimen
│   ├── login-particle-veil.html                     M8 specimen
│   ├── magnetic-confinement-toroidal-plasmics.html M9 canonical prodyn.ai implementation
│   ├── beam-grid-substrate.html                     M10 specimen
│   ├── memory-manifold-fallback.html                M13 required static fallback
│   ├── holographic-asset-drift.html                 M14 canonical prodyn.ai implementation
│   └── toroidal-containment.html                    M9 legacy URL alias
└── registry/
    ├── motion.html                         M1–M14 + D1–D6 visual registry
    └── telemetry.html                      M11–M13 + D7–D10 + A1 (side toolkit)
```

Registry pages retain their review-trail annotations deliberately — they are decision provenance.

## 18. Agent build checklist

Before publishing a ProDyn/Threadline web artifact:

- [ ] `tokens.css` linked or inlined; zero raw values in page styles.
- [ ] Actual logo asset used naked.
- [ ] Colors: dark field, ivory mass, sparse cyan signal; copper and state colors ≤5% presence.
- [ ] Corners square; radii only from tokens.
- [ ] Typography roles deliberate; no font CDNs; PPNM license gate respected.
- [ ] All motion from registry M1–M18; visible specimen exists; ambient loops breathe; reduced-motion composed. Mechanism selection does not authorize a new effect.
- [ ] Whole-page atmosphere uses shared M8, or a deliberate reading/comparison exception is recorded; no decorative page grid remains.
- [ ] Charts inline SVG/canvas per D-standards.
- [ ] Live-data surfaces use the A1 pipeline; redaction server-side.
- [ ] Breakpoints 640/768/1024/1200 only; wide-phone explicitly tested.
- [ ] Exact M1 footer included where it naturally fits: 2 smoke fields, 3 signal particles, canonical timing.
- [ ] No project codenames, internal paths, keys, or implementation metadata exposed.
- [ ] Page verifies HTTP 200 and a browser visual check.
- [ ] Actual display/HUD glyphs render; no-JS meaning, interruption, keyboard focus and runtime reduced preference are verified.
- [ ] Owned async work has reset/destroy handling; persisted Back is not terminal destruction and never restarts sound.
- [ ] For M15–M18, apply the [motion verification gates](motion/verification.md) and preserve the distinction between lab evidence, repository proof and project acceptance.


## Document header lockup

Approved 2026-09-05. A single transparent image for the top of documents, not a linked website masthead. The original cyan flame sits beside the exact wordmark **ProDyn.ai**, rendered in **Oxanium SemiBold (600)**, blue **#227FAE**. No hyperlink, font dependency, border, or background.

Display at 64px high. The image is rendered at 4× resolution (1240×256); wordmark font size is 54px at display scale, reduced from 56px. The flame remains 52px high with a 10px gap; both are vertically centered. Preserve the original flame and its transparency.

```html
<img src="https://agent.prodyn.ai/assets/brand/prodyn-ai-document-header.png?v=2" alt="ProDyn.ai" style="height:64px;width:auto;margin-right:32px"/>
```

- Specimen: [Document header](/dsm/components/document-header.html).
- PNG: `/dsm/assets/prodyn-ai-document-header.png`
- Outlined SVG: `/dsm/assets/prodyn-ai-document-header.svg`
- Regenerate from the repository root: `python3 scripts/render_document_header.py --output /tmp/prodyn-document-header` (Pillow, fontTools, Brotli). Oxanium remains OFL-licensed; no font installation is required to use the final assets.

The no-link rule applies to this document insert. Website mastheads retain the brand-home link convention.