Skip to main content

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-regenerated
  • packages/design-tokens/src/generated/css/variables-light.css — runtime light values
  • packages/design-tokens/src/generated/css/variables-dark.css — runtime dark values
  • packages/design-site/docs/text-style.mdx — EN Text Styles page
  • packages/design-site/i18n/zh-CN/.../text-style.mdx — zh-CN mirror
  • packages/design-site/docs/components/patterns/menu.mdx — EN Menu page font-size baseline
  • packages/design-site/docs/components/patterns/dropdown-menu.mdx — EN DropdownMenu page font-size baseline
  • packages/design-site/i18n/zh-CN/.../menu.mdx, dropdown-menu.mdx — zh-CN mirrors
  • packages/design/src/components/Select/styles.ts — dropdown max height aligned to Body line height
  • packages/design/src/components/Tooltip/styles.ts — switched to Body token
  • apps/web4/.../AllRecordingsHeading.tsx — Title-2 (22/28) hardcoded to guard against silent regression
  • 5 files in apps/web4 — --Font-Size-Body-Small changed to the Footnote token

Changes​

Token changes (Desktop / :root):

TokenOldNew
--Font-Size-Display36px32px
--Font-Size-H128px24px
--Font-Size-H222px20px
--Font-Size-H320px18px
--Font-Size-Body15px14px
--Line-Height-H136px32px
--Line-Height-H326px24px
--Line-Height-Body22px20px

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):

  1. Residual 15px hardcodes in web4: AutoSpeakerIntroModal.tsx, ContentRating.tsx, FailState.tsx
  2. web3 fallback values (e.g. H2 LH 30px) are inconsistent with the new token — fallback only, no runtime impact
  3. The scattered "14px/22px" descriptions in other component mdx files of design-site and in *DesignSpec.md need 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.