← Back to checkout-zero case
checkout-zero · deliverable

Visual Mockups & Style Guide — Checkout Zero

Kit 11 · Checkout Zero · deliverable · designed and built by I Wayan Usada — instructional design portfolio

Mood & palette

Market-peach #e07b39 on warm dark — a lit storefront at dusk, not a warning board; peach marks dignity moments, blue-gray marks queue pressure.

Type system

Crimson Pro for headlines and debrief lines · Nunito Sans for body copy and choice cards · JetBrains Mono for labels, timers, counters and data readouts. Numbers and feedback always set in the largest voice on screen — the consequence is the loudest element, by design.

Key screens

Register

scan lane, customer panel, queue strip across the top with live count

Moment feedback

two-track panel: dignity mark and speed mark, one-sentence trust consequence

Shift debrief

moment replay list, pattern summary, the one habit to keep

Component decisions

The queue strip is always visible — pressure is environmental, not textual; feedback panels use human quotes, not scores.

Accessibility

Queue state is count + text, never color alone; moment panels readable in under 10 seconds; touch targets sized for a handheld register.

Prefer the source? Download the raw markdown.