For panels that report what happened, rather than what something scored. The dashboard channel health headline is the first of these; it will not be the last, so the vocabulary lives in the token library rather than in that panel’s stylesheet.
There are six, and each gets one hue:
| State | Means | Accent |
|---|---|---|
win |
Something improved | Green --ts-state-win-accent |
regression |
An outcome went backwards | Orange --ts-state-regression-accent |
urgent |
An outcome is in trouble | Red --ts-state-urgent-accent |
quick_win |
Something cheap is worth fixing | Purple --ts-state-quick-win-accent |
steady |
Nothing new, here is the stretch goal | Blue --ts-state-steady-accent |
incomplete |
Main scores cannot be measured yet | Muted --ts-state-incomplete-accent |
Every value is already in the estate: three come from the score palette, one is brand purple, one is the Process stage from the tool row, one is the house muted tone. We do not need a second green, and a status palette invented in isolation is exactly how we would get one.
Each state ships three tokens: an accent for icons, arrows and marks, a tint for chips and badges, and the ink for text on that tint. All are verified at both thresholds, ink on tint at 4.5 and accent against card and page at 3.
The state colour is an accent. It is not a surface, and it is not an edge.
No left rail. A coloured bar down the side of a rounded card is the house style of no house in particular, and we do not use it anywhere else: the next-steps rows separate with a bottom divider, and the shortcut cards carry their stage colour in the icon disc. If a card already says the thing through a real component, an accent edge is a second copy of the same signal and the generic one.
Every card on the dashboard is white with a thin border: the assistant panel, next steps, channel health, the shortcut cards. A full-bleed tinted panel with a coloured left rail is not our card idiom, it is the generic status-banner look, and dropped onto that page it reads as an alert strip bolted on rather than part of the product.
Build the panel as a normal card and spend the state colour in three places only:
| Part | Treatment |
|---|---|
| Eyebrow | The state, uppercase, tracked, in the state ink. This is where the state is named |
| Figure and delta chip | Score in the state ink, chip as an existing pill |
| Action link | State ink, house link treatment |
Everything else stays house: white surface, 12px radius, bold ink title, muted detail line.
The tint token exists for the small surfaces that genuinely need one, a chip
or a badge behind a figure. It is not there to wash a whole card, and reaching
for it first is what produces the banner look.
For the loudest case, we already have a pattern. DO THIS FIRST in next
steps is a filled purple gradient block with a white uppercase eyebrow. When a
state needs to dominate, that is the house move: fill the block, do not tint
the page. Anything quieter than that is a white card.
incomplete, steady and quick_win carry most of the traffic. They are
quiet. win, regression and urgent are rare, and are allowed to be
emphatic.
This is the rule most easily got wrong, because the rare states are the interesting ones to design. A palette tuned on the payoff cases shouts at every user, every day, about nothing in particular.
Momentum cannot be scored for roughly three quarters of channels, so
incomplete is the state most people meet first. It takes the muted tone and
never a warning one.
Absence of data is not bad news. Dressing it as bad news is precisely what makes a healthy new account look broken, and it is the same fault the onboarding work exists to undo.
win and urgent are the pair that must never be confused, and green against
red is the pair most commonly lost to colour blindness. They must also differ
in wording, in motion, and in shape. If a panel is legible in
greyscale, the state is carried properly.
A panel exposes both: the state (data-state="win", .ts-audit-headline--win)
and a sentiment class (.is-positive, .is-negative, .is-neutral).
They are not the same axis. quick_win and incomplete share a tone while
meaning entirely different things, and a stylesheet should not have to know
that to get the tone right. Style tone from sentiment; style identity from
state.
Where a panel animates, direction is not decoration:
urgent pulses slowly. It does not flash: a flash reads as an error and
gets dismissed.incomplete shimmers. That is the difference between “something is wrong”
and “something is missing”.Every animation stops under prefers-reduced-motion, at both ends: any
counting number jumps to its final value and the keyframes switch off. Counting
digits and rising cards are vestibular triggers, not flourishes.
Any number that animates needs font-variant-numeric: tabular-nums, or it
jitters sideways while it counts, because digit widths differ.
Where a panel shows more than one direction arrow, they are separate statements and must stay readable as such. On the channel health headline, one arrow is whether our assessment moved and the other is whether the channel actually gained subscribers. They can disagree (a real sample shows score down 6 while growth was up 340 subscribers), and a treatment that merges them into a single verdict reports something the data did not say.