Summary

The top of Home: a heading that says how many, the monthly total, and one line of context under it. GC3 in the IA. It is the first thing a person sees after the reveal and it is J-MAIN answered literally, which is why the number is the biggest thing on the screen and the words around it are the smallest thing that can still be read.

Molecule6 grey pages1 axis, 2 valuesno stateshosts 2 atoms

Anatomy

Three content slots, two of which are atoms this component hosts and does not restyle. Everything below is drawn by design/system/components/summary.css through the same entry point a product screen loads, so this page cannot drift from the screens.

You're paying for 14 subscriptions

$192.90

a month, for what you have signed up for

.summary the molecule. It owns one thing only: the gap between itself and whatever comes next. Everything inside brings its own spacing
h1 the heading, and the only slot this file styles directly. It is an h1 because it is the subject of the page for a screen reader and for a search engine, and it is quiet because on screen it is a caption
.total an atom, the Big total. 46px, weight 700, tabular figures, and no margin of its own by design: the blocks above and below own the rhythm. This file does not touch it
.muted an atom, the Muted line. It brings its own size, its own muted ink and its own 8px top margin. This file does not touch it either. It was .context until step 6
:not(:has(.total)) the switch. It reads whether the number is present and promotes the heading when it is not. No state class anywhere, so no screen can forget to carry one

Variants and sizes

One axis, and the difference is content rather than drift. With a total the heading is a caption on a number and is deliberately quiet. Without a total there is nothing to caption, so the heading becomes the subject of the block and is promoted. Both rows below are the same markup with one child removed; the numbers are read off this rendered page.

Content Decided by whether a number is in the block, never by which screen it is. Ask the markup, not the state: if there is a figure, the heading captions it; if there is not, the heading is the message	Measured	Where it stands
With a total `.summary`	16px / 600 --text-body	3 of the pages: Home, its error state and its loading state. It was 4 of 5 until the save-focus state retired with the Save tab on 2026-08-21
You're paying for 14 subscriptions $192.90 a month, for what you have signed up for
Without `.summary:not(:has(.total))`	20px / 700 --text-primary	1 page, the empty state. It is the only screen in the product where this block has no figure in it
Nothing to add up yet Connect your bank or add a subscription, and your monthly total appears here as the biggest thing on screen.
A second number	-	Forbidden with a reason rather than missing. The One Number Rule: exactly one object on a screen is set at Display, and it is the monthly total. A second figure in this block would either compete with it or be shrunk until it was decoration. When Home genuinely needed a second thing at the top, the answer was the dashboard head at a 900px container putting the total and the attention wash side by side, which is layout and not a second number

The loading state is the proof that the hook is right, and it was checked rather than assumed. home-loading.html renders <span class="skel total">, a skeleton bar wearing the total's class to hold the number's place. So :has(.total) matches, and the heading correctly stays a caption at 16px. Measured on this page and on the real screen. Written any other way, the loading state would have promoted its heading and then demoted it again the moment the figure landed, which is a layout shift on the calmest screen in the product.

Getting your subscriptions

This usually takes a moment.

There is no size axis. The heading has two sizes and they are the two values of the content axis above, not a scale a host may pick from. Nothing in the product sets this block narrower or wider than its column.

When to use it

The summary is the answer to the question the person opened the app with. J-MAIN reads: when I suspect I am paying for things I forgot about, I want to see all my recurring charges in one calm view. This block is the "one calm view" in three lines: how many, how much, and what that number is.

It exists once per screen and only at the top of Home. It is deliberately not a card: no fill, no border, no corner, because the number has to look like the page rather than like a widget on it. Everything in it obeys the second design principle, that the most important number is the biggest thing on screen, and the third, that numbers always come with context: $192.90 alone is a fact, "$192.90 a month, for what you have signed up for" is an answer.

Copy comes from voice/docs/microcopy.md. The heading is a sentence about the person, in the person's words ("You're paying for 14 subscriptions"), never a label ("Monthly total"). On the empty state it is "Nothing to add up yet" rather than "Nothing here yet", because the two empty screens on this path are deliberately worded apart.

The rule, and the anti-rule

The caption is quieter than the number

You're paying for 14 subscriptions

$192.90

a month, for what you have signed up for

16px over 46px, and both of them over 14px. Three sizes, one hierarchy, and the eye lands on the figure first from across a room. A caption set any louder makes a person read the sentence before the number, which is the opposite of what this screen is for.

Never promote it by hand

A screen writing its own heading size because that page "needs a stronger title"

The promotion is a rule in the component, selected structurally from the presence of the number. A screen that sets its own heading size is a host restyling its content, which is the defect class this stage exists to remove: it looks finished, and it is a second edition of the component that nobody declared. If a screen genuinely needs a page title above this block, that title is a text block, .textblock, and it is a different object.

Use a summary for the whole answer

You're paying for 14 subscriptions

$192.90

a month, for what you have signed up for

One block, at the top of a screen, holding the number the screen exists to show and nothing else.

Use a group head for a section total

Streaming (4)

$54.96 a month

A figure that belongs to one section of a list is the group head and its .subtotal: 12px, muted, at the far end of a rule. It is a fact about the group, not the answer to the screen. Two summaries on one page would be two Display numbers, and the product has exactly one of those.

States

None, and it was checked rather than assumed. The summary is a readout: it holds no anchor, no button and no pressed element on any of the 57 grey pages or the 57 coloured ones, and the block itself is not a target. Drawing four empty cells would document something the product cannot do. Its one moving part is the skeleton inside it while the number arrives, and that belongs to the skeleton bar; the two forms above are content, reachable by having a number or not having one, and not by any interaction.

The technical half

Reads	Which token	Growing from
the caption, over a number	`--text-body`	`--slate`, 10.2:1 light and 10.4:1 dark
the heading, with no number	`--text-primary`	`--ink`, 17.4:1 light and 15.0:1 dark
the two heading sizes	`--type-sub`, `--type-title`	primitive, straight: a size has nothing to override
its one margin	`--space-24`	primitive, straight
the number itself	nothing here	the Big total atom, in `big-total.css`
the context line	nothing here	the Muted line atom, in `muted-line.css`

Two values moved, and both are the founder's review of the foundations applied mechanically. The block's bottom margin was 20px and is 24; the caption was 15px and is 16. Nearest step, ties to the larger, with no value re-decided here. The consequence worth naming is that the gap between the two heading forms narrows from 6px to 4px, and the promotion still reads because it was never carried by size alone: it is 700 against 600 and primary ink against body ink as well.

Lives in design/system/components/summary.css. Stands on 7 grey pages and 8 coloured ones: every state of Home, Cancel Win, which took the same shape at the rollout, and since 2026-08-19 History and Trends, where it holds the figure and the sentence that says how it moved. Coloured screens carrying it: Home, the empty state, the loading state, the could-not-refresh state, the save-focus state. Recounted 2026-08-19 by design/kit/screens/counts.cjs.

<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="summary">
  <h1>Nothing to add up yet</h1>
  <p class="muted">Connect your bank or add a subscription.</p>
</section>

Drawn by design/system/components/summary.css through ../system/index.css, the same entry point a product screen loads. GC3 and its "three implementations, zero shared classes" verdict are in docs/inventory.md; the values that folded are in docs/tokens-audit.md.