Level 1, and the only component in the system that is not a control. Nobody can point at it, press it or reach it with a keyboard: it states one number about a market and the number is the whole component. 72 placements on 21 painted screens, two faces. Measured 2026-08-08 in a browser, at 390 and 1280.
The level and the reason for it stay on the atoms page. This page holds what the shelf has no room for, and for this component that turned out to be a finding about the INSTRUMENT rather than about the drawing. The drawing is four rules long.
A census that reads the HTML files and counts elements carrying a class reports this:
| reading the source | reading the page | |
|---|---|---|
.oddsbar | 0, on 0 screens | 63, on 12 screens |
.track | 114, on 105 screens | 72, on 21 screens |
.lbls | 105, on 105 screens | 63, on 12 screens |
Every number in the left column is wrong, and each one is wrong in a
different direction. The feed builds its cards at run time, so the markup of a card bar lives
inside a string in a page script: bar.innerHTML = '<div class="track">...'.
A reader that scans for tags finds that string on all 105 screens that carry the feed script and
counts one track per FILE, whether the screen draws nine of them or none. And the bar itself is
never written as an attribute at all, because the script says
bar.className = 'oddsbar', so the class the entire component is keyed to reads as
zero placements in a product that wears 63.
The fact was found a day before the numbers were. Building the atoms page on 2026-08-07 turned up that this component exists in no screen's markup, and that is written into the kit's own plan as one of the two things a RENDERED page caught that the census and the inventory had both missed. What today's reading adds is the size of the error: not that a count was unreliable, but that the three numbers a reader would have trusted are wrong by 63, by 42, and by 84 screens.
And the same instrument was right about everything else. Button, icon button and chip were all re-counted in a browser on this pass and came back identical to the character: 902, 1,361 and 1,679. An instrument that agrees three times is not a verified instrument, it is an instrument that has not yet met the case it cannot see.
card, 63 placements, a 4px reading under a question
detail, 9 placements, an 8px reading with a groove
| face | worn | at 390 | at 1280 | what it adds |
|---|---|---|---|---|
| card | 63 | 267x4 | 305x4 and 422x4 | a label row under it, 267x18 |
| detail | 9 | 146x8 | 408x8 | an inset shade at the top edge, and no labels |
Two widths at 1280 and one at 390, because the feed is a single column on a phone and a grid above it, and the grid is not the same width on every screen that carries one. The height is the face and does not move.
The detail bar is twice as tall and drops the labels, and both follow from the surface: on a card the bar is a glance at a market you have not opened, and on the detail screen the same number is already written out in full beside it, so a second copy under the bar would be the page saying it twice.
Every fill in the product carries style="width:64%", and the
specimens above carry it too. The root rule bans style= and names three things that
are not styling; this one line is two of the three at once: it is a datum, and on 63 of the
72 it is a value the page script writes at run time.
A percentage is not a decision the system is allowed to make. A market at 64 per cent has to draw at 64 per cent, so the only place the number can live is the element it is a fact about.
Nothing else about it is on the element. The track's colour, the fill's colour, the glow around the fill, the corner and the height are all rules, and all of them read a role.
DESIGN.md decides it once for the whole system: green and red
are outcome semantics, YES and NO, and brass is the brand. This component is the plainest
statement of that rule in the product. The track is NO and the fill is YES, and neither colour is
saying good or bad about anything.
The label takes a different role from the bar it labels, and that is a
contrast argument rather than a taste one. The bar is a 4px surface and answers to 3:1. The
labels are 12px bold text and answer to 4.5:1, and the fill role does not carry that on either
ground. So the text reads --outcome-yes-text and
--outcome-no-text. Both were changed, including the one that passes on graphite
today: one job, one role, or the component reads a different token per theme for the same
word.
No hover, no press, no focus, no disabled, and that is correct rather than missing: there is nothing here to point at. The card around it is the control and the bar is part of what the card says.
What a static page cannot show is that nothing moves. Odds change, and in the product the fill is set once when the card is built and never animated. A transition on the width would be a decision about a live market feed that does not exist yet, so there is no rule for it and this page is not the place to invent one.
A datum goes on the element and everything around it is a rule. That line is the whole component: one inline value, four rules, and no third place where a percentage could be written down.
A colour that means an outcome takes the outcome role, and text that describes it takes the text role. Same word, two jobs, two roles, because a 4px band and a 12px label do not have the same floor to clear.
Never count this component in the source. Its class is assigned by a script, so a file-reading census reports 0 placements of a component the product wears 63 times, and 114 tracks on 105 screens where 21 screens hold 72.
Never give the fill the text's role. They are the same green at a glance and they clear different floors, and the one that passes today passes on one theme only.
Never make it look like a control. A corner, an edge or a hover would invite a tap that goes nowhere. The card is the target, and this is a reading printed on it.
The level and its reason: the atoms page.
The stylesheet: components/oddsbar.css, four rules and their arguments. The colour
decision: DESIGN.md. The card that holds the 63: components/card.css,
and the screen that holds the 9: components/event-detail.css.