From 8c21a04981bffa165b2f4889cbd0962d764b41f2 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Mon, 24 Aug 2026 14:25:08 +0200
Subject: [PATCH] refactor(ui,sdk)!: bind text to explicit type roles

---
 .changeset/explicit-type-roles.md                |  6 ++++++
 .../docs/src/content/docs/get-started/theming.md | 12 ++++++++----
 .../src/content/docs/ui-library/typography.mdx   |  8 +++++---
 packages/sdk/README.md                           |  3 +--
 .../src/components/form/label/label.module.css   |  4 ++--
 .../components/form/message/message.module.css   |  2 +-
 .../sdk/src/components/loader/loader.module.css  |  1 -
 packages/sdk/src/components/loader/loader.tsx    |  2 +-
 .../sdk/src/features/app-bar/app-bar.module.css  |  4 ++--
 .../edge-label-renderer/edge-label-renderer.tsx  |  1 +
 .../edges/label-edge/label-edge.module.css       |  2 +-
 .../node-wrapper-info.module.css                 |  2 +-
 .../connectable-item/connectable-item.module.css |  2 +-
 .../node-section/node-section.module.css         |  2 +-
 .../import-export/import-modal/import-modal.tsx  |  4 ++--
 .../branch-card/branch-card.tsx                  |  4 ++--
 .../dynamic-conditions-control.tsx               |  2 +-
 .../rich-text-control.module.css                 |  2 +-
 .../layouts/group-layout/group-layout.tsx        |  2 +-
 .../json-form/utils/unknown-renderer.tsx         |  2 +-
 .../delete-confirmation.module.css               |  2 +-
 .../modals/template-selector/components/tile.tsx |  4 ++--
 .../template-selector/template-selector.tsx      |  2 +-
 .../palette/components/header/palette-header.tsx |  2 +-
 .../components/header/properties-bar-header.tsx  |  4 ++--
 .../components/syntax-highlighter.module.css     |  8 ++++----
 .../components/syntax-highlighter.tsx            |  2 --
 .../variable-text/variable-text.module.css       | 16 ++++++----------
 .../settings/settings-navigation.module.css      |  9 +--------
 .../pane-edit-variable/pane-edit-variable.tsx    |  2 +-
 .../tab-global-variables/pane-list/pane-list.tsx |  4 +++-
 .../pane-remove-variable.tsx                     |  8 ++++----
 .../variable-preview/variable-meta.module.css    |  2 --
 .../variable-preview/variable-meta.tsx           |  5 +++--
 .../variable-preview/variable-preview.tsx        |  2 +-
 .../features/variables/modals/tab/tab-header.tsx |  4 ++--
 packages/sdk/src/index.css                       |  7 -------
 .../date-picker/date-picker.module.css           |  1 +
 packages/ui/src/styles/typography.css            |  9 +++++++++
 39 files changed, 81 insertions(+), 79 deletions(-)
 create mode 100644 .changeset/explicit-type-roles.md

diff --git a/.changeset/explicit-type-roles.md b/.changeset/explicit-type-roles.md
new file mode 100644
index 000000000..d25e12b4e
--- /dev/null
+++ b/.changeset/explicit-type-roles.md
@@ -0,0 +1,6 @@
+---
+'@workflowbuilder/sdk': major
+'@workflowbuilder/ui': minor
+---
+
+SDK text now binds explicit type roles, while deprecated UI typography classes carry their bundled Poppins family, allowing the document-wide font reset to be removed without mixed editor typography. `--wb-font-family` no longer rethemes built-in editor text; apply it explicitly to consumer-owned surfaces that need it.
diff --git a/apps/docs/src/content/docs/get-started/theming.md b/apps/docs/src/content/docs/get-started/theming.md
index 50cc88198..6f7263908 100644
--- a/apps/docs/src/content/docs/get-started/theming.md
+++ b/apps/docs/src/content/docs/get-started/theming.md
@@ -1,6 +1,6 @@
 ---
 title: Theming
-description: Customise the editor's visual style — fonts, background, tokens — via CSS variables on :root.
+description: Customise the editor's visual style — background, tokens, and consumer-owned typography — via CSS variables.
 sidebar:
   order: 5
 ---
@@ -9,17 +9,21 @@ The aggregated `style.css` ships with the SDK's default visual layer. Override C
 
 ## Typography
 
-Poppins is bundled into `style.css` as inline base64 woff2 (latin + latin-ext, weights 300–700). No external font CDN is contacted at runtime — works under strict CSP, behind GDPR-controlled consent flows, and in air-gapped deployments.
+Built-in text uses bundled type styles: semantic `wb-text-*` roles on migrated surfaces and Poppins-backed deprecated classes on remaining UI primitives. `wb-text-code` uses Inter for token names and IDs; fixed-width editors retain a monospace family. The used Poppins faces are inlined and the remaining bundled faces ship as local woff2 assets, so no external font CDN is contacted at runtime.
 
