Materials

The six layers

Back to front:

Stacked

All six together — this is what the landing page hero is, technically.

Rules

Working with glass

Where it is, and where it deliberately is not

Two surfaces in the whole system are frosted: the navigation band, and the hero button. They do overlap, for about 150 px of scroll — see Cost below, which this sentence used to contradict by claiming they never meet. Everything else that looks like a panel — the process card and its note block, the value-table cells, the blog-grid cells, the footer CTA — sits on the page wash with nothing complex behind it, so it is drawn with a contour instead. Frosted glass there would be an effect rather than a material.

The plate could not hold still either, which is the part that generalises. The wash is viewport-fixed, so it runs CF-Grau to white down every screen regardless of scroll position. Measured at 1280 × 900, the card's plate stood +37.6 off the page near the top of the viewport and +7.5 near the bottom — the same card separating from its own page five times as strongly at one scroll position as at another, and dissolving into it at the last. A contour is ink. It is the same line wherever the card happens to be.

Every panel, and what it is made of

The question each one has to answer is the manual's, not a preference: is there something complex behind this, which frosted glass would calm? Six times the answer is no, and the interesting part is that "no" does not mean "nothing" — it means contour, and a surface only where a block genuinely has to read as set back from the one it is in.

The split in that last column is the rule worth carrying forward, and it is why the process card gets no sheen even though it is the largest panel on the page. --sheen-panel is a response: light crossing a surface because a pointer arrived at something that will answer. The blog cell is a link and the accordion row opens. The process card, the value row and the note block do nothing when you click them, and lighting them on hover would promise otherwise.

Those panels still respond. --sheen-panel parks a light gradient in its own transparent half and slides it across on hover, so the row reads as lit rather than tinted. It is the light layer, not the glass layer, and it is never lime — the screen only gets one lime moment and the page has already spent it.

The three glass surfaces answer three different things, and now all three answer something. Read down that column and the pattern is a question about what the reader is doing to the surface, not about what the surface is: the navigation band is a plane the whole document moves under, so its light is scrubbed by the document; the hero button is the thing a pointer arrives at, so its light is scrubbed by the pointer. The info-card plate is neither — it is not a link, and on the pinned Expertise stage it is deliberately the one object that does not change while the copy on it does. What it can answer is the reader travelling past it, so its band is scrubbed by its own passage: view() for a card that scrolls by, and the stage's own timeline for the plate that is pinned, because a pinned element's view progress freezes at exactly the moment the reader starts moving through it. Until this run it was the only frosted surface in the system with a rim that never moved, which read as the material being switched off on the one panel a reader spends the longest looking at.

All three put the moving light on an unblurred one-pixel rim beside the sheet rather than on the sheet. That is not a stylistic agreement, it is the cost rule: moving a gradient across a backdrop-filter layer makes the browser re-rasterise the blur on every frame it runs, and a scroll-driven animation runs for the length of a document. scripts/check-glass-budget.py fails the build on it, so the agreement cannot quietly lapse.

One panel has the complex backdrop that would justify glass and is opaque anyway: the mobile navigation menu. It drops out of the bar directly over the hero video, which is exactly the condition the manual reserves frosted glass for — and it is still a plate, because it is the only surface on the site that bears text over a backdrop that changes 25 times a second. Bearing glass holds 4.5:1 against a worst-case frame; an opaque plate holds 16:1 against every frame, and on the primary control of the whole mobile page that margin is worth more than the material. Glass is for calming a graphic you still want to see. Nobody needs to see the video through the menu.

It is also the one panel in the system that opens, and how it opens follows from the same reasoning: a clip edge travels down it, so the plate is fully opaque in every frame of the motion. A fade would put the labels over a partly transparent plate for the length of the transition and hand the contrast floor back to whichever frame was playing. This is light only adds — the rule below — restated for a reveal: the guarantee never depends on how far the wipe has travelled, exactly as it never depends on where the highlight is.

A control's edge

The rim alone does not give the hero CTA a boundary. Every layer on this material adds light, so a glass plate approaches its backdrop as its backdrop approaches white, and the whole perimeter goes with it. Measured on the hero CTA against the shipping artwork, worst pixel per edge, consent banner dismissed:

