Brand wordmark

Anatomy

One text slot and one drawing inside it, which is the whole component. Everything below is drawn by design/system/components/brand-wordmark.css through the same entry point a product screen loads.

The live specimen stands where the component has ground. The word takes its ink by inheritance and its place from the app bar, so a specimen floating on a blank canvas would be measuring neither. This is the bar on all 57 coloured pages.

• .wordmark weight 800, the heaviest Inter the product ships, at --type-sub with -0.02em of tracking. Sixteen pixels is the step the bar has always set, and it did not move
• .dd -0.09em on top of that, until the bowls almost meet. This is the one thing in the wordmark that is a drawing rather than a setting, and it is why the markup carries a span the app bar never needed
• color not declared on the word, declared on one letter. The word inherits the ink of whatever holds it, which inside the bar is --text-primary. Only .hi names a colour
• .hi the last d, and the only coloured letter in the brand. It reads --text-action, the semantic role, so the dark theme gives it the lightened petrol for nothing. It sits inside .dd, so it inherits the pair's tracking rather than declaring its own: the drawing and the colour are two facts about the same pair
• font-size --type-sub in a bar, and --type-head under .large. The bar's step is the one app-bar.css read on this component's behalf until the split, and it has not moved; the second size arrived on 2026-08-16 for the foot of the public page

Variants and sizes

Two sizes, and the axis under them is where the word stands rather than how loud it should be. The concept locked four rules for the coloured letter and the product carries the first of them today; the rest are listed with the host each is waiting for, because a variant with no host is an invention.

-0.02em here and -0.035em on the concept page, and the difference is not a compromise. Tracking is an optical correction, and the tighter a setting is the more of it a large size can carry. The concept sets the hero at -0.035em and its own bar plate at -0.02em; at 16px the hero's value starts closing the counters. Both numbers are read from that page and neither is chosen here.

The trailing pull is measured and it is kept. Letter-spacing lands after EVERY character in a span, the last one included, so the pair's -0.09em also pulls the word's right edge in by 1.44px at 16px. It costs nothing: the lockup is followed by margin-right: auto on all 32 screens, so nothing sits against that edge. The second d does now carry a span of its own, for the colour, so a positive correction could be hung on it. It is not: the pull is invisible against an auto margin, and a correction that fixes nothing a person can see is a value the next reader has to explain.

When to use it

Once per screen, in the app bar, inside the lockup, and once more at the foot of the public page, where it wears .large and stands alone. If the name appears anywhere else, in a sentence, a heading or a legal line, that is type and it belongs to whatever component owns the text around it. A wordmark inside a paragraph is a logo somebody pasted into prose.

It is a mark, and the test is whether it is being read or recognised. A person reads "Your subscriptions" and recognises "Tendd". That is the whole reason the tracking reversed direction: a word set for reading needs air between the letters, and a word set for recognition needs the opposite, because what it has to be is one shape.

Its copy comes from nowhere and is not in voice/docs/microcopy.md: the product's name is not a string that anybody writes. It is the only text in this system with no owner in the copy inventory, which is correct and worth saying once.

The rule, and the anti-rule

Limits

U14, context. The brand moves once, on one surface, and the modifier is the fence. The mark’s window opens to the whole letter and closes into crop A over --dur-signature on --ease-settle, and the wordmark’s last letter takes petrol as it lands. It runs on the public page’s bar only, once per load. the 54 app pages that carry a lockup do not carry .signature and must not: a mark that moves every time you open the product is not a signature, it is a fidget. The hover is the other half of U14 and it is not fenced: on every lockup in the product, hovering it PLAYS the crop - out to --crop-whole and back into crop A over --dur-signature - and holds no pose at either end, because the only good resting crop this drawing has is A. The mark’s own animation fills backwards and never both, or it outranks that hover and kills it, and the two animations sit in two slots of the animation list through --sig-name, because sharing one slot replayed the arrival every time a pointer left the public page’s lockup; the word’s half fills the same way for a narrower reason - its forwards half held a colour the base rule already paints, so it shadowed the property for nothing. Full table with sources: Usage rules; the language it sits beside is on Motion.

States

None, and it is a finding. It is a span on all 57 coloured pages and all 57 grey ones, never an anchor, so there is no hover to declare and no ring to draw. Drawing four cells here would document something the product cannot do.

If it becomes the way home at stage 12, the anchor takes the ring and this atom keeps its type. That split is the same one the merchant tile already lives with: the row is the link, the mark inside it is not.

The technical half

Was to became, and it is the fifth named source of a visual change in this stage. The setting was 700 at +0.02em and is now 800 at -0.02em with the pair at -0.09em. app-bar.css said out loud why the old value was right, and DESIGN.md said the same: at 16px in a bar the letters need air, and a wordmark set solid reads as a word rather than as a mark. Both were describing a product with no mark in it, where the word was the identity and had to hold the bar alone. It is not a drift and it is not a correction of a mistake: the premise changed, the sentence in DESIGN.md was rewritten the same day, and the row is in docs/tokens-audit.md.

Measured, both in the same document by the same engine. The word was 50.703px wide and is now 45.938px, narrower by 4.765px. The slot it sits in went the other way, from 50.703px to 75.938px, because the mark adds 22px and the gap 8: 25.235px wider. That figure is the whole of what the brand did to the layout of 28 screens, and it lands entirely in the auto margins that were already absorbing free space in that bar.

Lives in design/system/components/brand-wordmark.css. Stands on all 57 coloured pages, 59 places because the landing carries it twice, and on 56 grey ones, which is every page in wireframes/ except the landing and the stage hub. The grey carries the word alone at the old setting, because wireframes/ is frozen and Voice was the last stage allowed to edit text there.