SpaceAge Visual Direction Guide

Updated: 2026-07-31

Direction

SpaceAge should feel like a focused instrument panel rather than a generic DAW or a themed toy. The commercial opportunity is not to add decoration; it is to make ownership, hierarchy, timing, and signal flow instantly legible while retaining the app's black, blue, ember-orange, warm-white, and industrial-brown identity.

Guidance artwork: SpaceAge Visual Direction Board PNG | Editable SVG

System-Level Changes

1. Reduce the palette to named semantic tokens. Black and near-black establish depth; blue identifies note-input, selection, metering, and active data; ember orange identifies transport, time, modulation points, and important action; brown identifies record targets and destructive intent. Section markers may keep their controlled autumn family.
2. Create an explicit hierarchy of control sizes. Primary workspace navigation is largest, transport is compact but unmistakable, contextual tools are smaller, and utility actions are quiet. Avoid rows where every button has equal visual weight.
3. Use one spacing grammar. Adopt 8 px micro gaps, 12 px control gaps, 16 px card padding, and 24 px section separation. Use 1 px structural lines and a restrained 4 px radius. This directly addresses the recurring clipping and crowding regressions.
4. Use one state language everywhere. Idle, hover, selected, record target, ready, warning/destructive, and disabled states must have fixed visual recipes. State color should communicate behavior rather than decorate.
5. Standardize popup anatomy. Every popup gets a title/header, optional tab or scope row, one uncluttered body, and a footer/action row. Escape and click-away behavior remains consistent. Popup controls should not invent a new knob, font, or border language.
6. Keep motion tied to musical truth. Meters, clip interiors, Section pulses, reels, metronome indicators, and automation playback should all derive from the same transport snapshot and use visual interpolation. Animation that drifts or redraws independently makes the app feel less trustworthy.
7. Use Inter Variable as a hierarchy tool. Use approximately 24/18/15/13 px tiers and weight changes before shrinking text. Customer-facing labels should not fall below the readable utility tier merely to make an overcrowded card fit.

Component Rules

• Lane badge: identity first, routing second, instrument/preset third, then compact L/S/V actions. A selected record target receives a restrained brown background and a 4 px ember edge.
• Mixer: blue meters, tall thin faders, orange send activity, subtle one-pixel channel separators, and no rainbow meter language.
• Synth pages: human-scale knobs with consistent diameter; use tabs/pages instead of shrinking controls. Preserve the moon-gradient fill but avoid opaque highlights and unrelated background ornaments.
• Arrangement clips: quiet uniform fill, subtle MIDI preview, selected outline only, and one small Variant marker. Avoid redundant text inside short clips.
• Effects and automation: cards must look clickable through hover/active state; detailed editors use the same raised-panel and control grammar as synth pages.

Implementation Order

1. Centralize semantic colors, typography tiers, spacing, radii, and state recipes.
2. Apply the system to the shell, Arrangement lane badges, and popups because they are encountered constantly.
3. Apply it to Mixer strips and Effects cards.
4. Migrate synth/lab pages without changing DSP or parameter ownership.
5. Add visual geometry assertions and screenshot review at the default and minimum supported window sizes.

Guardrails

• Do not let visual cleanup change routing, parameter ownership, MIDI behavior, or project persistence.
• Do not treat generated screenshots as proof of readability; human review remains required.
• Do not introduce visual elements that imply clickability unless they are interactive.
• Do not use more color merely to make a page feel finished. Hierarchy and spacing should do most of the work.