Attention as a budget
Most design systems compete on tokens, components and documentation. Every mature system has all three, so none of them sets a system apart. Wolf-Rayet is built on a different idea: an interface spends the user’s attention, attention is limited, and a system can enforce a budget for it in code instead of in guidelines.
The claim
What the system promises, stated so it can be tested.
Wolf-Rayet is made for products where people supervise AI agents or other people. Those products depend on one thing: the person can quickly find what needs them. To make that possible, only one thing in each region of the screen may demand their attention. No design system in use today enforces this. Guidelines are not enough. Style guides already say to use emphasis sparingly, and products drift away from that advice soon after it is written.
A screen where nothing demands attention is fine. Often it is the goal. When a supervisor has nothing to act on, the screen should be quiet, and the system has to allow for that.
Three channels
An interface spends attention in three ways.
| Channel | What it spends |
|---|---|
| Light | Colour and contrast. Most design systems already manage this, but only through guidelines. |
| Language | The words on the screen. A word like “Urgent” pulls attention as hard as a red badge, and design tokens cannot control it. |
| Motion | Animation. Movement catches the eye more than anything else on a screen. A system that limits colour but allows any animation has not really limited attention. |
Five levels
All three channels share the same five levels. When someone turns on reduced motion, the motion channel goes away, and the other channels have to show the full hierarchy on their own.
| Level | Name | What it means |
|---|---|---|
| 0 | Substrate | The background everything else sits on. It asks for nothing. |
| 1 | Ambient | Visible and readable, but it does not try to draw attention. |
| 2 | Marked | Stands out from what is around it, so it is easy to find when you look for it. |
| 3 | Directed | Draws the eye once you are looking at that part of the screen. |
| 4 | Demanded | Takes your attention whether you wanted to give it or not. Its use is limited. |
The limit on level 4
This limit is what makes it a budget and not just a set of names.
Each region can have at most one level 4 element, and each view has a fixed maximum. Components cannot guarantee this on their own. Ten components can each follow the rules and still add up to a screen where everything competes for attention. So the limit applies to the region as a whole, and one part of the region decides what gets it.
The rule is at most one, not exactly one. Requiring one would force every screen to show something urgent, even when nothing is. That false urgency is the problem this system exists to fix.
Decision records
Every decision, including the options that were rejected and why.
There are 144 decision records, and 136 of them were accepted. Each one explains the context, the decision, the options that were rejected and what follows from it. The rejected options are the most useful part, because they show the reasoning.