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.
| Level | Name | Light | Dark | What it means |
|---|---|---|---|---|
| 0 | Substrate | 0 to 0.020871 | 0 to 0.069979 | Indistinguishable from the ground it sits on. It asks for nothing and is measured as asking for nothing. |
| 1 | Ambient | to 0.139939 | to 0.231711 | Present and readable, bidding for no attention of its own. Most of a working screen is here. |
| 2 | Marked | above 0.139939 | above 0.231711 | Plainly a different surface. Found when looked for, without being pushed at the reader. |
| 3 | Directed | not absolute | not absolute | Relative, not absolute. The largest emission share among the non-Demanded elements in its Scope, by more than the measurement can mistake. |
| 4 | Demanded | not absolute | not absolute | Takes 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.
| 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 |