Every edge of the primary call to action on the site, at every desktop width, against a 3:1 requirement. The label was never in question and still is not — it measures 16.8:1, because the bearing tint guarantees it over any frame. What these numbers are about is the plate's perimeter, and only that.

Nothing painted against the artwork can be guaranteed, and this is the part worth carrying to the next component. The artwork is a video: black holds only where the backdrop is light, white only where it is dark, and a frame can be either. A darker rim could not have fixed it, a lighter one could not either, and no amount of sampling frames settles a case that is decided by the frames nobody sampled. That is the same wall the focus ring hit.

Which leaves exactly two honest answers, and neither of them is a line:

• An opaque plate. 16:1 against every frame, no arithmetic required. This is what the mobile navigation menu already does, on the same artwork, for the same reason — see below. It costs the material: an opaque CTA is not glass any more.
• No claim. The control is identified by everything that is not its outline — the mono label, the arrow, the lime end, the specular that answers the pointer — and the plate simply does not assert a measured boundary against arbitrary artwork.

The button is currently the second one. That is a decision and it is recorded here rather than left to be discovered: the numbers in the table above are live again. Anyone who wants the first can have it, and it is a design change — a different material on the hero CTA — not a token coming back. Do not reintroduce the ring.

How glass responds to the reader

Glass gets a different treatment from a flat panel, because a sheet of glass has a specular. The hero button carries a soft band of light — --cf-specular, a registered custom property so it interpolates rather than switches — parked off the right edge at rest and travelling in across the plate on hover and on focus. It is a band and not a blob: the gradient's vertical radius is 300 % of the button, so almost no falloff happens across a 48 px plate and what crosses it is a column of light, which is what a flat sheet does with a grazing source. Refraction hinted at, never simulated.

And the same plate answers the scroll, because a pointer is not the only way a reader arrives at it. Until recently every response this button made was gated on :hover, :focus-visible or :active — none of which a touch device ever sends. The primary call to action of the whole site was therefore a static plate for every reader on a phone, on the one surface where the brand's north star, a foil that shifts as you move past it, had the best chance of being true. So the rim carries --glass-rim-light as well: the same band, the same 40 % width and the same two parking positions the navigation sheet uses, crossing once as the button travels up the screen.

Two lights on one control do not collide, because they are on the two layers this family already keeps apart. --cf-specular is on the face — the source reflected, achromatic, driven by the pointer. The band is on the edge, over --glass-edge, driven by the scroll. One lit edge with hue, one specular without: the division below is now literally true on both frosted surfaces rather than true on one and asserted on the other.

It is windowed to the rim's own 62 %, not to the plate, which is what keeps it off the lime. The band parks off the left of that window and leaves off its right, so the light dies at exactly the x where --glass-edge has already faded to nothing. Sampled across the plate as it crosses the viewport, the lime end (69–94 % across) does not move by a single level at any scroll position.

And it touches exactly one row, which is measured rather than reasoned from the geometry. Differencing the rendered plate with the band running against the same plate with it parked, at 1280 px: of 256 × 48 pixels, 54 differ by more than one level and every one of them is on row 0, max delta 13. Rows 1 to 47 — the whole label, the arrow, and every pixel of the bearing tint the type sits on — come back byte-identical at every scroll position sampled.

That is also why this layer needs no contrast table of its own, and the reason is the ruling above rather than an exemption. The plate makes no boundary claim against the artwork: glass is not outlined in this brand, so the rim is the material's edge and not a guaranteed 3:1 line, and adding white to a decorative rim cannot cost anything that was being counted. The floor that is counted is the label's, and it is set by background-color — beneath every image layer, and 24 rows away from a 1 px strip painted on the border box above the type. There was never a mechanism by which the band could reach it. The diff is here because it cannot is worth one measurement.

It is a pseudo-element, and that is the whole engineering of it. The plate carries backdrop-filter, and the rule under Cost below — never move anything on a blurred layer — applies to its own background as much as to the sheet's. The navigation already has the split it needs, blur on ::before and rim on ::after; this button paints blur, face and rim on one element, so the travelling band got an unblurred layer of its own and the plate's three background layers were left untouched. That is also what keeps every contrast figure measured on this component still valid — not one of them moved. Swept 3,000 px at 1280 px, three runs each way: 16.70 ms median and 16.8–16.9 ms p95 with the band and without it, indistinguishable.

