DesignDev
Tag, rewired onto its own tokens
Design published 48 tokens for Tag. The component consumed exactly one of them — its corner radius — and hand-wired everything else to generic semantic tokens borrowed from elsewhere in the system. Most of what it rendered had no basis in the design at all: padding was 8px inline with no block padding against Figma’s 12/4, the five typography tokens went unused, and font-weight was hardcoded to 400 — wrong on Lexus, which wants 200, and wrong on Kinto, which wants 500.
Tag now consumes all 48. Expect every existing tag to look different: colours, padding and typography all move, and because typography is brand-owned now, Lexus tags in particular are noticeably larger.
The most useful change is that Tag stopped needing a modifier to sit on a dark surface. Figma’s Contrast axis was never really a variant — its two token paths map onto the neutral and contrast schemes — so a tag now reads the tng-scheme around it and picks its own treatment. Drop one into a dark panel and it adapts, where the page previously documented light surfaces only. That also means there’s one appearance per colour per scheme and no way to opt a single tag into the other one, which is deliberate. Tag joins the scheme-aware components listed on the Color page.
Three colours are new — .is-primary, .is-secondary and .is-warning — completing Figma’s set of seven. Two things went the other way, and both were breaking: .is-bold is removed, replaced by the scheme behaviour above, and .is-error is renamed .is-danger. The modifier names follow the component’s own token family, which spells it danger; Alert, Badge and Toggle keep .is-error because they have no token family and fall back to the generic --tng-color-*-error-* set. A trailing .tng-link inside a tag is still styled but deprecated and no longer documented — it has no counterpart in the design and will be removed.
Tag was in quarantine while this landed, which is what the badge is for. It leaves quarantine with this release: the markup, the seven modifiers and the scheme behaviour are frozen, with visual-regression coverage across brands and schemes. Full anatomy, variants and accessibility guidance live on the Tag documentation page.