Dashboard head
The band across the top of Home on a wide screen: the monthly total on the left, the one thing that needs attention on the right, a hairline under both. Below container 900 it does not exist, and that is not a figure of speech: there is no rule for it outside one query, so on a phone it is an unstyled box and its children stack.
Anatomy
One grid, two slots, and a rule underneath. Everything below is drawn by design/system/components/dashboard-head.css and by the hosted components' own files, 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.
What you see here depends on how wide this page is. The query reads the container declared on body in base.css, not the width of the box below, so at a narrow window the specimen is correctly a stack and from a container of 900 it is correctly a band. Both are the component. The measured numbers are in the technical half.
You're paying for 14 subscriptions
$192.90
a month, for what you have signed up for
Behaviour at width
From --bp-desktop, 56.25rem: the head becomes a two-track grid, minmax(250px, 0.85fr) and minmax(300px, 1.15fr), vertically centred, with a divider under it. Below the point it is a stack, and above it the total stands beside what the total is about.
It is the desktop point rather than the tablet one because this is the same change the shell makes there: past 56.25rem the content stops being a column. The two track minimums are widths, so the 8px spacing grid does not govern them and they stay literal. See Width.
Netflix went up by $2.50, now $17.99 a month.
See what changed.headthe organism itself, and it is a plaindiv: a grid from container 900 and nothing at all below it. It draws one hairline and no fill, no edge and no cornergrid-template-columnsminmax(250px, 0.85fr) minmax(300px, 1.15fr). The wider half goes to the slot that has to be READ, because the left slot holds a 46px figure that is legible at any widthalign-itemscenter, so a one-line wash sits level with the middle of the number rather than floating above itborder-bottomreads--line-divider. A divider inside one surface, not a container edge: nothing has to be found by touch, so it owes no 3:1.summarya molecule, and the left slot on all five pages. It brings its own heading and its own 46px total from summary.css, and this file touches neither. The one thing it does take is the slot's bottom margin, below> * { margin-bottom: 0 }the band's foot, inside the query only. Every slot brings--space-24under itself for the block that would follow it, and inside this band nothing follows it: the padding holds the hairline off.> *and not> :last-child, because in a grid row every item ends on the same line and "last" names nothing.wash.attentiona molecule, the Wash block in its attention tone, drawn by wash-block.css. It is the right slot on Home and on Home, could not refresh, and it was.attentionuntil step 6- The second slot has exactly one occupant again, 2026-08-21.
.candidates, the Save-focus list, stood here on the save-focus state until the founder retired the Save tab; the nudge it carries came back onto Home as a block under the LIST, whereia/docs/pages/core.mdput it in the base layer. So this head hosts one molecule beside the summary and never an organism, which is what its own ladder always said it should
The band's foot is 24px, and until 2026-08-12 it was 24 plus whichever margin the taller slot happened to bring. Measured on the coloured Home at a 1280 viewport, the band ran 153px tall with 49px under the lower slot where the padding says 24 and the rule says 1. Every slot carries --space-24 under itself for the block that follows it on a phone, and inside this band there is no block that follows it. The founder's review of the components. It is still the only thing this file takes from a child, and it is a position: no rule here touches a slot's fill, ink, size, weight or edge.
Variants and sizes
One axis, and it is the container. There is no size axis, no emphasis axis and no tone: the band is the same band on all five pages and only its second slot changes, which is content rather than form. The two tables below are those two facts, in that order.
| Form Chosen by the CONTAINER and never by the page. A screen does not opt in: it writes the same markup at every width and the query decides. That is why there is no |
What is declared | Where it stands |
|---|---|---|
Under container 900 .head |
nothing | Not "one column": no rule at all. The box is a plain block, the two sections stack in source order, and every pixel of the result belongs to the sections. Measured at container 892: display: block, zero padding, zero margin, no border |
From container 900 .head |
display: grid --space-32 / --space-40 --space-24 --line-divider --space-0 on the slots |
Two slots side by side, 0.85fr against 1.15fr, with the hairline under them. Measured at container 908: display: grid, 24px of bottom padding and margin, a 1px bottom border, and no bottom margin on either slot |
You're paying for 14 subscriptions$192.90 a month, for what you have signed up for Netflix went up by $2.50, now $17.99 a month. See what changed | ||
| The second slot Chosen by what is TRUE, never by what would look balanced. The right half is empty on two of the five pages and that is correct: an attention row on a screen with nothing wrong is the anxiety this product exists to remove |
Which component | Where it stands |
|---|---|---|
A price change .wash.attention |
wash-block.css | 2 pages, home and home-error. Calm amber and never red: the persona closes any app that shows her red |
Two you may not be using .candidates |
save-focus-list.css | 0 pages since 2026-08-21. It was the one place an organism sat inside this one, on the save-focus state; that state went with the Save tab and the block now stands under the list on Home |
You're paying for 14 subscriptions$192.90 a month, for what you have signed up for Two you have not opened in a while. No pressure, just a nudge. | ||
Nothing .head with one child |
- | 2 pages, home-loading and home-empty. The summary takes the left track and the right track stays empty. It is NOT centred and NOT stretched: the number holds the position it holds on the other three pages, so nothing jumps when the attention row arrives |
Nothing to add up yetConnect your bank or add a subscription, and your monthly total appears here as the biggest thing on screen. | ||
| A third slot | - | Forbidden with a reason rather than missing. Two tracks are declared and a third child would wrap onto a second row under a 32px row gap, which is why that gap is declared at all. A dashboard head with three things across the top is a screen answering three questions, and the One Number Rule says it may answer one |
The empty right track is the interesting cell of both tables. Read together they say the band is a fixed frame and the content is what varies, which is the opposite of how a dashboard is usually built. That is deliberate: the total is in the same place on every state of Home, including while it is still a skeleton.
When to use it
This band exists on exactly one screen and it is the screen the product exists for. J-MAIN reads "I want to see all my recurring charges in one calm view", and on a phone that view is a column: the total, then anything wrong, then the list. On a desktop the same column would leave two thirds of the screen empty and push the list below the fold for no reason. The head is what the width buys, and it buys exactly one thing: the total and the one thing that needs attention, readable at the same moment.
It is a placement decision and not a visual one, which is why the file is one rule long. DESIGN.md puts the monthly total at the top of the One Number Rule, and nothing in this component competes with it: no fill, no card, no corner, no shadow. The Flat Paper Rule holds here too, so the band is separated from the list by a hairline and by nothing else.
Reach for it when a screen has one number that is the answer and at most one thing that needs saying about it. If the second slot would hold a menu, a filter or a set of controls, this is not the component: that is a screen with a toolbar, and this product has none.
The rule, and the anti-rule
You're paying for 14 subscriptions
$192.90
a month, as of your last update
Netflix went up by $2.50, now $17.99 a month.
See what changedOne div class="head" holding two sections, written once, on all five pages. The container decides the rest. No page carries a state class, no page has a mobile block and a desktop block, and nothing has to be kept in sync. This is why the axis is a container query rather than two markup paths: a second path is a second edition of the screen that nobody declared.
The moment the top of a screen holds a set of equal things rather than one number and one message, the component is the Grid (.grid, .grid.roomy and the still unrenamed .plans), which repeats one child at equal widths. The dashboard head's tracks are deliberately unequal and its two slots hold different components. Building a row of tiles out of it gives you two tiles of different widths and a hairline you did not want.
Getting your subscriptions
This usually takes a moment.
The loading state writes one child and stops. The left track keeps its position, the skeleton holds the number's place, and when the figure lands nothing moves sideways. Two of the five pages do this and neither of them fills the space with something to look at.
A reassurance in the attention slot is the one thing this product may not do. The slot means "something is true and you should see it", so filling it when nothing is true teaches a person to stop reading it, and the next time a payment actually fails they will skim past. voice/docs/voice.md forbids the exclamation mark as well, but the real fault here is structural: a slot that is always full carries no information.
@container (min-width: 900px) {
.app .head > * { margin-bottom: 0 }
}
measured on Home at 1280, before: band 153px, 49px under the lower slot
measured on Home at 1280, after: band 129px, 25px under it
In a grid row there is no last child: both items end on the same line and the row is as tall as the tallest margin box in it. On Home the DOM's last child is .wash.attention and the item that reaches lowest is .summary, so :last-child would have zeroed the slot that was not driving the height and moved the band by nothing at all. This is the same reason the shell's own foot rule is written against :last-child and this one is not: one is a column and one is a row.
Nothing to add up yet
Connect your bank or add a subscription, and your monthly total appears here.
Down here the band has no padding and no border, so a slot's bottom margin is not dead air: it collapses through the band and becomes the gap between the head and the next block on the screen. Zeroing it at every width would look like tidying and would close a real gap on all five pages. The rule sits inside the query for the same reason every other rule in this file does: below 900 this component does not exist.
Limits
U17, composition. This block takes order: 1 at the desktop point, and the declaration is the shell's rather than this file's: ordering siblings is the parent's job, and this file refused it first and said so in its header. It was unscoped until 2026-08-19, which meant that on a screen with a head and no groups column set the head went to the FOOT, because every unordered sibling keeps the default 0. That was live on home-empty from the day it was written and it happened again the moment History and trends took this head. The whole set is now guarded on :has(> .groups). Full table with sources and how to check: Usage rules.
States
No states, and it is structural rather than an omission. The dashboard head is a grid container: it has no href, no button and no pressed element of its own on any of the 7 grey pages or the 7 coloured ones, and it is not a pointer target. A pointer that appears to be over it is over the summary, over the wash, over a candidate, or over nothing. Faking one with a class the product does not carry would document something the product cannot do.
The states of everything inside it are on those components' own pages, live and hoverable: Wash block for the attention row's link, Subscription row and Save-focus candidate for the save-focus slot. Summary has none either, for the same reason this one does not.
The technical half
| Reads | Which token | Growing from |
|---|---|---|
| the rule under the band | --line-divider | --hairline-soft, and --hairline-soft-dark in the dark theme |
| the row and column gaps | --space-32, --space-40 | primitive, straight: geometry has nothing to override |
| the bottom padding and margin | --space-24, --space-0 | primitive, straight |
| the foot it takes from its slots | --space-0 | primitive, straight, and the one property this file sets on a child. A margin is position and position is the host's; the paint stays with summary.css, wash-block.css and save-focus-list.css. It ties with all three at 0-2-0 and wins on source order, because the ladder imports an organism below the parts it hosts |
| the two track floors | none: 250px and 300px | Written as literals. A width is not a margin, a padding or a gap, so the 8px grid does not govern it, and --tap and --row are the only size primitives the system has. Same hole docs/backlog.md records for the numbered-steps marker at 26 by 26, owned by step 9 |
| no fill, no corner, no shadow | none | by decision. The Flat Paper Rule: a new surface earns a hairline and a background change, never a shadow, and this band earns only the hairline |
The container query, measured on this page at both sides of the breakpoint. The container is body, declared in base.css, and this component declares none of its own: a second container between body and this rule would re-point the query at a different box, and a container on the element itself cannot style the element at all, because a container query matches an ancestor.
| Container | Viewport that produces it | .head display | Bottom border | Padding-bottom |
|---|---|---|---|---|
| 892px | 1175 | block | 0px | 0px |
| 908px | 1191 | grid | 1px | 24px |
The viewport figures are this stand's arithmetic and not a property of the component: on a kit page body carries 268px of left padding from 1100 up, plus a 15px scrollbar, so the container is the viewport minus 283. On a product screen the same query fires off the screen's own width.
The stand shows it at bleed, and that is measured rather than preferred. This band spans the whole screen column and never anything narrower: on the real coloured Home it renders 893px wide at a 1440 viewport, 1053px at 1600 and 1373px at 1920. At the default 440px measure the grid's own floors (250 + 300 + 40) would overflow the stage by 150px, and at wide's 620 it would sit 273px under its narrowest real width. The stand's own .kit-wrap caps a specimen at 900px, which is within 7px of the product's 893.
The foot, measured on both sides of the change and at both ends of the range. Driving the container past 900 on the five coloured Home states at a 1280 viewport, the band was 153px tall on Home and on Home could not refresh, 195 on save focus, 160 on loading and 123 on empty, with 49px under the lower slot in all five. After: 129, 129, 171, 136 and 99, with 25px under it, which is the 24px of padding and the 1px rule and nothing else. Below 900 nothing moved, on any of the five, at either end: measured at 360, the slots keep their 24px because down there the band has no padding to sit on and that margin is the gap between the head and the next block on the screen.
Not carried, deliberately: .app > .screen > .head { order: 1 } from the same 900 block. It is one of four sibling order declarations that only mean anything together (head 1, secondary 2, groups 3, trust 4), it names the shell's own column flow rather than this band, and it belongs to the App shell organism. trust-block.css made the same call for order: 4 and says so in its header.
Lives in design/system/components/dashboard-head.css. Stands on 8 grey pages and 8 coloured ones: Home, Home, could not refresh, Home, save focus, Home, loading, Home, nothing yet, Home, one subscription, Home, a short list, and since 2026-08-19 History and Trends and its wait, which took the same head on the founder's decision.
<div class="head">
<section class="summary">
<h1>You're paying for 14 subscriptions</h1>
<p class="total" aria-label="monthly total, $192.90">$192.90</p>
<p class="muted">a month, for what you have signed up for</p>
</section>
<section class="wash attention" role="status" aria-label="Needs your attention">
<p>Netflix went up by $2.50, now $17.99 a month.</p>
<a href="subscription-detail-price-change.html">See what changed</a>
</section>
</div>