Light only adds — behind the label. Every layer between the bearing tint and the label lightens, so the darkest point the label ever sits on is the tint itself and the contrast floor is the same whether the highlight is present or not. The guarantee never depends on where the light happens to be.

The button ends at the same edge the sheet does. This page asserted that below — "one lit edge with hue, one specular without, on the sheet exactly as on the button" — for longer than it was true. --glass-edge was on the navigation rim and nowhere else; what the button had was a flat white 55 % border and a face gradient carrying Glas into lime, which is a lit face. The claim was the right design and the code has caught up to it: the token is now the button's top pixel too, painted on the border box under the rim colour, so both frosted surfaces in the system end at one edge drawn from one declaration.

The rim colour was a second copy of the same problem and is fixed the same way. --glass-border held white 55 % and was read by exactly one rule in the system — the .material-glass swatch on this page — while the only shipping glass surface with a border wrote the value out by hand. The two could not be changed together, and the inverse theme's redeclaration of the token reached the documentation swatch and never the button. The button reads the token now.

It is windowed, not rewritten, and that distinction is the rule worth carrying. --glass-edge is authored for a full-bleed sheet with no lime on it; this plate has lime at its right end, and running the edge's Sky tail into that end would put the material's chroma in two places at once — the same failure a Glas tail on the specular would cause. So the layer is sized to 62 % of the plate and the whole gradient renders inside that window: Weiss peaks at 9.9 % across, Glas at 33.5 %, Sky at 49.6 %, transparent again by 62 %. The face's lime becomes visible at about 63 %, measured — well before its declared 87 % stop — so the rim expires one point before the lime arrives, which is the relationship the specular already has. Size the layer and leave the stops alone; editing stop positions to fit a narrower box forks the family into two edges that merely resemble each other.

The rim costs no contrast, and it is worth saying why rather than asserting it, because the rim is the one layer on this plate that is not strictly additive — which is why the rule above now reads "behind the label" where it used to read "on the button". Measured on the rendered plate at 1280 px: over a white backdrop the rim's Sky stop is rgb(232,243,249) against a plate of rgb(235,248,245) — relative luminance 0.881 against 0.914, so the rim sits 3.6 % darker than what it crosses. Over a black backdrop the same point reads rgb(202,213,219) against rgb(144,157,154) and is far lighter. That is a real edge taking the colour of the light rather than always brightening, and it is the behaviour to want. It costs nothing because it is one pixel at the top of a 48 px plate, above the label rather than behind it, and the plate's floor is its background-color, which sits beneath all three image layers and covers the whole box either way. Sampled at the label's own row, every value is byte-identical to what the button rendered before the rim existed.

One mechanical consequence: background-repeat: no-repeat is now load-bearing on that rule. Every layer used to size to auto and fill the box, so the initial repeat had nothing to do; a 1 px layer under it would tile the rim down all 48 px of the plate.

That rule is about the type: what it protects is the darkest point under the label, which is why the label's 4.5:1 holds wherever the highlight happens to be. It was worth saying out loud while a dark ring sat at the padding edge, because the two looked like a contradiction and were not — one is a promise about legibility, the other was ink far from anything anybody reads. The ring is gone; the distinction is kept, because the next thing anyone adds near this edge will raise it again.

The navigation sheet gets a specular too, and it is driven by the scroll rather than by the pointer. It used to be stated as the sheet having no specular at all. A highlight travelling across the full width of the viewport on hover would be a screen effect, and the bar is not a thing you point at — it is a thing you scroll past. So the sheet answers the only gesture it actually receives: --glass-rim-light, a band 40 % of the bar wide, parked off the left edge and crossing the rim once over the length of the document. The reader moving down the page is the reader moving past the material, which is the one thing holographic stock does that a photograph of it cannot.

Read that as being about the gesture a surface actually receives, not as a partition between the two surfaces, because the hero button receives both and now answers both. The rule that generalises is: give a surface the light for every way a reader can arrive at it, and put each light on the layer that belongs to it — the pointer on the face, the passage on the edge. What would be wrong is the sheet answering a hover it never gets, or the plate answering only a hover half its readers cannot send.

