# Across devices: platform design review

Reviewed 8 September 2026. These interactive browser studies adapt the approved OpenClaw identity to platform conventions. They are design proposals, not native application releases or a claim of full HIG conformance.

## Shared design decisions

Preserve the supplied claw silhouette and colourless rounded-shell relief. Reserve texture for navigation surfaces and keep the reading plane quiet. Use familiar labelled controls, a clear current destination, restrained shadows, and comfortably sized controls. Status and messages explicitly describe local preview data. No device microphone or gateway is activated.

Apple's [design principles](https://developer.apple.com/design/human-interface-guidelines) inform hierarchy, harmony with hardware and platform consistency. Its [accessibility guidance](https://developer.apple.com/design/human-interface-guidelines/accessibility) informs legibility, keyboard access and larger controls. The interface retains reduced motion, increased contrast, forced colours and reduced transparency. Browser logical pixels are a preview convention, not a measurement of native points or physical touch targets in a scaled hardware illustration. Use View app to inspect the interface at a larger size.

## Laptop: macOS

Sources: [Designing for macOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-macos), [Toolbars](https://developer.apple.com/design/human-interface-guidelines/toolbars), [Sidebars](https://developer.apple.com/design/human-interface-guidelines/sidebars).

Mac guidance favours comfortable information density, fewer nested levels, flexible windows and keyboard workflows. Combine window controls and common actions into one toolbar. Keep leading navigation, a readable session title, and trailing actions. Give the sidebar a floating glass treatment, with an opaque reading surface and bounded text width. Collapse it into a drawer at narrow widths. Close, minimize and expand work within the preview. Command-comma opens Settings and Command-F opens session search while focus is inside the app study.

A native build should use system toolbar/sidebar components, full menu-bar command coverage, real window management and platform appearance preferences. The browser does not simulate dragging system windows or replacing macOS menus.

## Phone: iOS

Sources: [Designing for iOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-ios), [Tab bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars), [Layout](https://developer.apple.com/design/human-interface-guidelines/layout).

Use four stable, labelled destinations: Overview, Chat, Agents, Settings. Keep tabs visible across sections; use the drawer only for sessions. Give the selected destination a distinct shape and accent, avoid overflow destinations, and preserve draft/conversation state when changing tabs. Keep the composer above the bottom bar, with separate space for the home indicator. Larger body text and controls improve readability and reachability. Return inserts a newline on a phone; the send control submits.

The Android alternative remains available. Native iOS delivery needs system safe-area and keyboard insets, Dynamic Type, VoiceOver and genuine system Liquid Glass. This CSS study uses an installed system-font stack and open icon glyphs rather than distributing Apple's fonts or claiming native SF Symbols.

## Watch: watchOS

Sources: [Designing for watchOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-watchos), [Effective watchOS UI](https://developer.apple.com/documentation/watchos-apps/creating-an-intuitive-and-effective-ui-in-watchos-10), [Tab bars](https://developer.apple.com/design/human-interface-guidelines/tab-bars).

Prioritise a short glance and one immediate action: Talk with Claw. Replace horizontal page dots with a vertically scrolling list, so Inbox, Approvals and Connection remain discoverable without competing with the primary action. A dark background, larger typography and full-width cards improve contrast and use the rounded screen efficiently. Details are only one level deep with a labelled back control. Voice remains an explicit microphone-off preview.

A native watch app should connect vertical navigation to Digital Crown input and validate Dynamic Type, VoiceOver, wrist gestures and complications on hardware. Browser scrolling and keyboard navigation demonstrate the hierarchy without claiming these integrations.

## Desktop: Linux

Sources: [GNOME HIG](https://developer.gnome.org/hig/), [Header bars](https://developer.gnome.org/hig/patterns/containers/header-bars.html), [Scaling and adaptiveness](https://developer.gnome.org/hig/guidelines/adaptive.html), [Keyboard conventions](https://developer.gnome.org/hig/reference/keyboard.html). Comparison: [KDE HIG](https://develop.kde.org/hig/).

Linux has multiple desktop environments. Choose GNOME/Libadwaita as the coherent reference for this Ubuntu-oriented desktop study; do not describe it as a universal Linux standard. Use a header bar with leading navigation/new-session actions, a central title, and a trailing menu/close control. A clear sidebar, subtle selection accent and restrained header-bar treatment distinguish it from Mac. Keep the content bounded and the sidebar adaptive. Ctrl-comma opens Settings, Ctrl-F focuses session search, and F10 opens the application menu while focus is inside the preview.

A native build should use GTK/Libadwaita widgets and desktop accessibility, theme and window-manager integration. A KDE-targeted build should instead adopt KDE patterns consistently. Browser-reserved new-window and close-tab shortcuts are deliberately not captured by the study.


## Loading and control refinement — 8 September 2026

The five original WebP frames total under 100 KB. Previously, selecting a device initiated another image request while the HTML app appeared immediately. In a cold-cache desktop-browser sample, those subsequent requests took 60–98 ms; this is a sample, not a universal mobile latency measurement. Frames now travel as inline data in the preview module, and the initial frame is embedded in server HTML. Switching devices therefore makes no separate frame request. The tradeoff is a larger, cacheable preview module. `scripts/embed-device-frames.mjs` regenerates the byte-identical payload from `public/devices` during build and enforces a per-frame size budget.

Sidebars use almost clear fills, softer shell glints and background blur rather than opaque panels or visible borders. Reduced transparency and unsupported-blur environments retain an opaque fallback; increased contrast strengthens the reading surface. This is a branded web interpretation of liquid glass, not a native material.

New-session actions use a consistent compose symbol in the platform toolbar. Desktop navigation explicitly calls the conversation destination Chat. Search has a labelled sidebar control, session headings no longer duplicate New session, and noninteractive settings rows no longer show disclosure chevrons. The leading-navigation, centred-title and trailing-action structure remains consistent with the linked platform guidance.


## Consistent clear sidebars

All app sidebars and narrow drawers now use a fully transparent fill. The window-wide glass overlay no longer paints behind computer sidebars. The website's navigation uses the same transparent material in Light, Dark and Textured appearances, including its mobile sheet. Sparse shell highlights and backdrop filtering define glass without a painted panel; dark mobile glass dims bright content behind it to protect label contrast. Reduced transparency, increased contrast, forced colours and unsupported-blur fallbacks remain available. Watch has no sidebar; its existing shallow navigation remains unchanged.


## Scrollbar clarification

The requested disappearing bars are scrollbars, rather than navigation panels. Device scroll containers now hide the scrollbar track and thumb while retaining their native overflow and scrolling behaviour. The site's navigation scroller follows the same treatment. The Textured appearance again shows the approved shell relief clearly on app sidebars and site navigation; solid accessibility fallbacks still suppress the texture.


## Phone glass and Watch clarity

The phone reading surface now continues behind the floating iOS navigation capsule and home indicator, removing the rectangular backing at its corners. The capsule retains the approved shell-glint material, rounded clipping and a transparent fill. Content reserves space above it so the composer remains fully usable. Send uses the shared brand-red token, with a subdued disabled state. Watch has one primary Talk with Claw action; the duplicate phone-directed voice entry is removed. Its voice screen remains an explicit microphone-off preview.