Visual Mockups & Style Guide — AI at Your Desk

Kit 6 · AI at Your Desk · deliverable · designed and built by I Wayan Usada — instructional design portfolio

Mood & palette

Neon-bloom mint #6ee7b7 on work-desk dark — optimism with governance edges; mint marks capable, amber marks governed boundaries.

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

Prompt trainer

persona task left, pattern palette right, transfer feedback after each run

Manager huddle card

script with timing, discussion prompts, stage driver named

Traffic-light table

data classes as rows, tools as columns, five-second readable

Component decisions

The trainer mirrors persona task files (Finance, HR, Ops-planning); the traffic-light table is the only governance UI — a table, not a policy PDF.

Accessibility

Trainer text at 16.5px; traffic-light states have text labels; huddle cards printable.