Two things about it are load-bearing. It is on the rim, not on the sheet — see Cost below; and it is achromatic, because --glass-edge already carries this material's hue travel and a specular is the source reflected rather than the surface coloured. One lit edge with hue, one specular without, on the sheet exactly as on the button. It is also additive: parked off-canvas at rest, so a browser with no scroll timeline and a reader who has asked for reduced motion both get --glass-edge drawn exactly as it is designed, with nothing subtracted.

The rim carries a second, separate animation that is not a specular and should not be confused with one: --glass-edge fades in over the first 5 rem of scroll. That is a state change — the bar ceasing to be part of the hero and becoming a plane over the page — where the specular is not a state at all. Different thing, different range, same one pixel.

Animate the property, not the paint. A gradient background-image does not interpolate: given two gradients differing in a single number, the browser jumps to the new one on the first frame. So a highlight that is drawn as a gradient can only be moved by animating a registered custom property that the gradient reads — which is what @property is for, and why naming background in the transition would animate nothing.

Scope that narrowly. The rule is "a transition whose only moving part is a gradient animates nothing" — not "background in a transition list animates nothing". background-color interpolates perfectly well, and the base .cf-btn rule depends on it: measured mid-transition, --outline runs rgba(0,0,0,0) → rgba(0,0,0,0.88) → black and --solid runs rgb(27,32,34) → rgb(3,4,4) → black. --primary is the mixed case: its gradient snaps on frame one while the colour fades in underneath. Stripping background from that base rule on the strength of the paragraph above would silently kill two real transitions and half of a third.

Always declare that property's rest value on the component, as a plain declaration. This is the part worth carrying to the next component, because the failure mode is not the one you would guess and neither is the fix. Leaving the rest value to @property's initial-value alone means that in a browser without @property the variable is unset — and an unresolvable var() is guaranteed-invalid, which makes the entire background shorthand invalid at computed-value time. Every layer goes, not just the highlight: measured with the registration stripped, the button computed to background-image: none over a transparent background-color. backdrop-filter is a separate declaration and survives, so what was left was a blur with no plate — on the hero, a pure-black label directly over moving video with no bearing tint holding the contrast floor. A missing highlight would be cosmetic; a missing declaration is not.

A var(--cf-specular, 150%) fallback would resolve the value too, and in a correct browser it should be indistinguishable — a registered property with an initial-value is never guaranteed-invalid, so its fallback is never consulted and the two forms are equivalent. Use the plain declaration because it states the guarantee where the declaration is, rather than leaving it implied inside a var() argument that a reader may take for decoration and remove.

A Chromium 141 repaint quirk was cited here as a second reason and has been demoted, because it does not reproduce the way this page tells you to test. Driven by pointer hover, the fallback form does not repaint while the property interpolates — the plate holds its rest paint and snaps at the end, measured at identical property values rather than identical times. Driven by element.focus(), both forms travel identically. A reviewing lane could not reproduce it at all, for exactly that reason. Recorded here so nobody re-derives it, and deliberately load-bearing on nothing: if it were left as an argument, the first person to check it correctly would find nothing and delete the sound reasoning next to it.

Two traps worth remembering on their own, because between them they rule out both obvious ways of checking this by script. getComputedStyle cannot see the invalidation failure — the property reads as interpolating in both forms, to three decimal places, so an animation verified only by sampling computed values looks correct while painting nothing. And driving the property through element.style.setProperty() does not repaint at all in Chromium 141: sixteen columns sampled at 150 % and at 40 % come back byte-identical, while a real :hover repaints correctly. That is a wider invalidation footprint than the fallback case above, and it means the natural way to script this test returns a false negative on a form that actually works. Drive it through the real selector — a :focus-visible via element.focus() is the cleanest handle, since it needs no pointer and cannot scroll the page — and read pixels, not values.

One catch to carry with the rule: the rest value now exists twice — as initial-value in the @property block and as the declaration on the component — and nothing but a comment holds the two equal. They must move together. initial-value has to be a literal, so it cannot read the token, which means there is no way to make the coupling structural; the next component using this technique will inherit the same seam.

A plain declaration is the one option that gets both. Registered it is simply the from-value and interpolation is unaffected; unregistered it keeps the var() resolvable, so the plate survives and the highlight switches instead of travelling. The state change still reads and the contrast floor is untouched.

