Level 2. The component that carries the second design principle: trust is stated, not implied. Three claims, each with a source, on a plate of their own. 315 items on 105 painted screens, one face, and it draws. Measured 2026-08-08 in a browser, at 390 and 1280. It had two faces on the morning of that day and 210 of the items drew nothing, which is what section 2 is about.
The level and its reason stay on the molecules page. What needs the room here is the second face this component had until 2026-08-08: it was in the markup of every screen and on the screen of none, which is a fact no shelf can hold and no stylesheet reader would find.
| face | in the DOM | computed display | drawn |
|---|---|---|---|
.feed-trustbar, the strip above the feed | 105, one per screen | none, on all 105, at 390 and at 1280 | 0 |
.footer-trust, the three tiles | 105 | block | 105 |
The last line of the stylesheet was .feed-trustbar{display:none},
and it was the whole record of a decision. Eleven rules, 210 items and two icon rules were
maintained for a face the painted tree had never once shown.
A component switched off with one line and no note is a decision nobody can read. A person reading the census sees 105 placements. A person reading the screens sees none. Neither of them can find out which one was meant.
And the screen still carried the argument FOR it, above the markup, on all 105: "Trust cue near the action (critique P2): trust is the persona's #1 driver, surfaced above the feed and on the logged-out first paint, not only in the footer." So one hand added the strip because the footer was judged not enough, another hand switched it off, and the file and the markup disagreed in writing for as long as both were there.
The strip went, and the test it failed is the one this repository already
uses for a hidden thing: does the same screen say it another way. It does, twice. The three
tiles below carry both of the strip's sentences and a third, on the same 105 screens, in both
trees; and on event-feed.html the hero says both again as two
hero-trust tiles. The strip would have been the third copy of one sentence on one
page. Set against .opt-sel-tag, which is switched off the same way and stays,
because there the paint says the same thing in colour and there is nowhere else it is said.
One reading in the row was wrong and the measurement corrected it.
docs/backlog.md 57 said the grey tree still drew the strip, so the rules were not
dead. It did not: wireframes/ carried 0 .feed-trustbar and
answered the same question with hero tiles instead. The strip existed in one tree and rendered in
neither.
| at 390 | at 1280 | |
|---|---|---|
| the strip of three | one column | three equal columns |
| an item | 303x82 and 303x96 | 296x96 |
| the block | 351x358 | 969x162 |
Each item is a claim and a source, never a claim alone: the bold line says what is true and the line under it says how you can check. That pairing is the whole component, and it is why the mark is decorative and the text is not.
Each of the three carries a ::after 46 per cent of the width,
right aligned, at 0.5 opacity and on the layer below the content. The text sits on its own
layer above it.
The drawing is the MASK and not the picture, since 2026-08-13. The
::after is painted with a left-fading gradient of --color-trust and the
drawing arrives as mask-image in mask-mode:luminance, so what you see is
the trust colour cut to the shape of the column, the book or the globe. It was a full-colour WebP
whose drawing lived in its alpha plane, which WebP codes losslessly, and the three tiles
cost 346,492 bytes on 105 screens. They cost 87,558 now, and no request at all:
the masks are data: URIs in components/trust-art.css, because
a mask image is a CORS-enabled fetch and a background image is not, and these pages are
read from disk. Two things follow for anyone editing this. The fade may not be a second mask
layer: the bottom layer of a mask list is intersected with the transparent black beneath it
in WebKit, so mask-composite:intersect over two layers draws correctly in Chromium
and draws nothing at all in Safari. And a mask is not a picture: at q20 the composite is
within 1.06 of 255 of the shipped tree, and q82 only reaches 1.01, because what a flat colour
cannot carry is variation and not detail.
A picture behind a claim is the exact place a trust component can lose the argument it exists to win. The mask and the opacity are not styling flourishes: they are what keeps the sentence at full contrast while the plate still reads as a made object rather than a box. The mark beside it takes a trust-tinted ground and a lit brass stroke, which is the one place in the system where the trust colour is used as a colour rather than as an idea.
Its own width query: 760 DETAIL. Below DETAIL the trust items go to a single column. One declaration, and it is the only thing this component says about width.
A claim carries its source in the same box. Design principle 2 is that trust is stated and not implied, and the shape of that here is two lines: what is true, and how you can check it. One line alone is a slogan.
Decoration goes under the content layer and behind a mask. Anything that would make the sentence harder to read is not decoration, it is damage.
Never switch a face off with one line and no note. Eleven
rules and 210 items were maintained here for a strip the painted tree never drew, and the only
record of that decision was display:none at the bottom of the file, while the
markup above it still carried the reason the strip was added.
Never say one sentence three times on one screen. The USDC line stood in the hero, in the strip and in the footer of the same feed. A claim repeated is not a claim reinforced, it is a claim nobody trusted the first time.
Never let this component say something it cannot back. The moment a fourth item is added without a source line, the component stops being the trust bar and becomes an advert.
The level and its reason: the molecules
page. The stylesheet: components/trustbar.css. The principle:
CLAUDE.md, design principle 2. The sentences: voice/docs/microcopy.md.
Why the second face left: docs/decisions.md, 2026-08-08, backlog 57 closed.