Skip to contentWolf-Rayet

Intensity

Attention is the resource this system budgets, and intensity is how much of it an appearance spends. Every ground a component can take is scored here by measurement rather than by opinion, in both themes.

The ladder

Five levels, shared by all three channels. A reduced motion preference collapses the motion channel, so any one channel has to be able to carry the whole hierarchy alone.

LevelNameLightDarkWhat it means
0Substrate0 to 0.0208710 to 0.069979Indistinguishable from the ground it sits on. It asks for nothing and is measured as asking for nothing.
1Ambientto 0.139939to 0.231711Present and readable, bidding for no attention of its own. Most of a working screen is here.
2Markedabove 0.139939above 0.231711Plainly a different surface. Found when looked for, without being pushed at the reader.
3Directednot absolutenot absoluteRelative, not absolute. The largest emission share among the non-Demanded elements in its Scope, by more than the measurement can mistake.
4Demandednot absolutenot absoluteTakes attention whether or not it was wanted. Declared, and rationed to one per Scope with a cap per View.

How a ground is scored

The measurement, so it can be argued with.

A Scope’s emission load is the mean absolute perceptual deviation from its substrate, normalised by the headroom available. The size-independent part of that is one pixel’s deviation, which needs no rendering:

deviation = |L_ground − L_substrate|
          / max(L_substrate, 1 − L_substrate)

L is OKLab lightness, not relative luminance, because lightness is perceptually uniform and luminance crushes almost everything a dark interface does into the bottom of its range. The sign is discarded: attention does not care whether a mark is lighter or darker than its ground, and a dark glyph on white pulls the eye exactly as a bright badge on black does. The normaliser is what keeps the number comparable between themes, because a substrate near the middle has the least room to signal in either direction and is charged accordingly.

A translucent ground is flattened onto the substrate before it is measured, since that is what the eye receives rather than what the token says. Hover, focus and pressed states are left out: they belong to the pointer and last as long as it stays.

The two boundaries between the measured levels are derived from the theme rather than chosen for it, which is why the table above reads differently in each. A Scope sits on a ground it did not choose and cannot spend, so the substrate band runs as far as the furthest of the four surface roles sits from the page. Above that an appearance may stand one rung of the theme’s own neutral ladder before it is reading a level louder than the surface it sits on, and that is where Ambient ends. The rung is the same number the dominance margin is denominated in. The two themes space their neutrals differently, so they get different boundaries, and a single pair applied to both was one theme’s ladder presented as the system’s.

Why the ladder stops at Marked here

Two of the five levels are not properties one appearance carries.

Substrate, Ambient and Marked are absolute, so they can be measured from the tokens alone. Directed cannot: it is held by whichever non-Demanded element has the largest emission share in its Scope, and it has to beat the runner-up by a level. A level here is one rung of the theme’s ladder spread over the pixels the leader covers, so a small element has less to clear than a large one making the same claim. Two elements closer than that are measurably undecided rather than both Directed. So Directed is a fact about a composition, not about a component.

Demanded is declared and rationed: at most one per Scope, and a cap per View. Zero is a valid and common state. An appearance scored Marked here is a candidate a Scope may spend its demand on, not a demand in itself.

What this does not measure

The boundary of the number, so it is not read as more than it is.

This scores fields, not marks. A component whose emission is a ground is measured here; one whose emission is a glyph or a line is not. A checked checkbox is the clearest case: it has no ground at all, and draws its state by stroking an outline, so it is absent from the table below rather than scored at zero. The same is true of a link, a heading and an icon.

That is a real gap and not a tidy one, because ADR-0004 is explicit that a dark glyph on white pulls the eye. Marks are unscored for now because the formula weights by area, and a mark’s area is decided by layout rather than by the token. Scoring them needs either the rendering step the budget engine does or an agreed nominal area, and guessing one would put a number on the page that no second renderer would reproduce.

The vocabulary, scored

Every ground in the system, loudest first. The two themes are measured separately because they have different headroom, and the same appearance can land on different rungs in each.