Reduced motion needs no handling here, but only by inheritance: --cf-specular is transitioned over --duration-slow, which tokens.css collapses to 1 ms under prefers-reduced-motion: reduce. The next component animating a registered property inherits that protection only if it also reaches for a duration token rather than writing a literal.

Cost

backdrop-filter is the most expensive thing in this stylesheet. The rules that keep it affordable: never add a third blurred layer; keep the blur radius at 16 px, since more reads no better; use position: sticky rather than fixed, because a fixed blurred element repaints its whole region every scroll frame in iOS Safari; and run nothing open-ended on a blurred layer, because moving its opacity or a gradient across it re-rasterises the blur on every frame it runs. That last rule is why both of the navigation's animations live on its one-pixel rim rather than on its sheet: an unblurred gradient is free, and a sheet that wants to respond to the reader can always do it through the edge it ends at. A sheet may reach past its own edge by --glass-lookahead so content arrives through the blur rather than popping into it, but no further — everything past one blur kernel is spend with nothing to show.

It used to read never move anything, and the shipping system has never obeyed that. .cf-btn--glass paints its blur, its face and its rim on one element, and --cf-specular travels a gradient across that face on every hover, focus and press. The rule as written called the site's primary call to action a violation of itself, which is the kind of sentence that gets a sound piece of design deleted by whoever reads it next.

The line is not whether a thing moves but how long it runs and what it runs against. A transition is bounded, user-initiated and over: the specular's is --duration-slow, one plate of 256 × 48, and the reader is holding still while it plays. A scroll-driven animation is neither — it runs for the length of the document, and every frame of it lands while the compositor is already re-reading the backdrop underneath. Measured on the landing page at 1280 px, driving the specular through :focus-visible over 58 frames, three runs each way: the blurred plate gives a 16.70 ms median and a 16.9–18.2 ms p95, and the same plate with its backdrop-filter removed gives 16.70 ms and 16.9–17.0 ms. Indistinguishable, which is what makes the exception real rather than tolerated.

So the rule that pays, and the one scripts/check-glass-budget.py actually enforces, is: no animation and no animation-timeline on a rule that declares backdrop-filter. Transitions are left alone deliberately. Stating it that way also makes it countable in a file, where never move anything was only ever countable by argument — and it is still what put .cf-nav::after and .cf-btn--glass::before on layers of their own, because both of those are scroll-scrubbed and neither would have been allowed to stay.

The two blurred layers do overlap, and the system used to claim they never do. The hero CTA is on the first screen and the bar is sticky, so the button passes under it on the way out: measured at 1280 × 900, they intersect from scrollY 628 to 776 and the button sits entirely inside the sheet from 672 to 732 — about 150 px of scroll carrying two stacked backdrop-filters. It costs nothing measurable; sweeps through the overlap window and through clear page give the same 16.7 ms median and overlapping p95 ranges. The rule worth keeping is therefore the one that pays — two blurred layers composited at once on a shipping page, never a third — not the stronger one the comment used to assert. What the checker counts is elements on a page, which is the conservative reading of that and the right default, because on every page but one every blurred layer is live whenever the page is; the exception is below. The scope matters, and this page is why: it carries four composited plates of its own, the three tint samples above and the band in the layer stack below. A documentation page showing a material has to be allowed more of it than a page selling something. Four rather than three since the thin tint got a plate — all four are 8 rem boxes in a column, they never overlap, and only the one nearest the viewport is composited while the reader is anywhere on the page. The cap that matters is on the pages that sell, and it has not moved.

The census is measured rather than remembered, and it used to be a sentence in this paragraph — landing page 2, Über uns 1, and 1 each on the component pages that demo it — which is exactly the count the next paragraph says is worth less than naming the spenders. scripts/check-glass-budget.py counts the blurred layers on every page in the tree and rewrites the table below, so the number here is generated the same way the space scale's is. Stamp 4fcd4f44 — a digest of the rows, so a reader can tell a current census from a stale one without reading it.

What the script enforces beyond the count is the other two rules on this page that are countable in a file: every backdrop-filter in the shipping CSS has to read var(--glass-blur) rather than state its own radius, and no rule that declares one may also carry an animation or an animation-timeline touching a property that repaints its backdrop. It also reads what counts as glass out of the stylesheet instead of holding a list, so a fourth frosted surface enters the budget by existing.

