Visual Mockups & Style Guide — Onboarding Academy

Kit 5 · Onboarding Academy · deliverable · designed and built by I Wayan Usada — instructional design portfolio

Mood & palette

Chalkboard-blue #1d4ed8 on school-dark — a curriculum war-room board; blue marks owned drivers.

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

Phase board

five phases as columns, four TTP drivers as rails, counter-measure pins at risk moments

Checkpoint instrument

per-phase checkpoint cards with measurement hooks

Driver audit

driver x phase matrix, owned/unowned states, risk moments listed

Component decisions

Phase cards pin counter-measures like notes on a corkboard; Kit 1's module appears as a named, linked component.

Accessibility

Matrix is a real table; pins have text labels; phases keyboard-navigable.