Eyebrow
The small uppercase mark that names the block under it: "Step 2 of 3", "Everything in Tendd Pro", "By category". It is the only place in this product where type is set in capitals, and it is the smallest text in the system.
Anatomy
One zone and one text slot, which is what makes it an atom. Everything below is drawn by design/system/components/eyebrow.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; the grey stylesheet's .num folded into it at step 6, from the map in docs/inventory.md, and no coloured screen writes .num now.
Five categories, and the real names behind the charges.
.kthe atom itself: a block-level mark at 11px, uppercase, tracked out by 0.06em, in muted inkdisplay: blockit is a line of its own, never a prefix sitting on the same line as the heading it introducesletter-spacing0.06em. Capitals set at normal tracking close up into a block, and this is the one place in the system where tracking is loosened rather than tightenedmargin-bottomthe gap to the block below, and the only thing that varies: 4px by default, and 6, 8 or 10px where a container asks
Variants and sizes
One form, and no size axis at all. Every eyebrow in the product is 11px uppercase muted, on a phone and on a dashboard, above a reveal step and inside a plan card. The inventory records no axes and the stylesheet declares none, so there is no matrix of looks to draw: a smaller one would be unreadable and a larger one would be a heading, which is a different component.
What does vary is the gap under it, and it is a rhythm rather than four exceptions: the space grows with the size of the block the eyebrow introduces. The base is the smallest of the four rather than the average, so a container that says nothing gets the tightest pairing.
| Gap below Set by the CONTAINER, and it scales with what the eyebrow is introducing: a line, a list, a card's list, a whole step of a screen |
Selector | Where it stands |
|---|---|---|
| 4px, the base | .k | The footnote line on History and Trends, where one muted sentence follows |
| By category | ||
| 6px | .oncard .k | The share snapshot's own explanation of what it contains. One grey page, no coloured page yet |
| What is on this card | ||
| 8px | .plan-opt .incl .k | Above the feature list inside each of the three plan cards on Upgrade |
| Everything in Tendd Pro | ||
| 10px | .rstep .k | The guided reveal, where the eyebrow introduces an entire step of the screen and the heading under it is 24px |
| Step 3 of 3 | ||
| A second colour | - | Forbidden with a reason rather than missing. A petrol or amber eyebrow would spend a raised voice on a label, and the accent has exactly four jobs: the primary action, the current selection, the trust line and the plotted line. A marker that needs to be noticed more is a chip, which has a fill to carry the tone |
Three of those four margins belong to their containers by the ladder, and they are carried in this file so that the split cannot lose one. Specificity decides which wins, not import order, so nothing about the rendering depends on where they finally live: if the plan option and the reveal step take theirs back, they are deleted here in the same step.
When to use it
An eyebrow answers "where am I" before a person reads anything else in a block. On the guided reveal it is the whole of the product's promise that a person is never lost in a process: "Step 1 of 3" over the count, "Step 2 of 3" over the categories, "Step 3 of 3" over the total. That is D1 drawn, and the marker is deliberately a marker rather than a progress bar, because a filled bar at step one tells an anxious person the road is long.
Its copy comes from voice/docs/microcopy.md and it is plain: "Step 2 of 3" and not "STEP TWO", "By category" and not "BREAKDOWN". Uppercase is applied by text-transform, so the markup carries a sentence and a screen reader is never handed an acronym.
The rule, and the anti-rule
All together
$192.90
Three objects, three sizes, one reading order: where you are, what this is, and the number. The eyebrow is the smallest and the first, which is exactly the job. This is the last beat of the guided reveal, the screen the product exists to prove.
$46.97 a month, four subscriptions
The same mark naming a section of a list, and it cannot do the job. That belongs to the group head: 12px uppercase, a subtotal on the SAME line, and a hairline under it. The eyebrow is a block with no second slot and no rule, so the subtotal drops to a line of its own and the section boundary disappears. Every category heading on Home would come apart this way.
- History and trends
- Advanced alerts
- Full cancel guides
- Export
Inside a plan card, the eyebrow separates what you are buying from what it costs, so the price above it and the list below it are never read as one column of similar things. The list itself is drawn by the plan option and is bare here on purpose: this page shows one component and borrows nothing it does not own.
A status wearing the eyebrow, and the case alone tells you it is wrong. A mark that carries a STATUS rather than a name is a chip: it has a fill, a corner and a tone axis, and it is set in sentence case at 10.5px, because a shouted status on a calm row is the same defect as a red one. The eyebrow labels a block; the chip labels a thing. "Trial" and "Cancelled" are chips, "Everything in Tendd Pro" is an eyebrow.
States
None, and that is a finding rather than a gap. An eyebrow is a caption: it is never a link, never a target and never pressed, on any of the 57 grey pages or the 57 coloured ones. It contains no anchor anywhere in either folder, so unlike the muted line and the quiet line it has no interactive surface hidden inside it. Drawing four empty cells here would document something the product cannot do, which is the same defect as inventing a variant.
The technical half
| Reads | Which token | Growing from |
|---|---|---|
| the mark itself | --text-muted | --muted, and --muted-dark in the dark theme. 5.8:1 light and 6.4:1 dark, which 11px text needs every bit of |
| size, case and tracking | literals | 11px, uppercase, 0.06em. The type scale is still a proposal awaiting the founder, and there is no tracking scale at all, so these stay as they are |
Lives in design/system/components/eyebrow.css. Stands on 4 grey pages and 5 coloured ones. Coloured screens carrying it: Guided Reveal, Upgrade, Cancel Win, Share Snapshot and the landing. Recounted 2026-08-19 by design/kit/screens/counts.cjs, and it went DOWN by one: History and Trends carried this atom as the label of its one-line "By category" summary, and that block became the category bars, whose heading is a group head.
<span class="k">Step 2 of 3</span>
<span class="k">Everything in Tendd Pro</span>