The fifth claim is about the fallbacks, and it is the one claim here that is not about cost. The three blocks in When there is no glass below work by redefining tokens rather than by giving every component its own branch, which buys a great deal and has exactly one failure mode: a tint left out of one block keeps its live value there, and whatever reads it keeps a material the block was written to take away. Nothing renders wrong. It renders as though the reader had never asked — and with the blur already gone, what comes through the surviving translucency is sharp, which is worse than either the material or a flat plate. So the script asserts that every block turning the material off turns all of it off, in every selector that block names, excusing only a token the block reads as its own answer. The family is a name shape rather than a roster, so a fourth tint is in scope the moment it is declared; the lit edge is deliberately outside it, because an edge is a contour and not a translucency — the paragraph below is what happens to it instead.

Where the third layer would come from, so it does not. The budget is spent; naming the likely spenders is worth more than a count somebody has to remember. The process-card panel and its note block, the value-table rows, the blog-grid cells and the footer CTA are the four surfaces that look like they want glass and must not have it — every one sits on the page wash with nothing complex behind it, where frosting has nothing to calm and becomes a grey box. If a genuine third case ever appears, something else has to give up its blur first.

One appeared, and it is the act rail's plate. The landing page reads 3 in the census above and that is not a budget somebody raised. The plate behind the open rail — .act-rail::before in assets/css/acts.css, an opaque --surface-raised panel until now — stands over 22 000 px of composition that carries its own labels, which is the material's definition at the top of this page rather than an exception to it. It was the grey box in reverse: the one surface on the page with something to calm, drawn flat because a count said so.

What pays for it is that the plate and the hero CTA cannot be lit at the same moment, and the reason is in the stylesheet rather than in this sentence. The plate paints only on :hover / :focus-within; the rail catches neither without pointer-events, which it only has while act-rail.js has set .is-live — and that is true only while the acts own the viewport, some 4 000 px below the button. The sticky nav band is the only layer the plate is ever composited with. Two at a time, three on the page, so the count the rule is actually about has not moved. That argument lives as a named page allowance in PAGE_BUDGET in scripts/check-glass-budget.py: no other page inherits it, an entry has to name two layers the CSS keeps apart, and an allowance whose page drops back under the default is itself a finding — a permission that outlives its argument gets read as headroom by whoever comes next.

A second one appeared, and unlike the first it is not free. Expertise reads 6 in the census above. Five of those six are the plate and the four copy cards, and the CSS does keep them apart: inside the pinned gate the plate is the material and .ex-step .cf-info-card sets backdrop-filter: none on every card, so that tier still spends the bar and the plate and nothing else. Below the gate there is no plate — it is one cell of a two-column grid that only exists up there — and the four cards stand on the same full-bleed lattice the plate was put there to calm, so each one carries the material itself. That much is the material's own rule: a card standing on something the reader can still see through it.

What it costs is a third composited layer at every seam, and the number is the point. The four cards are one column, so two of them are on screen together whenever the reader is between steps: measured at 375 × 812, a copy card is about 650 px tall and 349 px of figure and gap separate one from the next, which puts two cards and the sticky bar together for 463 px of each roughly 1 050 px step — about 44 % of that section's scroll, on a phone. The act rail's allowance was bought by a measurement showing no cost; this one is a design ruling, and the cheaper answer it was weighed against is real and one declaration away: --surface-glass-solid on the same cards is the material's own no-blur stand-in, and it reads as a flat grey slab where the frosted card keeps the wash's own gradient running through it. That is what was being bought.

Two smaller decisions on that plate, both of them the rule above rather than taste. It takes the 46 % bearing tint and not the thin one: the thin tint's permission is a measurement on one named backdrop, and this rail crosses five different drawings, so the floor for arbitrary artwork is the one that holds. And it carries no travelling light: the other three glass surfaces each end in a lit rim with a band crossing it, and a band scrubbed by scroll here would re-rasterise the blur through the exact scroll range the rail exists to be open during. It gets --glass-border and nothing moves on it.

