Component kit

One component that takes an element: it renders as both a link and a button, 46 times across the set, and whether it navigates or acts is invisible in the class. The filled form is authored, not extracted: in grey .primary is only a heavier border, because greyscale has no fill to give. One filled button per zone.

The plate is gone with the rule, and leaving it would have been the worse of the two mistakes. Authored at stage 07 and worn on none of the 55 grey pages and none of the 28 coloured ones: two rules and two hovers describing a control the product does not have. With the rule deleted the plate drew the ordinary light pair on a petrol ground, and measured at 1280 the filled one computed rgb(28, 106, 118) on a plate of rgb(28, 106, 118), an invisible button demonstrating an absence. A stand that keeps a specimen for a class nobody defines is showing a reader something to copy. The petrol ground it was written for exists in one place, the landing, and the landing wears .lp-btn five times and has never worn this. It comes back, authored again, the day a petrol band ships with a control on it. See Button.

One base where the inventory found four look-alikes with four owners and no base. Sentence case, not the wireframe's uppercase: a shouted status is not a calm one. The tones are by state, not by owner. Three tones left this plate at step 6, and the count that removed them named two corpora when there are three: the 28 coloured screens and the 57 grey pages both returned zero for tone-attention, tone-error and cancelled, and this stand was not swept, so it was the last place in the repository writing them. A price change and a failed payment are a full wash block with a sentence, because neither state fits in two words.

Thirteen rules for one job collapsed into this, and the five sizes into two. Six of the thirteen had no target rule at all, so the 44px floor on this base is what closes 21 under-target controls across 10 pages. Petrol at rest only inside the trust line, which the concept names; everywhere else the underline carries the affordance.

One rule for the input and the select, which the grey CSS had already settled. The invalid state is authored: a sweep of all 57 pages returns no aria-invalid, no required and no error class, so the kit would otherwise inherit an input that cannot be invalid. Clay, never red, and the hook is the native attribute, so no page needs a new class.

Seven slot names had no base rule at all and were sized only by their host. Base first, host sizes as modifiers. Exactly one object per screen is set at display size, and it is the number the person came for.

Pulses at 1.4s and stops entirely under prefers-reduced-motion, which is already wired. A placeholder in a box that shrinks to its content has no percentage to resolve against, so those widths are stated by the host.

One atom, three states: the mark we have, the mark still arriving, and the merchant we could not name. The third has no class of its own and is selected structurally, :not(.is-skel):not(:has(img)), because the grey has no hook for it and the wireframes are frozen; the product writes [ ? ] inside it on the unrecognized charge. Dashed on purpose, in colour as in grey: "we have nothing to show here" is already what a dashed outline says to a reader.

[ ? ]

The four GC2 destinations, drawn as masks so the kit owns the mark and the screen carries nothing but the class. The mask is painted with currentColor, which is what turns the current tab petrol without a second rule. It sits on a pseudo-element rather than on .ic itself, because a mask clips its own children and .ic hosts the unread dot. The grey wireframe draws these as an empty bordered box on purpose, so this is the one atom the extract could not take from _wf.css.

Three atoms the Guided Reveal brought in, and all three are reconciliations rather than new inventions. .next is the only link in the product that carries a direction, because the step it points at is further down the same page; it is a standalone control, so the 44px floor applies to it (the exemption is for links inside a sentence). .lbl.strong is the caption over the 46px Display, declared as a modifier because the grey wrote it as a host restyling an atom. .tone shared every value with .context and differed only in the space above it: one set of values, two names, because the jobs differ. Step 6 folded both into .muted, which is where that reasoning landed.

The object the whole product is made of. A line in a list, not a card in a stack. The whole row is one link with one accessible name, so a screen reader reads the subscription and not five fragments. The badge appears only when the state is not the plain default: fourteen "Active" tags in a column is noise on the one screen whose job is calm. The row draws no floor of its own, the list separates.

Not fine print and not a footer: it sits where the number is, because a trust claim that has to be scrolled to is not a trust claim. The petrol shield is one of the three jobs the accent is allowed to do, and it marks the block rather than one line, because all three lines are the claim.

