The shelf above the components: a composition that has settled. A component is one brick, a pattern is an arrangement of bricks that the product has already made three times, in three different places, without anyone deciding to.
Take the pattern when you want that composition whole. A screen that has stopped and has one thing to say and one way on is the interruption, whatever the sentence in it says. Fifteen of the sixteen places it stands were built independently and came out the same, which is what makes it a pattern rather than a habit: nobody was copying anything, the screens simply had the same job.
Take the components when the arrangement is one screen's own. Home lays a summary and an attention row into a dashboard head, then a column of category groups, then the trust line. Nothing else in the product does that, and it is not a pattern for the same reason the dashboard head is not: one screen. Guided Reveal stacks three reveal steps and is the same case. Both are assembled from components, and the arrangement lives in the screen where it belongs.
And take the components when the ORDER is different. A status block with the way out above it rather than below is not this pattern being bent, it is a different composition, and it is worth asking why before it is built: everywhere in this product the announcement comes first and the exit second, because a person reads what happened before they decide what to do about it.
Something on our side did not answer.
Twelve screens do this. It has a name, one file, and one place to change the rhythm of all twelve.
How your monthly total has moved over time.
An intro over a chart happens on one screen. Two occurrences would make it a candidate; one makes it a screen. Building a file for it would put a stylesheet in the system that no second page will ever load.
Three, and the reason it is not two. Two occurrences prove a composition is possible; three prove it has settled. A system where every second screen produces a pattern becomes a set of synonyms, and choosing between synonyms is exactly the work a design system is supposed to remove. A composition standing on two screens is not lost: it goes into the candidates below and waits for a third.
The counter runs on wireframes/*.html, and that is not a detail. The grey folder is the whole product, 57 pages across 17 screens. The colour is a sample of 8 screens until the rollout at stage 12. A composition standing on three COLOURED screens would be standing on three of seven, which is nearly everywhere in the sample and says nothing about the product. The proof runs the other way round: the pattern is extracted against the grey and proved in colour, where the pixels are.
281 distinct compositions were examined at stage 09 step 1: 269 stand on one screen, 8 on two, 4 on three or more. That ratio is the argument for the threshold. Three patterns came out of it, and the fourth composition over the line, the interruption inside a dialog sheet, is the same pattern in a different host rather than a fourth file.
Something stopped. Here is what happened, here is the way on. 12 screens, 16 pages in the grey, seven of them in colour today. Assembled from text block and action row, with quiet line or muted line closing it, and a grid of doors as the exit on one screen.
Add at least one subscription and your list appears here. Even a partial list is saved, so you can come back any time.
The row of actions and the line that says what happens if you take one. 8 screens, 17 pages in the grey, six of them in colour. Assembled from action row and one of the two quiet atoms. It is not the tail of the interruption: on six of its eight screens there is no announcement anywhere near it.
You can come back to this from any Pro feature. Nothing about your subscriptions or your data changed.
A page that is a column of grouped rows, opened by a line that says what the column is. 4 screens, 9 pages in the grey, five of them in colour. A sixth coloured page wears the class without the composition and is counted on the interruption. Assembled from text block, category group and divided list. It is the one pattern of the three that took real CSS with it: its floor and its 620px measure came out of app-shell.css.
Your details, your plan, and the two screens that hold everything about your data.
Not patterns today, and not forgotten either. Each of these is real markup standing on two screens of the product. The next stage that adds screens should look here first rather than searching the corpus again, and the first of them is one screen away from the line.
| Composition | Screens | Pages | Where it stands, and what it is waiting for |
|---|---|---|---|
The two-track detail.col1 + .col2 |
2 | 8 | Subscription detail (six states) and Cancel guide (two). The largest candidate by pages and the closest to the line: it already carries real rules in app-shell.css under .app.detail, and a third screen would move them into a pattern file the same way the list column moved. Nothing else in the product asks for two tracks yet |
Announcement, facts, exit.textblock.status + .pairs.sentences + .actions |
2 | 2 | Sign in (the link expired) and Upgrade (the payment failed). The interruption with a pair list between the announcement and the exit, answering "what actually happened to my money" before the way on. Today it is the interruption plus a component; a third screen would make the middle block part of the composition |
Intro and facts.textblock + .pairs |
2 | 2 | Connect bank and Upgrade, current plan. A page that opens by stating what it is and then answers three questions about it in pairs |
A grid of choices with a way past.grid + .quiet |
2 | 3 | Path choice (the two doors) and Add subscription (the preset tiles). Both offer a set and both leave a quiet exit under it, which is the "a real exit is always present" rule of voice/docs/voice.md drawn as a composition |
The sub-composition that is deliberately not on this list: an intro followed by a category group stands on Alerts and Settings, and it is not a candidate because it is already inside the list column. A candidate has to be a composition the system does not otherwise carry.
No styles of its own. No colour, no type, no radius, no visual decision. A pattern arranges components and reads tokens, and that is the whole of its licence. If a composition needs a look the system does not have, the answer is a component or a variant, built first by the five things in Architecture, and the pattern comes after it. A pattern with a hex in it is a component nobody declared.
No pattern without a screen. A file in patterns/ that no page uses is dead weight in index.css, and the fastest way for a system to acquire ten of them is to import patterns from somebody else's product. Breadcrumbs, steppers and sticky headers exist in other systems, not in this one. Every pattern here names the screens it stands on, and the list is the proof rather than an illustration.
Last in the cascade. @import puts the pattern shelf after every component, because a pattern is assembled from components and has to be able to correct the rhythm between them. A rule that has to win cannot be declared first.