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.
| Level | Name | Light | Dark | What it means |
|---|---|---|---|---|
| 0 | Substrate | 0 to 0.020871 | 0 to 0.069979 | Cannot be told apart from the ground it sits on. It asks for no attention, and it measures that way. |
| 1 | Ambient | to 0.139939 | to 0.231711 | Visible and readable, but it does not try to draw attention. Most of a working screen is at this level. |
| 2 | Marked | above 0.139939 | above 0.231711 | Clearly a different surface. Easy to find when you look for it, but it does not push itself at you. |
| 3 | Directed | not absolute | not absolute | Measured 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. |
| 4 | Demanded | not absolute | not absolute | Takes 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.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| banner--announcement | neutral-boldest | 0.714Marked | 0.809Marked |
| flag--info | neutral-boldest | 0.714Marked | 0.809Marked |
| tooltip | neutral-boldest | 0.714Marked | 0.809Marked |
| spotlight | purple-bold | 0.503Marked | 0.722Marked |
| toggle | neutral-bold | 0.462Marked | 0.582Marked |
| button--primary | brand-bold | 0.460Marked | 0.598Marked |
| toggle--checked | brand-bold | 0.460Marked | 0.598Marked |
| avatar | brand-bold | 0.460Marked | 0.598Marked |
| progress-bar | brand-bold | 0.460Marked | 0.598Marked |
| progress-tracker | brand-bold | 0.460Marked | 0.598Marked |
| object | brand-bold | 0.460Marked | 0.598Marked |
| object--task | brand-bold | 0.460Marked | 0.598Marked |
| calendar | brand-bold | 0.460Marked | 0.598Marked |
| meter | brand-bold | 0.460Marked | 0.598Marked |
| progress-indicator | brand-bold | 0.460Marked | 0.598Marked |
| flag--success | green-bold | 0.454Marked | 0.691Marked |
| meter--success | green-bold | 0.454Marked | 0.691Marked |
| progress-bar--success | lime-bold | 0.450Marked | 0.695Marked |
| object--story | lime-bold | 0.450Marked | 0.695Marked |
| button--warning | warning-bold | 0.448Marked | 0.601Marked |
| banner | warning-bold | 0.448Marked | 0.601Marked |
| banner--warning | warning-bold | 0.448Marked | 0.601Marked |
| flag--warning | warning-bold | 0.448Marked | 0.601Marked |
| button--discovery | discovery-bold | 0.444Marked | 0.624Marked |
| object--epic | discovery-bold | 0.444Marked | 0.624Marked |
| button--danger | danger-bold | 0.443Marked | 0.617Marked |
| avatar | danger-bold | 0.443Marked | 0.617Marked |
| banner--error | danger-bold | 0.443Marked | 0.617Marked |
| flag--error | danger-bold | 0.443Marked | 0.617Marked |
| object--bug | danger-bold | 0.443Marked | 0.617Marked |
| meter--critical | danger-bold | 0.443Marked | 0.617Marked |
| avatar | green-bright | 0.373Marked | 0.610Marked |
| meter--caution | yellow-bold | 0.354Marked | 0.619Marked |
| avatar | gray-bold | 0.350Marked | 0.477Marked |
| blanket | blanket | 0.350Marked | 0.047Substrate |
| progress-bar--inverse | track-inverse | 0.124Ambient | 0.189Ambient |
| progress-indicator | neutral-strong | 0.113Ambient | 0.129Ambient |
| badge | accent-gray-subtler | 0.099Ambient | 0.236Marked |
| badge--default | accent-gray-subtler | 0.099Ambient | 0.236Marked |
| tag | accent-gray-subtler | 0.099Ambient | 0.236Marked |
| avatar | accent-gray-subtler | 0.099Ambient | 0.236Marked |
| avatar-group | accent-gray-subtler | 0.099Ambient | 0.236Marked |
| lozenge--magenta | accent-magenta-subtler | 0.096Ambient | 0.122Ambient |
| tag--magenta | accent-magenta-subtler | 0.096Ambient | 0.122Ambient |
| lozenge--inprogress | accent-blue-subtler | 0.095Ambient | 0.110Ambient |
| badge--primary | accent-blue-subtler | 0.095Ambient | 0.110Ambient |
| tag--blue | accent-blue-subtler | 0.095Ambient | 0.110Ambient |
| tile--blue | accent-blue-subtler | 0.095Ambient | 0.110Ambient |
| lozenge--removed | accent-red-subtler | 0.092Ambient | 0.124Ambient |
| badge--removed | accent-red-subtler | 0.092Ambient | 0.124Ambient |
| tag--red | accent-red-subtler | 0.092Ambient | 0.124Ambient |
| date-label--removed | accent-red-subtler | 0.092Ambient | 0.124Ambient |
| tile--red | accent-red-subtler | 0.092Ambient | 0.124Ambient |
| lozenge--new | accent-purple-subtler | 0.091Ambient | 0.127Ambient |
| tag--purple | accent-purple-subtler | 0.091Ambient | 0.127Ambient |
| tile--purple | accent-purple-subtler | 0.091Ambient | 0.127Ambient |
| lozenge--success | accent-green-subtler | 0.081Ambient | 0.172Ambient |
| tag--green | accent-green-subtler | 0.081Ambient | 0.172Ambient |
| date-label--success | accent-green-subtler | 0.081Ambient | 0.172Ambient |
| tile--green | accent-green-subtler | 0.081Ambient | 0.172Ambient |
| lozenge--lime | accent-lime-subtler | 0.081Ambient | 0.175Ambient |
| badge--added | accent-lime-subtler | 0.081Ambient | 0.175Ambient |
| tag--lime | accent-lime-subtler | 0.081Ambient | 0.175Ambient |
| lozenge--teal | accent-teal-subtler | 0.077Ambient | 0.166Ambient |
| tag--teal | accent-teal-subtler | 0.077Ambient | 0.166Ambient |
| lozenge--yellow | accent-yellow-subtler | 0.077Ambient | 0.183Ambient |
| tag--yellow | accent-yellow-subtler | 0.077Ambient | 0.183Ambient |
| lozenge--moved | accent-orange-subtler | 0.076Ambient | 0.188Ambient |
| badge--important | accent-orange-subtler | 0.076Ambient | 0.188Ambient |
| tag--orange | accent-orange-subtler | 0.076Ambient | 0.188Ambient |
| date-label--moved | accent-orange-subtler | 0.076Ambient | 0.188Ambient |
| button | neutral | 0.042Ambient | 0.066Substrate |
| button | disabled | 0.042Ambient | 0.129Ambient |
| button--default | neutral | 0.042Ambient | 0.066Substrate |
| textfield--disabled | disabled | 0.042Ambient | 0.129Ambient |
| toggle--disabled | disabled | 0.042Ambient | 0.129Ambient |
| lozenge | neutral | 0.042Ambient | 0.066Substrate |
| lozenge--default | neutral | 0.042Ambient | 0.066Substrate |
| progress-bar | neutral | 0.042Ambient | 0.066Substrate |
| skeleton | neutral | 0.042Ambient | 0.066Substrate |
| progress-tracker | neutral | 0.042Ambient | 0.066Substrate |
| date-label | neutral | 0.042Ambient | 0.066Substrate |
| tile | neutral | 0.042Ambient | 0.066Substrate |
| inline-edit | neutral | 0.042Ambient | 0.066Substrate |
| meter | neutral | 0.042Ambient | 0.066Substrate |
| code | neutral | 0.042Ambient | 0.066Substrate |
| button--selected | selected | 0.042Ambient | 0.062Substrate |
| menu | selected | 0.042Ambient | 0.062Substrate |
| section-message | accent-blue-subtlest | 0.042Ambient | 0.062Substrate |
| section-message--information | accent-blue-subtlest | 0.042Ambient | 0.062Substrate |
| section-message--error | accent-red-subtlest | 0.042Ambient | 0.071Ambient |
| pagination | selected | 0.042Ambient | 0.062Substrate |
| side-nav | selected | 0.042Ambient | 0.062Substrate |
| section-message--discovery | accent-purple-subtlest | 0.038Ambient | 0.070Substrate |
| section-message--warning | accent-yellow-subtlest | 0.029Ambient | 0.086Ambient |
| section-message--success | accent-lime-subtlest | 0.022Ambient | 0.076Ambient |
| code-block | surface-sunken | 0.021Substrate | 0.036Substrate |
| button--subtle | neutral-subtle | 0.000Substrate | 0.000Substrate |
| textfield | surface | 0.000Substrate | 0.000Substrate |
| toggle | surface | 0.000Substrate | 0.000Substrate |
| badge--primary-inverted | surface | 0.000Substrate | 0.000Substrate |
| popup | surface-overlay | 0.000Substrate | 0.070Ambient |
| modal | surface-overlay | 0.000Substrate | 0.070Ambient |
| drawer | surface | 0.000Substrate | 0.000Substrate |
| flag | surface-overlay | 0.000Substrate | 0.070Ambient |
| progress-bar--inverse | surface | 0.000Substrate | 0.000Substrate |
| panel | surface | 0.000Substrate | 0.000Substrate |
| calendar | surface | 0.000Substrate | 0.000Substrate |
| side-nav | surface | 0.000Substrate | 0.000Substrate |