← Back to dont-click case
dont-click · deliverable

Visual Mockups & Style Guide — Don't Click

Kit 13 · Don't Click · deliverable · designed and built by I Wayan Usada — instructional design portfolio

Mood & palette

Signal-blue #38bdf8 on terminal-dark — forensics, not fire alarm; red is reserved for confirmed-fraud consequence panels.

Type system

Merriweather for headlines and debrief lines · Open 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

Inbox

5 emails, sender path expandable, flag/clear buttons per mail, no preview pane

Tell reveal

annotated email with the tell circled and named after the commit

Reflex debrief

four reflexes scored across the drill, one missed reflex highlighted

Component decisions

Sender paths unfold like terminal traces; consequence panels use the real UI the attack would have produced.

Accessibility

Email text at 15px mono for inspection; flag/clear reachable by keyboard; tells described in text as well as circled.

Prefer the source? Download the raw markdown.