Level 2. A row of amounts a person picks instead of typing. 120 rows and 480 chips on 105 painted screens, 118 of them chosen. The chips are not this component's, and by now neither is anything else: the file is one layout rule and three scopes. Measured 2026-08-08 in a browser, dialogs forced open, at 390 and 1280.
The level and its reason stay on the molecules page. This page holds the two-step walk that took a control off a brass gradient, and the honest statement of what is left after it.
| at 390 | at 1280 | with a finger | |
|---|---|---|---|
| the row, in a dialog | 331x36 | 402x36 | the same, it is a row |
| a chip | 33x36 to 45x36 | the same | 33x44 to 45x44 |
| the row, in a bet panel | 288x36, pushed to the RIGHT | 520x36, pushed right | the same |
The whole component is four declarations. A flex line that wraps; the
same line again inside a dialog; a top margin inside a deposit sheet; and, inside a bet panel or
a bet sheet, justify-content:flex-end. That last one is the only interesting rule
in the file, and its reason is one line: the field these amounts fill is right aligned, so the
amounts line up under it.
Until 2026-08-06 the chosen amount was a full brass gradient on 107
placements. DESIGN.md decides against it twice: "active is a brass tint" under
Chips, and the One-Accent Rule, "if a screen has brass on more than the logo, the active chip
and the primary action, it is overspent". A deposit sheet had a lit brass $20 sitting
directly above a lit brass Add funds, and the chip was as loud as the commitment.
The product already held the answer in two places, and the file disagreed
with its own token. The same class in the bet panel used a brass tint, and
tokens.css names that token, in its own words, "from: a selected quick amount". The
token was cut FROM this control and this control was not using it.
Then it moved a second time, and only a wider measurement could have caught it. The first pass compared one control against one neighbour and landed on the panel's tint. The next pass measured the whole chip family and found the panel itself was one of TWO live tints: 815 category chips wore a lighter ground inside a brass edge with a halo, and 543 wore the heavier one with no halo. Neither file gave a reason; both tokens carried only a provenance, which is what a value read off a painted screen looks like. The majority won, and it is also the safer pair in daylight.
The hover and the press went with the gradient, and that was a consequence
rather than a decision: they were the three-step of a brass PLATE, and there is no plate now.
What replaced them is what every chip in the product does, which is nothing on hover when chosen
and --bg-pressed under a finger either way.
The chips left for chip on 2026-08-06. The field they stand beside left for input the day before that, when this component was cut out of it. A file holding one layout rule for one row is a candidate for folding into whatever holds the row, and the file says so about itself.
It is kept for now, and the reason is a name rather than a rule. A person reading the markup should be able to tell a row of amounts from a row of anything else, and the row genuinely does two different things in two places: it wraps left in a sheet and packs right in a panel. That is a real difference and it needs a class to hang on. The moment the two agree, this file has nothing left.
A selected chip is a tint, never a fill. Brass carries identity, the active state and the primary action, and nothing else; a solid brass ground is the commitment's own face.
A token that names its provenance is a value nobody decided. Both spellings of "chosen" carried a note saying where they had been read FROM, and neither carried a reason, which is how one control ended up disagreeing with the token cut from it.
Never let a chooser shout as loudly as the commitment. A lit brass $20 above a lit brass Add funds is a screen with two primary actions.
Never settle a family by comparing two members. The first pass did, and it moved 107 placements onto a value that turned out to be the minority of five.
Never keep a file for a name alone. This one is four declarations, and it survives on one of them being a genuine difference. When that goes, so does the file.
The level and its reason: the molecules page.
The stylesheet: components/quick.css. The chips: chip. The
field they fill: input. The colour decision:
DESIGN.md, the One-Accent Rule.