Platforms

One focused chapter from the Thorbis interface research. 10 rules. Read the research index for every chapter and focused study.

Platforms

Tokens are shared. Chrome is not. Web, iOS, Android, and desktop are four products that share a job, not one layout poured four ways. Apple’s Human Interface Guidelines (opens in a new tab), Google’s Material 3 (opens in a new tab), and Microsoft’s Fluent 2 (opens in a new tab) are homework. We do not ship Apple glass, Material wallpaper color, or Windows acrylic on the job sheet. The calls we ship live on Rules. The skill is thorbis-native.

Four products. One job. Dispatch, arrive, collect. The job does not change. The shell does. If you can screenshot one platform, slap a device frame on it, and call it another, you have not designed the second platform.
Same job. Four shells. Do not pour one into the other.
Web is the workbench. Inverted L. Keyboard. URL as state. shadcn dressed in our tokens. This is the office, the books, the board. Emil’s mobile tricks on this page are for the browser on a phone, not for a native app. Native phones do not get a squeezed inverted L.
Same job. Four shells. Do not pour one into the other.
iOS follows the HIG. Tab bar at the bottom. Navigation stack. Sheets from the bottom. Swipe-back is sacred. Dynamic Type. 44pt targets. Haptics on a commit, not on every tap. System tab bars may use Apple’s Liquid Glass. Our sheet does not. We do not invent glass. HIG (opens in a new tab).
Same job. Four shells. Do not pour one into the other.
Android is not a reskinned iPhone. Material 3 navigation. Predictive back. 48dp targets. Edge to edge. A navigation rail on a tablet, not an iPad sidebar copy. Snackbars do not steal focus. We do not adopt Material You wallpaper tint. Electric blue stays ours. m3.material.io (opens in a new tab).
Same job. Four shells. Do not pour one into the other.
Desktop follows the host OS. macOS keeps traffic lights and a native menu bar. Windows keeps the caption buttons and snap. Do not paint macOS lights on Windows. Do not paint a Windows title bar on a Mac. The inverted L is legal here. Hover is legal. Density is legal. macOS HIG (opens in a new tab) · Fluent 2 (opens in a new tab).
Same job. Four shells. Do not pour one into the other.
System chrome is not ours to restyle. Status bar, home indicator, caption buttons, IME, share sheet, date picker, biometric prompt. Use the platform. A fake iOS switch on Android is a costume.
Thumb law or keyboard law. Not both as the primary. A phone is Arrive and Collect in two taps. A desktop is a dispatcher who never leaves the keyboard. Putting ⌘K in a tab bar, or a hamburger on a 27-inch board, is the wrong law.
Do not share chrome across platforms. Shared tokens, type, status, and job language. Shared domain. Not a shared AppShell. A React Native screen that draws our web sidebar is a defect.
Same job. Four shells. Do not pour one into the other.
Native type on native chrome. iOS chrome may use SF Pro. Android chrome may use the device type. The work (job titles, money, notes) can stay Inter. Do not ship Geist on a tab bar.
Haptics are a phone commit. A light impact when Dispatch lands. Nothing on scroll. Nothing on every list row. Desktop has no haptic. Do not invent a shake on the web.

I built this for the dispatcher at 7 a.m., the tech in a crawlspace, and the owner closing the books. Quiet chrome. Precise work. I’m still learning. These are the notes.

Applied bookmark research

Reviewed 2026-09-06. These examples reinforce the existing owners; they do not introduce another visual style or claim the product behavior is implemented. Read the 26-source review and access limits.

A control keeps its meaning through every state

A button that changes width, a field that loses input, or a dialog that loses focus breaks the task even when the resting design looks precise.

Review the approved primitive as a sequence: resting, focused, activated, pending, resolved, and recovered. Keep the action label and footprint stable, associate errors with their fields, and preserve a visible keyboard path.

Thorbis example. Save estimate remains Save estimate while its state mark changes. A validation error keeps the entered values, explains the repair beside the field, and moves focus only when the interaction calls for it.

Verify. Test Tab, Shift-Tab, Enter, Escape where applicable, paste, invalid input, rapid activation, and a slow response. Repeat at 390px, in both themes, with zoom and reduced motion.

Do not import. No hand-built duplicate primitive, hidden label, disabled browser zoom, or borrowed shadow-only outer edge that violates D-017.

Open the ui skill · Evidence: Web Interface Guidelines; Invisible Details; components.build; Details that make interfaces feel better

Transfer the intent, not the desktop gesture

An interaction that works with a precise pointer or modifier key may be unusable for a tech holding a phone.

Preserve the record and task while adapting the visible action path to the device. Use the existing native owner for target sizing, safe areas, focus, and host behavior; no critical action relies only on hover or a hidden gesture.

Thorbis example. A field photo remains attached to the same job when the tech changes orientation or returns from another app. The visible capture action and retry path remain available without discovering a desktop shortcut.

Verify. Check one-handed use, software keyboard opening, text enlargement, orientation, focus visibility, and reduced motion on the relevant device. Keep permission refusal and return-from-interruption states in the review.

Do not import. No desktop hover contract on a phone, blocked zoom, silent clipboard access, or unverified claim that a web imitation is native behavior.

Open the native skill · Evidence: Web Interface Guidelines; Design Engineer Principles; Devouring Details