Relay WMS · Pick

Style guide

A small semantic system for a clear, calm warehouse picking experience.

Foundation

Colour

Ink#102F2BStructure and primary actions

Wash#F3F7F2Application background

Active blue#B8DCFFItem scanning and active work

Tote purple#E0C8FATote scanning, assignment, and summaries

Success sage#9FD1AEScanned and completed states

Exception red#D6A09AUnavailable and error states

Demo apricot#E99A5BReset demo only

Muted green#3D645CSecondary information

Foundation

Typography

700 · DisplayPick runs

Page titles and numbered progress markers.

600 · ImportantStart picking

Primary actions and key operational values.

500 · SupportingORDER · ORD-1056

Labels, identifiers, and secondary controls.

400 · ReadingNot assigned

Body copy, descriptions, and state text.

Foundation

Workflow language

ITEM 1 OF 8 Pick item Scanner action Scan item

TOTE 1 OF 3 Assign totes Scanner action Scan tote

ITEM 1 OF 8 Place in tote Scanner action Scan tote

Progress belongs in the uppercase eyebrow and an order reference sits at the right of the masthead when needed. Titles describe the picker’s task; scan actions describe the input. Keep scan buttons short: do not append progress counts, tote numbers, or barcode values.

Components

Actions

Primary

Secondary

Demo only

SettingsSecondary

Settings only

Exception

Components

Status

ScannedSuccess sage is reserved for confirmed work.

UnavailableMuted red identifies an exception without dominating the screen.

Pending unitThe number carries progress; the pale fill remains neutral.

→

ReadyInk marks a run ready to start.

▶

In progressActive blue marks a run already started.

✓

CompleteSuccess sage marks a finished run.

Components

Toasts

Demo reset.

Use one temporary, bottom-centre toast for short action feedback. Keep it dismissible, announce it politely, and remove it automatically. Never insert transient confirmations into cards or the page flow.

Patterns

Run list

Pick runs

Keep every run in one compact list and show its status in the round trailing marker. Completed runs stay visible alongside ready and in-progress work; do not add a separate completed filter to the demo.

Patterns

Product verification

BayA-01-01

Qty

Lead with the bay, then show the product image, name, variant and SKU before unit progress. Keep the item scan action short; the round indicators carry progress.

Patterns

Tote recheck

1
Select a toteChoose one completed tote to recheck.
2
Scan toteConfirm the physical tote before changing anything.
3
Rescan every itemAccept expected SKUs in any order and count each unit.
4
Review and saveMissing units become unavailable; only differences are corrections.

Recheck tote replaces unit-by-unit editing with one physical inventory check. Keep the draft separate until Save recheck, preserve the original pick history, record every tote recheck, and append corrections only where picked quantities changed.

Patterns

Tote assignment rows

✓

Order: ORD-1042
Tote: T-024

Order: ORD-1047
Tote: Not assigned

Order: ORD-1051
Tote: Not assigned

Use the same two-row structure for every tote: uppercase labels on the left, regular values on the right, and one round progress marker. On phones, assignment rows condense so the Scan tote action remains visible without fixing the page in place.

Patterns

Scanner settings

Operating mode Demo Shows the simulated barcode and Scan button. The camera stays off. Production Uses the live camera or a handheld scanner. No simulated barcode or demo Scan button is rendered.

Repeat scan delay Wait before the same barcode can be counted again. Different barcodes are accepted immediately.

Demo data

Restore all pick runs.

Patterns

Scanner states

Scan itemA1592M10S26

A1592M10S26

Scan toteT-024

T-024

Wrong itemExpected A1592M10S26

A1592M10S26

These are Demo mode panels. Production keeps the same header and feedback colours, but replaces the simulated barcode with live video and never renders the demo Scan button.

Usage

Keep the system consistent

Use dark green for structure, navigation, and primary actions. Use apricot only for Reset demo in Settings.
Use blue for item scanning and in-progress runs; use purple for tote work; reserve sage and muted red for confirmed outcomes.
Show page-level transient confirmations and non-scanning errors in a bottom-centre toast. Keep wrong-scan feedback inside the active scanner panel; do not add standalone inline notification copy to cards or page layouts.
Send camera and handheld scanner input through the same exact expected-code check.
Apply the repeat scan delay only when the same barcode is scanned again. Accept a different expected barcode immediately so normal item-to-tote flow stays fast.
Advance immediately after a correct scan. Show a wrong scan in the scanner header and keep its camera and retry action in the active mode colour.
Demo mode shows a stable simulated barcode and Scan button without starting the camera.
Production mode renders the live camera and handheld-scanner path only. Never render a simulated barcode or demo Scan button.
Show Starting camera only while opening a new camera stream. When a live stream continues into the next scan step, keep the viewfinder visible without replaying its starting state.
On phones, place the scanner first beneath the task masthead and run it edge to edge in both Demo and Production. Let item, tote, and exception details follow in the natural page flow.
If the production camera cannot scan, say so in the camera frame and keep handheld scanner input available.
Keep the document naturally scrollable. Use small-viewport height and safe-area padding to keep mobile actions reachable without blocking pull-to-refresh.
Correct completed work by rechecking one whole tote. Confirm the tote, count expected SKUs in any order, review missing units, and save all differences atomically.