-Override `--wb-font-family` to use a different face:
+`--wb-font-family` remains available for consumer-owned surfaces that opt into it; built-in roles do not read this variable:
 
 ```css
 :root {
   --wb-font-family: 'Inter', system-ui, -apple-system, sans-serif;
 }
+
+.my-workflow-surface {
+  font-family: var(--wb-font-family);
+}
 ```
 
-Provide the font yourself (via `@font-face`, `@fontsource/<font>`, etc.) — the SDK only consumes the variable.
+Provide any replacement font yourself via `@font-face`, `@fontsource/<font>`, or an equivalent local source.
 
 ## Other tokens
 
diff --git a/apps/docs/src/content/docs/ui-library/typography.mdx b/apps/docs/src/content/docs/ui-library/typography.mdx
index 418e4ed3d..b13e8d23a 100644
--- a/apps/docs/src/content/docs/ui-library/typography.mdx
+++ b/apps/docs/src/content/docs/ui-library/typography.mdx
@@ -33,6 +33,8 @@ Regular to 400.
 Every family except UI/Code doubles with an `-emphasized` variant
 (`wb-text-title-m-emphasized`), for 39 styles total.
 
+`wb-text-code` is proportional Inter. Editors whose cursor model requires fixed-width glyphs, such as Ace, keep a monospace family while using the role's size, weight, and line-height.
+
 Which role to reach for:
 
 | Context                         | Recommended role                 |
@@ -55,6 +57,6 @@ rem). Until the token export ships them through
 `@workflowbuilder/ui/tokens.css`, the classes define these primitives
 themselves — the migration swaps the source without touching consumers.
 
-The pre-2.0 `ax-public-*` typography classes are deprecated: components move
-to `wb-text-*` as they are redesigned, and the old classes are removed in
-3.0.0. Do not adopt them in new code.
+The pre-2.0 `ax-public-*` typography classes are deprecated and retained only
+for compatibility while components move to `wb-text-*`. Do not adopt them in
+new code; their removal will be announced with a future major release.
diff --git a/packages/sdk/README.md b/packages/sdk/README.md
index 94ae6097f..578c28b99 100644
--- a/packages/sdk/README.md
+++ b/packages/sdk/README.md
@@ -205,12 +205,11 @@ The editor exposes a small set of CSS custom properties for top-level styling. O
 ```css
 :root {
   --wb-background-color: #fafafa;
-  --wb-font-family: 'Inter', system-ui, sans-serif;
   --wb-transition: 0.15s ease-in;
 }
 ```
 
-Available `--wb-*` tokens: `--wb-background-color`, `--wb-font-family`, `--wb-transition`, plus scrollbar styling (`--wb-scroll-width`, `--wb-scroll-radius`, `--wb-scroll-thumb-color`, `--wb-scroll-track-color`).
+Available `--wb-*` tokens: `--wb-background-color`, `--wb-transition`, plus scrollbar styling (`--wb-scroll-width`, `--wb-scroll-radius`, `--wb-scroll-thumb-color`, `--wb-scroll-track-color`). Built-in editor text uses bundled type styles: semantic `wb-text-*` roles on migrated surfaces and Poppins-backed deprecated classes on remaining UI primitives. `--wb-font-family` remains available for consumer-owned surfaces that opt into `font-family: var(--wb-font-family)`; overriding it no longer rethemes built-in text.
 
 Deeper color and spacing customization goes through the generated `--wb-*` design-token layer from `@workflowbuilder/ui`. Hand-authored overrides use `--wb-public-*`. The UI Library's component pages include generated CSS-variable tables for component-local UI overrides. Full guide: [Design system and customization](https://www.workflowbuilder.io/docs/overview/features/design-system-and-customization/).
 
diff --git a/packages/sdk/src/components/form/label/label.module.css b/packages/sdk/src/components/form/label/label.module.css
index 44f9e3599..a44ccfd7b 100644
--- a/packages/sdk/src/components/form/label/label.module.css
+++ b/packages/sdk/src/components/form/label/label.module.css
@@ -29,12 +29,12 @@
   }
 
   .large {
-    composes: ax-public-p10 from global;
+    composes: wb-text-body-s from global;
   }
 
   .medium,
   .small {
-    composes: ax-public-p11 from global;
+    composes: wb-text-label-s from global;
   }
   .title {
     font-weight: 600;
diff --git a/packages/sdk/src/components/form/message/message.module.css b/packages/sdk/src/components/form/message/message.module.css
index b7766af6a..aedf7bfe4 100644
--- a/packages/sdk/src/components/form/message/message.module.css
+++ b/packages/sdk/src/components/form/message/message.module.css
@@ -39,7 +39,7 @@ html[data-theme='dark'] .container--warning {
 }
 
 .content {
-  composes: ax-public-p11 from global;
+  composes: wb-text-body-s from global;
 
   padding-top: 1px;
 }
diff --git a/packages/sdk/src/components/loader/loader.module.css b/packages/sdk/src/components/loader/loader.module.css
index 641d60bc2..0cf067861 100644
--- a/packages/sdk/src/components/loader/loader.module.css
+++ b/packages/sdk/src/components/loader/loader.module.css
@@ -22,7 +22,6 @@
     align-items: center;
     width: 100%;
     height: 100%;
-    font-size: 1.25rem;
   }
 }
 
