Level 3. The longest single piece of writing in the product, and the one that carries design principle 1 on its own: a new user is never lost. 105 sheets, 320 sections and 106 FAQ blocks on 105 painted screens. Measured 2026-08-08 in a browser, dialogs forced open, at 390 and 1280.
The sheet the product opens, both themes. 19 elements against 61 until 2026-08-09: the two columns, the FAQ, the brand tile and the position block were not in the cell, so the page measured a sheet with two thirds of it missing.
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.
Your USDC is held 1:1. We never lend it, invest it, or move it. It is yours until you place a bet or withdraw - added funds, payouts and withdrawals are all recorded in your Wallet.
Each event has clear resolution conditions, written before betting opens. When the event happens, the platform team resolves it against public evidence (official sources, on-chain data, named references).
Every resolution is published with what was read, the source and the time it was read, so you can check the outcome yourself instead of taking our word for it.
Prices move as people bet. You buy YES or NO at the price on screen, and that price is locked when you confirm. A winning share pays one dollar, so a lower price buys more shares and a larger payout. The amount, the fee and the payout are all shown before you confirm.
There is no subscription. The fee is 1.5% of your bet, added when you confirm, and the panel shows it in cents before you commit. It is the same whether you win or lose.
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.
Your USDC is held 1:1. We never lend it, invest it, or move it. It is yours until you place a bet or withdraw - added funds, payouts and withdrawals are all recorded in your Wallet.
Each event has clear resolution conditions, written before betting opens. When the event happens, the platform team resolves it against public evidence (official sources, on-chain data, named references).
Every resolution is published with what was read, the source and the time it was read, so you can check the outcome yourself instead of taking our word for it.
Prices move as people bet. You buy YES or NO at the price on screen, and that price is locked when you confirm. A winning share pays one dollar, so a lower price buys more shares and a larger payout. The amount, the fee and the payout are all shown before you confirm.
There is no subscription. The fee is 1.5% of your bet, added when you confirm, and the panel shows it in cents before you commit. It is the same whether you win or lose.
The level and its reason stay on the organisms page. What needs the room here is the one correction that changed what this component IS, and it is a lesson about scope rather than about drawing.
Every rule in this file used to begin with the dialog's own class, which meant the hero, the icon chips, the section rhythm and the FAQ list could only ever exist inside a dialog. The page this sheet links to as "the full guide" was therefore a document: four bare headings, some paragraphs and two buttons, because not one of these rules could reach it.
Scope describes where a thing MAY stand, not where somebody first put it. A scope written from the first placement makes the second placement impossible, and the failure looks like a page nobody styled rather than like a rule that is too narrow.
The rules are the block's now, and the same markup renders in a sheet and on a page. The one thing that changes between the two is the heading level: an h1 on the page and an h2 in the dialog, because a page has exactly one h1 and a dialog is opened over a page that already spent it. Same heading, two levels.
And it took a second pass to be true, on 2026-08-08, because the move left
the OLD layer above the new one. Six rules of the shape
dialog.app-dialog .hiw-* stayed at the top of the file, and at (0,2,2) they
out-specified every one of the block's own rules underneath. So inside a sheet the block never
once wore its own face, on 105 screens, while the file read as though it did.
| what the block declares | what the sheet rendered | elements |
|---|---|---|
.hiw-label 14px display bold, text-transform:none | 11px UPPERCASE with label tracking | 315 |
.hiw-faq dt semibold, 12 above and 4 below | bold, 8 above and 2 below | 315 |
.hiw-faq dl an 8px lead-in | 0 | 105 |
.hiw-sec p no top margin | 4px | 210 |
.hiw-body the sheet's 8px padding | nothing, the rule was dead | 0 |
A refactor that leaves the old layer ABOVE the new one has not
replaced it, it has buried it. And the file said so itself: the block's label carries
text-transform:none, a declaration that cancels something. A rule only cancels what
something else is doing, so the person who wrote the new layer knew the old one was there and
expected it to go.
The last .app-case in the system was in this file, and the
stand is what proved it wrong. It meant "the page rather than the sheet", which is true of
the product and false of a kit page, because a kit page carries app-case on its
BODY. So the specimen further down this page was a sheet wearing the page's hero edge, the
page's 16px tagline, the page's section separators and the page's 44px FAQ indent, with the
sheet's 11px label on top: neither of the two things this component draws. No screen was
wrong, so nothing but a stand could ever have shown it. The split is a class now,
.hiw-page on the page's hero and .hiw-cols for the rest.
This is the shipped markup, both cells, with every id and every radio
name suffixed per theme. A radio group is keyed by name, so two
cells sharing one would be one group and the light cell's checked step would uncheck the dark
cell's. The rules are keyed to :nth-of-type and never to an id, so nothing here
depends on the suffixing except the <label for> that needs it.
The three steps are STACKED and not switched, 2026-08-20, and that is what
let them move. They were display:none on two and display:flex on
the third, and an element that is not in the layout has no state to leave from. They share one
grid cell now, so the cell is the tallest of the three at every moment and the sheet cannot
resize: measured in both engines at 390 and 1280, 634.5 and 635.5 on all three steps, the
button at 476 and the dots at 583.5, against 563 / 586.5 / 610.5 and a Next button that
moved 23.5px down and back. The picture frame is min-height:19rem because the
bet-panel still asked 303.5 of a floor written at 280, and the third step's quiet way out is
reserved as an empty row on the other two, because the dots are the mark that says where you
are and they were the least stable thing on the sheet.
The movement is an ARRIVAL and the nav is deliberately not in it. The
text travels --space-32 and the still four tenths of that, both from one inherited
--hiw-shift that is +travel ahead, 0 here and
-travel behind, multiplied by --motion so reduced motion keeps the
step and loses the travel. The step itself carries no opacity: it would have
taken the Next button with it, and two brass buttons crossing at half opacity composite to 75
per cent, so the one control a thumb is aimed at would dim on every press. .hiw-nav
is switched by visibility with no transition on it at all, so the leaving nav drops
and the arriving one raises in the same frame. No new duration and no new curve: the register
still holds two of each.
THE STAGE IS THE PRODUCT AND NOT A DRAWING OF IT, and not one element in it
is focusable. Step 1 stands on .card with its .thumb,
.q, .why and .yesno; step 2 on .bet-panel
with .bp-dir, .bp-side and .line.total; step 3 on
.pos with a won side. Nothing is redrawn, which is why hiw.css reads
none of their tokens. An <a> with no href is not a link and not a
tab stop and still matches every a in card.css and
yesno.css, so the face arrives and the behaviour does not; .btn and
.yesno-pick are class-keyed and take a <span>. The bookmark
button could not be made inert and is simply not in the still. The stage is
aria-hidden on top of that, which is safe to write ONLY because there is nothing
focusable inside it: aria-hidden over a focusable element is a defect, not a decoration.
Measured on the shipped dialog: 0 focusable elements inside the three stages.
The tilt is 2.2 degrees and it is the argument for a still over a live specimen. Square to the frame, a card inside a dialog reads as a card the reader is expected to press. Turned two degrees, with a shadow under it, it reads as a photograph of one.
The sheet does not resize under a thumb, and 39px of it still does. Measured before the two floors, at 390 and 1280: the steps stood 552, 641 and 506 tall, so pressing Next moved the button 89px down and then 135 up. With a 280px stage floor and a 172px text floor: 564, 564 and 603. The 39 that is left is step 3 carrying one more control, the quiet way out under the primary one, and reserving that row on the first two steps would buy an identical height with 39px of empty sheet on two screens out of three.
| at 390 | at 1280 | |
|---|---|---|
| the sheet | 349x854 | 464x764 |
| the hero band | 347x121 | 462x129 |
| the two-column block, on the page | 293x1823, one column | 911x905, two |
The same content is 1,823px tall on a phone and 905 on a desktop, which is what a two-column block costs when it becomes one, and it is the reason the sheet's body scrolls while its frame stays put: the frame clips its own corners and cannot also be the scroll container.
The close disc left on 2026-08-05, and it took a second name with it. It was the dialog file's close written again under another name: same box, same pill, same scrim, same edge, same transition. One control belongs in one file, and the file is the one named for what the control does.
Its focus ring is the one thing about it this sheet still decides, because the ring has to survive the ground the disc floats over rather than the ground the atom was designed against.
And the brass action at the foot of it had no hover of its own. Only the arrow moved, so a person on a device with a pointer got a nudge and nothing under it. It takes the same lit face every other brass plate in the system takes, and the same two roles. The fix cost no new value at all.
A head class was deleted in the same pass, the fifth rule found alive on one mistake: 87 wireframes carry it, no painted screen and no stand does, and this sheet cannot reach the grey tree.
.hiw-page is the one class in this file that says "not in a
dialog", and it was on no page here. The same hero stands twice in the product: inside the
sheet every screen carries, and once as the top of the How It Works PAGE, where it gets the
page's edge, its tagline size and its own spacing. One class, and the whole difference between a
sheet and a screen.
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.
Its own width query: 900 RAIL. At RAIL the page grows a second column, 1.55fr against 1fr, and the side column becomes sticky. This is the third of the three arrivals the ladder is named for, and it is the same arrival as the table of contents and the sub-category rail: a vertical thing beside the content.
Scope the BLOCK, not the host. If the same content can stand in two places, the rules have to be written so it can.
A heading level belongs to the document, not to the component. One h1 per page, and a dialog opened over it starts at h2.
An explanation may name the mechanism. This is the block the voice rule exempts, and the exemption stops at its title, which is why the title says what it does in plain words.
Never scope a block to the first thing that held it. The full guide rendered as four bare headings for as long as these rules began with a dialog's class.
Never write a control twice under two names. The close disc was this file's and the dialog's, agreeing on every value.
Never let the arrow be the whole hover. A moving mark inside a control is not the control answering.
The level and its reason: the organisms
page. The stylesheet: components/hiw.css, which was
hiw-dialog.css until 2026-08-11, when ten rules about being a sheet went to
dialog and the name went with them. A component is not named after
one of its places. The sheet it stands in:
dialog. The close disc: icon button. The
words, which are the whole component: voice/docs/microcopy.md. The principle:
CLAUDE.md, design principle 1.