Merchant chip group
One category, its head, and the merchants inside it as a wrapping row of small chips, each carrying a 22px mark and a real name. It is step two of the guided reveal, and it is the moment SPOTIFYAB STOCKHOLM becomes Spotify Premium. The newest molecule in the product, and the one the riskiest assumption is tested through.
Anatomy
Two content slots, a head and a list, and the list's items host an atom. Everything below is drawn by design/system/components/merchant-chip-group.css through the same entry point a product screen loads, so this page cannot drift from the screen.
Streaming (4)
- Netflix
- Disney+
- Amazon Prime
- Hulu
.rgroupthe molecule: one category, top margin only. Five of them stack on the reveal, so it owns the gap above itself and nothing below.group-head.plaina molecule this one hosts, the group head in its plain form. Positioned tighter here, by margin alone, and not otherwise touched: the chips underneath draw their own edges, so the head has no rule to addula flex row that wraps, with an 8px gap. Not a scroller: a horizontal scroller would hide half the category behind an edge, and seeing all of it is the whole point of this steplithe chip. Asymmetric padding, 8px on the left where the mark sits and 16px on the right where only the name ends, a hairline edge and a control corner.logoan atom, the Logo, at 22px with--radius-xs. This is the only place in the product it renders at that size, and the size belongs to the atom's own axis inlogo.css, not to this file
There is no amount slot, and there never will be one. The chip carries a mark and a name and nothing else. That is not a gap in the component, it is the component: at this step the person is being asked to recognise, and a price beside each name would move the screen a beat forward into the thing they came here afraid of. The number arrives at step three, once, at 46px.
Behaviour at width
Fluid, and it has no point and no threshold. flex-wrap: wrap: the chips fill the row and start a new one, so the group works at a width nobody predicted. See Width.
Variants and sizes
One form, no axis, and this is the smallest footprint in the system. One grey page and one coloured page, five instances on each, all identical: same head, same wrapping row, same chip. There is nothing to draw a matrix of, so none is drawn.
What varies between the five instances is the category name, the count in the head, and how many chips are in the row, which is data. The row below is the shortest category on the reveal and the one above is the longest; they are the same component at two content lengths.
Music (2)
- Spotify Premium
- Apple Music
Software (4)
- Adobe Creative Cloud
- ChatGPT Plus
- iCloud+
- Notion
| Not axes Three things that look like they should vary here and do not. Each is a prohibition with its reason, which is the honest form of an empty cell |
Why not |
|---|---|
| An amount on the chip | Forbidden, and it is the component's whole reason. D1 locks the reveal as count, then categories, then total, each step with its own action. Money on this step is money one beat too early |
| A pressed or selected chip | Forbidden. Nothing here is a control (see States below). A selectable chip would make the reveal a task, and the reveal is a thing that is shown to a person, not a form they fill in |
| A second size | Does not exist and is not needed: there is one instance of this molecule in the product, on one screen, at one width band. If a second host ever appears, the size question is asked then, with a container that justifies it |
The 22px mark is the one measurement worth stating twice. Everywhere else the logo is 30, 32, 36 or 52. Here it is 22 with the extra-small corner, because at 22px a control corner reads as a pill and a chip is not a pill. It is small enough that a row of four fits at 360px and large enough that a person recognises the mark without reading the word, which is the mechanism this whole step runs on.
When to use it
Once, on node 1.5, the guided reveal, at step two of three. The person has just been told how many recurring charges there are; this is where those charges stop being a number and become a list of things they recognise. voice/docs/microcopy.md gives the step its two lines: "Here they are, grouped" and "Five categories, and the real names behind the charges."
It is the object H0 is tested through, and that is why it was built at all. The riskiest assumption of this product is that an avoidant person shown their whole recurring spend in one calm frame completes the reveal and reports relief rather than stress. Half the charges on a bank statement are unreadable codes; naming them is mechanism three of the strategic dimension doing its work at the emotional peak. The stage 07 strategy check found that this screen had no coloured page at all, which is how it came to be the sixth screen in the sample and how this molecule came to exist.
Everything about the chip is calm on purpose. A hairline rather than a fill, because a wall of filled chips reads as a wall of buttons. The merchant's own mark in full colour, because it is data and not chrome: it is the person's own Netflix, and that recognition is the product working.
The rule, and the anti-rule
Fitness (2)
- Peloton App
- Strava
A mark, a name, and the row wrapping onto as many lines as it needs. At 360px a four-chip category becomes two lines and stays entirely visible, which is what a person is being asked to look at.
Adding the amounts turns a moment of recognition into a column of arithmetic, on the screen whose entire job is to be survivable by someone who avoids finance apps. It also breaks the reveal's own structure: step three exists to deliver the total, and a person who has already added it up in their head arrives there with nothing left to feel. If a screen genuinely needs names and amounts, that screen exists and it is Home, built from the subscription row.
News (2)
- The New York Times
- The Economist
A set of things a person should recognise at a glance and then move past. Nothing in it is tappable, so nothing in it invites a detour.
When each item is something the person can open, the component is the subscription row, .row: a 36px mark, a name, a date, an amount, and the whole row is one link with one accessible name. The tell is whether the list is a destination or a view. Making a chip tappable would promise the reveal has somewhere to go, and at step two it deliberately does not.
States
None, and it is the strongest "no" in this round. Every chip is a plain li: no anchor, no button, no aria-pressed, nothing to tab to, checked across the one grey page and the one coloured page. The step's only control is the "See the monthly total" link underneath it, which is the step-forward link and its own component. A hover on a chip would promise a destination this step does not have, and drawing one here would document something the product cannot do.
The technical half
| Reads | Which token | Growing from |
|---|---|---|
| the chip's ground | --bg-surface | --paper, and --paper-dark in the dark theme |
| the chip's edge | --line-divider | --hairline-soft. Decorative, and deliberately not --line-control: WCAG 1.4.11 asks 3:1 of the boundary that identifies a control, and a chip is not one |
| the name | nothing here | inherited from base.css at --text-primary, exactly as the product renders it |
| the chip's corner | --radius-sm | primitive, straight. A named decision at stage 07: the grey drew a square 1px box and the chip takes the same corner every other control-sized object in the kit uses |
| the type step | --type-body | primitive, straight |
| margins, padding, gaps | --space-16, --space-8, --space-4, --space-0 | primitive, straight |
| the 22px mark | nothing here | the Logo atom, in logo.css. Its rule was moved out of this component's block at the atom round, because a size of one component declared inside another component's file is the shape of a later disagreement |
Two values moved and none was re-decided. The chip's vertical padding was 5px and is 4, its left padding was 6px and is 8, its right padding was 12px and is 16, and the block's top margin was 14px and is 16. Nearest step, ties to the larger, straight from the founder's review of the foundations. The chip's measured height goes from 32px to 30px as a result, which is the mark plus its padding and nothing else: the mark itself is untouched at 22px, and it is what sets the floor.
One rule of this file positions another component, and both files say so. .app .rgroup .group-head { margin: 0 0 8px } ties with the group head's own .plain margin at 0-3-0, so source order decides it, and the @import order settles that by itself: alphabetically inside the molecule level, group-head.css comes before merchant-chip-group.css, so the host wins. Measured on this system at 8px, which is what the product renders today. Nothing else about the head is touched: a host positions the components it holds and never repaints them.
Lives in design/system/components/merchant-chip-group.css. Stands on 1 grey page and 1 coloured one, five times each. The coloured screen carrying it: Guided Reveal.
<div class="rgroup">
<h3 class="group-head plain">Streaming (4)</h3>
<ul>
<li><span class="logo" aria-hidden="true"><img src="visuals/logos/netflix.svg" alt=""></span>Netflix</li>
<li><span class="logo" aria-hidden="true"><img src="visuals/logos/disney-plus.svg" alt=""></span>Disney+</li>
</ul>
</div>