Background
#020202--backgroundQuiet interface.
Loud ideas.
Room for your music. A system built around clarity, contrast, and a considered finishing touch.
Visual reference: ponder.ai
Adapted for master.audio, September 2026. Refined with the taste-skill audit, October 2026.
The master.audio mark.
Five rectangles. Pure black or white. Keep the original 2:1 proportions, sharp corners, and clear space equal to 10% of the mark’s width on every side. Minimum width: 24 px.
A quieter palette.
Near black and soft white give the interface clarity. Photography brings colour; the engine uses two soft silver waves and a thin rounded frame.
Surface
#191919--surfaceRaised surface
#222222--surface-raisedBorder
#383838--borderBright border
#616161--border-brightMuted
#909090--mutedForeground
#f1f1f1--foregroundUse foreground for essential text. Muted tones describe secondary information and stay above 4.5:1 on the page background; borders establish structure without adding visual weight. There is no accent colour.
Let the words breathe.
A single expressive sans serif. Close-set headlines, short sentences, and purposeful changes in scale. Landing body copy stays at 15 px or larger.
LAY GROTESK / MEDIUM / 500Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & @
DISPLAY / FLUID SCALE / 1.02 LINE HEIGHT
Still your sound.
TITLE / MEDIUM / TIGHT TRACKING
A little more finished.
BODY / 15 TO 17 PX / 1.5 LINE HEIGHT
The finishing touch should bring you closer to your music. Clear language gives the work room to speak.
UTILITY / SYSTEM MONOSPACE
24-BIT / LOSSLESS / WAV, FLAC
Small things. In tune.
Simple elements, shared everywhere. One label per action, one icon family, one corner radius.
Solid & outline
A solid fill marks the primary action and a dashed outline keeps supporting actions quiet. Every action that opens the uploader uses the same label. Both examples open their real destinations.
Phosphor, light weight
Interface icons come from Phosphor at one light weight, so every stroke matches. Arrows nudge in their own direction on hover. The stepped mark is the only custom drawing.
A little movement
The engine’s two ambient waves are decorative and pause outside the viewport. Player waveforms come from actual audio; result graphs come from measured reports.
A space for your sound.
Light structure
Controls, cards and photographs share a 5 px corner; only the engine frame is rounder. Use fine solid dividers between related items and raise a surface only when it groups content.
Space is part of it.
Close relationships sit together. New ideas get room. Let the content set the pace.
4px
8px
12px
16px
24px
32px
48px
64px
PAGE GUTTER20 / 32 / 48
Mobile, standard desktop, and large desktop. Keep headings and content aligned to the same edge.
SECTION RHYTHM96 to 200 px
A fluid interval between major ideas. Compact panels use smaller, consistent internal spacing.
Move with purpose.
Every animation answers a question: what entered, what changed, or what responded to you. It steps back when asked.
cubic-bezier(.22, 1, .36, 1)Soft deceleration. Small shifts in position, opacity, and surface tone acknowledge an action without getting in the way. Pressed buttons scale to 98%.
Let scrolling lead
The hero rises in reading order on load. Sections fade up as they enter, and the idle uploader recedes as it leaves, both driven by CSS scroll timelines rather than scroll listeners. The pinned process stage switches steps with an IntersectionObserver.
Respect motion preferences
Reduced-motion preferences stop the entry, reveals, engine waves and scroll exit, and unpin the process stage. Keyboard focus restores the uploader; settings and results remain stable.
Show what is happening
Upload percentages come from transferred bytes. Mastering stages follow the real job state. Photographs illustrate the music; no section imitates product screens.