Hero

One placement, and it earns the page twice over

A component with one placement cannot be checked against itself, and this one is 243 declarations: a featured card with a photograph and a graph, a ranked list, a brand tile and a trust strip, all in a grid that goes from 351x1267 on a phone to 969x505 on a desktop. Everything about it is a decision taken once, with nothing to compare it against.

The level and its reason stay on the organisms page. What this page holds is the two things the single placement hid: a hover that existed in one theme only, and a hover that was worse than nothing in the other one.

The worst number this pass found, and it was already shipped

A link in this block took its hover colour from the LIT stop of an action gradient, a pale brass meant to sit UNDER dark ink. The theme does not move it, because a mid-luminance metal reads on both stones. As a hover COLOUR it is fine on graphite, 9.57:1, and on chalk it is 1.71:1.

In daylight the link VANISHED at the moment a person pointed at it, from 6.96:1 at rest. A role that means "the lit stop of a gradient" is not a role that means "ink", and the two are indistinguishable in the theme somebody happens to be working in.

The second, in the same block: a headline hover read the strong ink, which is white on graphite and INK ON CHALK, and the rest colour there is also ink on chalk. So in the Vault the headline lit up, and in daylight the hover painted 14.85:1 over 14.85:1: nothing, in the theme nobody was checking.

A STATE THAT ONLY EXISTS IN ONE THEME DOES NOT EXIST. Measured, not guessed, and the answer was not a brighter ink, because in daylight there is none left.

The block, at both widths

The specimen stood at 7 of the component's 53 classes until 2026-08-16, docs/backlog.md 162: this page showed the brand tile and described the other four blocks in prose, so the chart that gained a scale the same morning had nowhere to be looked at. The whole band is here now, the same markup the feed carries. Coverage measured against hero.css with its comments stripped: 53 of 53.

Vault, darkDaylight, light

Trending now · Politics Will the US government shut down before March 1, 2027?

Funding talks have stalled twice this quarter, but past deadlines settled late.

YES 38%NO 62%

Volume $84,200Closes Mar 1, 2027

Back YES Back NO

NO 62% YES 38% Vol

70%60%50%40%30%

YES probability, last 30 days · volume below, no scale

Your USDC is held 1:1 We never lend it. Withdraw anytime.

1,284 events resolved against a named source Every outcome is public and verifiable.

Trending now · Politics Will the US government shut down before March 1, 2027?

Funding talks have stalled twice this quarter, but past deadlines settled late.

YES 38%NO 62%

Volume $84,200Closes Mar 1, 2027

Back YES Back NO

NO 62% YES 38% Vol

70%60%50%40%30%

YES probability, last 30 days · volume below, no scale

Your USDC is held 1:1 We never lend it. Withdraw anytime.

1,284 events resolved against a named source Every outcome is public and verifiable.

1,267 to 505 is the sharpest reflow in the product, and the side column is the reason: at 1280 it stands beside the feature at its natural 350, and at 390 it goes underneath at full width and the two heights add up.

The tile is a poster, so it is centred in its own frame, and it was not until 2026-08-14. It was display:block, so the stack sat on the top padding and every pixel the tile was given beyond its content fell out of the bottom. Measured on both tiles at 390, 900 and 1280 before the rule: 25.0px above the mark against 53.8 under the signature here, and 25.0 against 101.5 on how-it-works, where the side column asks for a 250px minimum and nothing was using it. Four to one, inside a brass frame that is inset 12 on all four sides and does not move, which is exactly what made it visible. After: the two gaps are equal to the tenth of a pixel at every width in both engines. The left inset is the one asymmetry, 32 against 24, so the type starts 20px inside the frame on the left and 12 on the right, for the same reason a book has a wider gutter than a fore-edge.

The signature is the logo now, not a word set to look like one. .bt-by declared the body face at 13px in brass and spelled "Yonder" by hand, which is the wordmark drawn a second time with the mark left out, on the one plate whose whole job is to say the brand's name. It is class="logo bt-by", and this file keeps only the rule about where the lockup stands. See logo, third placement.

Vault, darkDaylight, light

The market decides.
Opinions have value.

Yonder

The market decides.
Opinions have value.

Yonder

The tile is a claim, not a control: there is no link and no button inside it, so no ground may change under a finger, and the only thing a press can honestly say is that the lift above it is not stuck. It moves the tile back to where it already rests rather than anywhere new, which is why it is the one transform in the whole press pass.

The featured pair, and the sentence that got it wrong

The YES and NO on the featured market are yes / no's now, and until 2026-08-06 this file said the opposite. What was written here was TRUE and was the wrong conclusion: every selector in the pair's file hangs off its own class, so not one of them reaches this button.

The answer to a control being out of a family's reach is to put it in reach, not to draw it again. Measured before it was moved, the two are the same control to the value: the same tinted fill, the same edge, the same ink.

The same file gives the hot list's rows the ink press for the same reason the card's question takes it: the row is a grid and only the name is the link, so a stone would paint one cell of five and read as a highlight on the title rather than a press on the row. 6.40:1 in the Vault, 7.22:1 in daylight, measured on the card it stands on.

What it does with width

Its own width query: 980 and 620, both one-offs. Neither of these is a rung and both stay one-offs with the arithmetic written beside them. Taking 980 down to RAIL would split the hero at 901 and land the feature's two columns at 251 and 256, inventing a minimum 28px under the narrowest this card stands anywhere today. Taking 620 up to DESK would leave the feature in one column from 621 to 639, where two columns are 295.5 each, WIDER than the 279.5 the same card already takes at 641. The card's own step is not what binds it, the gutter is.

The rule

Every state is checked in both themes. One placement means one person looked at it, in one theme, once.

A role is used for what its name says. A lit gradient stop is not an ink, and the difference is invisible on graphite.

Out of reach is a reason to move a control, never a reason to redraw it.

The anti-rule

Never take a hover colour without measuring it in daylight. 1.71:1, shipped, on the most prominent link on the home screen.

Never write a state whose rest and hover are the same colour in one theme. 14.85:1 over 14.85:1 is a hover that exists in the stylesheet and nowhere else.

Never let a claim behave like a control. The brand tile has no link inside it, so nothing may change under a finger except the lift coming back down.

Never spell a wordmark by hand in a component that is not the logo. Two files did it, this one and seo-plate.css, and they are the two plates in the product that exist to name the brand. A brand mark keeps its own drawing, and a word set in the body face is a generic glyph standing in for one.

Where the rest of it is

The level and its reason: the organisms page. The stylesheet: components/hero.css, 339 declarations for one placement. The pair on the featured market: yes / no. The cards below it: card. The roles it misused: components/tokens.css and DESIGN.md.