← Back to four-rooms case
four-rooms · deliverable

Visual Mockups & Style Guide — Four Rooms

Kit 22 · Four Rooms · deliverable · designed and built by I Wayan Usada — instructional design portfolio

Mood & palette

Room-terracotta #c2694e on warm dark — four rooms, four subtle shifts in ambient tint; the dial is always neutral steel.

Type system

Playfair Display for headlines and debrief lines · Figtree 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

Room scene

dialogue pane with student line, three reply cards below, ambient room marker

Referral dial

three-position dial with service names, check-back flag as a separate toggle

Sequence debrief

four rooms in play order, sequences drawn as chains, broken links highlighted

Component decisions

Reply cards quote the student's own words back where they join; the dial never offers a 'wrong service' label — fitting is the learner's job.

Accessibility

Dialogue at 17px with speaker labels; dial positions keyboard-rotatable; sequence chains described in text as well as drawn.

Prefer the source? Download the raw markdown.