Visual Mockups & Style Guide — Roster Reset

Kit 24 · Roster Reset · deliverable · designed and built by I Wayan Usada — instructional design portfolio

Mood & palette

Roster-cyan #38d0e0 on planning-desk dark — a shift-planning wall, cyan marks audited decisions only.

Type system

Bitter for headlines and debrief lines · Rubik 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

Planner board

week grid with AI proposal overlay, three decision buttons, reason field per decision

Audit panel

violation highlighted with the rule verbatim, decision options with reasons

Reason debrief

log entries scored for specificity, patterns named: silent accepts, reflex overrides

Component decisions

The reason field is mandatory — the button won't fire without text; the AI proposal always looks good enough to accept.

Accessibility

Board grid fully navigable; reason fields labeled; audit panel states the violated rule in text, not color.