Level 2, and the smallest component in the system: two rules. A centred row at the foot of a feed, holding one control that is not its own. 9 rows on 9 painted screens. The interesting part of this page is what left and how it was proved. Measured 2026-08-08 in a browser, at 390 and 1280.
The level and its reason stay on the molecules page. What needs the room here is a merge: two controls in two files that were one control, and the four declarations that were the whole of the difference, each with what it turned out to be worth.
The whole file is display:flex; justify-content:center and a
padding. Everything a person can see in the specimen above comes from
chip. Measured: 162x47, unchanged at 390 and at 1280 and unchanged with a
finger, because the chip's content box is already above the floor.
| declaration | what it turned out to be |
|---|---|
min-height:44px | INERT. The control is 12/24 at 14px, so its content box is 47 before the floor is consulted, at every width and in both themes. It never bound |
letter-spacing:.01em | the BUTTON family's tracking, worn because this control had been filed as a button. 0.14px on a 14px label |
| padding 12 / 24 | against the chip's 12 / 20. Four pixels a side |
| an inset top bevel | the only real difference. The chip family decided against a lit edge on purpose, so that there is nothing lifted to flatten under a finger |
One control keeping a groove that the other 285 gave up is the same shape as a sub-filter keeping four pixels of padding, and it is settled the same way: the majority is the face. Three of the four were nothing, and the fourth was an exception with no argument behind it.
Its states needed no decision at all, which is the strongest evidence the two were one control. The hover was a brass edge on the hover ground with the strong ink, and the category chip's hover is those three in that order; both press to the same held ground. Byte for byte, in two files.
Load more is an ACTION, it fetches, and the census of what each class is worn
by goes on saying so. The atom is where a control's RULES live, which is the correction
another component forced two days earlier: the social mark is nav by role and
iconbutton by atom, and this one is action by role and
chip by atom.
A role is what a control MEANS and a face is what it IS, and a system that cannot hold both at once ends up with two drawings of one box.
The class .load-more survives as a NAME rather than as a face:
the feed's script reaches for it, and a person reading the markup should be able to tell the foot
of a list from a category in a strip. The merge is visible in the chip's count and in nothing
else, which is what a merge in this system looks like when it is done right.
A component may be a row. This one places a control and draws nothing, and that is a complete and honest component as long as the placement is real.
Two controls are one control when the difference is measured and found to be nothing. Three inert declarations and one unargued exception is not a second component.
Never file a control by its role. This one was a button because it acts, and it was a chip in every value a browser could measure.
Never keep a declaration because it is written down. Its 44px floor never bound at any width in either theme, and it read as a deliberate target to everyone who saw it.
Never let one member keep a lift the family gave up. There is nothing to flatten under a finger, so the press has nothing to say.
The level and its reason: the molecules
page. The stylesheet: components/loadmore.css, whose comment is longer than its
rules and says so. The control: chip. Its twin at the foot of an event
screen: related.