Visual Mockups & Style Guide — Boarding Now

Kit 14 · Boarding Now · deliverable · designed and built by I Wayan Usada — instructional design portfolio

Mood & palette

Cabin-crimson #e63946 on cabin-night dark — uniform accents, not alarm reds; crimson marks break-points only.

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

Briefing board

8 horizontal slots, item tray below, anchors pinned with a subtle metallic edge

Break-point feedback

position card: what belongs here, why, and what you placed there

Fluency loop

same board with timer, hidden-item badge, rebuild counter

Component decisions

Item cards are tactile: grab affordance, slot magnetism on drop; feedback cards cite the SOP clause number.

Accessibility

Full keyboard placement (arrow keys between slots); position feedback announced to screen readers; no drag-only interactions.