Design for the Dock — PexarBolt Docs

Design for the DockShow the main value. Make the next action clear.Screen and layout

Area

Width

Height

Purpose

Full screen

854 px

480 px

System navigation and plugin content

Top area

854 px

72 px

System navigation

Content area

854 px

408 px

Your plugin layout

Keep plugin content below the system navigation.

Use SDK-supported primitives and controls.

Make the main value large.

Use short labels.

Use the bundled fonts and icons.

Expected result: the screen fits the content area. The App and website use the shared renderer for these declarations.Touch and dial

Give each control a clear label.

Make touch targets easy to select.

Define useful left, right, and press actions for the dial.

Make disabled controls visible.

Show the result of each action.

An action can succeed, fail, or have an unknown result. Do not show success when the result is unknown.Demonstration dataProvide realistic sample state in the default fixture. A blank fixture produces a blank listing preview.Check these states:

State

Check

Long text

Labels remain readable.

Changing values

Numbers stay in a stable position.

The screen explains that data is loading.

Empty

The screen explains that no data is available.

Error or disconnection

The screen shows the problem and a useful next action.

Use sample data without credentials or private account values. Test hardware and external services separately.Resource usePause polling while the view is hidden. Release resources when the runtime stops. Use bounded retries after a connection failure.Follow the runtime guide and the SDK contract for the exact limits.Navigate between pagesUse Projection.pages and root-node page tags for Dock-local left/right/up/down swipes in both Host-connected and independent native plugins. Optional read-only pageChange reports {from,to,direction} to Host. Requires pages.swipe.v1 firmware. See local page navigation, the page-deck example and SDK types.