Big total

The monthly total, set in Display: 46px, weight 700, tracked in by -0.025em over a 1.02 leading. It is the number the person came for, the last beat of the guided reveal, and the loudest object in the product. There is exactly one of it per screen, ever.

Atom10 grey pages1 axis, 2 sizesno states

Anatomy

One zone and one content slot, which is what makes it an atom. Everything below is drawn by design/system/components/big-total.css through the same entry point a product screen loads, so this page cannot drift from the screens. The class name is the one the product writes today and it survives step 6 unchanged.

$192.90

a month, for what you have signed up for

.total the atom: 46px, weight 700, tabular figures, in --text-primary. Display, and the only object in the system set at this size
letter-spacing -0.025em, the tightest tracking in the product. Inter at 46px set at normal tracking reads as a spreadsheet cell; pulled in over a 1.02 leading it reads as one object
line-height 1.02. Set solid, because the number is one line and the space around it belongs to the blocks above and below
margin 0, deliberately. It sits inside a summary strip or a reveal step, and the host owns the spacing: that is what lets the same number work under a 21px heading on Home and under a 15px caption on the reveal
aria-label on the element in the product markup ("monthly total, $192.90"), because "$192.90" alone read out of context is a price and not a total

Variants and sizes

One axis and no second: size, set by the container. There is no emphasis axis and no tone axis. A total that rose and a total that fell are the same ink at the same size, and what changed is said in words beside it: colouring this number would put the product's alarm on the one object the whole screen is built around.

Size Set by the CONTAINER. A screen gives the number the full 46px; a card that will be sent to somebody else gives it 40px, because inside the card it has to clear the card's own padding rather than the screen's	Values	Where it stands
46px `.total`	46px / 700 1.02 / -0.025em	5 grey pages and 4 coloured ones: Home and two of its states, and the third step of the Guided Reveal. The default, and the one a screen should reach for
$192.90
40px `.sharecard .total`	40px / 700 1.05, margin 2px 0 0	1 grey page and no coloured one: the share snapshot, one of the components the colour sample never reached, which is recorded in `docs/census.md`. It keeps the weight and the tracking, so it is the same object one step down rather than a second one
$174.91
A second on one screen	-	Forbidden with a reason rather than missing. The One Number Rule: exactly one object on a screen is set in Display, and it is the number the person came for. If a second number wants that size, the screen is answering two questions and should be two screens. No page in either folder renders two
A smaller step	-	There is no 32px or 30px form of this component, and the gap is deliberate: those two sizes belong to the amount, and the distance between 32 and 46 is what keeps a price and a total readable as different kinds of number

The 40px form is not "the total, small". It is the total inside an image a person sends to somebody else, and everything in that card scales together: a 12px caption over a 20px count over this number. Reaching for it anywhere else would be a size chosen by importance, which is the one thing the axis rule forbids.

When to use it

This is the number the product exists to show. The primary job is stated in one sentence in CLAUDE.md: when I suspect I am paying for things I forgot about, I want to see all my recurring charges in one calm view. The total is the answer to that sentence, and it is the last of the three beats of the gradual reveal (D1): the count, then the categories, then this. On the guided reveal it arrives under "All together", which is the emotional peak the whole product is built to test.

The One Number Rule, from DESIGN.md, is the rule that governs it: exactly one object on a screen is set in Display, and it is the number the person came for. If a second number wants that size, the screen is answering two questions and should be two screens. That is why this atom is separate from the amount rather than being its largest size. They are not one figure at two scales: a total is a figure that owns a screen, and an amount is a figure among others. The personality of this product lives in that jump, which is also why there is no second typeface anywhere in the system.

It never appears without a muted line under it saying what it is ("a month, for what you have signed up for"), because a figure in this product never appears without its context. On Home the heading above it is the count in plain words, "You're paying for 14 subscriptions", so the pair reads as a sentence with a number in the middle rather than as a dashboard tile.

The rule, and the anti-rule

One number, with its caption and its context

All together

$192.90

a month, for what you have signed up for

Three lines and one object: what this is, the number, and what the number means. 15px, 46px, 13px, so the eye lands on the figure and reads outwards from it in both directions. Four coloured screens play it exactly this way.

Use an amount instead

$11.99

A price, even the one a whole detail screen is about, is an amount and stops at 32px. Setting a second figure in Display is the One Number Rule broken, and the cost is not stylistic: two objects at 46px on one screen means a person has to decide which of the two they came for, which is exactly the work this product takes away from them.

The same number, one step down in a card

$174.91

Inside the share snapshot the figure drops to 40px and keeps its weight and its tracking, because the card is a smaller world and everything in it scales together. Same component, same relationship to its caption, one container narrower.

Use a skeleton bar instead

While the number is still arriving, what stands in its place is a skeleton bar wearing this atom's class: <span class="skel total"> on three grey loading screens. It is painted by the skeleton at a higher specificity, and this component gives it nothing visible, because an empty span has no text to set. That is deliberate rather than accidental: the reveal keeps its exact shape while it waits, so nothing on the screen jumps when the figure lands.

Limits

U9, composition. One big total per screen. The most important number is the biggest thing on the screen, and two of them means neither is. Four screens carry it and none carries two. Full table with sources and how to check: Usage rules.

States

None, and it was checked rather than assumed. A total is a figure: it is not a link, not a button and not pressed on any of the 57 grey pages or the 57 coloured ones, and it contains no anchor anywhere in either folder: 8 totals on each side, zero targets inside them and zero of them a target. Re-measured on the 55-page corpus on 2026-08-17 by design/kit/screens/inert12.cjs. Drawing four empty cells would document something the product cannot do. The loading form above is not a state of this component either, it is the skeleton bar borrowing the class, and the summary strip reads that same class from the other side: .summary:not(:has(.total)) is how the empty state knows to promote its own heading, since with no number there is nothing to caption.

The technical half

Reads	Which token	Growing from
the figure	`--text-primary`	`--ink`, and `--ink-dark` in the dark theme. 17.4:1 on the light surface, 15.0:1 on the dark one
the two sizes, the leading and the tracking	literals	46px and 40px, 1.02 and 1.05, -0.025em. The type scale is still a proposal awaiting the founder, so they stay exactly as they are
tabular figures	declared twice, on purpose	`base.css` sets it for `:where(table, .amt, .total)` at specificity 0, as the floor that catches a figure written without this class; the component says the same thing at its own specificity so a host cannot un-align it

Lives in design/system/components/big-total.css. Stands on 11 grey pages and 11 coloured ones across 5 screens, 8 of them rendering the number and 4 rendering the skeleton that holds its place. Coloured screens carrying it: Home and three of its states, Guided Reveal, Share Snapshot, the bank wait, and since 2026-08-19 History and Trends and its wait. Recounted by design/kit/screens/counts.cjs.

<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>

Drawn by design/system/components/big-total.css through ../system/index.css, the same entry point a product screen loads. It was one of the seven slot names the stage 07 audit found with no base rule at all, sized only by its hosts; its row and its two sizes are in docs/inventory.md, and the taste decision behind the size jump is in design/concept/docs/concept.md.