Label
The caption over a number: "All together" above the monthly total, "A small win" above what a cancellation freed. It always has a figure directly under it, and its two weights exist because the figures do not.
Anatomy
One zone and one text slot, which is what makes it an atom. Everything below is drawn by design/system/components/label.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, with its modifier.
All together
$192.90
.lblthe atom: a block-level caption at 12px in muted ink, with no margin of its own.strongthe emphasis modifier: 15px, weight 600, and one ink tier up. It is a declared modifier and not a host override, which is the whole point of itletter-spacing0on the strong form, and load-bearing: the reveal writes the caption as anh2, and the reset stops it inheriting the step's headline tracking because of the tag it happens to usemarginnone on the quiet form, 4px under the strong one. The number below is what the gap is measured against
Variants and sizes
One axis, two values, and the axis is emphasis rather than size. That distinction is the rule for choosing on it: the caption is not bigger because it matters more, it is bigger because the number it captions is bigger, and what stays constant between the two forms is the ratio between the caption and its figure.
| Emphasis Read the figure, not the words. A 20px count takes the quiet caption; the 46px Display takes the strong one, because at that distance a 12px muted line under it disappears |
Tokens | Where it stands |
|---|---|---|
Quiet .lbl |
--text-muted 12px / 400 |
2 grey pages, both of them share cards, where the caption sits over a 20px count inside a bordered card |
| On Tendd, I am keeping an eye on | ||
Strong .lbl.strong |
--text-body 15px / 600 |
The last step of the guided reveal, over the 46px monthly total. 1 grey page and 1 coloured one, and it is the emotional beat the whole product is built to test |
| All together | ||
| A third weight | - | Forbidden with a reason rather than missing. There are exactly two figure sizes in this product that need a caption, so a third caption weight would have no number to belong to. If one appears, the question to ask first is whether the screen has grown a second Display number, which the One Number Rule already forbids |
The strong form steps up an ink tier as well as a size, and that pairing is deliberate. At 15px and weight 600 a muted grey stops reading as a caption and starts reading as a heading somebody switched off. It takes --text-body and stays one clear step under the ink of the number itself.
When to use it
A label is the words a number is answering. "All together" over $192.90 is the whole of the guided reveal's third step: the figure a person came for, with the least possible said about it. On the share card it is "On Tendd, I am keeping an eye on" over a count, which is the same shape at a smaller scale.
The test for reaching for it is narrow: is there a figure directly below. If there is not, the label is captioning prose, and prose introduces itself. If the thing below is a list rather than a figure, it is an eyebrow. If it is a form control, it is the field's own label element, which belongs to the form field and carries a for attribute that this component does not.
Its copy comes from voice/docs/microcopy.md and is a phrase rather than a heading: "All together", "A small win". Plain money language, and never a term of art. The strong form on the reveal is set as an h2 because it genuinely heads that step of the page, which is why the letter-spacing reset in the CSS is not cosmetic.
The rule, and the anti-rule
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. The caption is 15px, the number 46px and the line under it 13px, so the eye lands on the figure and reads outwards from it in both directions.
$192.90
a month, for what you have signed up for
The line UNDER a number is a muted line, not a label, even though the two are one sentence apart in meaning. A label says what the number is before you read it; a muted line qualifies it after. Setting the qualifier as a label would put two captions of near equal weight around one figure and make the person choose which one to believe.
Inside the share card the figure under this caption is a 20px count, so the caption itself drops to 12px muted. Same component, same relationship, one size down: the card is a smaller world and everything inside it scales together. The count is drawn by the share card, so it is not borrowed onto this page.
- History and trends
- Advanced alerts
- Full cancel guides
- Export
When what follows is a list or a block rather than a figure, the mark above it is an eyebrow: 11px, uppercase, tracked out. The two look similar at a glance and answer different questions. A label says "this number is X"; an eyebrow says "you are here". A list under a label reads as though the first item is the value of the caption.
States
None, and that is a finding rather than a gap. A label is a caption over a figure: it is never a link, never a target and never pressed, on any page in either folder, and it contains no anchor anywhere. Drawing four empty cells would document something the product cannot do. Note that this component is not the form's label element either, which does have an interactive life through its control and lives with the form field.
The technical half
| Reads | Which token | Growing from |
|---|---|---|
| the quiet caption | --text-muted | --muted, and --muted-dark in the dark theme. 5.8:1 light, 6.4:1 dark |
| the strong caption | --text-body | --slate. 10.2:1 light, 10.4:1 dark |
| sizes and the tracking reset | literals | 12px, 15px, weight 600, letter-spacing: 0. The type scale is still a proposal awaiting the founder |
Lives in design/system/components/label.css. Stands on 3 grey pages and 1 coloured one. Coloured screen carrying it: Guided Reveal. The other two are the share card and the cancel win, both of them screens the colour sample never reached, which is recorded in docs/census.md.
<h2 class="lbl strong">All together</h2>
<span class="lbl">On Tendd, I am keeping an eye on</span>