Level 2. The prose at the foot of a category feed: what this category is, how the odds work, and the questions a search engine asks. 9 plates and 36 prose blocks on 11 painted screens, and the only component in the product that is written for a reader who has not arrived yet. Measured 2026-08-08 in a browser, at 390 and 1280.
The brand line, the tagline, the ticks and the prose. 15 elements against 29.
Yonder turns the events you follow into a real stake. Pick an event, read the odds in plain language, and back YES or NO. You see the current odds, a one-line why, and how the event resolves before you put in a cent. The minimum bet is one dollar, and you can browse and build your bet before you connect a wallet.
The odds are a live price set by what people bet, not a fixed quote. When more money backs YES, YES costs more and NO costs less. Your payout depends on the odds at the moment you bet, not only on the outcome, so reading an event early and being right is worth more.
Yonder turns the events you follow into a real stake. Pick an event, read the odds in plain language, and back YES or NO. You see the current odds, a one-line why, and how the event resolves before you put in a cent. The minimum bet is one dollar, and you can browse and build your bet before you connect a wallet.
The odds are a live price set by what people bet, not a fixed quote. When more money backs YES, YES costs more and NO costs less. Your payout depends on the odds at the moment you bet, not only on the outcome, so reading an event early and being right is worth more.
The level and its reason stay on the molecules page. This page holds the one piece of drawing in the system that is made entirely of geometry: a notched corner cut with a clip path and finished with a rotated hairline, which is the Vault language stated in two rules.
Follow politics events and back your opinion with a real stake. These events cover elections, policy votes, appointments, and other public decisions. You see the odds in plain language and how each event resolves before you bet, from one dollar, with no wallet to start.
Follow politics events and back your opinion with a real stake. These events cover elections, policy votes, appointments, and other public decisions. You see the odds in plain language and how each event resolves before you bet, from one dollar, with no wallet to start.
| at 390 | at 1280 | |
|---|---|---|
| the plate | 351x721 to 351x921, one column | 969x471 to 969x618, two columns at 1.32 to 0.82 |
| a prose block | 301 wide | 522 wide, capped at 60ch |
| the brand column | under the prose, separated by a groove along the top | beside it, separated by a groove along the left |
The measure is capped at 60 characters even inside a 522px column, which is the one typographic rule this component exists to enforce. Everywhere else in the product the text is short; here it is the longest continuous reading in the whole thing.
A hairline brass frame is inset 16px from the plate on a pseudo-element, and its bottom-right corner is cut away by a clip path with one 20px chamfer. A second pseudo-element draws a 28px hairline, rotated 45 degrees, across the gap. Together they read as a plate with its corner folded back.
This is the Vault language written as geometry rather than as decoration, which is what lets it survive both themes and any width: there is no asset to go missing, no image to blur, and the frame takes the same brass border role as everything else. It costs two rules and no bytes.
Both are pointer-events:none and sit on the content layer above
the ground, so a frame drawn over the text cannot swallow a click that was never going anywhere:
this component has no controls at all.
The drawing is a MASK and not an image, since 2026-08-13, the same
change as the trust bar's and for the same reason: the pseudo-element is painted with a
left-fading gradient of --color-trust and the column arrives as a
mask-image in mask-mode:luminance, carried as a data: URI
in components/trust-art.css because a mask image is a CORS-enabled fetch and these
pages are read from disk. ui-kit/trustbar.html holds the full account.
The brand column carries that drawing on a pseudo-element at 0.18 opacity, on the layer below the content, with every child of the column lifted onto the layer above it. Same construction as the trust plate, at a third of the opacity.
The number is low because the text on top of it is the largest type in the product. A tagline in display bold uppercase over a photograph is where contrast goes wrong quietly: it passes on the average and fails over the bright part of the picture. The mask takes the image away from the side the text starts on, and the opacity takes the rest.
Measured across 106 screens: 36 elements carry .feed-seo, 22
of them <section> and 14 <div>. The ones inside the
plate are sections; the bare ones on the other feeds are divs.
The drawing does not care and the document outline does. A section with
a heading is a landmark a screen reader can jump to; a div with a heading is a heading in the
middle of nothing. The prose is identical, so this is a markup consistency question in two trees
rather than a CSS one. docs/backlog.md 62.
One placement, and it is the About page.
ia/docs/blocks.md B17 banks a numbers block for the STATEMENT body profile, and it
shipped as two paragraphs describing what the figures would be. It is a face of THIS component
rather than a new one because the figures stand inside a .feed-seo section, which is
the block the About body is made of.
The figure takes the mono face for the reason every other figure in
this product does: a number a reader is meant to check is set in the face that lines up. The
label under it is the body face at --text-12, which is the same
label / value grammar the event detail's facts row and the card's meta row both
carry.
These three are the breakdown and not the headline said twice.
trustbar prints 1,284 events resolved in the footer of
the same document, so a band leading on that number would have said one thing twice on one page.
What is open, what has resolved and what happened when someone disagreed are three different
questions, and only the middle one is on the strip. docs/backlog.md 214.
Its own width query: 760 DETAIL. Below DETAIL the plate collapses from two columns to one and takes its own padding, which is the only place in the system where a SEO block changes shape. Its reading column is capped by --container-read rather than by the measure, and tokens.css says why 89ch stands there on purpose.
Prose gets a measure. 60 characters, whatever the column is doing.
Ornament is geometry, not an asset. A clip path and a rotated hairline survive both themes, every width and a missing file; a corner drawn as an image does not.
A picture under type is a contrast decision. The opacity and the mask are the measurement, not the taste.
The signature is the logo, and it was a word set to look like one until
2026-08-14. .seo-by declared the body face at 13px in brass and spelled
"Yonder" by hand, mark omitted. This plate and the brand tile are the two things in the product
whose entire job is to name the brand, and they were the only two naming it without its mark.
Nine placements here, two there, all eleven now class="logo seo-by" or
class="logo bt-by". This file keeps the two declarations that are about WHERE the
lockup stands and none about what it is, so the two files cannot disagree whichever order they
are imported in. align-self is one of the two: .seo-brand is a flex
column that stretches its items, and a lockup stretched to the column is a lockup with an
invisible box around it. See logo, third placement, FIXED 95.6 at all
thirteen widths, and the first slot in the system to run the lockup at a size other than 16px.
Never let this plate carry a control. It is the end of the page and it is for a reader who arrived from a search result; a button here competes with the feed above it.
Never judge text on a photograph by the average. It passes on the average and fails over the bright quarter, which is the part the eye goes to.
Never let one class stand on two element types by accident. 22 sections and 14 divs draw the same and outline differently.
Never spell a wordmark by hand. The system has a logo component and it owns the mark, the gap, the face and the tracking. A brand mark keeps its own drawing, and a word in the body face is a generic glyph standing in for one.
The level and its reason: the molecules
page. The stylesheet: components/seo-plate.css. The words, which are most of the
component: voice/docs/microcopy.md and ia/docs/pages/seo.md. The same
plate construction with a photograph at three times the opacity:
trust bar. The open row: docs/backlog.md 62.