← Back to rate-guard case
rate-guard · deliverable

Visual Mockups & Style Guide — LaunchReady

Kit 2 · LaunchReady · deliverable · designed and built by I Wayan Usada — instructional design portfolio

Mood & palette

Release-night amber-green #a3e635 on deep charcoal — control-room calm, not marketing green; amber reserved for gap-radar warnings.

Type system

Lora for headlines and debrief lines · Inter 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

KB home

search bar dominant, gap radar chip top-right, three audience filters as tabs, recent-gap strip below

Decision-tree widget

single question per pane, breadcrumb of chosen branches, escalation only at leaf nodes

KPI dashboard

per-audience resolution bars, day-30 marker line, gap-log count beside the bars

Component decisions

Buttons are rectangular with mono uppercase labels; feedback cites the KB article number so the rule is always a rule.

Accessibility

4.5:1 contrast on all body text; gap-radar state is color + text label (never color alone); keyboard-navigable tree branches.

Prefer the source? Download the raw markdown.