Cold-Chain Check · Design Artifact 2 of the flagship case
Mood Board, Style Guide & the Wireframe → Mockup progression
The look was locked before development, not decorated afterwards. This page shows the three
design steps the exemplar process follows: where the visual mood came from, the system it hardened into, and how two key
screens evolved from grey wireframe to finished mockup.
1 · Mood board — where the feel comes from
Night dock, cold mist
The working world of the learner: steel, sodium light, refrigerated trailers at 4 a.m. The module should feel like their dock, not a classroom.
Frost & food safety
Clinical light blues borrowed from chill-room signage — the color learners already associate with "this is temperature-controlled territory."
Steel & paperwork
Logistics forms, clipboard tags, pallet wrap. Dense but calm greys so decision cards never fight the content.
Consequence red
Write-off stickers and rejected-load tags. Red is spent only on real failure states so it keeps its sting.
Compliant green
The green tick of a passed check. Earned moment — a green state always follows a correct decision, never decoration.
2 · Style guide — the system it hardened into
Deep Navy#071626
Base canvas. Reads as "warehouse at night," gives the cool accent full contrast.
Panel Blue#0b2942
Card surfaces. One step lighter than canvas — hierarchy without borders.
Signal Cool#6fd3f7
Interactive accent: headers, focus rings, the "you are here" of the four gates.
Food-Safe Green#43e8a0
Reserved for correct/accept states. Mirrors HACCP pass signage on the dock.
Caution Amber#ff9a3d
Borderline readings — the 8.5 °C moments. Between safe and fail.
Reject Red#ff6b6b
Consequences and temperature breaches only. Scarcity preserves impact.
Ink White#eaf3fb
Primary text. 13.9:1 on navy — AAA for body copy.
Muted Steel#8fb8cf
Secondary text, 6.2:1 on navy — AA for small annotations.
Segoe UI / system-ui stack
Headings 700 · body 400 · data & thresholds in bold ink
Why a system font stack: the module runs on dock tablets and office PCs offline — a webfont is a failure point on a locked-down warehouse machine. Segoe UI is already the Windows-native face these screens ship with, so rendering is instant and identical. Type does the teaching: temperature thresholds are always bold white; consequence text is always muted — learners learn to scan for the hot number.
Interaction rules: every choice is a large tap target (dock gloves); feedback appears before the explanation, consequence first; amber focus rings on all keyboard focus (visible, 3:1 against navy); prefers-reduced-motion disables the explainer's step animations; sound cues are optional layer — nothing in the module requires audio to complete.
3 · Wireframe → mockup — two key screens, evolved
Reading these pairs: left is the grey wireframe used to agree structure and flow with the SME;
right is the final mockup the module was built from. Notice what changed (surface, emphasis, affordance) and what did not (layout skeleton, decision order, one-action-per-screen rule).
Wireframe · Gate 2 question screen
GATE 2 — PROBE THE CORE
[probe]
Scenario text: logger reads 3.5 °C. Surface probe reads 7.9 °C. Do you accept?
[option A]
[option B]
[option C]
SUBMIT
Mockup · Gate 2 question screen
GATE 2 · PROBE THE CORE
Logger: 3.5 °C. Surface probe: 7.9 °C. Paperwork complete. The driver is watching. Accept the load?
Accept — paperwork checks out
Reject — surface near limit
Probe the core first
Lock in my call
Ask the mentor
Wireframe · Consequence feedback screen
RESULT
[outcome banner: pass / fail]
[what happened next — 2 lines]
[why — the rule behind it]
NEXT GATE
Mockup · Consequence feedback screen
RESULT
Written off two days later. Customer DC core-read 9.6 °C. The surface never told you — the core would have.
The rule: surface readings lie. Above 8 °C at the core is a reject decision — not a guess.
Next gate →
What the wireframe stage settled: one decision per screen, options before submit, consequence screen always in the same Result-then-Rule order. What the mockup stage added: the emotional beat (the driver watching), the mentor affordance, color-as-semantics on the option the learner is tempted by — design decisions that only make sense once the structure is stable.