Where you are, a way to jump anywhere, whether you're live and what's connected, and who's signed in. In a desktop window it leaves room for the window's own buttons and drags the window.
In the browserBreadcrumbs, the Ctrl+K search trigger, live pill with viewers, connections and the account menu.
Narrow windowUnder 38rem the crumbs fold to the current page (still read as a breadcrumb) and search becomes an icon; connection names go, dots stay. Under 30rem the dots move to screen readers only and the row wraps instead of clipping.
Every page in the app, grouped the way streamers think about them. Folds to an icon rail that keeps every name, as the accessible label and as a tooltip. The choice is remembered.
Expanded and railCounts, a locked Supporter page, a pop-out window, nested integrations with live status, and a pinned bottom. Click a row to move the bar.
--cs-surface-1
--cs-ease-spring
Current page
OBS
Use the chevron at the top to fold this one to a rail.
Rail
Hover or Tab onto an icon for its name. A count becomes a pip on the icon's corner.
Comfortable and compactCompact is the app's working density: 26px rows, still above the 24px target.
comfortable
compact
03AppStatusBar
AppStatusBar
The strip along the bottom of the app: every integration's state at a glance, a few live readouts and the time. Each connection's dot has its own shape, its value says the state in words, and the full story is on hover and in the accessible name.
LiveFlip the states: changes are announced to screen readers once, politely; the clock never is.
--cs-control-h-sm
--cs-surface-1
Every stateConnected shows the account or scene; connecting pulses (still under reduced motion); errors say so in words.
Two PCsCompanion integrations carry the PC they run on; one that's away is quiet: fainter text, never faded out of reach.
Narrow windowsNames hide first (still read aloud), then connections that don't fit fold into +N, whose popover lists every one. Drag the frame's corner to resize.
DensityComfortable for the website and big screens; compact is the app's own.
ComfortableCompact
04BottomTabBar
BottomTabBar
The phone layout's navigation: up to five destinations within thumb's reach, above the home indicator. Anything more goes into a More sheet.
Seven destinationsFour tabs and More. The current tab gets a pill, an accent icon and a heavier label.
Five or fewerNo More tab; every destination fits.
05CommandPalette
CommandPalette
Ctrl+K (⌘K on a Mac) from anywhere: type a few letters of a page, trigger, macro, action or setting and press Enter. The letters that matched are underlined.
LiveOpens as a dialog near the top of the window; Escape closes and returns focus. Ctrl+K works on this page too.
--cs-surface-2
--cs-elev-4
or press Ctrl+K
Empty searchRecent first, then everything, grouped.
Recent
Hydrate!Trigger · channel pointsTrigger
Moments3 clips to reviewPage
Pages
DashboardCtrl+1
ActivityCtrl+2
TriggersCtrl+3
Macros
MomentsSupporter
Overlays
Viewers
Triggers
Hydrate!Channel points · 3 stepsTrigger
!lurkChat command · posts a replyTrigger
Raid welcomeRaid · plays the welcome sceneTrigger
Macros
Be right backSwitch scene, mute mic, start timerMacro
Ending streamRaid out, stop recordingMacro
Actions
Start a Moment clipCtrl+Shift+M
Mute alertsCtrl+Alt+A
Switch OBS scene…
Settings
Theme and text size
Hotkeys
Updates
↑Up arrow+↓Down arrow Move↵Enter Open20 results
Fuzzy matches“trg” finds Triggers: scattered letters match in order, word starts rank first. Keywords count too (“obs” finds Overlays).
Pages
TriggersCtrl+3
↑Up arrow+↓Down arrow Move↵Enter Open1 result
SearchingAn async source shows a working row; results arrive in place.
Nothing matches that.
Try a page name like “Triggers”, or part of a macro’s name.
↑Up arrow+↓Down arrow Move↵Enter Open0 results
Nothing foundSays so, and suggests what to try.
Nothing matches that.
Try a page name like “Triggers”, or part of a macro’s name.
↑Up arrow+↓Down arrow Move↵Enter Open0 results
06App shell
App shell
The pieces together: sidebar, top bar and a page. Expanded at comfortable density, then as a rail at the app's compact density.
Expanded · comfortablePick a page in the sidebar; the breadcrumbs follow. The search box opens the palette.