Every screen, one job

Platforms

Pick the host. Each page names its web counterpart, what carries, what the host owns, and what we refuse.

• Desktop

  Windows

  The workbench in a Windows window. Caption buttons, snap, Ctrl, Fluent host chrome.

• Desktop

  macOS

  The workbench in a Mac window. Traffic lights, the menu bar, ⌘, and the source list.

• Phone

  iOS and iPadOS

  A tab bar and a stack. Apple's HIG governs. The job and its words stay ours.

• Phone

  Android

  Material navigation, predictive back, 48dp, edge to edge. Not a reskinned iPhone.

• Console

  Xbox

  Ten-foot Thorbis on Xbox. Focus is the cursor. A selects, B backs, LB and RB switch tabs.

• Console

  PlayStation

  Ten-foot Thorbis on PlayStation. Cross confirms, Circle backs, L1 and R1 switch tabs.

• Game

  Game interfaces

  HUDs, menus, settings, and loading. Every game screen is a Thorbis screen in a new place.

What carries from the web

These never change between platforms. A tech who moves from the board to a phone to a TV sees the same job.

• Tokens: color, type scale, radius, spacing, and motion timing.
• Electric blue as the one accent. It marks the commit, the focus, and the selection.
• Words: job, stop, tech, truck, customer, property, estimate, invoice, payment. Street first.
• Status is a word with color beside it. Open. En route. On site. Done.
• Money is two decimals. Units stay glued. Figures are tabular.
• Inter on the work: job titles, addresses, notes, money, scores.
• Places, transactions, choices, and context keep their roles. A modal is still done or not.
• Honest states: loading, empty, error, offline, partial, stale, and conflict.

What the host owns

These are never ours to restyle. A fake iOS switch on a Pixel is a costume.

• Window controls, title bars, and system menus.
• Navigation chrome: tab bars, rails, Back, and the shoulder buttons that switch tabs.
• System type on chrome, system pickers, keyboards, share sheets, and sign-in prompts.
• Input conventions: shortcuts, gestures, controller glyphs, and confirm and cancel buttons.
• Accessibility services: screen readers, text size, contrast modes, and reduced motion.
• Materials. Glass, Mica, and blur belong to the system surfaces that ship them.

Derive a platform screen

• Start from the web counterpart. Name the web place, pattern, and profile the screen comes from. If the web has no counterpart, design it there first, or name the gap. A platform screen with no parent is a fork.
• Keep the job, the words, and the tokens. The record, its fields, its status words, its money, and its accent do not change between platforms. A tech who moves from the board to a phone to a TV sees the same job.
• Hand the chrome to the host. Replace our sidebar, location bar, and command surface with the platform's own navigation. Never draw web chrome inside a native window.
• Remap the input, not the meaning. Click becomes tap, focus plus A, or focus plus Cross. ⌘K becomes Ctrl+K, a search field, or a search button. The action keeps its verb and its consequence.
• Prove it on the host. A browser screenshot is not evidence for a console, a phone, or a window. Test on the device, with its screen reader, its text size, and its controller.

Matrix

One concern per row. Read across to translate a web behavior to a host.

Ten-foot

Xbox, PlayStation, and any TV app. The board read from a couch with a controller. These hold before the console pages add their buttons.

• Focus is the cursor. There is no pointer and no hover. Exactly one element holds focus at all times. It is lifted, ringed in electric blue, and never lost when content loads, filters, or empties.
• The D-pad moves where the eye expects. Up, down, left, and right go to the nearest element in that direction. Rows wrap only when the layout says they do. Leaving a row and coming back restores the last focus in it.
• Stay inside the TV-safe area. Design at 960 × 540 effective pixels. Keep text and controls 48 from the left and right and 27 from the top and bottom. Backgrounds and art may bleed. Words may not.
• Type is read from the couch. Body text is at least 28px at 1080p. Labels are at least 24px. Honor the system text size. If a screen cannot fit the words at that size, the screen has too many words.
• The TV opens dark. Dark theme is the default on a console because the room usually is. Keep pure white off large areas. Status still carries a word, so meaning survives any TV's color.
• Back always backs. The cancel button closes the top layer, then walks the stack. It never quits the app, discards work, or opens a menu. Leaving the app belongs to the system button.
• Glyphs match the hand. Show the button art for the controller in the player's hand, and switch the moment they pick up another one. Never show Xbox letters to a DualSense player, or keyboard keys to a controller.
• A legend names the buttons. A quiet strip at the bottom of the safe area names what each live button does on this screen. Two or three verbs. Confirm first, Back last.
• Search is a place, not a palette. There is no ⌘K on a couch. Search opens a route with the system keyboard and voice where the platform offers them. Results are focusable rows with the same words as the web.
• Resume means the data is old. Consoles suspend and resume hours later. On resume, mark live data as refreshing, fetch, then show it. Never paint yesterday's board as live.