git:20261010.c246af9 to git:20261011.ac7f684

22 added, 48 removed. Audit A to A.

- # Art Director — public presentation

+ # Art Director — public design direction

## Purpose

- Help an art director recognise the value in five seconds, inspect an example, and open the working project flow. Lead with the judgement they already have: “Why does this one look right?”

- The repository is a portable Skill, not an image generator. Keep the director-led path prominent: material → spec → exemplar → project package → member task → review.

- ## Reference and adaptation

- Reviewed [FDE](https://fde.aielsen.com/zh/), [Refero](https://styles.refero.design), [Motion Sites](https://motionsites.org), and [React Bits Tilted Card](https://reactbits.dev/components/tilted-card) on 2026-10-10. FDE uses white, navy `#001F3F`, teal `#007D86`, and a variable Field Sans face whose metadata identifies Noto Sans SC. Use our own OFL-licensed Noto Sans SC subset, with restrained text weights and the same palette; no FDE font file or brand asset is redistributed.

+ Make the use of the Skill clear: establish original art direction, package confirmed rules, and create consistent deliveries in the user’s own agent. English is the default; a complete Chinese introduction uses the same visual system. The fixed claim is **One team, one visual memory.** / **一个团队/项目，一份视觉记忆。**

- The new spatial presentation adapts the references' depth, perspective and continuous movement using original code and original candidate artwork. No React Bits implementation is copied or imported. Reference screenshots supplied by the user inform typography placement only: do not reproduce their people, brands or imagery.

+ ## Design foundation

- The central hook is “一个团队，一份视觉记忆。” / “One team, one visual memory.” The director keeps responsibility for professional judgement; the Skill turns it into a shared project version that can guide every delivery. Type is part of the poster: a light first line, a heavy teal second line, a slight skew and rotation, and deliberate overlap with the artwork. Keep the supporting copy upright and readable. A larger headline alone is insufficient: type and image must share the same composition.

+ The established reference study covered FDE, Refero, Motion Sites and React Bits on 2026-10-10. The resulting navy, teal, mint and paper palette, expressive headline and layered original artwork are retained. Use the repository’s OFL Noto Sans SC variable face; no proprietary reference-site fonts or brand assets are redistributed. User reference screenshots inform layout, not imagery reuse.

- The detailed cross-surface grammar now lives in [`references/public-presentation.md`](../references/public-presentation.md). The product cover, editorial explanation, director console, member brief, production wall and engineering blueprint share tokens and a visual-memory metaphor while deliberately using different compositions.

+ The current canonical rules live in [public presentation](../references/public-presentation.md). The English and Chinese introduction pages are language editions of one product entrance. Former console and spatial-demo URLs redirect there.

- ## Tokens

+ ## Visual tokens

| Role | Value |

|---|---|

- | Canvas | `#ffffff` |

- | Surface | `#ffffff` |

- | Ink | `#001f3f` |

- | Secondary text | `#526978` |

- | Divider | `#dce7ec` |

- | Action / emphasis | `#007d86` |

- | Quiet highlight | `#e5f2f1` |

- | Dark section | `#001f3f` |

- | Type | Self-hosted variable Noto Sans SC first; system sans-serif fallback |

- | Content width | 1240 px including gutters |

- | Desktop / mobile gutter | 42 / 22 px |

- | Section spacing | 64–96 px desktop; 42–58 px mobile |

- | Image / panel radius | 16–18 px |

- | Input / thumbnail radius | 8–10 px |

- | Primary action radius | 50 px |

+ | Dark canvas | `#001f3f` |

+ | Action and emphasis | `#007d86` |

+ | Highlight | `#92e4da` |

+ | Reading surface | `#f5f9fb` |

+ | Body ink / secondary | `#123344` / `#54717d` |

+ | Divider | `#c8d7dc` |

+ | Type | Self-hosted OFL Noto Sans SC variable subset |

+ | Content width | 1160 px maximum, with responsive gutters |

+ | Reading rhythm | 17 px body, 1.75 line height; smaller supporting notes |

## Composition

- - One headline, one main action and one visual per first screen. Put installation within reach.

- - Use 37–56 px headings on desktop and 30–42 px on phones; 15–16 px body, 1.8–1.95 line height. Workbench data labels may be smaller, but readable body text is at least 12 px.

- - Let original artwork supply the colour. Keep UI surfaces quiet. Reserve a dark band for the three-step handoff story.

- - Use flat sections and fine dividers. Avoid surrounding every paragraph with a box.

- - Use 460–500 weight for section headings, 380 for the poster lead, and 820 for its hook. Chinese and English share the same hierarchy, with line lengths checked separately.

- - GitHub controls its own typography and sanitises CSS. Express hierarchy there through concise Markdown, spacing and rendered media; do not promise a custom font for GitHub's native text.

- - Self-host an OFL-licensed Noto Sans SC subset as the primary web font, with `font-display: swap`. Keep the license beside it and rebuild after changing visible Chinese copy. No external font request is needed.

+ Keep one headline, one principal action and one original-art surface in the opening. A light lead and heavy mint hook overlap imagery with a slight skew and rotation; body text remains upright. Allow English and Chinese different line lengths instead of shrinking all type to fit a shared box.

- ## Motion and loading

+ Use flat editorial sections, generous space and fine dividers. Keep install and agent prompts easy to copy. Use the final dark section for the four-role diagram, with a vertical equivalent on phones. Match the companion repositories’ map and include concrete handoffs plus feedback. Native GitHub text follows GitHub’s fonts; custom typography belongs in rendered media.

- - GitHub: one six-second spatial GIF at 800 px / 20 fps, using a complete periodic orbit and a stable hook. Budget: 4 MiB per language. A static poster is supplied for reduced motion. Legacy 12-second GIFs are not published alongside it.

- - Web: H.264 MP4 at 30 fps with `faststart`; same-origin files, not Release redirect URLs. Full film budget: 10 MiB per language. Preview budget: 1 MiB.

- - Full film and focused videos use `preload="none"`, posters, controls and inline playback. Only one video plays at a time.

- - Autoplay only the muted short preview while visible. Pause out of view or when the page is hidden. Respect reduced motion and Save-Data. A manual play/pause action remains available.

- - Rendered motion is driven by Remotion frames. The new 18-second film uses continuous perspective movement, three depth planes, light, a background production wall, and a foreground project file. The six-second orbit closes exactly; captions stay constant in that preview. No page-cut deck transitions. Budget: 5 MiB for the 1280 × 720 / 30 fps film.

- - The live web stage uses transform animations over three compressed WebP boards, with subtle pointer tilt. Pause controls, reduced motion, Save-Data, visibility and offscreen guards apply. No canvas framework or copied component dependency is required.

- - The public introduction is the 18-second spatial film. Retired 70-second media and its four focused clips are removed from the public asset set so every entry point presents one visual memory.

- - Add a version query when replacing published media so cached previews cannot appear beside newer copy.

- - On Windows, local YaHei subsets can be prepared for rendering under ignored `motion/public/render-fonts/`. Never commit or redistribute proprietary font files. Rendered pixels are the published output.

+ ## Motion and accessibility

- ## Claims and examples

+ Both languages use the same complete 24-second story. The GIF is 800 px / 20 FPS during motion, under 6 MiB; the 1280 × 720 MP4 is 30 FPS, faststart and under 5 MiB. Stable reading holds make each function understandable. Chapter stops select completed scenes, not transition frames. See [motion rebuild instructions](../motion/README.md).

- Public project packs are original candidate demonstrations. An illustrated UI comparison is explicitly a manually constructed explanation, not a measured AI generation experiment. Keep tool tests distinct from visual approval and team productivity. Publish a real showcase only with consent and inspectable evidence; don't invent reduced rework counts or tested platform support.

+ The website uses manual video playback, `preload="none"`, native controls, optional captions and a transcript. Preserve focus styles, reduced motion, semantic headings, language metadata and a non-image equivalent of the mobile role diagram. Check both language layouts rather than assuming translation fits.

- ## Review before publishing

+ ## Evidence

- Inspect representative Chinese and English frames; check line wraps after every font or copy change. Check desktop and mobile layout, keyboard controls, reduced motion, local links and video playback. Record byte sizes and frame rates from the generated files, and keep a checksum manifest for the shipped media.

+ Public packs are fictional runnable drafts and original candidate demonstrations. The movie illustrates the workflow; it does not prove completed AI production or director approval. Tool validation and visual acceptance remain separate. Do not invent measured rework savings, commercial results or automatic multi-Skill orchestration.