diff --git a/packages/sdk/src/components/loader/loader.tsx b/packages/sdk/src/components/loader/loader.tsx
index 2ef87aebc..24bb91d56 100644
--- a/packages/sdk/src/components/loader/loader.tsx
+++ b/packages/sdk/src/components/loader/loader.tsx
@@ -29,7 +29,7 @@ export const Loader = memo(({ isLoading, isSemiTransparent }: LoaderType) => {
 
   return (
     <div className={clsx(styles['container'], visibilityClassName)} style={setLoaderBackgroundOpacityVariable}>
-      <div className={styles['loader']}>{t('loader.text')}</div>
+      <div className={clsx(styles['loader'], 'wb-text-headline-s')}>{t('loader.text')}</div>
     </div>
   );
 });
diff --git a/packages/sdk/src/features/app-bar/app-bar.module.css b/packages/sdk/src/features/app-bar/app-bar.module.css
index bff34f802..18e8772fe 100644
--- a/packages/sdk/src/features/app-bar/app-bar.module.css
+++ b/packages/sdk/src/features/app-bar/app-bar.module.css
@@ -60,12 +60,12 @@
 
 .folder-name {
   color: var(--wb-app-bar-folder-name-color);
-  composes: ax-public-p9 from global;
+  composes: wb-text-body-m from global;
 }
 
 .title {
   color: var(--wb-app-bar-diagram-title-color);
-  composes: ax-public-p9 from global;
+  composes: wb-text-body-m from global;
   min-height: 1em;
   min-width: 1em;
   cursor: pointer;
diff --git a/packages/sdk/src/features/diagram/edges/edge-label-renderer/edge-label-renderer.tsx b/packages/sdk/src/features/diagram/edges/edge-label-renderer/edge-label-renderer.tsx
index 525a093a4..9830a912e 100644
--- a/packages/sdk/src/features/diagram/edges/edge-label-renderer/edge-label-renderer.tsx
+++ b/packages/sdk/src/features/diagram/edges/edge-label-renderer/edge-label-renderer.tsx
@@ -58,6 +58,7 @@ export function EdgeLabel({
   return (
     <EdgeLabelRenderer>
       <Label
+        className="wb-text-label-m"
         data-edge-label-id={id}
         style={style}
         isHovered={hovered}
diff --git a/packages/sdk/src/features/diagram/edges/label-edge/label-edge.module.css b/packages/sdk/src/features/diagram/edges/label-edge/label-edge.module.css
index 88faaf1e6..9e76b0337 100644
--- a/packages/sdk/src/features/diagram/edges/label-edge/label-edge.module.css
+++ b/packages/sdk/src/features/diagram/edges/label-edge/label-edge.module.css
@@ -1,5 +1,5 @@
 .label {
-  composes: ax-public-p10 from global;
+  composes: wb-text-body-s from global;
 
   position: absolute;
   pointer-events: auto;
diff --git a/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/node-info-wrapper/node-wrapper-info.module.css b/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/node-info-wrapper/node-wrapper-info.module.css
index 63dde5bdc..a0a8810e1 100644
--- a/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/node-info-wrapper/node-wrapper-info.module.css
+++ b/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/components/node-info-wrapper/node-wrapper-info.module.css
@@ -7,5 +7,5 @@
   border: 1px solid var(--wb-ui-stroke-default);
   color: var(--wb-ui-text-default);
 
-  composes: ax-public-h10 from global;
+  composes: wb-text-body-s-emphasized from global;
 }
diff --git a/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css b/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css
index 8812f053e..8aff27103 100644
--- a/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css
+++ b/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css
@@ -8,7 +8,7 @@
 }
 
 .connectable-item {
-  composes: ax-public-p11 from global;
+  composes: wb-text-node-s from global;
 
   position: relative;
   display: flex;
diff --git a/packages/sdk/src/features/diagram/nodes/components/node-section/node-section.module.css b/packages/sdk/src/features/diagram/nodes/components/node-section/node-section.module.css
index 0638d8856..c54dd1ed4 100644
--- a/packages/sdk/src/features/diagram/nodes/components/node-section/node-section.module.css
+++ b/packages/sdk/src/features/diagram/nodes/components/node-section/node-section.module.css
@@ -15,5 +15,5 @@
   border: var(--wb-node-section-border-width) solid var(--wb-node-section-border-color);
   color: var(--wb-ui-text-default);
 
-  composes: ax-public-h10 from global;
+  composes: wb-text-body-s-emphasized from global;
 }
diff --git a/packages/sdk/src/features/integration/components/import-export/import-modal/import-modal.tsx b/packages/sdk/src/features/integration/components/import-export/import-modal/import-modal.tsx
index f92cf6261..0dcfe5b64 100644
--- a/packages/sdk/src/features/integration/components/import-export/import-modal/import-modal.tsx
+++ b/packages/sdk/src/features/integration/components/import-export/import-modal/import-modal.tsx
@@ -58,10 +58,10 @@ export function ImportModal() {
 
   return (
     <div className={styles['container']}>
-      <p className={clsx('ax-public-p10', styles['tip'])}>{t('importExport.importTip')}</p>
+      <p className={clsx('wb-text-body-s', styles['tip'])}>{t('importExport.importTip')}</p>
       <SyntaxHighlighterLazy value={jsonToParse} onChange={(json) => setJsonToParse(json || '{}')} />
       {(errors.length > 0 || warnings.length > 0) && (
-        <div className={clsx('ax-public-p10', styles['error'])}>
+        <div className={clsx('wb-text-body-s', styles['error'])}>
           {[...errors, ...warnings].map(({ message, messageParams }) => (
             <div key={message}>{t(message, messageParams) as string}</div>
           ))}
diff --git a/packages/sdk/src/features/json-form/controls/decision-branches-control/branch-card/branch-card.tsx b/packages/sdk/src/features/json-form/controls/decision-branches-control/branch-card/branch-card.tsx
index 4cf2d8722..d8b9e117f 100644
--- a/packages/sdk/src/features/json-form/controls/decision-branches-control/branch-card/branch-card.tsx
+++ b/packages/sdk/src/features/json-form/controls/decision-branches-control/branch-card/branch-card.tsx
@@ -59,7 +59,7 @@ export function BranchCard({ branch, index, onUpdate, onRemove, enabled = true }
   return (
     <div className={styles['branch-card']}>
       <div className={styles['header']}>
-        <h1 className="ax-public-h10">{t('decisionBranches.branch', { index: index + 1 })}</h1>
+        <h1 className="wb-text-body-s-emphasized">{t('decisionBranches.branch', { index: index + 1 })}</h1>
         <div className={styles['actions']}>
           <NavButton
             aria-label={t('common.edit')}
@@ -80,7 +80,7 @@ export function BranchCard({ branch, index, onUpdate, onRemove, enabled = true }
         </FormControlWithLabel>
       </div>
       <button
-        className={clsx(styles['conditions-chip'], 'ax-public-p11', {
+        className={clsx(styles['conditions-chip'], 'wb-text-label-s', {
           [styles['no-conditions']]: conditionCount === 0,
         })}
         onClick={onClickEdit}
diff --git a/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.tsx b/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.tsx
index 4dcc0855c..b1a13d94b 100644
--- a/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.tsx
+++ b/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.tsx
@@ -43,7 +43,7 @@ function DynamicConditionsControl(props: DynamicConditionsControlProps) {
   return (
     <div className={styles['container']}>
       <div className={styles['header']}>
-        <span className={clsx('ax-public-h10', styles['title'])}>{t('title')}</span>
+        <span className={clsx('wb-text-body-s-emphasized', styles['title'])}>{t('title')}</span>
         <NavButton
           aria-label={t('title')}
           size="s"
diff --git a/packages/sdk/src/features/json-form/controls/rich-text-control/rich-text-control.module.css b/packages/sdk/src/features/json-form/controls/rich-text-control/rich-text-control.module.css
index b092ba755..4724640d6 100644
--- a/packages/sdk/src/features/json-form/controls/rich-text-control/rich-text-control.module.css
+++ b/packages/sdk/src/features/json-form/controls/rich-text-control/rich-text-control.module.css
@@ -3,7 +3,7 @@
 }
 
 .container {
-  composes: ax-public-p11 from global;
+  composes: wb-text-body-s from global;
   color: var(--wb-public-form-rich-text-color);
 
   a {
diff --git a/packages/sdk/src/features/json-form/layouts/group-layout/group-layout.tsx b/packages/sdk/src/features/json-form/layouts/group-layout/group-layout.tsx
index 75c675e30..82c9e0bfe 100644
--- a/packages/sdk/src/features/json-form/layouts/group-layout/group-layout.tsx
+++ b/packages/sdk/src/features/json-form/layouts/group-layout/group-layout.tsx
@@ -13,7 +13,7 @@ function GroupLayout(props: LayoutProps<GroupLayoutElement>) {
   return (
     <LayoutWrapper {...props}>
       <div className={styles['group-layout']}>
-        <h1 className={clsx(styles['group-header'], 'ax-public-h10')}>{uischema.label}</h1>
+        <h1 className={clsx(styles['group-header'], 'wb-text-body-s-emphasized')}>{uischema.label}</h1>
         {renderElements(props)}
       </div>
     </LayoutWrapper>
diff --git a/packages/sdk/src/features/json-form/utils/unknown-renderer.tsx b/packages/sdk/src/features/json-form/utils/unknown-renderer.tsx
index f49d8c208..b90682912 100644
--- a/packages/sdk/src/features/json-form/utils/unknown-renderer.tsx
+++ b/packages/sdk/src/features/json-form/utils/unknown-renderer.tsx
@@ -11,7 +11,7 @@ import { withJsonFormsControlProps } from '@jsonforms/react';
 
 function UnknownRenderer({ uischema: { type } }: ControlProps | LayoutProps) {
   return (
-    <div className="ax-public-p10" style={{ color: 'red' }}>
+    <div className="wb-text-body-s" style={{ color: 'red' }}>
       No renderer provided for type: {type}
     </div>
   );
diff --git a/packages/sdk/src/features/modals/delete-confirmation/delete-confirmation.module.css b/packages/sdk/src/features/modals/delete-confirmation/delete-confirmation.module.css
index afc4d1fda..447c521c4 100644
--- a/packages/sdk/src/features/modals/delete-confirmation/delete-confirmation.module.css
+++ b/packages/sdk/src/features/modals/delete-confirmation/delete-confirmation.module.css
@@ -9,7 +9,7 @@
     font-weight: 700;
   }
 
-  composes: ax-public-p9 from global;
+  composes: wb-text-body-m from global;
   user-select: none;
 }
 
diff --git a/packages/sdk/src/features/modals/template-selector/components/tile.tsx b/packages/sdk/src/features/modals/template-selector/components/tile.tsx
index b89321620..af9ce3cb2 100644
--- a/packages/sdk/src/features/modals/template-selector/components/tile.tsx
+++ b/packages/sdk/src/features/modals/template-selector/components/tile.tsx
@@ -24,8 +24,8 @@ export function Tile({ icon, title, subTitle, outlined, onClick }: TileProps) {
     >
       <Icon name={icon} size="large" />
       <div className={styles['description']}>
-        <span className={clsx('ax-public-p10', styles['title'])}>{title}</span>
-        {subTitle && <span className={clsx('ax-public-p10', styles['sub-title'])}>{subTitle}</span>}
+        <span className={clsx('wb-text-body-s', styles['title'])}>{title}</span>
+        {subTitle && <span className={clsx('wb-text-body-s', styles['sub-title'])}>{subTitle}</span>}
       </div>
     </div>
   );
diff --git a/packages/sdk/src/features/modals/template-selector/template-selector.tsx b/packages/sdk/src/features/modals/template-selector/template-selector.tsx
index 4ea714519..2c57332b5 100644
--- a/packages/sdk/src/features/modals/template-selector/template-selector.tsx
+++ b/packages/sdk/src/features/modals/template-selector/template-selector.tsx
@@ -29,7 +29,7 @@ export function TemplateSelector() {
   return (
     <div className={styles['container']}>
       <section className={styles['header']}>
-        <span className={clsx('ax-public-p10', styles['sub-title'])}>
+        <span className={clsx('wb-text-body-s', styles['sub-title'])}>
           <Trans i18nKey="templateSelector.description" components={{ br: <br /> }} />
         </span>
       </section>
diff --git a/packages/sdk/src/features/palette/components/header/palette-header.tsx b/packages/sdk/src/features/palette/components/header/palette-header.tsx
index f6fc7ccae..00928ee82 100644
--- a/packages/sdk/src/features/palette/components/header/palette-header.tsx
+++ b/packages/sdk/src/features/palette/components/header/palette-header.tsx
@@ -15,7 +15,7 @@ export function PaletteHeader({ onClick, isSidebarExpanded }: PaletteHeaderProps
 
   return (
     <div className={styles['container']}>
-      <span className="ax-public-h7">{t('palette.nodesLibrary')}</span>
+      <span className="wb-text-title-m-emphasized">{t('palette.nodesLibrary')}</span>
       <NavButton
         aria-label={isSidebarExpanded ? t('tooltips.closePalette') : t('tooltips.openPalette')}
         size="s"
diff --git a/packages/sdk/src/features/properties-bar/components/header/properties-bar-header.tsx b/packages/sdk/src/features/properties-bar/components/header/properties-bar-header.tsx
index 3fb0a2c23..037a8c5fe 100644
--- a/packages/sdk/src/features/properties-bar/components/header/properties-bar-header.tsx
+++ b/packages/sdk/src/features/properties-bar/components/header/properties-bar-header.tsx
@@ -35,8 +35,8 @@ export function PropertiesBarHeader({
         prefixIcon={<Icon name="SidebarSimple" />}
       />
       <div className={styles['text-container']}>
-        <span className={name ? 'ax-public-h9' : 'ax-public-h7'}>{header}</span>
-        {name && <p className="ax-public-p11">{name}</p>}
+        <span className={name ? 'wb-text-title-s-emphasized' : 'wb-text-title-m-emphasized'}>{header}</span>
+        {name && <p className="wb-text-label-s">{name}</p>}
       </div>
       {onDotsClick && (
         <NavButton
diff --git a/packages/sdk/src/features/syntax-highlighter/components/syntax-highlighter.module.css b/packages/sdk/src/features/syntax-highlighter/components/syntax-highlighter.module.css
index 0e936e88a..d9dc31871 100644
--- a/packages/sdk/src/features/syntax-highlighter/components/syntax-highlighter.module.css
+++ b/packages/sdk/src/features/syntax-highlighter/components/syntax-highlighter.module.css
@@ -28,6 +28,7 @@ html[data-theme='dark'] {
 }
 
 .container {
+  composes: wb-text-code from global;
   padding: var(--wb-public-input-padding-medium);
   padding-right: 0;
   border-radius: var(--wb-public-input-border-radius-medium);
@@ -35,11 +36,10 @@ html[data-theme='dark'] {
   /* border-bottom: 1px solid var(--wb-public-textarea-root-border-color); */
   /* transition: all var(--wb-public-transition); */
 
-  * {
-    font-family: monospace !important;
-  }
-
   :global(.ace_editor) {
+    /* Ace positions content from one measured glyph width, so its editor must remain monospaced. */
+    font: inherit !important;
+    font-family: monospace !important;
     padding: var(--wb-public-input-padding-medium);
     color: var(--wb-syntax-highlighter-color) !important;
     background-color: transparent;
diff --git a/packages/sdk/src/features/syntax-highlighter/components/syntax-highlighter.tsx b/packages/sdk/src/features/syntax-highlighter/components/syntax-highlighter.tsx
index 87db94faf..806641352 100644
--- a/packages/sdk/src/features/syntax-highlighter/components/syntax-highlighter.tsx
+++ b/packages/sdk/src/features/syntax-highlighter/components/syntax-highlighter.tsx
@@ -27,8 +27,6 @@ export function SyntaxHighlighter(props: SyntaxHighlighterProps) {
         mode={mode}
         theme="github_light_default"
         onChange={onChange}
-        fontSize={12}
-        lineHeight={16}
         showPrintMargin={false}
         showGutter={false}
         highlightActiveLine={false}
diff --git a/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css b/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css
index fb544c5ef..b6679bd1b 100644
--- a/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css
+++ b/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css
@@ -34,6 +34,7 @@
 }
 
 .input {
+  composes: wb-text-label-m from global;
   position: relative;
   z-index: 1;
   display: block;
@@ -43,9 +44,6 @@
   border: none;
   background: transparent;
   color: unset;
-  font: inherit;
-  font-size: 0.75rem;
-  font-weight: 400;
   line-height: 140%;
   outline: none;
   resize: none;
@@ -69,13 +67,11 @@
  * which have no effect without Tailwind — we must set them manually.
  */
 .highlighter {
+  composes: wb-text-label-m from global;
   padding: var(--wb-public-input-padding-medium);
   border: none;
   background: transparent;
   color: transparent;
-  font: inherit;
-  font-size: 0.75rem;
-  font-weight: 400;
   line-height: 140%;
   box-sizing: border-box;
   overflow: hidden;
@@ -145,7 +141,7 @@ body:has(.suggestionsContainer) {
 }
 
 .suggestionsTitle {
-  composes: ax-public-h10 from global;
+  composes: wb-text-body-s-emphasized from global;
   color: var(--wb-ui-text-default);
 }
 
@@ -172,7 +168,7 @@ body:has(.suggestionsContainer) {
 }
 
 .groupHeader {
-  composes: ax-public-h10 from global;
+  composes: wb-text-body-s-emphasized from global;
   color: var(--wb-ui-text-default);
   display: flex;
   color: var(--wb-ui-text-default);
@@ -218,11 +214,11 @@ body:has(.suggestionsContainer) {
 
 .suggestionLabel {
   color: var(--wb-ui-text-default);
-  composes: ax-public-h10 from global;
+  composes: wb-text-body-s-emphasized from global;
 }
 
 .suggestionDescription {
-  composes: ax-public-p11 from global;
+  composes: wb-text-body-s from global;
   color: var(--wb-ui-text-subtle-default);
   display: -webkit-box;
   -webkit-line-clamp: 2;
diff --git a/packages/sdk/src/features/variables/modals/settings/settings-navigation.module.css b/packages/sdk/src/features/variables/modals/settings/settings-navigation.module.css
index 133761afc..8cf9596d9 100644
--- a/packages/sdk/src/features/variables/modals/settings/settings-navigation.module.css
+++ b/packages/sdk/src/features/variables/modals/settings/settings-navigation.module.css
@@ -14,6 +14,7 @@
 }
 
 .button {
+  composes: wb-text-label-l-emphasized from global;
   display: inline-flex;
   justify-content: flex-start;
   align-items: center;
@@ -21,14 +22,6 @@
   height: 2.25rem;
   padding: 0 var(--wb-space-200);
 
-  /* Button/Button Medium */
-  font-family: Poppins;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 100%; /* 14px */
-  font-weight: 600;
-  font-size: 0.875rem;
   border-radius: var(--wb-radius-100);
   background: transparent;
   border: none;
diff --git a/packages/sdk/src/features/variables/modals/tab-global-variables/pane-edit-variable/pane-edit-variable.tsx b/packages/sdk/src/features/variables/modals/tab-global-variables/pane-edit-variable/pane-edit-variable.tsx
index cff9f2804..e38c82052 100644
--- a/packages/sdk/src/features/variables/modals/tab-global-variables/pane-edit-variable/pane-edit-variable.tsx
+++ b/packages/sdk/src/features/variables/modals/tab-global-variables/pane-edit-variable/pane-edit-variable.tsx
@@ -39,7 +39,7 @@ export function PaneEditVariable({ className, setActivePane, id }: Props) {
   return (
     <div className={clsx(className)}>
       <TabHeader title="workflowsSettings.tab.editVariable" onGoBack={() => setActivePane(VARIABLE_PANE.LIST)} />
-      {!variable && t('variables.variableNotFound')}
+      {!variable && <span className="wb-text-body-m">{t('variables.variableNotFound')}</span>}
       {variable && (
         <VariableForm
           variant={nodesWithVariable.length > 0 ? 'edit-limited' : 'edit'}
diff --git a/packages/sdk/src/features/variables/modals/tab-global-variables/pane-list/pane-list.tsx b/packages/sdk/src/features/variables/modals/tab-global-variables/pane-list/pane-list.tsx
index de6ffe2ab..405a02a35 100644
--- a/packages/sdk/src/features/variables/modals/tab-global-variables/pane-list/pane-list.tsx
+++ b/packages/sdk/src/features/variables/modals/tab-global-variables/pane-list/pane-list.tsx
@@ -41,7 +41,9 @@ export function PaneList({ className, setActivePane }: Props) {
         </Button>
       </TabHeader>
       {variablesIds.length === 0 && (
-        <p className={clsx('ax-public-p9', styles['empty-message'])}>{t('workflowsSettings.tab.emptyVariablesList')}</p>
+        <p className={clsx('wb-text-body-m', styles['empty-message'])}>
+          {t('workflowsSettings.tab.emptyVariablesList')}
+        </p>
       )}
       <div className={styles['variables']}>
         {variablesIds.map((id) => (
diff --git a/packages/sdk/src/features/variables/modals/tab-global-variables/pane-remove-variable/pane-remove-variable.tsx b/packages/sdk/src/features/variables/modals/tab-global-variables/pane-remove-variable/pane-remove-variable.tsx
index 2ed0fdc41..f63710e18 100644
--- a/packages/sdk/src/features/variables/modals/tab-global-variables/pane-remove-variable/pane-remove-variable.tsx
+++ b/packages/sdk/src/features/variables/modals/tab-global-variables/pane-remove-variable/pane-remove-variable.tsx
@@ -39,16 +39,16 @@ export function PaneRemoveVariable({ className, setActivePane, id }: Props) {
     <div className={clsx(className)}>
       <TabHeader title="workflowsSettings.tab.removeVariable" onGoBack={() => setActivePane(VARIABLE_PANE.LIST)} />
       <div className={styles['content']}>
-        {!variable && t('variables.variableNotFound')}
+        {!variable && <span className="wb-text-body-m">{t('variables.variableNotFound')}</span>}
         {variable && <VariableMeta name={variable.name} type={variable.type} />}
         {nodesWithVariable.length === 0 ? (
-          <p className={clsx('ax-public-p9', styles['description'])}>{t('variables.removeVariableWarning')}</p>
+          <p className={clsx('wb-text-body-m', styles['description'])}>{t('variables.removeVariableWarning')}</p>
         ) : (
           <>
-            <p className={clsx('ax-public-p9', styles['description'])}>{t('variables.removeVariableIsBlocked')}</p>
+            <p className={clsx('wb-text-body-m', styles['description'])}>{t('variables.removeVariableIsBlocked')}</p>
             <ul className={styles['list']}>
               {nodesWithVariable.map(({ id, title }) => (
-                <li key={id} className="ax-public-p10">
+                <li key={id} className="wb-text-body-s">
                   {title}
                 </li>
               ))}
diff --git a/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-meta.module.css b/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-meta.module.css
index d37b40be2..22d511540 100644
--- a/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-meta.module.css
+++ b/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-meta.module.css
@@ -12,9 +12,7 @@
 .name {
   max-width: 200px;
   min-height: 1.75rem;
-  line-height: 1.3125rem;
   display: inline-flex;
-  font-family: 'Courier New';
   border-radius: 4px;
   padding: 4px 8px 3px 8px;
   color: var(--wb-ui-text-default);
diff --git a/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-meta.tsx b/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-meta.tsx
index af0e29134..28df8c077 100644
--- a/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-meta.tsx
+++ b/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-meta.tsx
@@ -13,8 +13,9 @@ type Props = {
 
 export function VariableMeta({ className = '', name, type }: Props) {
   return (
-    <div className={clsx('ax-public-p10', styles['container'], className)}>
-      <span className={styles['name']}>{name}</span>|<span>{variableTypeInfoByType[type].label}</span>
+    <div className={clsx('wb-text-body-s', styles['container'], className)}>
+      <span className={clsx('wb-text-code', styles['name'])}>{name}</span>|
+      <span>{variableTypeInfoByType[type].label}</span>
     </div>
   );
 }
diff --git a/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-preview.tsx b/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-preview.tsx
index b4c76fab5..53fbe24e6 100644
--- a/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-preview.tsx
+++ b/packages/sdk/src/features/variables/modals/tab-global-variables/variable-preview/variable-preview.tsx
@@ -48,7 +48,7 @@ export function VariablePreview({ id, onEdit, onRemove }: Props) {
           )}
         </div>
       </div>
-      <p className={clsx('ax-public-p11', styles['description'])}>{variable.description}</p>
+      <p className={clsx('wb-text-body-s', styles['description'])}>{variable.description}</p>
     </div>
   );
 }
diff --git a/packages/sdk/src/features/variables/modals/tab/tab-header.tsx b/packages/sdk/src/features/variables/modals/tab/tab-header.tsx
index bbde7c994..fa0e27879 100644
--- a/packages/sdk/src/features/variables/modals/tab/tab-header.tsx
+++ b/packages/sdk/src/features/variables/modals/tab/tab-header.tsx
@@ -32,9 +32,9 @@ export function TabHeader({ title, description, onGoBack, children, className =
         />
       )}
       <div className={styles['content']}>
-        <h4 className={clsx('ax-public-h7', styles['title'])}>{translateIfPossible(title) || title}</h4>
+        <h4 className={clsx('wb-text-title-m-emphasized', styles['title'])}>{translateIfPossible(title) || title}</h4>
         {description && (
-          <p className={clsx('ax-public-p10', styles['description'])}>
+          <p className={clsx('wb-text-body-s', styles['description'])}>
             {translateIfPossible(description) || description}
           </p>
         )}
diff --git a/packages/sdk/src/index.css b/packages/sdk/src/index.css
index bd3caf3c6..5a8c161fe 100644
--- a/packages/sdk/src/index.css
+++ b/packages/sdk/src/index.css
@@ -23,10 +23,6 @@
     --wb-scroll-radius: var(--wb-radius-125);
     --wb-scroll-thumb-color: var(--wb-components-scrollbar-bg-default);
     --wb-scroll-track-color: var(--wb-colors-transparent);
-    /* Candidate for removal at the 3.0.0 close-out: the wb-text-* classes
-       carry their own families, so this variable loses reach as components
-       adopt them — decide then between removing it and narrowing it to
-       consumer-slot content. */
     --wb-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
   }
 }
@@ -56,9 +52,6 @@
   input[type='time']::-webkit-calendar-picker-indicator {
     display: none;
   }
-  * {
-    font-family: var(--wb-font-family);
-  }
   body {
     margin: 0;
     background-color: var(--wb-background-color);
diff --git a/packages/ui/src/components/date-picker/date-picker.module.css b/packages/ui/src/components/date-picker/date-picker.module.css
index 4ec3dba85..22d34f8f5 100644
--- a/packages/ui/src/components/date-picker/date-picker.module.css
+++ b/packages/ui/src/components/date-picker/date-picker.module.css
@@ -28,6 +28,7 @@
   }
 
   .calendar {
+    composes: wb-text-body-s from global;
     background: var(--wb-public-date-picker-dropdown-background);
     border: var(--wb-size-12) solid var(--wb-public-date-picker-dropdown-border-color);
     border-radius: var(--wb-radius-100);
diff --git a/packages/ui/src/styles/typography.css b/packages/ui/src/styles/typography.css
index 76a06cacb..54d9c0c59 100644
--- a/packages/ui/src/styles/typography.css
+++ b/packages/ui/src/styles/typography.css
@@ -13,6 +13,7 @@
   .ax-public-h10,
   .ax-public-h11,
   .ax-public-h12 {
+    font-family: 'Poppins', system-ui, sans-serif;
     font-weight: 600;
   }
 
@@ -28,6 +29,7 @@
   .ax-public-p10,
   .ax-public-p11,
   .ax-public-p12 {
+    font-family: 'Poppins', system-ui, sans-serif;
     font-weight: 400;
   }
 
@@ -130,6 +132,7 @@
   .ax-public-button-medium,
   .ax-public-button-small,
   .ax-public-button-extra-small {
+    font-family: 'Poppins', system-ui, sans-serif;
     font-weight: 600;
     line-height: 100%;
   }
@@ -152,6 +155,12 @@
 
   /* Edge Label */
 
+  .ax-public-edge-label-medium,
+  .ax-public-edge-label-small,
+  .ax-public-edge-label-extra-small {
+    font-family: 'Poppins', system-ui, sans-serif;
+  }
+
   .ax-public-edge-label-medium {
     font-size: 0.75rem;
     line-height: 100%;