Chip

Anatomy

One zone and one content slot, which is what makes it an atom. Everything below is drawn by design/system/components/chip.css through the same entry point a product screen loads, so this page cannot drift from the screens: there is no second copy of the CSS here to drift from. Every chip on this page carries a label that a real screen carries.

• .chip the atom itself, and since 2026-08-12 it is the only name it has. An inline-block with flex: none, so a flex host cannot squeeze it. In its most common host it is the status at the end of a subscription row
• .tone-accent the one tone modifier left. Tone is the only axis this component has, and as of 2026-08-20 it is exactly as wide as the product: the three tones that stood on nothing left at stage 08, and .trial followed them today - it had a rule for eight days and not one wearer in either corpus
• border-radius reads --radius-xs, 6px, which was named on 2026-08-10 for this component: at 24px tall the control radius renders as a pill
• text-transform declared as none and letter-spacing as 0, on purpose rather than by default. The grey wireframes shout their badges, and both resets are what silence them
• white-space nowrap. A chip that folds grows the row it is pushed to the end of, and the list stops lining up

Measured on this page rather than read from the file: every chip above renders 24px tall, 10px at weight 600, line height 16px, padding 4px by 8px, corner 6px. There is no size axis and no second size anywhere in the product.

Those five numbers were 22.8, 10.5, 16.8, 3 by 9 and 6 under kit.css, and four of them moved because the atom went onto the scales rather than because anyone restyled a chip. The founder's review of the foundations folded the half steps out of the type scale, so 10.5px lands on --type-label at 10px and the line box follows it from 16.8 to 16; the spacing grid puts the padding on --space-4 and --space-8, so 3 by 9 becomes 4 by 8. Height is the sum of those two moves, 16 plus 8. The corner did not move. Every chip in the product changed by the same amounts on the same day, which is what a scale is for.

Variants and sizes

One axis, and it is tone. It is chosen by what the chip is, never by how much attention it wants: a tone is a fact about the thing, and a chip that picks its colour by urgency is the finance-app reflex this language was chosen to refuse. Values stand next to each other below, because the question is always comparative.

The count named two corpora and there are three, and the third one carried all three tokens for a day. The 28 coloured screens of stage 08 and the 55 grey pages were both swept and both came back at zero. The stand was not counted, and kit.html, the system's own front page, went on writing chip tone-attention, chip tone-error and chip cancelled after the rules had gone, rendering four quiet chips where four tones were meant. The repair was markup and not a rule brought back to serve one page: step 6 took the three tokens off kit.html, and a grep of that file returns none of them today. docs/inventory.md's renaming map, which lists .tag.cancelled on 1 grey page, is wrong about which page - and so was this sentence, which said the grey landing carries .tag.trial. Re-counted 2026-08-20: zero trial in any class attribute on any of the 114 pages, which is why the tone was retired that day with both its roles and the four teal primitives under them.

The other half of the matrix: four names became one

This component is a five into one consolidation, and four of the five arrived already merged. kit.css folded .tag, .badge, .plan-opt .best, .appbar .plan and .locklabel into a single base rule at stage 07, while docs/inventory.md was still counting two separate atoms. Step 2 of this stage brought the inventory to the code rather than the other way round, and step 6, on 2026-08-12, renamed the four survivors to .chip, here and in the markup of every screen in the same pass, because a rename here and a screen there is how a pixel comparison stops proving anything.

The merge was checked before it was made, and the check is the interesting part. docs/inventory.md opens its findings with "four chip look-alikes with four owners and no base", so the question this table had to answer is what each of the four had that the other three did not. Read out of design/kit/kit.css at line 279: on every paint and every geometry property the four were byte identical, one display, one flex, one padding, one border, one radius, one fill, one ink, one size, one weight, one line height, one tracking, one text-transform, one white-space. Nothing survived as a variant. What did survive is two things and neither is a variant of the atom: a tone, which is a declared modifier, and a placement, which is the host's job. The column below is that reading.

The accent tone stopped being a host's private arrangement, and that is the second half of this round. .plan-opt .best and .tone-accent shared one rule because the tone had never been given a name of its own: one card was reaching in to paint one child. chip.css now leaves .tone-accent alone as the subject, and the markup carries class="chip tone-accent", which is why this page no longer has to borrow a plan card to show an atom.

