Visual Mockups & Style Guide — Train the AI, Check the AI

Kit 4 · Train the AI, Check the AI · deliverable · designed and built by I Wayan Usada — instructional design portfolio

Mood & palette

Cyber-drill amber #ffb020 on near-black — incident-console energy; the Verify ladder uses four distinct rung colors, each also labeled.

Type system

Spectral for headlines and debrief lines · Work Sans 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

Hotspot hunt

draft text with tap-target lines, flag tray below, attempts counter top-right

Verify ladder

four rungs stacked, one active at a time, evidence field per rung, progress rail on the left

Send decision

draft preview, three buttons, consequence pane that renders the chosen customer outcome

Component decisions

Flagged lines underline on hover; the consequence pane uses the same email chrome as a real inbox so the failure lands.

Accessibility

All hotspot targets 44px minimum; rung colors paired with rung numbers; consequence email readable at 16px minimum.