The checker's own scope was the real finding. acts.css ships — patterns/landing-page.html loads it — and it was not in the script's list of shipping stylesheets. A backdrop-filter written there would have landed on the page carrying the tightest budget in the system and been invisible to all five claims: uncounted, free to state its own radius, free to be animated. The script's header is careful that what counts as glass is derived rather than listed, and one list further out was hand-maintained anyway. It is fixed, and it is the part of this change that was not about a single surface.

What those four get instead is not one answer, and this section used to say it was. The paragraph above ended "They get --sheen-panel instead" — of all four. Exactly one of them does. --sheen-panel is on the blog-grid cells, and on the accordion rows, which that sentence did not name at all. It is on nothing else in the system. The process panel and its note block, the value-table rows and the footer CTA carry no sheen, and should not.

The rule the list was standing in for: sheen is a pointer response, not a surface treatment. It is parked in its own transparent half and slid across on :hover and :focus-visible, so it exists only as an answer to someone arriving at the element. A blog cell and an accordion row are a link and a control; light crossing them is feedback. The three that go without are static content — a copy panel with its inset note, a value row, a footer block. A hover sheen there would promise an affordance that is not present, which is a worse failure than the grey box the paragraph above guards against, because it is legible and still wrong. They get the 1 px contour and the page wash, which is the manual's order — contour before fill — and that is a complete answer, not an omission.

The glass button is light contexts only

.cf-btn--glass must not be placed inside a data-theme="inverse" scope. Its label is --accent-ink, which is black, while the inverse theme flips --surface-glass to black 56 % — black type on a dark plate, near 1:1. Nothing reaches that today, since the button appears only on the landing page and its own documentation page and neither is inverse, but it is a real constraint rather than an oversight.

It cannot be fixed by flipping the label colour with the theme, which is the obvious guard. The button's right-hand end is lime in both themes, and lime demands black type; the plate under the left-hand end would demand white. One colour cannot serve both, so an inverse glass button is a redesign — a different lit edge, or no lime — not a token swap. Until someone draws one, this component belongs on light ground.

When there is no glass

There are three of these, not two, and they are handled once in tokens.css by redefining the tokens rather than by giving every component its own escape hatch. Where backdrop-filter is unsupported, the blur becomes none and the veil thickens to white 72 % so the band still separates. Where the reader has asked for prefers-reduced-transparency, every glass surface becomes the opaque --surface-glass-solid plate. Where forced-colors is active, every glass surface becomes Canvas and the blur goes off. The edge light survives all three — but only because it is redrawn in the third, and that is the correction this section exists to record.

Three things were wrong and each is fixed where it belongs:

• The two edges are redrawn as borders, which is the only paint the mode keeps — .cf-nav::after and .material-glass-edge each take border-top: 1px solid CanvasText. Same idiom .cf-arrive__line and .cf-progress__rail already use, and neither doubles a line, because neither had a border to begin with.
• The blur goes off. With every gradient dropped, what the blur composites under is a flat system colour — which is the Don't above, no backdrop-filter under an opaque background, arriving by way of the reader's settings instead of an author's mistake.
• The tint becomes Canvas, and that was the real failure. background-color is not among the properties Chromium's forced colours overrides, so --surface-glass survived at white 46 % and the hero CTA stayed translucent on a page where every other surface had gone flat: the video played through the primary call to action. Chromium backplates the label, so the text was legible either way — what was wrong was the plate, asserting a material the mode does not have.

Canvas rather than --surface-glass-solid, and the distinction is why this is a third block instead of one more line in the second. --surface-glass-solid is --grey-100, an author grey; in a dark high-contrast theme an author grey is the one thing the reader turned the mode on to stop seeing. The other two fallbacks answer the browser cannot and the reader wants less. This one answers the reader has chosen the palette, so it answers in the palette — which is also why its :root and [data-theme="inverse"] declarations are identical rather than merely parallel. Canvas and CanvasText already are the theme.

What the mode ends up with is the answer this page argues for everywhere else: the navigation is an opaque plate with a hairline under it, and the hero CTA is an opaque plate with a system-coloured border. Both of the two honest boundaries from A control's edge, chosen for us by a reader who has already said which one they want. Nothing here is a contrast measurement, and that is the point — CanvasText on Canvas is guaranteed by the platform rather than by us. The specular and the rim pass do not survive, and should not: both move a background-position that no longer has an image to move.