Paint and placement answer to opposite rules, and this is the line between them. A fill and an ink belong to the tone modifier, because a chip that is petrol is petrol wherever it stands: .plan-opt .chip would be the wrong owner for a colour. A margin belongs to the host, because where a chip sits is a fact about the thing carrying it and about nothing else: .plan-opt .chip { margin... } is exactly right, and the placement block at the foot of chip.css does the same thing five more times, for the row, the app bar, the paragraph, the alert and the card. The plan card keeping the alignment while giving up the colour is not a compromise; it is the line drawn where it belongs.

A sixth placement lives in the wrong file, and it is on the backlog rather than in this round. Five host placements of this atom are in chip.css and the plan card's is in plan-option.css, now written .plan-opt .chip: one atom, six placements, two files. That is a real inconsistency and it was found by the agent that folded the card family. It is not fixed here, because a move should not ride along with a rename: whichever way it settles, it settles once and deliberately, not as a side effect of somebody else's edit.

The cost of doing the tone before the markup was named at the time, and it is now paid. While class="best" was still written, a "Best value" badge rendered quiet grey rather than petrol on five specimens: three on plan-option.html, one on grid.html, one on kit.html. Re-measured in a browser after the sweep, all five read rgb(231, 237, 238) on rgb(28, 106, 118), which is petrol, and so does the one on the Upgrade screen. Nothing was ever unstyled in between: the name kept the base rule and lost only the tone.

One of the four could not stand on its own, and that was the point of renaming rather than deferring. .appbar .plan was a host-scoped selector, so a chip lifted out of its bar lost its rule silently. Under .chip the fill comes from .app .chip, which the bar sits inside, and the bar contributes nothing but the push. Measured on the four screens that carry it: the same 10px, the same weight 600, the same rgb(233, 238, 239) as every other quiet chip, and margin-left resolving to the free space in the bar.

Size is deliberately not an axis. One size, everywhere, on every host: 10px at weight 600, 24px tall. A chip that grew with its host would compete with the merchant name beside it, and the row already has one thing that is allowed to be big.

When to use it

A chip answers "what state is this in" in one or two words, at the end of a row or beside a heading. It is the quietest thing the product can say, and that is why it is allowed to appear at all on a screen whose job is calm. DESIGN.md sets the bar: show it only when the state is not the plain default. Fourteen "Active" chips down a column is noise on the one screen the person came to for reassurance, so Home shows a chip only on the rows where something is actually different.

Every label comes from voice/docs/microcopy.md, and there are fourteen distinct ones in the whole product: Active, Trial, Price changed, Payment failed, Higher, New, Steady, Not identified, Connected, Reconnect needed, Private, Free, Pro, Best value. All of them are a state or a name, none of them is an instruction, and none carries a number: a chip that says "3" is a count, and a count is the thing this product will not do to a person.

Where a person meets it: on Home at the end of the two rows that are not ordinary, on a subscription detail beside the heading, on Connections against each bank, in the app bar as the plan they are on, and on Upgrade as the one petrol chip in the product.

The rule, and the anti-rule

Limits

U19, composition and context. The plan form of this atom is a child of the account link, not a sibling of the lockup, on every page that greets a person by name: chip.css takes back its own margin-left: auto for that case and the link supplies the gap. Past a 760px container it gives the auto back, 2026-08-20: there the bar is a column and app-bar.css stretches the link to the rail's width, so auto stops pushing the chip away from the name inside a 120px control and starts pushing it to the far end of the greeting's own line. Same property, opposite answer, because the two forms of this bar are two different boxes. The four Upgrade screens have no account link and keep the auto at every width, since .app.flow never becomes a rail. Full table with sources and how to check: Usage rules.

States

None, and that is a decision rather than an omission. A chip is a label: no page in the product wraps one in an anchor or a button, so it has no hover, no focus and no disabled, and chip.css declares none. Inventing a hover on a badge is the same defect as inventing a role, because it documents something the product cannot do. Where a chip sits inside something that is interactive, the subscription row on Home, the state belongs to the row and the chip simply travels with it.

The technical half

Lives in design/system/components/chip.css. Stands on 28 grey pages in 65 places and 28 coloured ones in 72. Coloured screens carrying it: Home and all four of its states, Alerts and all three of its, Settings, Subscription Detail and the price change state, History and trends and all four of its, Upgrade and the current plan. Recounted 2026-08-19 by design/kit/screens/counts.cjs: it was 20 pages and 36 places until the founder put the plan chip on every screen that greets a person by name.