#102F2BStructure and primary actionsStyle guide
A small semantic system for a clear, calm warehouse picking experience.
Colour
#F3F7F2Application background#B8DCFFItem scanning and active work#E0C8FATote scanning, assignment, and summaries#9FD1AEScanned and completed states#D6A09AUnavailable and error states#E99A5BReset demo only#3D645CSecondary informationTypography
Page titles and numbered progress markers.
Primary actions and key operational values.
Labels, identifiers, and secondary controls.
Body copy, descriptions, and state text.
Workflow language
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.
Actions
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.
Run list
Pick runs
Keep the list compact and show status in the round trailing marker. The completed control filters the list; it is not a run status by itself.
Product verification
BayA-01-01
12
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.
Tote assignment rows
✓
- Order
- ORD-1042
- Tote
- T-024
2
- Order
- ORD-1047
- Tote
- Not assigned
3
- 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.
Operating modes
Scanner states
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.
Keep the system consistent
- Use dark green for structure, navigation, and primary actions. Use apricot only for demo controls.
- Use blue for item scanning and in-progress runs; use purple for tote work; reserve sage and muted red for confirmed outcomes.
- Send camera and handheld scanner input through the same exact expected-code check.
- 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.
- 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.