← Blog

Outspoken: designing an app you mostly don't see

Outspoken has no Dock icon. It's built as an LSUIElement accessory app, the kind that exists as a menu bar item and nothing else. No window on launch, no presence in Cmd+Tab. That decision shaped almost everything after it. An app that's mostly invisible has to earn every pixel of the moments it does show up in.

The one surface that matters

Press ⌥⌘D and a floating panel appears at the bottom of the screen: status, a waveform, a moment later the transcribed text, copied and ready to paste. That panel is the entire visual identity of the product for most users, most of the time. The menu bar popover and the settings window are secondary, seen occasionally, by choice. So the HUD couldn't be a generic system alert with a progress spinner. It had to feel considered enough to justify appearing, uninvited, over whatever you were doing.

The panel's background is a single Metal fragment shader, not a system blur material. Vertical flutes, like reeded glass on a shower door. Fractal noise drives a slow color drift between cream, navy, and near-black. An ember-colored band widens and brightens with live microphone level. Say something louder, the band brightens. Go quiet, it recedes. The shader is the status indicator, reinterpreted as texture and light instead of a number or a percentage bar.

Why not a system blur

NSVisualEffectView would have shipped faster and looked fine. Looking fine was the failure mode I wanted to avoid. A HUD that reads as generic macOS chrome doesn't earn the interruption of appearing over your work. Building the shader by hand meant the panel could react to your voice in real time instead of sitting there translucent. It also meant the visual language could travel. The website's hero background is the same shader, mechanically ported from Metal to GLSL, uniform for uniform. The HUD, the site, and eventually a screensaver are one visual object wearing different frames.

Getting out of the way

A quieter decision, but one I think about more. The Mac app is sandboxed, which rules out typing into another process — the App Store requires App Sandbox, and there's no entitlement for Accessibility insertion or synthetic key events. So delivery is the clipboard: the transcript is copied the moment it's ready and ⌘V puts it wherever you were. That means the HUD must never take focus, or your hotkey would land you in Outspoken's window instead of the app you were actually working in. It's a non-activating panel that stays click-through while a session is live. There's no UI for this. Pure plumbing, and exactly the kind of work a mostly-invisible app has to get right, because there's no visible surface where a user could tell you it failed. They'd just notice their words went somewhere wrong.

The menu bar stays small on purpose

The MenuBarExtra popover is deliberately minimal. A status line, one large glass start-stop button, a download-progress hint when a model's still warming up, a footer with the hotkey reminder and a gear icon. Everything else, engine choice, translation target, permissions, lives in a separate Settings window, opened deliberately, not stumbled into. An accessory app that crams configuration into the thing you glance at ten times a day stops being a glance and starts being a chore. The popover answers one question, is it listening, as fast as possible, and gets out of the way.

That's the whole design brief, restated as a sentence. An app that's onscreen for two seconds at a time has to spend those two seconds earning its place, and disappear cleanly the rest of the day.