Level 1, and the only component in this system that was found by asking what three
different classes had in common. The brass-cornered head of a plate: a two-stone ground,
a wave masked away from the corner, a 210px glow bleeding in from outside the box, and a
display heading standing above all three. 359 placements on 106 painted screens, one
face, four hosts. Written 2026-08-11 out of the two copies that were standing in
dialog.css and hiw.css, and given its fourth host the same day when
the head that was filed as "not a wearer" turned out to be a wearer with a different skin.
The level and the reason for it stay on the atoms page. This page holds what the shelf has no room for, and for this component that is the thing a shelf structurally cannot show: the three heads are never on one screen, in the product or in the kit, so nothing in this repository had ever put them beside each other. That is why the duplication survived four passes over these two files.
Until 2026-08-11 the ground, the wave and the glow were written out in
components/dialog.css for the sheet head and again in components/hiw.css
for the how-it-works head. They agreed to the byte. They agreed because somebody had edited
one of them that morning to make them agree: backlog 98 moved six numbers on the
how-it-works copy, and the list is the evidence rather than the fix.
| what | the how-it-works copy | the sheet head | after 98 |
|---|---|---|---|
| glow box | 224px | 210px | 210px |
| glow blur | 40px | 42px | 42px |
| glow opacity | .5 | .42 | .42 |
| glow inner mix | 65% | 60% | 60% |
| wave opacity | .24 | .2 | .2 |
| ground radial, vertical stop | 92% | 96% | 96% |
Six numbers moved by hand to make two rules agree is one rule written twice. The seventh edit would have drifted again, and nobody would have seen it, because a sheet head and a page hero cannot appear in the same viewport.
The 224 is worth its own line, because it was not a mistake. It was a
compensation: anchored at right:-52px a 224px circle reaches 37.2 per cent into a
462px sheet head against the plain head's 37.8 into 418, which is nearly exact. It reaches
18.7 per cent into the 922px page hero, which is half. A compensation that fails on
the block's other host is not a compensation, it is a second number.
One face at three widths, which is the whole component. What differs between them is padding, how loud the heading is, how wide it may run, and whether the box draws its own edge. Nothing else.
the plain sheet head, 225 placements, 418px, inside a dialog that is not an outcome overlay
the how-it-works sheet head, .hiw-hero, 111 placements, 462px, and it is GONE since 2026-08-15
A host can leave, and the face is what survives it. The sheet was rebuilt
on 2026-08-14 into three steps with a picture each, and a step has no head, so the class that used
to carry the loudest of these three heads is worn by 0 elements in all three trees and its
two rules are deleted from hiw.css. Nothing here changed to make that happen and
nothing here had to change afterwards, which is the argument for the file: this is an anatomy
plus a default skin, so losing a wearer costs a count and not a rule. The four-host reading
that decided the shape of this file is kept as it was taken; the live count is three, 228 plain
sheet heads, 1 page hero and 10 outcome heads.
the how-it-works page hero, 1 placement, 922px, the only one of the three that draws its own edge
You always know what you are doing, why, and what happens to your money. This is a promise, not a FAQ.
You always know what you are doing, why, and what happens to your money. This is a promise, not a FAQ.
The page hero was spelled .hiw-hero.hiw-page until 2026-08-11.
Backlog 105: a modifier on a class that means "the head of a sheet", on a box that is not a
sheet head and cannot become one. It is .hiw-page now, four elements, and it wears
the face directly like the other two.
Four rules and twenty-eight declarations. Three of the four are decoration that never touches the flow, which is why the face can be worn by boxes of three different sizes without any of them saying anything about it.
| rule | what it is | why |
|---|---|---|
.plate-head | the ground: a brass radial at 120% 96% at 100% 0% over a 158deg two-stone linear, plus position:relative and overflow:clip | the corner is --tint-brass-30, a tint at a depth, which is 30 per cent on graphite and 45 on chalk so the corner reads as warmly in daylight as it does in the dark. clip is what keeps the glow inside the box |
.plate-head::before | the wave, a five-line data URI at opacity:.2, masked linear-gradient(150deg, solid, transparent 72%) | the mask is what keeps the pattern OUT of the brass corner. An opacity answers to the ground it is drawn on, which is why the outcome head's copy is .16 against this one's .2 |
.plate-head::after | the glow: a 210px circle at top:-72px right:-52px, blurred 42, at opacity:.42 | it is anchored OUTSIDE the box on both axes, so how far it reaches into a head is a function of that head's width. That is the fact the 224 was compensating for |
.plate-head :is(h1,h2) | the display face: family, weight, leading, tracking, ink, margin:0, text-wrap:balance | :is(h1,h2) because a page has exactly one h1 and a dialog is opened over a page that already spent it. Same heading, two levels |
The glow was an element in one of the two hosts and a pseudo in the other.
<span class="hiw-glow" aria-hidden="true"> carried 200 copies across the three
trees, with a rule in the system to size it and a second one inline in every grey wireframe that
still said 224. The sheet head next door drew the identical circle with ::after and
no markup at all. A glow is not content, so the mechanism is the one that is not in the markup.
The span is deleted in all three trees.
The list is the point. Everything on the right of this table is a host saying where it sits and how loud it is, which is all a host is allowed to say.
| property | plain sheet head | outcome head | how-it-works sheet head | page hero |
|---|---|---|---|---|
| padding | 24 / 20 / 20 | 24 / 20 / 20 | 32 / 24 / 28 | 32 / 24 |
| heading size | --display-sheet, 24 to 30px | --display-sheet, 24 to 30px | --display-hiw, 30 to 38px | --display-hiw, 30 to 38px |
| heading measure | 15ch | 16ch | none | none |
| the sub | .sheet-sub, 14px at 34ch | none, the body carries the line | .hiw-tagline, 14px at 32ch | .hiw-tagline, 16px at 44ch |
| edge, corner, bottom margin | none, it is flush inside a frame that has all three | none, same reason | none, same reason | hairline, 16px corner, 20px below, inset lit lip |
| lifting content over the glow | per element, on the title and the sub | per element, on the title | .hiw-hero-inner wraps both | .hiw-hero-inner wraps both |
| the ground | inherited, brass | its own: green radial over --result-won-stone, or a plain linear on the loss head | inherited, brass | inherited, brass |
| the wave | inherited at .2 | its own opacity, .16, and the ground is why | inherited at .2 | inherited at .2 |
| the glow | inherited, brass at .42 | green at .34, and NONE at all on the loss head | inherited, brass at .42 | inherited, brass at .42 |
| which file says so | dialog.css | dialog.css | hiw.css | hiw.css |
The outcome head was filed as "not a wearer" on the morning this page
was written, and it is the fourth wearer by the afternoon. That row was 109, and the
measurement it asked for answered it in one direction. Read against this face with both
overlays open: of the 15 box properties 13 were already identical and the two that were
not are the ground and the content's own height; of the 15 on the wave, 13 identical and the
difference is one opacity; of the 15 on the win glow, 12 identical; of the 11 on the heading,
10 identical and the difference is one ch count. The wave's data URI was
byte-identical, md5 and all, which is the same 300 bytes standing twice for the second time
in one week.
So the fear in the row, that folding it in would need two classes where the
finding is one, was not true: the host already carried the scope.
.outcome-dialog, .win-dialog and .loss-dialog sit on the
element's ancestors, so the skin is said there and the anatomy is inherited. What this file is
turns out to be an anatomy plus a default skin, and the loss head is the one plate head
with no glow, which it now has to say out loud, because inheriting the face means inheriting a
brass one and brass on a loss head is the brand borrowing an outcome's place.
One number went with it. The win glow blurred at 44 here and at 42 on the face, and it blurs at 42 now. Two numbers two apart on one circle is backlog 98's finding rather than a decision, and the collapse was measured before it was believed: 0 differing pixels of 27,160, with the control at 0. The glow is anchored outside the box and clipped, so 2px of blur radius never reached a pixel anybody could see.
A face that more than one component wears is a file, and each wearer says
only where it sits. The precedent is already twice in this folder: four controls in the
header band wear one hover and no component file could own it, and the brand lockup stands in
the header and in the footer and became logo.css the same week. This is the same
shape one floor up, and it loads at level 1 for the lockup's reason word for word: it holds
nothing from the system, and the two wholes that hold it load at level 3, so on a tie the host
wins and the face cannot quietly redraw it.
A decoration that is not content is a pseudo element, not a span.
The glow proves it from both ends at once: one host had a real element and one had
::after, they drew the identical circle, and the one with the element needed a
rule in the system and a second rule inline in every grey wireframe to size a box that painted
nothing there at all.
Never make two rules agree by editing one of them. That is what happened here on the morning of 2026-08-11, six numbers deep, and the result looked like a fix. It was the duplication being paid for a fourth time. If two rules have to be walked into agreement, the finding is not the numbers, it is that there is one rule.
Never rename a class to remove a duplication. Backlog 98
asked for .hiw-hero to become .sheet-head. That moves the duplication
rather than removing it: the head's paint would land in dialog.css for the sheet,
and the page hero, which is not and cannot be a sheet head, would have all six rules written out
again. 1,004 class tokens across 195 files, to end with the same face in two places.
Never fix a shared face with a second selector.
components/CLAUDE.md already says the fix for a scope is never a second selector,
and it says it about a chip that was repaired once and whose selected state was not doubled the
same day, shipping a brass edge with no ground on 105 screens. A selector list is a face kept in
two places and the second place is the one that gets forgotten.
The level and its reason: the atoms page.
The stylesheet: components/platehead.css, four rules and the account of the two
copies it replaced. The hosts: dialog and
how it works. The heads that do not wear it:
the outcome overlays. The cut, the numbers and what was
refused: ../docs/decisions.md, 2026-08-11.