Skip to contentWolf-Rayet

Intensity

The system budgets attention. Intensity is how much attention an appearance uses. This page scores every ground a component can take, in both themes, by measuring it.

Levels

All three channels share the same five levels. When someone turns on reduced motion, the motion channel goes away. So every channel has to be able to show the full hierarchy on its own.

LevelNameLightDarkWhat it means
0Substrate0 to 0.0208710 to 0.069979Cannot be told apart from the ground it sits on. It asks for no attention, and it measures that way.
1Ambientto 0.139939to 0.231711Visible and readable, but it does not try to draw attention. Most of a working screen is at this level.
2Markedabove 0.139939above 0.231711Clearly a different surface. Easy to find when you look for it, but it does not push itself at you.
3Directednot absolutenot absoluteMeasured against its neighbours, not on a fixed scale. It has the largest share of emission among the elements in its Scope that are not Demanded, by more than the margin of measurement error.
4Demandednot absolutenot absoluteTakes attention whether or not the user wanted to give it. It must be declared. Only one is allowed per Scope, and each View has a cap.

How a ground is scored

The formula, shown so you can check it.

A Scope’s emission load is the average absolute perceptual difference from its substrate, normalised by the available headroom. The part that does not depend on size is the difference for a single pixel. You can work it out without rendering anything:

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

L is OKLab lightness, not relative luminance. Lightness is perceptually uniform. Luminance squeezes almost everything a dark interface does into the bottom of its range. The sign is dropped, because a mark draws the eye whether it is lighter or darker than its ground. A dark glyph on white draws the eye just as a bright badge on black does. The normaliser keeps the number comparable between themes. A substrate near the middle has the least room to stand out in either direction, so it is charged more.

A translucent ground is blended onto the substrate before it is measured, because that is what the eye sees. Hover, focus and pressed states are left out. They follow the pointer and last only as long as it stays.

The two boundaries between the measured levels come from the theme. Nobody picks them by hand, which is why the table above differs between themes. A Scope sits on a ground it did not choose and cannot spend. So the Substrate band reaches as far from the page as the furthest of the four surface roles. Above that, an appearance may differ by one step of the theme’s neutral scale before it reads a level louder than the surface under it. That is where Ambient ends. The dominance margin is measured in the same steps. The two themes space their neutrals differently, so each theme gets its own boundaries. One pair for both would apply one theme’s scale to the whole system.

Why scoring stops at Marked

Two of the five levels cannot be read from a single appearance.

Substrate, Ambient and Marked are absolute, so they can be measured from the tokens alone. Directed cannot. It goes to the element with the largest emission share in its Scope, leaving out Demanded elements, and that element has to lead the next one by a level. Here a level is one step of the theme’s scale, spread over the pixels the leading element covers. So a small element needs a smaller lead than a large one. When two elements are closer than that, the Scope is undecided and neither is Directed. Directed describes a composition, not a single component.

Demanded is declared and limited: 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 for a Scope’s demand. It is not a demand by itself.

What this does not measure

The limits of this score.

This scores filled areas, not marks. A component that draws attention with a ground is measured here. One that draws attention with a glyph or a line is not. A checked checkbox is the clearest case. It has no ground at all and shows its state with an outline, so it is left out of the table below instead of scored at zero. The same is true of a link, a heading and an icon.

This is a real gap. ADR-0004 says clearly that a dark glyph on white draws the eye. Marks are not scored yet because the formula weights by area, and the area of a mark depends on layout, not on the token. Scoring marks needs either the rendering step the budget engine does, or an agreed nominal area. A guessed area would put a number on the page that another renderer could not reproduce.

Scores for every ground

Every ground in the system, loudest first. The two themes are measured separately because they have different headroom, so the same appearance can land on different levels 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