AppearanceGroundLightDark
banner--announcementneutral-boldest0.714Marked0.809Marked
flag--infoneutral-boldest0.714Marked0.809Marked
tooltipneutral-boldest0.714Marked0.809Marked
spotlightpurple-bold0.503Marked0.722Marked
toggleneutral-bold0.462Marked0.582Marked
button--primarybrand-bold0.460Marked0.598Marked
toggle--checkedbrand-bold0.460Marked0.598Marked
avatarbrand-bold0.460Marked0.598Marked
progress-barbrand-bold0.460Marked0.598Marked
progress-trackerbrand-bold0.460Marked0.598Marked
objectbrand-bold0.460Marked0.598Marked
object--taskbrand-bold0.460Marked0.598Marked
calendarbrand-bold0.460Marked0.598Marked
meterbrand-bold0.460Marked0.598Marked
progress-indicatorbrand-bold0.460Marked0.598Marked
flag--successgreen-bold0.454Marked0.691Marked
meter--successgreen-bold0.454Marked0.691Marked
progress-bar--successlime-bold0.450Marked0.695Marked
object--storylime-bold0.450Marked0.695Marked
button--warningwarning-bold0.448Marked0.601Marked
bannerwarning-bold0.448Marked0.601Marked
banner--warningwarning-bold0.448Marked0.601Marked
flag--warningwarning-bold0.448Marked0.601Marked
button--discoverydiscovery-bold0.444Marked0.624Marked
object--epicdiscovery-bold0.444Marked0.624Marked
button--dangerdanger-bold0.443Marked0.617Marked
avatardanger-bold0.443Marked0.617Marked
banner--errordanger-bold0.443Marked0.617Marked
flag--errordanger-bold0.443Marked0.617Marked
object--bugdanger-bold0.443Marked0.617Marked
meter--criticaldanger-bold0.443Marked0.617Marked
avatargreen-bright0.373Marked0.610Marked
meter--cautionyellow-bold0.354Marked0.619Marked
avatargray-bold0.350Marked0.477Marked
blanketblanket0.350Marked0.047Substrate
progress-bar--inversetrack-inverse0.124Ambient0.189Ambient
progress-indicatorneutral-strong0.113Ambient0.129Ambient
badgeaccent-gray-subtler0.099Ambient0.236Marked
badge--defaultaccent-gray-subtler0.099Ambient0.236Marked
tagaccent-gray-subtler0.099Ambient0.236Marked
avataraccent-gray-subtler0.099Ambient0.236Marked
avatar-groupaccent-gray-subtler0.099Ambient0.236Marked
lozenge--magentaaccent-magenta-subtler0.096Ambient0.122Ambient
tag--magentaaccent-magenta-subtler0.096Ambient0.122Ambient
lozenge--inprogressaccent-blue-subtler0.095Ambient0.110Ambient
badge--primaryaccent-blue-subtler0.095Ambient0.110Ambient
tag--blueaccent-blue-subtler0.095Ambient0.110Ambient
tile--blueaccent-blue-subtler0.095Ambient0.110Ambient
lozenge--removedaccent-red-subtler0.092Ambient0.124Ambient
badge--removedaccent-red-subtler0.092Ambient0.124Ambient
tag--redaccent-red-subtler0.092Ambient0.124Ambient
date-label--removedaccent-red-subtler0.092Ambient0.124Ambient
tile--redaccent-red-subtler0.092Ambient0.124Ambient
lozenge--newaccent-purple-subtler0.091Ambient0.127Ambient
tag--purpleaccent-purple-subtler0.091Ambient0.127Ambient
tile--purpleaccent-purple-subtler0.091Ambient0.127Ambient
lozenge--successaccent-green-subtler0.081Ambient0.172Ambient
tag--greenaccent-green-subtler0.081Ambient0.172Ambient
date-label--successaccent-green-subtler0.081Ambient0.172Ambient
tile--greenaccent-green-subtler0.081Ambient0.172Ambient
lozenge--limeaccent-lime-subtler0.081Ambient0.175Ambient
badge--addedaccent-lime-subtler0.081Ambient0.175Ambient
tag--limeaccent-lime-subtler0.081Ambient0.175Ambient
lozenge--tealaccent-teal-subtler0.077Ambient0.166Ambient
tag--tealaccent-teal-subtler0.077Ambient0.166Ambient
lozenge--yellowaccent-yellow-subtler0.077Ambient0.183Ambient
tag--yellowaccent-yellow-subtler0.077Ambient0.183Ambient
lozenge--movedaccent-orange-subtler0.076Ambient0.188Ambient
badge--importantaccent-orange-subtler0.076Ambient0.188Ambient
tag--orangeaccent-orange-subtler0.076Ambient0.188Ambient
date-label--movedaccent-orange-subtler0.076Ambient0.188Ambient
buttonneutral0.042Ambient0.066Substrate
buttondisabled0.042Ambient0.129Ambient
button--defaultneutral0.042Ambient0.066Substrate
textfield--disableddisabled0.042Ambient0.129Ambient
toggle--disableddisabled0.042Ambient0.129Ambient
lozengeneutral0.042Ambient0.066Substrate
lozenge--defaultneutral0.042Ambient0.066Substrate
progress-barneutral0.042Ambient0.066Substrate
skeletonneutral0.042Ambient0.066Substrate
progress-trackerneutral0.042Ambient0.066Substrate
date-labelneutral0.042Ambient0.066Substrate
tileneutral0.042Ambient0.066Substrate
inline-editneutral0.042Ambient0.066Substrate
meterneutral0.042Ambient0.066Substrate
codeneutral0.042Ambient0.066Substrate
button--selectedselected0.042Ambient0.062Substrate
menuselected0.042Ambient0.062Substrate
section-messageaccent-blue-subtlest0.042Ambient0.062Substrate
section-message--informationaccent-blue-subtlest0.042Ambient0.062Substrate
section-message--erroraccent-red-subtlest0.042Ambient0.071Ambient
paginationselected0.042Ambient0.062Substrate
side-navselected0.042Ambient0.062Substrate
section-message--discoveryaccent-purple-subtlest0.038Ambient0.070Substrate
section-message--warningaccent-yellow-subtlest0.029Ambient0.086Ambient
section-message--successaccent-lime-subtlest0.022Ambient0.076Ambient
code-blocksurface-sunken0.021Substrate0.036Substrate
button--subtleneutral-subtle0.000Substrate0.000Substrate
textfieldsurface0.000Substrate0.000Substrate
togglesurface0.000Substrate0.000Substrate
badge--primary-invertedsurface0.000Substrate0.000Substrate
popupsurface-overlay0.000Substrate0.070Ambient
modalsurface-overlay0.000Substrate0.070Ambient
drawersurface0.000Substrate0.000Substrate
flagsurface-overlay0.000Substrate0.070Ambient
progress-bar--inversesurface0.000Substrate0.000Substrate
panelsurface0.000Substrate0.000Substrate
calendarsurface0.000Substrate0.000Substrate
side-navsurface0.000Substrate0.000Substrate