Visual Mockups & Style Guide — Shift Keeper

Kit 23 · Shift Keeper · deliverable · designed and built by I Wayan Usada — instructional design portfolio

Mood & palette

Keeper-moss #6d8f3a on wall-board dark — a staff-room notice wall; moss marks diagnosed causes.

Type system

Newsreader for headlines and debrief lines · Karla 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

Signal wall

nine cards pinned, drag/arrange to cluster, cause cards to the side

Trap panel

chosen intervention vs the trap it resembled, one-line distinction

Advisory readout

cause statement, two interventions, trade-off line — printable

Component decisions

Signal cards carry dates and sources — evidence, not vibes; the readout renders as a one-page advisory memo.

Accessibility

Cards arrangeable by keyboard; trap distinctions in text; readout is a semantic document.