SSPACEAGEDOCUMENTATION/
Product and Design

SpaceAge UI Professionalism Report

Updated Aug 27, 2026   |   15.9 KB   |   docs/UI_Professionalism_Report.md

SpaceAge UI Professionalism Report

Updated: 2026-08-10

Executive Assessment

SpaceAge already has a recognizable commercial identity: black depth, midnight-blue data and note-input controls, ember-orange transport and action states, warm text, quiet clip fills, and restrained autumn Section markers. The main visual weakness was not the palette. It was inconsistent control anatomy and interaction feedback between workstations.

The most effective path is to keep the current identity and make hierarchy, spacing, and state behavior systematic. Professional polish should come from legibility and predictable interaction rather than extra decoration.

Implemented In This Pass

Shared Control Language

  • Buttons now have a persistent one-pixel edge, a restrained top-edge highlight, clearer hover treatment, a distinct pressed inset, and a selected-state edge.
  • Combo boxes now read immediately as selectors through a persistent edge, a dedicated arrow well, a separator line, and disabled/pressed/hover treatment.
  • Toggle buttons now use a SpaceAge-native rounded checkbox, midnight-blue selected fill, warm check mark, readable Inter text, disabled treatment, and keyboard-focus indication.
  • Popup menus now use the same midnight surface, border color, blue selection state, and text hierarchy as the rest of the application.
  • Tooltips and callouts now use the same raised dark surface and restrained one-pixel border.

Effects Rack Interaction

Effects cards now:

  • publish a customer-facing accessibility title and description;
  • accept keyboard focus;
  • open with Enter or Space;
  • activate on click release instead of firing on mouse-down;
  • show consistent hover, focus, and pressed feedback.

This makes the Effects rack feel like part of the application instead of a painted collection of rectangles.

Visual System Direction

  1. Blue remains the language of data, selection, metering, note input, and keyboard focus.
  2. Orange remains the language of transport, important action, modulation, and editing emphasis.
  3. Brown remains reserved for consequential and destructive operations.
  4. Borders remain one pixel. Corners remain restrained at approximately four to five pixels.
  5. Text hierarchy should be achieved through role and weight before shrinking customer-facing labels.
  6. Motion must remain tied to real transport or signal state. Decorative animation must never imply timing or activity that is not real.

Responsive Workstations

The Piano Roll and Arranger now respond deliberately instead of compressing controls:

  • Full-size windows preserve the familiar one-row control order.
  • Compact Piano Roll windows keep transport and pattern context on row one, musical and editing context on row two, and chord/zoom controls on row three.
  • Compact Arranger windows keep transport, zoom, overview, and lane identity on row one; snapping, cutting, automation, rendering, and form controls move together to row two.
  • Transport controls retain their horizontal positions between supported viewport sizes.
  • Hidden Drum Composer actions no longer reserve Piano Roll toolbar width.

The Synth Engine header now preserves the editing surface at compact sizes. Full-size windows retain complete action labels. Compact windows use RESET PAGE, COPY, PASTE, and CLOSE, while detailed tooltips retain their complete meanings. This avoided the control-size regression caused by a taller two-row header.

Highest-Value Next Visual Work

Synth Engine Navigation - Implemented

The engine selector is now the sole authority for choosing the active engine. The crowded engine-name tab strip is private and visually hidden; the public secondary row contains ENGINE, LAYERS, ONE-SHOTS, NOISE / TRANSIENT, ENVELOPE / FILTER, VOICE SHAPING, MOD / CHOKE, and ACCENT.

Exactly one destination is selected at a time. A separate used-state treatment shows where the current Instrument contains work. All customer entry points use the same routing helper, and the regression suite pins all 15 engine-to-page mappings so a future engine cannot silently open the wrong editor.

Mixer Detail Navigation - Implemented

Every channel strip now presents SND, DYN, and EQ as readable 24-pixel destinations in one visual family. Each destination has distinct accessibility metadata and opens its existing Send, Dynamics, or EQ page without changing audio ownership. BACK closes the detail page, and keyboard focus follows the same open/return path. The Mixer layout contract now exercises the real callbacks across all 16 strips at both supported viewport sizes.

Settings Grouping - Implemented

The root is now named SPACEAGE SETTINGS and separates its existing switches into DISPLAY / EDITING and PLAYBACK / RECORDING cards. No persisted setting or callback changed. The root also has an explicit keyboard traversal order that follows the visible page, while MIDI Preflight and its deeper destinations remain below as a distinct diagnostic and routing area. The MIDI doorways now continue that hierarchy as four equal task rows: SETUP / ROUTING, PERFORMANCE / DATA, DIAGNOSTICS, and ADVANCED / HELP. Every doorway has readable help, an accessible name, and focus order matching its visible position.

Library Grouping - Implemented

