Every atom the system ships, in every face it actually wears, with Vault and Daylight
resolving side by side in one document. Nothing here is a screenshot and nothing here is a
copy: each specimen is live markup painted by components/index.css and by nothing
else. This page is the picture of the system before the consolidation pass, so that the
pass has something to be compared against.
Two themes, one instant. The roles in tokens.css are
declared on :root,[data-theme="dark"] and on [data-theme="light"], and
the light selector carries no :root. So any element can be marked and its subtree
takes that theme. The two columns below are the same markup resolving twice, at the same moment,
with no toggle and no capture. A role given a value in only one theme renders anyway, and the
only way to see it is to have the other one beside it.
The ground is the plate, not the page. In the product a control almost never stands on the page: it stands on the plate the feed and the detail shell draw. A specimen on the page ground is a specimen measured against a surface it is never seen on.
Every specimen stands inside body.app-case, and it has to.
A large part of this system is scoped to that class: chip.css writes
.app-case .chip-quiet, not .chip-quiet. A chip outside
.app-case is not a chip, it is an unstyled anchor. That is worth knowing before
anyone hands a component to a developer as a standalone thing.
Hover, press and focus are live, not drawn. Point at a specimen and the real rule fires; press Tab and the real ring appears. They are deliberately not reproduced as frozen classes, because a frozen copy of a state is a second place the value lives and it is the one that goes stale. What IS shown as a specimen is every state a class or an attribute can carry: selected, current, pressed, disabled, error.
Four emphases and four sizes are faces of one thing, not four things. The emphasis says how loud the action is and the size says how much room it has, and they are independent: every combination below is one decision taken twice, never a new component.
Rule. Emphasis and size are chosen separately. Anti-rule. Never two primaries in one field of view: primary means "this is the one", and a second one revokes the promise of the first.
Six faces, and every one of them is an answer to the surface it stands on: a band, a card, a photograph, a row. That is why they cannot be reduced to one, and why they are still one component: the job is identical and only the ground changes.
Rule. An icon button always carries an aria-label: it has
no text, so without one it is a control with no name. Anti-rule. Never an icon button for
an action a person has not met before. An icon is a reminder, not an explanation.
The rail, the nav, the amount and the quiet chip are one box under four
scopes. Selection is the same brass tint every time, and it is a class
(.sel) or an ancestor attribute ([aria-current="page"]), never a
second component.
Rule. A chip is a filter or a jump, and its selected face is always the same brass tint. Anti-rule. A chip is never a commit. If pressing it changes money or state, it is a button.
A track and a fill. The fill's width is a datum and that is why it is on the element: it is the one thing on this page the stylesheet is not allowed to decide.
This is the first place the card form has ever existed as markup. The
detail form, .ed-oddsbar, ships in the HTML of nine screens. The card form,
.oddsbar with its labels, ships in none: it is built by a page script at run time,
as a string, on 105 screens. Its "213 uses" in the inventory were counted by a regular
expression that read inside that string, which is a reading to correct rather than trust.
Rule. Green is the YES share and red is the remainder, always in that order, because the number written beside it is the YES number. Anti-rule. The bar never carries a brand colour: green and red here are outcome semantics, and brass would say the house has an opinion.
One field, one label and the currency mark beside it. The face is the
class now: .amount-input is the sheet field, .amount-bet is the
number a person is about to commit, and .addr is a value you only check.
And this page is what found the defect that fixed, on its first render. Until 2026-08-08 every rule in that file was scoped to a CONTAINER, so the first row of this section rendered white, with black text, inside the dark theme: no rule set the field's ground or its ink outside a dialog, and a User Agent has one idea of a text field. A missing value is a value. It never appeared on a screen, because on every one of them the field stands inside a dialog or a bet panel; it appeared here, which is the whole reason a stand shows an atom on its own.
not rendered below 760px, exactly as on the detail screen: the dock stands there instead
not rendered below 760px, exactly as on the detail screen: the dock stands there instead
not rendered below 760px, exactly as on the detail screen: the dock stands there instead
not rendered below 760px, exactly as on the detail screen: the dock stands there instead
A third face exists and it is on the component's own
page rather than here, because a shelf shows a component and this one has three:
.amount-input.addr, the wallet address, mono and ellipsised and never wrapping. It
is a <span>, because it is a value you check rather than one you type.
Until 2026-08-08 it could not have been shown here at all, and neither could the two
above: every rule was scoped to a dialog or a bet row, so this atom had no face of its own, only
faces its containers lent it. That sentence stood on this page as a finding for a day before
anybody acted on it.
Rule. A field always carries a label element, never a placeholder standing in for one: a placeholder disappears the moment a person types, which is exactly when they need to know what they are typing. Anti-rule. Never a field with no visible focus edge. Focus here is a border colour and a glow, and both have a value in both themes.
A field that holds a query, a mark inside it that says what the box is, a
control that empties it, the mono line that answers, and the body that answers IN PLACE.
Written 2026-08-16 as a page you went to and rebuilt 2026-08-17 as a control you use: that
page put the field at y=221 on a phone, unfocused, and kept a header magnifier whose href
was the page it stood on. Below the RAIL rung the body is a sheet, at RAIL and above it is a panel
under a field in the header, and the rung is a measurement: 69px of free header at 640, 277 at
900.
It is not a variant of input, and the reason is anatomy in three places: the mark is INSIDE this control and beside that one, the value is a query rather than a quantity, and this is the only field in the product a person can empty. What it shares it shares through the roles, not through a copy.
2 events for "election"
2 events for "election"
The two halves state one market's two sides and cannot exist apart. This is the control the product is named after, and it wears three boxes: the card pair, the compact pair in a multi-outcome list, and the trader pick in the bet panel and its mobile dock.
not rendered from 760px up, exactly as on a screen: the dock is the panel's pair below 760 and the panel replaces it above
not rendered from 760px up, exactly as on a screen: the dock is the panel's pair below 760 and the panel replaces it above
Rule. Green is YES and red is NO, everywhere, and neither colour is ever borrowed for anything else in this system. Anti-rule. The pair never appears with one half missing. A market with one side offered is not a market, it is an advert.
A sentence, a mark and a way out. It holds an icon button, which is why
index.css files it as a molecule, and it is still an atom: nothing inside it is a
part a person would name.
Rule. A toast reports something that already happened. Anti-rule. Never a question and never a choice: a toast that has to be answered is a dialog, and it will be dismissed before it is read.
A shape that stands where a thing will be. Four widths, a thumbnail and a button block, and they exist so the page does not jump when the content lands.
Rule. A skeleton has the shape of the thing it replaces, so the layout does not move when the content arrives. Anti-rule. Never a spinner in its place. A spinner says "wait" and says nothing about what is coming.
The switch. It is marked unmeasured in the inventory because it does not stand on any of the 41 anchor screens: it lives on the sort control and in settings. That is a statement about where it was measured, not a statement that it is empty.
Rule. A switch takes effect the moment it is thrown, with no Save beside it. Anti-rule. Never a switch inside a form that has a submit button: there the control is a checkbox, because the decision is not final until the form is.
The brand lockup, written 2026-08-11 with the rename to Yonder. It is the one
component in this system whose drawing is not made of system ink: the mark is its own shape,
carried as a data URI per theme, because components/CLAUDE.md already says a brand
mark keeps its own drawing and no generic glyph may stand in for it.
Rule. One lockup, one file, and the mark's colour lives in a token rather than inside the drawing that uses it. Anti-rule. Never a second copy of the shape in the file that places it: that is exactly what stood here until 2026-08-11, and the copy with the colour typed into it was the one that could not follow the light theme.
The brass-cornered head of a plate, written 2026-08-11 out of the two copies
that were standing in dialog.css and hiw.css. It is an atom by the
lockup's reading: it holds nothing from the system, and both of the wholes that hold it load at
level 3, so it has to be able to lose a tie to either of them. The third host, the
how-it-works page hero, is 922px wide and is on the component's own page, because a shelf
column cannot show it without lying about its width. The fourth arrived the same day by
backlog 109: the outcome head had this anatomy to the declaration and its own ground, wave
opacity and glow, so it wears the face and says the skin, which is what turned this file from a
face into an anatomy plus a default one.
--display-hiw
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.
Rule. A face that more than one component wears is a file, and each wearer says only where it sits and how loud it is. Anti-rule. Never make two rules agree by editing one of them: six numbers were moved on the how-it-works copy on the morning of 2026-08-11 so that it would match the sheet head, and the result looked like a fix while it was the same duplication being paid for a fourth time.
The molecules and the organisms are not here: trustbar, market, filters, catnav, bottomnav and the rest of level 2, then header, footer, card, dialog, betpanel and the shells at level 3. They follow in the same format.
Neither is the consolidation. Padding still stands at 17 values, rendered
height at 29, border at 17, and one font size on these screens is 19.2px, which is
1.2em of something and the only value on the list nobody typed. This page is the
picture taken before that pass, so the pass can be looked at rather than read as a diff.