← Back to the-handover case
the-handover · deliverable

Visual Mockups & Style Guide — The Handover

Kit 25 · The Handover · deliverable · designed and built by I Wayan Usada — instructional design portfolio

Mood & palette

Handover-periwinkle #8f9bff on night-shift dark — the test runs at 23:40 and looks like it; periwinkle marks guided actions.

Type system

Fraunces for headlines and debrief lines · Source Sans 3 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

Doc builder

ten element rows, five structure cards with prices, budget rail at 14

Simulation view

minute-by-minute log, each action marked guided or guessed

Gap itemization

guessed actions traced to elements, rebuild suggestions one click away

Component decisions

Structure cards price like parts — the budget rail never hides the cost; the simulation log is the honest scoreboard.

Accessibility

Log entries timestamped in text; allocation keyboard-driven; gap traces linked to elements, not just highlighted.

Prefer the source? Download the raw markdown.