The Library retains the centered Save hero and now identifies PROJECT / PRESET FILES, PAD BANKS / MIDI PACKAGES, PROJECT RECOVERY, and STARTING POINTS as separate action bands. The preset and recovery selectors have customer-facing accessibility names, and keyboard traversal follows the visible Save-to-starting-points flow. The responsive geometry contract protects all four headings at both supported viewport sizes. Empty preset and recovery inventories now disable impossible actions, healthy asset state disables Repair, and permanent recovery deletion uses destructive styling plus explicit confirmation.

Human Review Flags

These items require screenshot review rather than relying only on geometry tests:

  • arrow-well proportions in unusually narrow combo boxes;
  • checkbox text alignment in dense Settings and MIDI rows;
  • hover and focus appearance of Effects cards;
  • text contrast over the Effects and Library starfields;
  • Inter Variable metrics at Windows scaling values of 100%, 125%, and 150%;
  • compact toolbar label fit and rhythm at both 1800x1000 and 1100x800.

Verification

The visual changes compiled successfully and passed:

  • PRIMARY_UI_VISUAL_STATE
  • EFFECTS_DETAIL_LAYOUT: 312 controls
  • SETTINGS_ROOT_LAYOUT: 40 controls
  • AUTOMATION_EDITOR_LAYOUT: 29 controls
  • MIXER_LAYOUT: 2306 controls
  • SYNTH_CONTROL_QUALITY: 712 controls, 712 accessible controls, zero undersized controls
  • ARRANGEMENT_RECORDING_VISUAL_STATE at both supported viewports
  • ARRANGEMENT_OVERVIEW_LAYOUT

No customer build was packaged in this pass.

Arranger Inspector And MIDI Import Dialogs - Implemented

The Arranger inspector now composes itself across wide, medium, and narrow layouts instead of shrinking controls out of existence. The Notes pane consumes horizontal space only when it is actually open; hidden note controls have no residual geometry. Tests exercise both Notes states at 1800x1000 and 1100x800 and require every inspector target to remain contained, non-overlapping, and at least 44 by 24 pixels.

MIDI import receipt and review dialogs now reserve their action rows from the bottom before laying out flexible report text. This keeps COPY, OK, IMPORT, INSPECT, SPLIT, and CANCEL reachable. The optional split action explicitly loses its bounds when unavailable, preventing a stale invisible target.

Highest-Value Remaining Popup Work

Create one shared popup-host contract for Escape dismissal, click-away dismissal where appropriate, focus return to the invoking control, and accessibility metadata for controls created from runtime MIDI data. The Arrangement lane command/routing overlays and MIDI export focus order are the first concrete audit targets.

Arrangement Lane Popup Contract - Implemented

Arrangement lane command and MIDI routing overlays now close on Escape before the Arranger clears clip selection. Clicking the Arrangement canvas outside an overlay also closes it, while clicks inside remain available to the overlay controls. Closing returns keyboard focus to the canvas. Dynamic routing controls publish meaningful accessible names and traverse in the same order as the visible form.

MIDI Export now traverses left to right in its visible action order: COPY REPORT, export file, export stems, then CANCEL. The primary UI regression gate instantiates and verifies this focus contract and exercises both lane-overlay exit paths.

Dynamic Popup Choices - Implemented

The Piano Roll grid-color palette no longer exposes sixteen anonymous controls. Each swatch now has a plain-language color name, ordinal, current-selection announcement, tooltip/help text, keyboard focus, and row-major traversal order.

The MIDI stem-package inspector now publishes panel and report semantics and traverses its actions deliberately: IMPORT STEMS, COPY REPORT, COPY REPAIR STEPS, RECHECK, REVEAL PACKAGE, then CLOSE. Existing confirmation, progress, cancellation, and dismissal-safety behavior is unchanged. The neighboring MIDI closeout sweep also found and fixed a responsive synth-header label regression: lane-owned instruments no longer become visually mislabeled as pad settings after layout. The complete closeout gate now passes with laneOwnedDrawer=1.

Pad Vault, Fuse Patterns, and Pick Favorites now identify their purpose and cancellation behavior for accessibility. Runtime choices and action controls have consequence-focused names, keyboard focus, and contiguous traversal matching the visible order. JUCE's modal host remains responsible for Escape cancellation, while click-away remains disabled for these staged decisions. The primary UI regression contract constructs all three panels and reports selectionDialogs=1; Library layout and Arranger editing remain green.

Loop Processor Callout - Implemented

The Loop Processor no longer creates an audible FADE OUT parameter without giving it screen space. Its final column now contains Width, Fade In, Fade Out, and Curve as four deliberate rows, while the callout grows vertically instead of shrinking controls. All thirteen controls publish names, explanations, keyboard focus, and contiguous order; Escape and click-away both leave through the established callout lifecycle. PRIMARY_UI_VISUAL_STATE reports loopProcessor=1, and realtime loop publication remains lock-free. Human screenshot review remains required at 100%, 125%, and 150% Windows scaling.

Startup And Persistent Overlay Contract - Implemented

