Typography tokens aligned to Figma DS (WEB-562)
Version: 0.2.0 ¡ Type: đ Bug Fix
Linear: WEB-846
Problemâ
DES-67 (2026-06-03) mistakenly treated the design-site documentation table as the source of truth, so the token update direction was the opposite of the Figma text styles, causing global UI font sizes / line heights to not match the DS.
Changed Filesâ
packages/design-tokens/src/source/Plaud Web 4.0 Design System-variables.cssâ token source (:root+ Desktop)packages/design-tokens/src/source/figma-variables.jsonâ script-regeneratedpackages/design-tokens/src/generated/css/variables-light.cssâ runtime light valuespackages/design-tokens/src/generated/css/variables-dark.cssâ runtime dark valuespackages/design-site/docs/text-style.mdxâ EN Text Styles pagepackages/design-site/i18n/zh-CN/.../text-style.mdxâ zh-CN mirrorpackages/design-site/docs/components/patterns/menu.mdxâ EN Menu page font-size baselinepackages/design-site/docs/components/patterns/dropdown-menu.mdxâ EN DropdownMenu page font-size baselinepackages/design-site/i18n/zh-CN/.../menu.mdx,dropdown-menu.mdxâ zh-CN mirrorspackages/design/src/components/Select/styles.tsâ dropdown max height aligned to Body line heightpackages/design/src/components/Tooltip/styles.tsâ switched to Body tokenapps/web4/.../AllRecordingsHeading.tsxâ Title-2 (22/28) hardcoded to guard against silent regression- 5 files in
apps/web4â--Font-Size-Body-Smallchanged to the Footnote token
Changesâ
Token changes (Desktop / :root):
| Token | Old | New |
|---|---|---|
--Font-Size-Display | 36px | 32px |
--Font-Size-H1 | 28px | 24px |
--Font-Size-H2 | 22px | 20px |
--Font-Size-H3 | 20px | 18px |
--Font-Size-Body | 15px | 14px |
--Line-Height-H1 | 36px | 32px |
--Line-Height-H3 | 26px | 24px |
--Line-Height-Body | 22px | 20px |
Unchanged: --Font-Size-Footnote (13px), --Line-Height-Display (44px), --Line-Height-H2 (28px), --Line-Height-Footnote (18px).
Removed (no consumers): --Font-Size-H4/H5/H6, --Line-Height-H4/H5/H6.
Behavior Changeâ
Extra alignment beyond the DES-67 rollback â the following line-height changes are Figma alignment, not a pure DES-67 rollback:
- H1 line height: 36px â 32px
- H3 line height: 26px â 24px
- Body line height: 22px â 20px
Notesâ
Known deviations (follow-up):
- Residual 15px hardcodes in web4:
AutoSpeakerIntroModal.tsx,ContentRating.tsx,FailState.tsx - web3 fallback values (e.g. H2 LH 30px) are inconsistent with the new token â fallback only, no runtime impact
- The scattered "14px/22px" descriptions in other component mdx files of design-site and in
*DesignSpec.mdneed a later batch correction
Design verification request: please have the design side verify the line-height consistency between the Figma variables (Platform collection) and the text styles; during implementation the Figma variables API returned 403, so it could not be cross-verified programmatically.