Beacon
A triage tool for on-call engineers that turns a wall of infrastructure alerts into one ranked list, and is honest about what the AI did not check.
Beacon is a design exercise built as a working product: an on-call triage view that takes a queue of infrastructure issues and ranks them by what actually needs a person first. It began as a Figma component system and became a running Next.js app whose design tokens carry the exact names they have in the file, so the design system is traceable rather than described. The data is fictional. The design system, the interactions, and the AI's honesty rules are all real.
the key decisionThe AI never invents data. It states what it did not check, and anything it has not assessed carries no rank and no confidence, because a panel whose whole job is to be trusted cannot bluff.
The problem
An on-call engineer opens a wall of alerts, all shouting at once, with no sense of which one needs them first. Beacon reframes that queue as a single ranked list with a clear reason attached to each position, so the first decision about what to look at first is made and explained.
Rank is not severity
Severity alone is a poor sort order, because the worst-labeled issue is not always the one that needs a person. Beacon weighs how much harm is happening right now against whether anyone is already on it, so an unowned warning that is losing orders can sit above a critical an engineer already picked up. Switching the sort from AI priority to plain severity reorders the list on the spot, which is the whole point made visible.
Honest by construction
Every assessment says what the model did not check, in plain language. An issue filed by hand arrives unranked, because Beacon has not seen it yet, and the panel shows a not-yet-assessed state instead of a fake ranking. When it does assess from a description alone, its confidence is capped and it names the telemetry it is missing.
Considered interactions
The filter selector rides a sliding pill between states, the detail panel opens and advances as issues move through their lifecycle, and the whole list is keyboard-drivable for someone working fast. Light and dark are both first-class, down to the native controls that usually get left behind.
A real design system
Beacon began as a Figma file with a full variable system: primitive values feeding semantic tokens feeding a layout collection with desktop, tablet, and mobile modes. The components were built with proper variants and text properties. Every color is bound to a token, and no raw hex appears anywhere in the file.
The result is a triage view a tired on-call engineer could actually trust: it explains why each issue sits where it does, it is upfront about the telemetry it cannot see, and every color and measurement traces back to a named token in the Figma file. Because the design system is the same in the file and the code, changing one token changes both.