A price change is amber, a genuine failure is desaturated clay, and there is no red in this system for any state. Neither carries an icon: the sentence is the alert. Kept as two components on purpose, because one of them is news and the other is a failure.

The tone is opt in, and that is a correction rather than a preference. Clay is reserved for a genuine failure, and three of the five pages that carry .notice are not failures: "we could not match this charge" and "your bank wants you to sign in again" are ordinary news. With clay as the default they told the person something had broken when nothing had. Greyscale could not express tone at all, so the modifier is the colour layer's to add, exactly like the destination icons.

Label left, answer right. The .sentences variant stacks the pair, because a sentence set against its label on the right wraps into a ragged column and stops being readable at 360.

Two equal choices, so neither is recommended and neither gets petrol: two petrol objects on one screen is the One Voice Rule failing. The category hides one of these two doors; showing both is the decision.

One rule with two hosts, the app and the landing, rather than an lp- copy. Rebuilt into the shape the category has taught people to read: the badge qualifies the card from the top, the price is the card's one big thing, and every card carries its own action. Only the recommended card takes the accent, because three accent buttons in a row would break the one-per-zone rule.

Not a button variant, and the difference is real: it is a selection rather than an action, its width is set by the group, it has a disabled state the button has no equivalent for, and its selected state is a petrol tint where a primary button is a petrol fill.

The product's toggle is a real checkbox inside a label: there is no custom switch anywhere, and the 44px target is the label, not the box. A pressed tile is a current selection, so it takes petrol.

Step two of the reveal, and the place the merchant mark earns its colour: a bank statement line reading SPOTIFYAB STOCKHOLM becomes a face a person recognises. No amounts here, ever - the number comes third. The group heading is the same .group-head.plain the list screens carry, so the chip is the only new shape. Its radius is a named decision: the grey draws a square 1px box, and the chip takes the control radius its own 22px mark carries.

Three forms. At container 760 the tab bar becomes a 220px left rail and the app bar folds into its top; at 900 Home becomes a dashboard and the detail takes as many columns as its pane holds. The groups run in as many 300px columns as fit, capped at three, and no third step decides it. The onboarding chain overrides the grid rather than inheriting it, because onboarding has no desktop delta. The review frame that wraps a screen on these pages is not in the kit: it hosts the navigation panel and does not travel to a real build.

Two forms from one class: a section with a band, and a disclosure whose summary replaces the band. The gate occurs nowhere outside a panel, so it is a slot of this organism and not a component of its own, and it sits below what is free and never in front of it.

A card organism, built like the share card: its own frame, a heading, a short reason, the three things Pro adds, and one action row. It sits under the chart frame rather than over it, and it is deliberately quiet: no blur and no cover, because a blurred chart is a lie about our own product and the honest empty frame persuades better. The filled button here is the one accent of its zone, so nothing above it may take petrol.

The cancel moment, which principle 5 names the product's most important emotional beat. The row keeps its whole-row target to the subscription and the cancel control is a second, separately named control beside it: confusing the two is what costs the cancellation, so the cut is a bordered target of its own rather than a word inside the row. Filed as a one-off at step 2, which is why the kit had nothing for it and the list first rendered with browser bullets, a 40px indent and the cut as a bare blue link. Below 460 it drops under the row and keeps to the right. It was .cut, its own family of six rules, until 2026-08-20: measured after the fold it was .btn minus a font-weight and a hover fill, so it became class="btn soft" and the family went.

One column at every width: a settings sidebar does not survive 360px, which is also why this cluster is three screens and not one. The unclassed middle span grows, which is what pushes the status chip to the end, so the chip needs no margin written on it from the parent.

The only organism in this kit that exists to test a hypothesis rather than to hold content. H0, the assumption the whole product is built to prove, says an avoider who looks at the number feels calmer rather than worse - and this is where a person looks. Three steps live on one page and never on three routes, so back never means starting over. D1 read literally: the count, then the categories, then the total, and every step carries its own action. It joined the sample at step 6, when the strategy check found the five screens chosen for component coverage had left H0 with no coloured screen at all.