The welcome artwork is now presented inside a centered 16:9 card while a full-editor shield prevents clicks and shortcuts from leaking into the workspace. Continue has explicit keyboard focus and accessible meaning.

Startup choices traverse in visible recovery-first order, loading disables every competing decision, and progress remains honestly indeterminate until the operation completes. Escape cannot silently abandon this required choice. About now focuses its Close control, closes on Escape, and restores focus to the About button. The startup regression gate verifies geometry, metadata, focus order, modal key shielding, and full-surface splash ownership at both supported viewport sizes.

Persistent Header And Navigation - Implemented (2026-08-10)

  • The application header now reflows into two rows below 1580 px instead of shrinking controls into collisions.
  • Global navigation actions reserve their space before page tabs are distributed.
  • All persistent controls retain tested minimum target sizes at 1800x1000 and 1100x800.
  • Keyboard focus follows the visible left-to-right hierarchy.
  • The compact Library layout was adjusted to preserve at least 48 px of bottom breathing room after the header gained a second row.
  • Responsive follow-through corrected SoundFont, Propulsion 1, Liftoff, Moonshadow, and Mod/Choke layouts at 1100x800.
  • Native synth verification now covers 710 visible parameter controls with zero containment or target-size failures.

MIDI Health Command Deck - Implemented (2026-08-10)

  • Replaced the ten-button, single-row ribbon with a five-column, two-row command deck.
  • Increased practical label width from an 80-pixel compact minimum to at least 160 pixels.
  • Reduced the panel's natural width to fit the supported 1100-pixel display without horizontal scrolling; the deliberately deep report remains vertically scrollable.
  • Keyboard focus follows the visible two-row order.
  • Existing health checks, QA receipts, proof copy actions, launch guidance, routing boundaries, and external-MIDI safety semantics are unchanged.

MIDI Hardware Setup Command Deck - Implemented (2026-08-10)

  • Replaced the ten-command single-row Setup Guide ribbon with a five-column, two-row task deck.
  • Preserved at least 160 pixels per command in the compact regression contract.
  • Reduced the panel's natural width to 1016 pixels so the supported 1100-pixel display does not require horizontal scrolling.
  • Preserved vertical scrolling for the deeper scenario, template, evidence, and safety content.
  • Made keyboard focus follow the visible command rows before entering template controls.
  • Kept every navigation, copy, draft, test-note, and hardware-safety callback unchanged.

Persistent Header Convergence - Implemented (2026-08-10)

  • Removed the misleading ABOUT PAGE wording from the product identity.
  • Made primary navigation typography responsive while preserving a readable compact-size floor.
  • Expanded and left-aligned the status receipt area; complete receipts remain available through tooltip and accessibility text when visual fitting is necessary.
  • Made the live chord readout expose its complete current spelling and key-aware description.
  • Restricted MIN and MAX/RESTORE controls to the standalone application; hosted plug-in instances no longer expose controls that cannot truthfully operate their host window.
  • Preserved the established header height so sequencer and editor workspaces retain their usable vertical area.
  • Corrected the compact-layout breakpoint to use the actual editor width.
  • Automated visual-state, Settings, MIDI Health, and full MIDI closeout gates pass.

Identity, Context, And Decorative Layering - Implemented (2026-08-10)

  • Long project names now use deliberate fitted rendering and preserve the complete project identity in tooltip and accessibility metadata.
  • The sequencer editing receipt now expands into available toolbar space instead of remaining fixed at 104 pixels.
  • Full clip identity, loop-bank ranges, and Step Input state remain recoverable through tooltip, description, and help text.
  • The editing receipt remains non-focusable, preserving the interactive toolbar's keyboard order.
  • Effects card outlines, hover/focus fill, borders, and EDIT cues now always paint above the animated starfield.
  • Starfield brightness and animation were intentionally preserved; the correction is hierarchy, not visual removal.
  • Focused visual, Effects, Library, Settings, and complete MIDI closeout gates pass.

Instrument Choice And Compact State Receipts - Implemented (2026-08-10)

  • Add Lane and lane reassignment now draw from the same authoritative tonal Instrument list.
  • SoundFont and Quasar are no longer mentioned-but-unavailable; they appear in a separate Load Your Source After Adding group.
  • Creating either source-backed Instrument produces a precise next-step status receipt.
  • Classic Synth preserves a readable patch receipt at 1100x800 by using a compact second row; wide layout remains unchanged.
  • Patch tooltips and accessibility metadata expose the complete name, engine, saved/modified state, and active-Instrument context.
  • Mixer dB receipts now receive enough horizontal space for their painted values without moving faders, M/S, outputs, detail controls, or Master.
  • Automated proof: PRIMARY_UI_VISUAL_STATE, SYNTH_CONTROL_QUALITY, MIXER_LAYOUT, ARRANGEMENT_OVERVIEW_LAYOUT, ARRANGEMENT_RECORDING_VISUAL_STATE, and MIDI_CLOSEOUT.