Visual Mockups & Style Guide — Screen Nine

Kit 17 · Screen Nine · deliverable · designed and built by I Wayan Usada — instructional design portfolio

Mood & palette

Screen-nine violet #b18cff on studio-dark — a editing-room monitor, violet marks TEACHES, gray marks DECORATES.

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

Scene builder

eight scene-type chips priced 0-3, budget rail, module timeline to place them on

Verdict banner

TEACHES / DECORATES per placement with the rule reason in one line

Budget audit

ledger vs brief rules, failure-rule checklist, philosophy line

Component decisions

Scene chips show price and verdict history; the timeline is drag-and-drop AND keyboard-arrangeable.

Accessibility

Verdicts are text badges with icons; budget rail has numeric readout; timeline arrangeable via keyboard.