Alloy · UX mockup
1. Ramp
Ten L-stops at hue 80, chroma 0.012. Dark mode preserves H/C and inverts polarity while keeping elevation ordering (raised reads lighter than base in both modes).
Active mode
Accents — same both modes
2. Typography — two fonts, two roles
Quasi Mono for anything authored or read. Departure Mono for anything displayed as a readout. The seam between them is where the mil-spec register lives.
The two faces are not interchangeable and the split is not taste. Quasi Mono is the house face the image installs and the only one fontconfig routes the generic monospace family to, and it covers every codepoint Alloy's surfaces emit. Departure is the brand mark, deliberately absent from the image, and it is short five of those eighteen — four of them starship and helix prompt furniture. So a surface that runs gets Quasi Mono; Departure is for headers, plates and readouts, which is exactly what this page shows it doing.
3. Control states
Every interactive surface defines five states. Hover steps toward the eye (lighter in both modes). Pressed steps away. Focus is border-strong at 2px, never an accent color.
4. Form elements
Inputs sit on surface-sunken — recessed, signaling editability. Switches use ramp-only color; the "on" state shifts to border-strong, not an accent.
5. Status readouts — Departure in its role
The display font earning its rent. Tabular numerics, fixed weight, UPPERCASE labels with tracking. This is what makes Alloy look like an instrument rather than a productivity app.
6. Hero iconography — relay station theme
Placeholders, drawn in inline SVG to demonstrate the style rules from ICONOGRAPHY.md. True isometric, 1.5px line on border-strong, mandatory hatching, no fills. Real illustrations get drawn for v1.
7. Authored app icons — dock
Each marquee Alloy app gets a piece of facility equipment as its identity. Drawn against the chrome ramp, no color.
8. Composed window — settings panel
Putting everything together. A typical chrome surface: titlebar, sidebar navigation, panel header with hero illustration, settings rows with the working-font/display-font split.