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
Iosevka for anything authored or read. Departure Mono for anything displayed as a readout. The seam between them is where the mil-spec register lives.
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.