From 0b881a145beabf44bf2379f2dd46d3379c658336 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Tue, 18 Aug 2026 17:47:34 +0200
Subject: [PATCH 01/20] feat(ui): add DS 2.0 type role classes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

39 wb-type-{family}-{size}[-emphasized] utility classes straight from the
Typography guidelines table (Display, Headline, Title, Body, Label, Node,
UI/Code). Font sizes reference the wb/font-size primitives; until the DS 2.0
variables export ships them in tokens.css, the same block defines them as
provisional values — the unlayered export will override the layered block,
and the block gets removed with the export task. Existing ax-public-*
classes are untouched; adoption starts with the Chips redesign.
---
 .changeset/wb-488-type-roles.md       |   6 +
 packages/ui/src/styles/typography.css | 223 ++++++++++++++++++++++++++
 2 files changed, 229 insertions(+)
 create mode 100644 .changeset/wb-488-type-roles.md

diff --git a/.changeset/wb-488-type-roles.md b/.changeset/wb-488-type-roles.md
new file mode 100644
index 000000000..0f10f973d
--- /dev/null
+++ b/.changeset/wb-488-type-roles.md
@@ -0,0 +1,6 @@
+---
+'@workflowbuilder/ui': minor
+'@workflowbuilder/sdk': minor
+---
+
+Add the Design System 2.0 type roles as `wb-type-{family}-{size}[-emphasized]` utility classes (39 styles: Display, Headline, Title, Body, Label, Node, UI/Code) in `@workflowbuilder/ui`, and bundle Inter (Regular) in the SDK stylesheet for the `wb-type-code` role. Existing `ax-public-*` typography classes are unchanged.
diff --git a/packages/ui/src/styles/typography.css b/packages/ui/src/styles/typography.css
index f14dfa579..60d042427 100644
--- a/packages/ui/src/styles/typography.css
+++ b/packages/ui/src/styles/typography.css
@@ -166,4 +166,227 @@
     font-size: 0.625rem;
     line-height: 100%;
   }
+
+  /* DS 2.0 type roles — one class per text style from the Typography guidelines.
+     Naming: wb-type-{family}-{size}[-emphasized]; Emphasized = SemiBold 600. */
+
+  :root {
+    /* PROVISIONAL font-size primitives (wb/font-size/NNN, NNN = px × 12.5):
+       the DS 2.0 variables export (WB-487) will ship these in tokens.css and,
+       being unlayered, will override this layered block — remove it then. */
+    --wb-font-size-125: 0.625rem;
+    --wb-font-size-137: 0.6875rem;
+    --wb-font-size-150: 0.75rem;
+    --wb-font-size-162: 0.8125rem;
+    --wb-font-size-175: 0.875rem;
+    --wb-font-size-200: 1rem;
+    --wb-font-size-225: 1.125rem;
+    --wb-font-size-250: 1.25rem;
+    --wb-font-size-275: 1.375rem;
+    --wb-font-size-300: 1.5rem;
+    --wb-font-size-350: 1.75rem;
+    --wb-font-size-400: 2rem;
+  }
+
+  .wb-type-display-s,
+  .wb-type-display-m,
+  .wb-type-display-l,
+  .wb-type-headline-s,
+  .wb-type-headline-m,
+  .wb-type-headline-l,
+  .wb-type-title-s,
+  .wb-type-title-m,
+  .wb-type-title-l,
+  .wb-type-body-s,
+  .wb-type-body-m,
+  .wb-type-body-l,
+  .wb-type-label-s,
+  .wb-type-label-m,
+  .wb-type-label-l,
+  .wb-type-label-xl,
+  .wb-type-node-s,
+  .wb-type-node-m,
+  .wb-type-node-l,
+  .wb-type-display-s-emphasized,
+  .wb-type-display-m-emphasized,
+  .wb-type-display-l-emphasized,
+  .wb-type-headline-s-emphasized,
+  .wb-type-headline-m-emphasized,
+  .wb-type-headline-l-emphasized,
+  .wb-type-title-s-emphasized,
+  .wb-type-title-m-emphasized,
+  .wb-type-title-l-emphasized,
+  .wb-type-body-s-emphasized,
+  .wb-type-body-m-emphasized,
+  .wb-type-body-l-emphasized,
+  .wb-type-label-s-emphasized,
+  .wb-type-label-m-emphasized,
+  .wb-type-label-l-emphasized,
+  .wb-type-label-xl-emphasized,
+  .wb-type-node-s-emphasized,
+  .wb-type-node-m-emphasized,
+  .wb-type-node-l-emphasized {
+    font-family: 'Poppins', system-ui, sans-serif;
+    font-weight: 400;
+  }
+
+  .wb-type-code {
+    font-family: 'Inter', system-ui, sans-serif;
+    font-weight: 400;
+  }
+
+  /* Display — hero and marketing moments */
+
+  .wb-type-display-s,
+  .wb-type-display-s-emphasized {
+    font-size: var(--wb-font-size-300);
+    line-height: 130%;
+  }
+
+  .wb-type-display-m,
+  .wb-type-display-m-emphasized {
+    font-size: var(--wb-font-size-350);
+    line-height: 120%;
+  }
+
+  .wb-type-display-l,
+  .wb-type-display-l-emphasized {
+    font-size: var(--wb-font-size-400);
+    line-height: 120%;
+  }
+
+  /* Headline — page and section headings */
+
+  .wb-type-headline-s,
+  .wb-type-headline-s-emphasized {
+    font-size: var(--wb-font-size-250);
+    line-height: 130%;
+  }
+
+  .wb-type-headline-m,
+  .wb-type-headline-m-emphasized {
+    font-size: var(--wb-font-size-275);
+    line-height: 130%;
+  }
+
+  .wb-type-headline-l,
+  .wb-type-headline-l-emphasized {
+    font-size: var(--wb-font-size-300);
+    line-height: 130%;
+  }
+
+  /* Title — card and group titles */
+
+  .wb-type-title-s,
+  .wb-type-title-s-emphasized {
+    font-size: var(--wb-font-size-175);
+    line-height: 140%;
+  }
+
+  .wb-type-title-m,
+  .wb-type-title-m-emphasized {
+    font-size: var(--wb-font-size-200);
+    line-height: 140%;
+  }
+
+  .wb-type-title-l,
+  .wb-type-title-l-emphasized {
+    font-size: var(--wb-font-size-225);
+    line-height: 130%;
+  }
+
+  /* Body — running text */
+
+  .wb-type-body-s,
+  .wb-type-body-s-emphasized {
+    font-size: var(--wb-font-size-150);
+    line-height: 130%;
+  }
+
+  .wb-type-body-m,
+  .wb-type-body-m-emphasized {
+    font-size: var(--wb-font-size-175);
+    line-height: 140%;
+  }
+
+  .wb-type-body-l,
+  .wb-type-body-l-emphasized {
+    font-size: var(--wb-font-size-200);
+    line-height: 140%;
+  }
+
+  /* Label — buttons, chips, captions */
+
+  .wb-type-label-s,
+  .wb-type-label-s-emphasized {
+    font-size: var(--wb-font-size-125);
+    line-height: 100%;
+  }
+
+  .wb-type-label-m,
+  .wb-type-label-m-emphasized {
+    font-size: var(--wb-font-size-150);
+    line-height: 100%;
+  }
+
+  .wb-type-label-l,
+  .wb-type-label-l-emphasized {
+    font-size: var(--wb-font-size-175);
+    line-height: 100%;
+  }
+
+  .wb-type-label-xl,
+  .wb-type-label-xl-emphasized {
+    font-size: var(--wb-font-size-200);
+    line-height: 100%;
+  }
+
+  /* Node — canvas node and port labels (WB-specific) */
+
+  .wb-type-node-s,
+  .wb-type-node-s-emphasized {
+    font-size: var(--wb-font-size-137);
+    line-height: 130%;
+  }
+
+  .wb-type-node-m,
+  .wb-type-node-m-emphasized {
+    font-size: var(--wb-font-size-162);
+    line-height: 140%;
+  }
+
+  .wb-type-node-l,
+  .wb-type-node-l-emphasized {
+    font-size: var(--wb-font-size-200);
+    line-height: 140%;
+  }
+
+  /* UI/Code — monospace role for code, token names, IDs (Regular only) */
+
+  .wb-type-code {
+    font-size: var(--wb-font-size-150);
+    line-height: 130%;
+  }
+
+  .wb-type-display-s-emphasized,
+  .wb-type-display-m-emphasized,
+  .wb-type-display-l-emphasized,
+  .wb-type-headline-s-emphasized,
+  .wb-type-headline-m-emphasized,
+  .wb-type-headline-l-emphasized,
+  .wb-type-title-s-emphasized,
+  .wb-type-title-m-emphasized,
+  .wb-type-title-l-emphasized,
+  .wb-type-body-s-emphasized,
+  .wb-type-body-m-emphasized,
+  .wb-type-body-l-emphasized,
+  .wb-type-label-s-emphasized,
+  .wb-type-label-m-emphasized,
+  .wb-type-label-l-emphasized,
+  .wb-type-label-xl-emphasized,
+  .wb-type-node-s-emphasized,
+  .wb-type-node-m-emphasized,
+  .wb-type-node-l-emphasized {
+    font-weight: 600;
+  }
 }

From 1d2d20fc508266b776e1fa04f896f50f10c3b0a2 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Tue, 18 Aug 2026 17:47:36 +0200
Subject: [PATCH 02/20] feat(sdk): bundle Inter for the UI/Code type role
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Same rationale as Poppins — CSP-safe, GDPR-safe, air-gap-safe. Regular only,
matching the single UI/Code style.
---
 packages/sdk/package.json  | 1 +
 packages/sdk/src/index.css | 4 ++++
 pnpm-lock.yaml             | 8 ++++++++
 3 files changed, 13 insertions(+)

diff --git a/packages/sdk/package.json b/packages/sdk/package.json
index 1234c2c6e..368a60e8c 100644
--- a/packages/sdk/package.json
+++ b/packages/sdk/package.json
@@ -72,6 +72,7 @@
   "dependencies": {
     "@base-ui/react": "catalog:",
     "@cfworker/json-schema": "4.1.1",
+    "@fontsource/inter": "^5.3.0",
     "@fontsource/poppins": "^5.2.7",
     "@jsonforms/core": "^3.4.0",
     "@jsonforms/react": "^3.4.0",
diff --git a/packages/sdk/src/index.css b/packages/sdk/src/index.css
index c5fec53ae..6a71f20d4 100644
--- a/packages/sdk/src/index.css
+++ b/packages/sdk/src/index.css
@@ -20,6 +20,10 @@
 @import '@fontsource/poppins/latin-ext-600.css';
 @import '@fontsource/poppins/latin-ext-700.css';
 
+/* Inter serves the DS 2.0 UI/Code type role (wb-type-code), Regular only. */
+@import '@fontsource/inter/latin-400.css';
+@import '@fontsource/inter/latin-ext-400.css';
+
 @import '@workflowbuilder/ui/tokens.css';
 
 /* @workflowbuilder/ui styles arrive through the JS module graph - importing
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cd9df70b3..aff7414bd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -510,6 +510,9 @@ importers:
       '@cfworker/json-schema':
         specifier: 4.1.1
         version: 4.1.1
+      '@fontsource/inter':
+        specifier: ^5.3.0
+        version: 5.3.0
       '@fontsource/poppins':
         specifier: ^5.2.7
         version: 5.2.7
@@ -1874,6 +1877,9 @@ packages:
   '@floating-ui/utils@0.2.12':
     resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
 
+  '@fontsource/inter@5.3.0':
+    resolution: {integrity: sha512-RofMylZmjlJEfELXeNHFWBRcSs75rGU/6bV2S2jfnvv/3rPXPGe0LgUJTklcHZ9lM4OZmAVFhcJPnACfb91A3g==}
+
   '@fontsource/poppins@5.2.7':
     resolution: {integrity: sha512-6uQyPmseo4FgI97WIhA4yWRlNaoLk4vSDK/PyRwdqqZb5zAEuc+Kunt8JTMcsHYUEGYBtN15SNkMajMdqUSUmg==}
 
@@ -9646,6 +9652,8 @@ snapshots:
 
   '@floating-ui/utils@0.2.12': {}
 
+  '@fontsource/inter@5.3.0': {}
+
   '@fontsource/poppins@5.2.7': {}
 
   '@gerrit0/mini-shiki@3.23.0':

From c06272fdaf87f677db979ff40d27bbb618eeb4b1 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Tue, 18 Aug 2026 17:47:37 +0200
Subject: [PATCH 03/20] docs: add the typography page to the UI Library section

---
 apps/docs/astro.config.mjs                    |  1 +
 .../content/docs/ui-library/typography.mdx    | 58 +++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 apps/docs/src/content/docs/ui-library/typography.mdx

diff --git a/apps/docs/astro.config.mjs b/apps/docs/astro.config.mjs
index 0453e265c..1026dbbc2 100644
--- a/apps/docs/astro.config.mjs
+++ b/apps/docs/astro.config.mjs
@@ -178,6 +178,7 @@ export default defineConfig({
           items: [
             { label: 'Overview', link: '/ui-library/overview/' },
             { label: 'Design tokens', link: '/ui-library/design-tokens/' },
+            { label: 'Typography', link: '/ui-library/typography/' },
             { label: 'UI Components', autogenerate: { directory: 'ui-library/ui-components' } },
             { label: 'Diagram Components', autogenerate: { directory: 'ui-library/diagram-components' } },
           ],
diff --git a/apps/docs/src/content/docs/ui-library/typography.mdx b/apps/docs/src/content/docs/ui-library/typography.mdx
new file mode 100644
index 000000000..65043464d
--- /dev/null
+++ b/apps/docs/src/content/docs/ui-library/typography.mdx
@@ -0,0 +1,58 @@
+---
+title: Typography
+description: The DS 2.0 type roles shipped by @workflowbuilder/ui as wb-type-* utility classes.
+---
+
+`@workflowbuilder/ui` ships the Design System 2.0 type scale as utility
+classes: one class per text style, named `wb-type-{family}-{size}` with an
+optional `-emphasized` suffix. A class carries the complete style — family,
+size, weight, and line-height — so text never hard-codes font values.
+
+```html
+<h2 class="wb-type-headline-m">Workflow settings</h2>
+<p class="wb-type-body-m">Configure how each node runs.</p>
+<span class="wb-type-label-l-emphasized">Connection: active</span>
+```
+
+Two typefaces ship with the SDK bundle: **Poppins** for every UI role and
+**Inter** for the `wb-type-code` role. Emphasized maps to SemiBold (600),
+Regular to 400.
+
+## The scale
+
+| Family   | Used for                       | Classes (`wb-type-…`)                          | px                |
+| -------- | ------------------------------ | ---------------------------------------------- | ----------------- |
+| Display  | Hero moments, big empty states | `display-s` · `display-m` · `display-l`        | 24 · 28 · 32      |
+| Headline | Page titles, major sections    | `headline-s` · `headline-m` · `headline-l`     | 20 · 22 · 24      |
+| Title    | Card titles, group labels      | `title-s` · `title-m` · `title-l`              | 14 · 16 · 18      |
+| Body     | Running text, descriptions     | `body-s` · `body-m` · `body-l`                 | 12 · 14 · 16      |
+| Label    | Buttons, chips, captions       | `label-s` · `label-m` · `label-l` · `label-xl` | 10 · 12 · 14 · 16 |
+| Node     | Canvas node and port labels    | `node-s` · `node-m` · `node-l`                 | 11 · 13 · 16      |
+| UI/Code  | Code, token names, IDs         | `code` (Regular only)                          | 12                |
+
+Every family except UI/Code doubles with an `-emphasized` variant
+(`wb-type-title-m-emphasized`), for 39 styles total.
+
+Which role to reach for:
+
+| Context                         | Recommended role                 |
+| ------------------------------- | -------------------------------- |
+| Page / hero title               | `display-*` or `headline-l`      |
+| Major section heading           | `headline-s`/`-m` or `title-l`   |
+| Card or group title             | `title-s`/`-m`                   |
+| Running text and descriptions   | `body-m` (`body-s` for dense UI) |
+| Captions, helper text, metadata | `label-m`/`-l`                   |
+| Buttons and chips               | `label-l-emphasized`             |
+| Canvas node and port labels     | `node-s`/`-m`                    |
+| Code, token names, IDs          | `code`                           |
+
+## Font-size tokens
+
+Class font sizes reference the `--wb-font-size-*` primitives
+(`wb/font-size/NNN` in Figma, where `NNN` is px × 12.5; the CSS values are
+rem). Until the DS 2.0 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-h*`/`ax-public-p*` classes remain available; components
+move to `wb-type-*` as they are redesigned.

From 6c90bbc0d601b1b1207ca024ad0ef1a78137e11b Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Thu, 20 Aug 2026 11:12:14 +0200
Subject: [PATCH 04/20] chore(ui): drop internal ticket reference from the
 provisional-block comment

---
 packages/ui/src/styles/typography.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/styles/typography.css b/packages/ui/src/styles/typography.css
index 60d042427..0021d1a25 100644
--- a/packages/ui/src/styles/typography.css
+++ b/packages/ui/src/styles/typography.css
@@ -172,7 +172,7 @@
 
   :root {
     /* PROVISIONAL font-size primitives (wb/font-size/NNN, NNN = px × 12.5):
-       the DS 2.0 variables export (WB-487) will ship these in tokens.css and,
+       the DS 2.0 variables export will ship these in tokens.css and,
        being unlayered, will override this layered block — remove it then. */
     --wb-font-size-125: 0.625rem;
     --wb-font-size-137: 0.6875rem;

From 88ab1bba34e2e99134016d2dccc134a751f20e36 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Thu, 20 Aug 2026 13:26:51 +0200
Subject: [PATCH 05/20] fix(ui): typography review fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- wb-type-code sets the family on descendants too — the SDK's universal
  font-family rule would otherwise repaint nested elements in Poppins,
  defeating the one role that ships its own typeface.
- Font weights are order-independent: 400 and 600 live on disjoint selector
  lists instead of a base rule overridden later by source order (the repo
  already treats that hazard as a shipped bug class).
- The NNN = px x 12.5 formula is approximate for 137 and 162 (truncation) —
  say so; drop the false monospace claim from the UI/Code comment.
- sdk README documents the wb-type-* carve-out from --wb-font-family.
---
 .../content/docs/ui-library/typography.mdx    |  2 +-
 packages/sdk/README.md                        |  2 +-
 packages/ui/src/styles/typography.css         | 33 ++++++++++++++++---
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/apps/docs/src/content/docs/ui-library/typography.mdx b/apps/docs/src/content/docs/ui-library/typography.mdx
index 65043464d..1408901b6 100644
--- a/apps/docs/src/content/docs/ui-library/typography.mdx
+++ b/apps/docs/src/content/docs/ui-library/typography.mdx
@@ -49,7 +49,7 @@ Which role to reach for:
 ## Font-size tokens
 
 Class font sizes reference the `--wb-font-size-*` primitives
-(`wb/font-size/NNN` in Figma, where `NNN` is px × 12.5; the CSS values are
+(`wb/font-size/NNN` in Figma, where `NNN` ≈ px × 12.5, truncated; the CSS values are
 rem). Until the DS 2.0 token export ships them through
 `@workflowbuilder/ui/tokens.css`, the classes define these primitives
 themselves — the migration swaps the source without touching consumers.
diff --git a/packages/sdk/README.md b/packages/sdk/README.md
index 7ed4d2bb9..4e97e8198 100644
--- a/packages/sdk/README.md
+++ b/packages/sdk/README.md
@@ -210,7 +210,7 @@ The editor exposes a small set of CSS custom properties for top-level styling. O
 }
 ```
 
-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-font-family`, `--wb-transition`, plus scrollbar styling (`--wb-scroll-width`, `--wb-scroll-radius`, `--wb-scroll-thumb-color`, `--wb-scroll-track-color`). One deliberate carve-out: the `wb-type-*` typography classes from `@workflowbuilder/ui` carry their own font families (Poppins; Inter for `wb-type-code`) and do not follow `--wb-font-family` — each class reproduces a complete Figma text style.
 
 Deeper color and spacing customization (palette, semantic UI tokens) goes through the `--ax-*` token layer from `@workflowbuilder/ui`. Full guide: [Design system and customization](https://www.workflowbuilder.io/docs/overview/features/design-system-and-customization/).
 
diff --git a/packages/ui/src/styles/typography.css b/packages/ui/src/styles/typography.css
index 0021d1a25..1148aeb2f 100644
--- a/packages/ui/src/styles/typography.css
+++ b/packages/ui/src/styles/typography.css
@@ -171,7 +171,7 @@
      Naming: wb-type-{family}-{size}[-emphasized]; Emphasized = SemiBold 600. */
 
   :root {
-    /* PROVISIONAL font-size primitives (wb/font-size/NNN, NNN = px × 12.5):
+    /* PROVISIONAL font-size primitives (wb/font-size/NNN, NNN ≈ px × 12.5, truncated):
        the DS 2.0 variables export will ship these in tokens.css and,
        being unlayered, will override this layered block — remove it then. */
     --wb-font-size-125: 0.625rem;
@@ -227,11 +227,36 @@
   .wb-type-node-m-emphasized,
   .wb-type-node-l-emphasized {
     font-family: 'Poppins', system-ui, sans-serif;
-    font-weight: 400;
   }
 
-  .wb-type-code {
+  /* Descendants too: the SDK sets font-family on every element via a
+     universal selector, which would otherwise override the inherited family
+     inside a code-role element. */
+  .wb-type-code,
+  .wb-type-code * {
     font-family: 'Inter', system-ui, sans-serif;
+  }
+
+  .wb-type-display-s,
+  .wb-type-display-m,
+  .wb-type-display-l,
+  .wb-type-headline-s,
+  .wb-type-headline-m,
+  .wb-type-headline-l,
+  .wb-type-title-s,
+  .wb-type-title-m,
+  .wb-type-title-l,
+  .wb-type-body-s,
+  .wb-type-body-m,
+  .wb-type-body-l,
+  .wb-type-label-s,
+  .wb-type-label-m,
+  .wb-type-label-l,
+  .wb-type-label-xl,
+  .wb-type-node-s,
+  .wb-type-node-m,
+  .wb-type-node-l,
+  .wb-type-code {
     font-weight: 400;
   }
 
@@ -361,7 +386,7 @@
     line-height: 140%;
   }
 
-  /* UI/Code — monospace role for code, token names, IDs (Regular only) */
+  /* UI/Code — code, token names, IDs (Regular only) */
 
   .wb-type-code {
     font-size: var(--wb-font-size-150);

From 29fca06f2b2f16d7bc29d35b8c6802d349db4283 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Thu, 20 Aug 2026 13:41:50 +0200
Subject: [PATCH 06/20] feat(ui): ship Poppins and Inter with the ui package
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The wb-type-* classes declare families the package did not deliver — a
standalone consumer silently fell back to system-ui. The fontsource imports
move from the SDK stylesheet to a ui fonts.css entry on the root barrel
(layered via import layer(), matching the built-css guard), with the
CSP/GDPR/air-gap bundling rationale carried along. The SDK inherits the
same 12 font faces through the JS module graph — no duplication, and its
own fontsource dependencies are gone.
---
 .changeset/wb-488-type-roles.md               |  2 +-
 .../content/docs/ui-library/typography.mdx    |  2 +-
 packages/sdk/package.json                     |  2 --
 packages/sdk/src/index.css                    | 20 ++----------------
 packages/ui/src/index.ts                      |  1 +
 packages/ui/src/styles/fonts.css              | 21 +++++++++++++++++++
 pnpm-lock.yaml                                | 16 --------------
 7 files changed, 26 insertions(+), 38 deletions(-)
 create mode 100644 packages/ui/src/styles/fonts.css

diff --git a/.changeset/wb-488-type-roles.md b/.changeset/wb-488-type-roles.md
index 0f10f973d..aa4c4b8ed 100644
--- a/.changeset/wb-488-type-roles.md
+++ b/.changeset/wb-488-type-roles.md
@@ -3,4 +3,4 @@
 '@workflowbuilder/sdk': minor
 ---
 
-Add the Design System 2.0 type roles as `wb-type-{family}-{size}[-emphasized]` utility classes (39 styles: Display, Headline, Title, Body, Label, Node, UI/Code) in `@workflowbuilder/ui`, and bundle Inter (Regular) in the SDK stylesheet for the `wb-type-code` role. Existing `ax-public-*` typography classes are unchanged.
+Add the Design System 2.0 type roles as `wb-type-{family}-{size}[-emphasized]` utility classes (39 styles: Display, Headline, Title, Body, Label, Node, UI/Code) in `@workflowbuilder/ui`, Poppins and Inter (for the `wb-type-code` role) now ship with `@workflowbuilder/ui` itself, so the classes work standalone; the SDK inherits the fonts through the UI package instead of bundling its own. Existing `ax-public-*` typography classes are unchanged.
diff --git a/apps/docs/src/content/docs/ui-library/typography.mdx b/apps/docs/src/content/docs/ui-library/typography.mdx
index 1408901b6..c3899db33 100644
--- a/apps/docs/src/content/docs/ui-library/typography.mdx
+++ b/apps/docs/src/content/docs/ui-library/typography.mdx
@@ -14,7 +14,7 @@ size, weight, and line-height — so text never hard-codes font values.
 <span class="wb-type-label-l-emphasized">Connection: active</span>
 ```
 
-Two typefaces ship with the SDK bundle: **Poppins** for every UI role and
+Two typefaces ship with `@workflowbuilder/ui` itself (via the root import; subpath-only consumers load them independently): **Poppins** for every UI role and
 **Inter** for the `wb-type-code` role. Emphasized maps to SemiBold (600),
 Regular to 400.
 
diff --git a/packages/sdk/package.json b/packages/sdk/package.json
index 368a60e8c..e8d8abe32 100644
--- a/packages/sdk/package.json
+++ b/packages/sdk/package.json
@@ -72,8 +72,6 @@
   "dependencies": {
     "@base-ui/react": "catalog:",
     "@cfworker/json-schema": "4.1.1",
-    "@fontsource/inter": "^5.3.0",
-    "@fontsource/poppins": "^5.2.7",
     "@jsonforms/core": "^3.4.0",
     "@jsonforms/react": "^3.4.0",
     "@phosphor-icons/react": "^2.1.7",
diff --git a/packages/sdk/src/index.css b/packages/sdk/src/index.css
index 6a71f20d4..68f45deec 100644
--- a/packages/sdk/src/index.css
+++ b/packages/sdk/src/index.css
@@ -6,24 +6,8 @@
    See packages/ui/css-layers.md. */
 @layer ui.base, ui.component;
 
-/* Poppins is bundled rather than fetched from a CDN: strict CSPs block the
-   request, the pre-consent IP leak breaks GDPR flows, and air-gapped
-   deployments have no outbound internet. */
-@import '@fontsource/poppins/latin-300.css';
-@import '@fontsource/poppins/latin-400.css';
-@import '@fontsource/poppins/latin-500.css';
-@import '@fontsource/poppins/latin-600.css';
-@import '@fontsource/poppins/latin-700.css';
-@import '@fontsource/poppins/latin-ext-300.css';
-@import '@fontsource/poppins/latin-ext-400.css';
-@import '@fontsource/poppins/latin-ext-500.css';
-@import '@fontsource/poppins/latin-ext-600.css';
-@import '@fontsource/poppins/latin-ext-700.css';
-
-/* Inter serves the DS 2.0 UI/Code type role (wb-type-code), Regular only. */
-@import '@fontsource/inter/latin-400.css';
-@import '@fontsource/inter/latin-ext-400.css';
-
+/* Poppins and Inter ship with @workflowbuilder/ui (next to the wb-type-*
+   classes that require them) and arrive through the JS module graph. */
 @import '@workflowbuilder/ui/tokens.css';
 
 /* @workflowbuilder/ui styles arrive through the JS module graph - importing
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 66c82ded0..f87f917a7 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,3 +1,4 @@
+import './styles/fonts.css';
 import './styles/globals.css';
 import './styles/layers.css';
 import './styles/typography.css';
diff --git a/packages/ui/src/styles/fonts.css b/packages/ui/src/styles/fonts.css
new file mode 100644
index 000000000..2eeaae4aa
--- /dev/null
+++ b/packages/ui/src/styles/fonts.css
@@ -0,0 +1,21 @@
+/* The typefaces behind the wb-type-* classes ship with this package, bundled
+   rather than fetched from a CDN: strict CSPs block the request, the
+   pre-consent IP leak breaks GDPR flows, and air-gapped deployments have no
+   outbound internet. Vite inlines these imports (lib mode embeds the files
+   as base64, exactly as the SDK bundle always did); they reach consumers
+   through the JS module graph via the root barrel, so subpath-only
+   consumers must load the families themselves. */
+@import '@fontsource/poppins/latin-300.css' layer(ui.base);
+@import '@fontsource/poppins/latin-400.css' layer(ui.base);
+@import '@fontsource/poppins/latin-500.css' layer(ui.base);
+@import '@fontsource/poppins/latin-600.css' layer(ui.base);
+@import '@fontsource/poppins/latin-700.css' layer(ui.base);
+@import '@fontsource/poppins/latin-ext-300.css' layer(ui.base);
+@import '@fontsource/poppins/latin-ext-400.css' layer(ui.base);
+@import '@fontsource/poppins/latin-ext-500.css' layer(ui.base);
+@import '@fontsource/poppins/latin-ext-600.css' layer(ui.base);
+@import '@fontsource/poppins/latin-ext-700.css' layer(ui.base);
+
+/* Inter serves the UI/Code type role (wb-type-code), Regular only. */
+@import '@fontsource/inter/latin-400.css' layer(ui.base);
+@import '@fontsource/inter/latin-ext-400.css' layer(ui.base);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aff7414bd..968c229a3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -510,12 +510,6 @@ importers:
       '@cfworker/json-schema':
         specifier: 4.1.1
         version: 4.1.1
-      '@fontsource/inter':
-        specifier: ^5.3.0
-        version: 5.3.0
-      '@fontsource/poppins':
-        specifier: ^5.2.7
-        version: 5.2.7
       '@jsonforms/core':
         specifier: ^3.4.0
         version: 3.5.1
@@ -1877,12 +1871,6 @@ packages:
   '@floating-ui/utils@0.2.12':
     resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
 
-  '@fontsource/inter@5.3.0':
-    resolution: {integrity: sha512-RofMylZmjlJEfELXeNHFWBRcSs75rGU/6bV2S2jfnvv/3rPXPGe0LgUJTklcHZ9lM4OZmAVFhcJPnACfb91A3g==}
-
-  '@fontsource/poppins@5.2.7':
-    resolution: {integrity: sha512-6uQyPmseo4FgI97WIhA4yWRlNaoLk4vSDK/PyRwdqqZb5zAEuc+Kunt8JTMcsHYUEGYBtN15SNkMajMdqUSUmg==}
-
   '@gerrit0/mini-shiki@3.23.0':
     resolution: {integrity: sha512-bEMORlG0cqdjVyCEuU0cDQbORWX+kYCeo0kV1lbxF5bt4r7SID2l9bqsxJEM0zndaxpOUT7riCyIVEuqq/Ynxg==}
 
@@ -9652,10 +9640,6 @@ snapshots:
 
   '@floating-ui/utils@0.2.12': {}
 
-  '@fontsource/inter@5.3.0': {}
-
-  '@fontsource/poppins@5.2.7': {}
-
   '@gerrit0/mini-shiki@3.23.0':
     dependencies:
       '@shikijs/engine-oniguruma': 3.23.0

From 38cb8ec391f9c7c39fec71ac437ce8f1d376f233 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Thu, 20 Aug 2026 14:45:19 +0200
Subject: [PATCH 07/20] refactor(ui): rename the type-role classes to wb-text-*

In code, "type" reads as a data type before it reads as typography;
text-* is the established CSS convention for typographic utilities. The
classes have no consumers yet, so the rename is free.
---
 .changeset/wb-488-type-roles.md               |   2 +-
 .../content/docs/ui-library/typography.mdx    |  18 +-
 packages/sdk/README.md                        |   2 +-
 packages/sdk/src/index.css                    |   2 +-
 packages/ui/src/styles/fonts.css              |   4 +-
 packages/ui/src/styles/typography.css         | 238 +++++++++---------
 6 files changed, 133 insertions(+), 133 deletions(-)

diff --git a/.changeset/wb-488-type-roles.md b/.changeset/wb-488-type-roles.md
index aa4c4b8ed..8596626c1 100644
--- a/.changeset/wb-488-type-roles.md
+++ b/.changeset/wb-488-type-roles.md
@@ -3,4 +3,4 @@
 '@workflowbuilder/sdk': minor
 ---
 
-Add the Design System 2.0 type roles as `wb-type-{family}-{size}[-emphasized]` utility classes (39 styles: Display, Headline, Title, Body, Label, Node, UI/Code) in `@workflowbuilder/ui`, Poppins and Inter (for the `wb-type-code` role) now ship with `@workflowbuilder/ui` itself, so the classes work standalone; the SDK inherits the fonts through the UI package instead of bundling its own. Existing `ax-public-*` typography classes are unchanged.
+Add the Design System 2.0 type roles as `wb-text-{family}-{size}[-emphasized]` utility classes (39 styles: Display, Headline, Title, Body, Label, Node, UI/Code) in `@workflowbuilder/ui`, Poppins and Inter (for the `wb-text-code` role) now ship with `@workflowbuilder/ui` itself, so the classes work standalone; the SDK inherits the fonts through the UI package instead of bundling its own. Existing `ax-public-*` typography classes are unchanged.
diff --git a/apps/docs/src/content/docs/ui-library/typography.mdx b/apps/docs/src/content/docs/ui-library/typography.mdx
index c3899db33..7dd1c1118 100644
--- a/apps/docs/src/content/docs/ui-library/typography.mdx
+++ b/apps/docs/src/content/docs/ui-library/typography.mdx
@@ -1,26 +1,26 @@
 ---
 title: Typography
-description: The DS 2.0 type roles shipped by @workflowbuilder/ui as wb-type-* utility classes.
+description: The DS 2.0 type roles shipped by @workflowbuilder/ui as wb-text-* utility classes.
 ---
 
 `@workflowbuilder/ui` ships the Design System 2.0 type scale as utility
-classes: one class per text style, named `wb-type-{family}-{size}` with an
+classes: one class per text style, named `wb-text-{family}-{size}` with an
 optional `-emphasized` suffix. A class carries the complete style — family,
 size, weight, and line-height — so text never hard-codes font values.
 
 ```html
-<h2 class="wb-type-headline-m">Workflow settings</h2>
-<p class="wb-type-body-m">Configure how each node runs.</p>
-<span class="wb-type-label-l-emphasized">Connection: active</span>
+<h2 class="wb-text-headline-m">Workflow settings</h2>
+<p class="wb-text-body-m">Configure how each node runs.</p>
+<span class="wb-text-label-l-emphasized">Connection: active</span>
 ```
 
 Two typefaces ship with `@workflowbuilder/ui` itself (via the root import; subpath-only consumers load them independently): **Poppins** for every UI role and
-**Inter** for the `wb-type-code` role. Emphasized maps to SemiBold (600),
+**Inter** for the `wb-text-code` role. Emphasized maps to SemiBold (600),
 Regular to 400.
 
 ## The scale
 
-| Family   | Used for                       | Classes (`wb-type-…`)                          | px                |
+| Family   | Used for                       | Classes (`wb-text-…`)                          | px                |
 | -------- | ------------------------------ | ---------------------------------------------- | ----------------- |
 | Display  | Hero moments, big empty states | `display-s` · `display-m` · `display-l`        | 24 · 28 · 32      |
 | Headline | Page titles, major sections    | `headline-s` · `headline-m` · `headline-l`     | 20 · 22 · 24      |
@@ -31,7 +31,7 @@ Regular to 400.
 | UI/Code  | Code, token names, IDs         | `code` (Regular only)                          | 12                |
 
 Every family except UI/Code doubles with an `-emphasized` variant
-(`wb-type-title-m-emphasized`), for 39 styles total.
+(`wb-text-title-m-emphasized`), for 39 styles total.
 
 Which role to reach for:
 
@@ -55,4 +55,4 @@ rem). Until the DS 2.0 token export ships them through
 themselves — the migration swaps the source without touching consumers.
 
 The pre-2.0 `ax-public-h*`/`ax-public-p*` classes remain available; components
-move to `wb-type-*` as they are redesigned.
+move to `wb-text-*` as they are redesigned.
diff --git a/packages/sdk/README.md b/packages/sdk/README.md
index 4e97e8198..006017be4 100644
--- a/packages/sdk/README.md
+++ b/packages/sdk/README.md
@@ -210,7 +210,7 @@ The editor exposes a small set of CSS custom properties for top-level styling. O
 }
 ```
 
-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`). One deliberate carve-out: the `wb-type-*` typography classes from `@workflowbuilder/ui` carry their own font families (Poppins; Inter for `wb-type-code`) and do not follow `--wb-font-family` — each class reproduces a complete Figma text style.
+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`). One deliberate carve-out: the `wb-text-*` typography classes from `@workflowbuilder/ui` carry their own font families (Poppins; Inter for `wb-text-code`) and do not follow `--wb-font-family` — each class reproduces a complete Figma text style.
 
 Deeper color and spacing customization (palette, semantic UI tokens) goes through the `--ax-*` token layer from `@workflowbuilder/ui`. Full guide: [Design system and customization](https://www.workflowbuilder.io/docs/overview/features/design-system-and-customization/).
 
diff --git a/packages/sdk/src/index.css b/packages/sdk/src/index.css
index 68f45deec..559dec856 100644
--- a/packages/sdk/src/index.css
+++ b/packages/sdk/src/index.css
@@ -6,7 +6,7 @@
    See packages/ui/css-layers.md. */
 @layer ui.base, ui.component;
 
-/* Poppins and Inter ship with @workflowbuilder/ui (next to the wb-type-*
+/* Poppins and Inter ship with @workflowbuilder/ui (next to the wb-text-*
    classes that require them) and arrive through the JS module graph. */
 @import '@workflowbuilder/ui/tokens.css';
 
diff --git a/packages/ui/src/styles/fonts.css b/packages/ui/src/styles/fonts.css
index 2eeaae4aa..99357e0f9 100644
--- a/packages/ui/src/styles/fonts.css
+++ b/packages/ui/src/styles/fonts.css
@@ -1,4 +1,4 @@
-/* The typefaces behind the wb-type-* classes ship with this package, bundled
+/* The typefaces behind the wb-text-* classes ship with this package, bundled
    rather than fetched from a CDN: strict CSPs block the request, the
    pre-consent IP leak breaks GDPR flows, and air-gapped deployments have no
    outbound internet. Vite inlines these imports (lib mode embeds the files
@@ -16,6 +16,6 @@
 @import '@fontsource/poppins/latin-ext-600.css' layer(ui.base);
 @import '@fontsource/poppins/latin-ext-700.css' layer(ui.base);
 
-/* Inter serves the UI/Code type role (wb-type-code), Regular only. */
+/* Inter serves the UI/Code type role (wb-text-code), Regular only. */
 @import '@fontsource/inter/latin-400.css' layer(ui.base);
 @import '@fontsource/inter/latin-ext-400.css' layer(ui.base);
diff --git a/packages/ui/src/styles/typography.css b/packages/ui/src/styles/typography.css
index 1148aeb2f..d463f1429 100644
--- a/packages/ui/src/styles/typography.css
+++ b/packages/ui/src/styles/typography.css
@@ -168,7 +168,7 @@
   }
 
   /* DS 2.0 type roles — one class per text style from the Typography guidelines.
-     Naming: wb-type-{family}-{size}[-emphasized]; Emphasized = SemiBold 600. */
+     Naming: wb-text-{family}-{size}[-emphasized]; Emphasized = SemiBold 600. */
 
   :root {
     /* PROVISIONAL font-size primitives (wb/font-size/NNN, NNN ≈ px × 12.5, truncated):
@@ -188,230 +188,230 @@
     --wb-font-size-400: 2rem;
   }
 
-  .wb-type-display-s,
-  .wb-type-display-m,
-  .wb-type-display-l,
-  .wb-type-headline-s,
-  .wb-type-headline-m,
-  .wb-type-headline-l,
-  .wb-type-title-s,
-  .wb-type-title-m,
-  .wb-type-title-l,
-  .wb-type-body-s,
-  .wb-type-body-m,
-  .wb-type-body-l,
-  .wb-type-label-s,
-  .wb-type-label-m,
-  .wb-type-label-l,
-  .wb-type-label-xl,
-  .wb-type-node-s,
-  .wb-type-node-m,
-  .wb-type-node-l,
-  .wb-type-display-s-emphasized,
-  .wb-type-display-m-emphasized,
-  .wb-type-display-l-emphasized,
-  .wb-type-headline-s-emphasized,
-  .wb-type-headline-m-emphasized,
-  .wb-type-headline-l-emphasized,
-  .wb-type-title-s-emphasized,
-  .wb-type-title-m-emphasized,
-  .wb-type-title-l-emphasized,
-  .wb-type-body-s-emphasized,
-  .wb-type-body-m-emphasized,
-  .wb-type-body-l-emphasized,
-  .wb-type-label-s-emphasized,
-  .wb-type-label-m-emphasized,
-  .wb-type-label-l-emphasized,
-  .wb-type-label-xl-emphasized,
-  .wb-type-node-s-emphasized,
-  .wb-type-node-m-emphasized,
-  .wb-type-node-l-emphasized {
+  .wb-text-display-s,
+  .wb-text-display-m,
+  .wb-text-display-l,
+  .wb-text-headline-s,
+  .wb-text-headline-m,
+  .wb-text-headline-l,
+  .wb-text-title-s,
+  .wb-text-title-m,
+  .wb-text-title-l,
+  .wb-text-body-s,
+  .wb-text-body-m,
+  .wb-text-body-l,
+  .wb-text-label-s,
+  .wb-text-label-m,
+  .wb-text-label-l,
+  .wb-text-label-xl,
+  .wb-text-node-s,
+  .wb-text-node-m,
+  .wb-text-node-l,
+  .wb-text-display-s-emphasized,
+  .wb-text-display-m-emphasized,
+  .wb-text-display-l-emphasized,
+  .wb-text-headline-s-emphasized,
+  .wb-text-headline-m-emphasized,
+  .wb-text-headline-l-emphasized,
+  .wb-text-title-s-emphasized,
+  .wb-text-title-m-emphasized,
+  .wb-text-title-l-emphasized,
+  .wb-text-body-s-emphasized,
+  .wb-text-body-m-emphasized,
+  .wb-text-body-l-emphasized,
+  .wb-text-label-s-emphasized,
+  .wb-text-label-m-emphasized,
+  .wb-text-label-l-emphasized,
+  .wb-text-label-xl-emphasized,
+  .wb-text-node-s-emphasized,
+  .wb-text-node-m-emphasized,
+  .wb-text-node-l-emphasized {
     font-family: 'Poppins', system-ui, sans-serif;
   }
 
   /* Descendants too: the SDK sets font-family on every element via a
      universal selector, which would otherwise override the inherited family
      inside a code-role element. */
-  .wb-type-code,
-  .wb-type-code * {
+  .wb-text-code,
+  .wb-text-code * {
     font-family: 'Inter', system-ui, sans-serif;
   }
 
-  .wb-type-display-s,
-  .wb-type-display-m,
-  .wb-type-display-l,
-  .wb-type-headline-s,
-  .wb-type-headline-m,
-  .wb-type-headline-l,
-  .wb-type-title-s,
-  .wb-type-title-m,
-  .wb-type-title-l,
-  .wb-type-body-s,
-  .wb-type-body-m,
-  .wb-type-body-l,
-  .wb-type-label-s,
-  .wb-type-label-m,
-  .wb-type-label-l,
-  .wb-type-label-xl,
-  .wb-type-node-s,
-  .wb-type-node-m,
-  .wb-type-node-l,
-  .wb-type-code {
+  .wb-text-display-s,
+  .wb-text-display-m,
+  .wb-text-display-l,
+  .wb-text-headline-s,
+  .wb-text-headline-m,
+  .wb-text-headline-l,
+  .wb-text-title-s,
+  .wb-text-title-m,
+  .wb-text-title-l,
+  .wb-text-body-s,
+  .wb-text-body-m,
+  .wb-text-body-l,
+  .wb-text-label-s,
+  .wb-text-label-m,
+  .wb-text-label-l,
+  .wb-text-label-xl,
+  .wb-text-node-s,
+  .wb-text-node-m,
+  .wb-text-node-l,
+  .wb-text-code {
     font-weight: 400;
   }
 
   /* Display — hero and marketing moments */
 
-  .wb-type-display-s,
-  .wb-type-display-s-emphasized {
+  .wb-text-display-s,
+  .wb-text-display-s-emphasized {
     font-size: var(--wb-font-size-300);
     line-height: 130%;
   }
 
-  .wb-type-display-m,
-  .wb-type-display-m-emphasized {
+  .wb-text-display-m,
+  .wb-text-display-m-emphasized {
     font-size: var(--wb-font-size-350);
     line-height: 120%;
   }
 
-  .wb-type-display-l,
-  .wb-type-display-l-emphasized {
+  .wb-text-display-l,
+  .wb-text-display-l-emphasized {
     font-size: var(--wb-font-size-400);
     line-height: 120%;
   }
 
   /* Headline — page and section headings */
 
-  .wb-type-headline-s,
-  .wb-type-headline-s-emphasized {
+  .wb-text-headline-s,
+  .wb-text-headline-s-emphasized {
     font-size: var(--wb-font-size-250);
     line-height: 130%;
   }
 
-  .wb-type-headline-m,
-  .wb-type-headline-m-emphasized {
+  .wb-text-headline-m,
+  .wb-text-headline-m-emphasized {
     font-size: var(--wb-font-size-275);
     line-height: 130%;
   }
 
-  .wb-type-headline-l,
-  .wb-type-headline-l-emphasized {
+  .wb-text-headline-l,
+  .wb-text-headline-l-emphasized {
     font-size: var(--wb-font-size-300);
     line-height: 130%;
   }
 
   /* Title — card and group titles */
 
-  .wb-type-title-s,
-  .wb-type-title-s-emphasized {
+  .wb-text-title-s,
+  .wb-text-title-s-emphasized {
     font-size: var(--wb-font-size-175);
     line-height: 140%;
   }
 
-  .wb-type-title-m,
-  .wb-type-title-m-emphasized {
+  .wb-text-title-m,
+  .wb-text-title-m-emphasized {
     font-size: var(--wb-font-size-200);
     line-height: 140%;
   }
 
-  .wb-type-title-l,
-  .wb-type-title-l-emphasized {
+  .wb-text-title-l,
+  .wb-text-title-l-emphasized {
     font-size: var(--wb-font-size-225);
     line-height: 130%;
   }
 
   /* Body — running text */
 
-  .wb-type-body-s,
-  .wb-type-body-s-emphasized {
+  .wb-text-body-s,
+  .wb-text-body-s-emphasized {
     font-size: var(--wb-font-size-150);
     line-height: 130%;
   }
 
-  .wb-type-body-m,
-  .wb-type-body-m-emphasized {
+  .wb-text-body-m,
+  .wb-text-body-m-emphasized {
     font-size: var(--wb-font-size-175);
     line-height: 140%;
   }
 
-  .wb-type-body-l,
-  .wb-type-body-l-emphasized {
+  .wb-text-body-l,
+  .wb-text-body-l-emphasized {
     font-size: var(--wb-font-size-200);
     line-height: 140%;
   }
 
   /* Label — buttons, chips, captions */
 
-  .wb-type-label-s,
-  .wb-type-label-s-emphasized {
+  .wb-text-label-s,
+  .wb-text-label-s-emphasized {
     font-size: var(--wb-font-size-125);
     line-height: 100%;
   }
 
-  .wb-type-label-m,
-  .wb-type-label-m-emphasized {
+  .wb-text-label-m,
+  .wb-text-label-m-emphasized {
     font-size: var(--wb-font-size-150);
     line-height: 100%;
   }
 
-  .wb-type-label-l,
-  .wb-type-label-l-emphasized {
+  .wb-text-label-l,
+  .wb-text-label-l-emphasized {
     font-size: var(--wb-font-size-175);
     line-height: 100%;
   }
 
-  .wb-type-label-xl,
-  .wb-type-label-xl-emphasized {
+  .wb-text-label-xl,
+  .wb-text-label-xl-emphasized {
     font-size: var(--wb-font-size-200);
     line-height: 100%;
   }
 
   /* Node — canvas node and port labels (WB-specific) */
 
-  .wb-type-node-s,
-  .wb-type-node-s-emphasized {
+  .wb-text-node-s,
+  .wb-text-node-s-emphasized {
     font-size: var(--wb-font-size-137);
     line-height: 130%;
   }
 
-  .wb-type-node-m,
-  .wb-type-node-m-emphasized {
+  .wb-text-node-m,
+  .wb-text-node-m-emphasized {
     font-size: var(--wb-font-size-162);
     line-height: 140%;
   }
 
-  .wb-type-node-l,
-  .wb-type-node-l-emphasized {
+  .wb-text-node-l,
+  .wb-text-node-l-emphasized {
     font-size: var(--wb-font-size-200);
     line-height: 140%;
   }
 
   /* UI/Code — code, token names, IDs (Regular only) */
 
-  .wb-type-code {
+  .wb-text-code {
     font-size: var(--wb-font-size-150);
     line-height: 130%;
   }
 
-  .wb-type-display-s-emphasized,
-  .wb-type-display-m-emphasized,
-  .wb-type-display-l-emphasized,
-  .wb-type-headline-s-emphasized,
-  .wb-type-headline-m-emphasized,
-  .wb-type-headline-l-emphasized,
-  .wb-type-title-s-emphasized,
-  .wb-type-title-m-emphasized,
-  .wb-type-title-l-emphasized,
-  .wb-type-body-s-emphasized,
-  .wb-type-body-m-emphasized,
-  .wb-type-body-l-emphasized,
-  .wb-type-label-s-emphasized,
-  .wb-type-label-m-emphasized,
-  .wb-type-label-l-emphasized,
-  .wb-type-label-xl-emphasized,
-  .wb-type-node-s-emphasized,
-  .wb-type-node-m-emphasized,
-  .wb-type-node-l-emphasized {
+  .wb-text-display-s-emphasized,
+  .wb-text-display-m-emphasized,
+  .wb-text-display-l-emphasized,
+  .wb-text-headline-s-emphasized,
+  .wb-text-headline-m-emphasized,
+  .wb-text-headline-l-emphasized,
+  .wb-text-title-s-emphasized,
+  .wb-text-title-m-emphasized,
+  .wb-text-title-l-emphasized,
+  .wb-text-body-s-emphasized,
+  .wb-text-body-m-emphasized,
+  .wb-text-body-l-emphasized,
+  .wb-text-label-s-emphasized,
+  .wb-text-label-m-emphasized,
+  .wb-text-label-l-emphasized,
+  .wb-text-label-xl-emphasized,
+  .wb-text-node-s-emphasized,
+  .wb-text-node-m-emphasized,
+  .wb-text-node-l-emphasized {
     font-weight: 600;
   }
 }

From e2dbafe2dff5134a7b9f572aca5b6503c4aba8e0 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Thu, 20 Aug 2026 14:48:02 +0200
Subject: [PATCH 08/20] docs(ui): prune paraphrase comments from the typography
 layer

The per-family group headers restated the class names; the used-for prose
lives in the docs page. What stays carries information the code cannot:
the provisional block's lifecycle, the descendant-selector workaround, the
naming scheme with the Emphasized=600 mapping, and the deliberate absence
of an emphasized UI/Code variant.
---
 packages/ui/src/styles/typography.css | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/packages/ui/src/styles/typography.css b/packages/ui/src/styles/typography.css
index d463f1429..48cbcabb3 100644
--- a/packages/ui/src/styles/typography.css
+++ b/packages/ui/src/styles/typography.css
@@ -260,8 +260,6 @@
     font-weight: 400;
   }
 
-  /* Display — hero and marketing moments */
-
   .wb-text-display-s,
   .wb-text-display-s-emphasized {
     font-size: var(--wb-font-size-300);
@@ -280,8 +278,6 @@
     line-height: 120%;
   }
 
-  /* Headline — page and section headings */
-
   .wb-text-headline-s,
   .wb-text-headline-s-emphasized {
     font-size: var(--wb-font-size-250);
@@ -300,8 +296,6 @@
     line-height: 130%;
   }
 
-  /* Title — card and group titles */
-
   .wb-text-title-s,
   .wb-text-title-s-emphasized {
     font-size: var(--wb-font-size-175);
@@ -320,8 +314,6 @@
     line-height: 130%;
   }
 
-  /* Body — running text */
-
   .wb-text-body-s,
   .wb-text-body-s-emphasized {
     font-size: var(--wb-font-size-150);
@@ -340,8 +332,6 @@
     line-height: 140%;
   }
 
-  /* Label — buttons, chips, captions */
-
   .wb-text-label-s,
   .wb-text-label-s-emphasized {
     font-size: var(--wb-font-size-125);
@@ -366,8 +356,6 @@
     line-height: 100%;
   }
 
-  /* Node — canvas node and port labels (WB-specific) */
-
   .wb-text-node-s,
   .wb-text-node-s-emphasized {
     font-size: var(--wb-font-size-137);
@@ -386,8 +374,7 @@
     line-height: 140%;
   }
 
-  /* UI/Code — code, token names, IDs (Regular only) */
-
+  /* No emphasized variant by design — UI/Code ships Regular only. */
   .wb-text-code {
     font-size: var(--wb-font-size-150);
     line-height: 130%;

From 5c41ed6987507cd4efafbea61fad45e9bd453fd0 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Thu, 20 Aug 2026 15:13:41 +0200
Subject: [PATCH 09/20] refactor(ui): move the provisional font-size primitives
 to their own file

A to-be-deleted block hiding inside typography.css relies on someone
reading the comment; a dedicated provisional.css is wired into both
distribution channels (the barrel import and the combine-css-bundle
globals list), so deleting the file without cleaning the wire-ups fails
the build in two places instead of silently shipping stale values.
---
 packages/ui/combine-css-bundle.mts     |  2 +-
 packages/ui/src/index.ts               |  1 +
 packages/ui/src/styles/provisional.css | 23 +++++++++++++++++++++++
 packages/ui/src/styles/typography.css  | 22 +++-------------------
 4 files changed, 28 insertions(+), 20 deletions(-)
 create mode 100644 packages/ui/src/styles/provisional.css

diff --git a/packages/ui/combine-css-bundle.mts b/packages/ui/combine-css-bundle.mts
index 351944def..0372c4d1d 100644
--- a/packages/ui/combine-css-bundle.mts
+++ b/packages/ui/combine-css-bundle.mts
@@ -75,7 +75,7 @@ function writeCombinedStylesheet(distributionDirectory: string, stylesDirectory:
 }
 
 function writeGlobalStylesheet(distributionDirectory: string, stylesDirectory: string) {
-  const globals = ['layers.css', 'globals.css', 'typography.css']
+  const globals = ['layers.css', 'globals.css', 'provisional.css', 'typography.css']
     .map((file) => fs.readFileSync(path.resolve(stylesDirectory, file), 'utf8'))
     .join('\n');
 
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index f87f917a7..486c04fc6 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,6 +1,7 @@
 import './styles/fonts.css';
 import './styles/globals.css';
 import './styles/layers.css';
+import './styles/provisional.css';
 import './styles/typography.css';
 
 export * from './components/accordion';
diff --git a/packages/ui/src/styles/provisional.css b/packages/ui/src/styles/provisional.css
new file mode 100644
index 000000000..a91394432
--- /dev/null
+++ b/packages/ui/src/styles/provisional.css
@@ -0,0 +1,23 @@
+/* PROVISIONAL — this whole file is scheduled for deletion.
+   Tokens the DS 2.0 Figma export does not ship yet, defined here so the
+   classes that consume them work today. When the export lands in tokens.css
+   its unlayered definitions override this layered block automatically; then
+   delete this file together with its two wire-ups (src/index.ts import and
+   the combine-css-bundle globals list) — both fail the build if forgotten. */
+@layer ui.base {
+  :root {
+    /* wb/font-size/NNN, NNN ≈ px × 12.5 (truncated). */
+    --wb-font-size-125: 0.625rem;
+    --wb-font-size-137: 0.6875rem;
+    --wb-font-size-150: 0.75rem;
+    --wb-font-size-162: 0.8125rem;
+    --wb-font-size-175: 0.875rem;
+    --wb-font-size-200: 1rem;
+    --wb-font-size-225: 1.125rem;
+    --wb-font-size-250: 1.25rem;
+    --wb-font-size-275: 1.375rem;
+    --wb-font-size-300: 1.5rem;
+    --wb-font-size-350: 1.75rem;
+    --wb-font-size-400: 2rem;
+  }
+}
diff --git a/packages/ui/src/styles/typography.css b/packages/ui/src/styles/typography.css
index 48cbcabb3..358e10b8c 100644
--- a/packages/ui/src/styles/typography.css
+++ b/packages/ui/src/styles/typography.css
@@ -168,25 +168,9 @@
   }
 
   /* DS 2.0 type roles — one class per text style from the Typography guidelines.
-     Naming: wb-text-{family}-{size}[-emphasized]; Emphasized = SemiBold 600. */
-
-  :root {
-    /* PROVISIONAL font-size primitives (wb/font-size/NNN, NNN ≈ px × 12.5, truncated):
-       the DS 2.0 variables export will ship these in tokens.css and,
-       being unlayered, will override this layered block — remove it then. */
-    --wb-font-size-125: 0.625rem;
-    --wb-font-size-137: 0.6875rem;
-    --wb-font-size-150: 0.75rem;
-    --wb-font-size-162: 0.8125rem;
-    --wb-font-size-175: 0.875rem;
-    --wb-font-size-200: 1rem;
-    --wb-font-size-225: 1.125rem;
-    --wb-font-size-250: 1.25rem;
-    --wb-font-size-275: 1.375rem;
-    --wb-font-size-300: 1.5rem;
-    --wb-font-size-350: 1.75rem;
-    --wb-font-size-400: 2rem;
-  }
+     Naming: wb-text-{family}-{size}[-emphasized]; Emphasized = SemiBold 600.
+     Font sizes reference the wb/font-size primitives (see provisional.css
+     until the DS 2.0 export ships them). */
 
   .wb-text-display-s,
   .wb-text-display-m,

From f4985c0aa4bf349c9a287ddce127ba3c109fc61c Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Thu, 20 Aug 2026 15:31:36 +0200
Subject: [PATCH 10/20] refactor(ui): underscore-prefix the provisional
 stylesheet

_provisional.css sorts first and reads as exceptional at a glance.
---
 packages/ui/combine-css-bundle.mts                           | 2 +-
 packages/ui/src/index.ts                                     | 2 +-
 packages/ui/src/styles/{provisional.css => _provisional.css} | 0
 packages/ui/src/styles/typography.css                        | 2 +-
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename packages/ui/src/styles/{provisional.css => _provisional.css} (100%)

diff --git a/packages/ui/combine-css-bundle.mts b/packages/ui/combine-css-bundle.mts
index 0372c4d1d..83777da77 100644
--- a/packages/ui/combine-css-bundle.mts
+++ b/packages/ui/combine-css-bundle.mts
@@ -75,7 +75,7 @@ function writeCombinedStylesheet(distributionDirectory: string, stylesDirectory:
 }
 
 function writeGlobalStylesheet(distributionDirectory: string, stylesDirectory: string) {
-  const globals = ['layers.css', 'globals.css', 'provisional.css', 'typography.css']
+  const globals = ['layers.css', 'globals.css', '_provisional.css', 'typography.css']
     .map((file) => fs.readFileSync(path.resolve(stylesDirectory, file), 'utf8'))
     .join('\n');
 
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 486c04fc6..d50590eba 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,7 +1,7 @@
+import './styles/_provisional.css';
 import './styles/fonts.css';
 import './styles/globals.css';
 import './styles/layers.css';
-import './styles/provisional.css';
 import './styles/typography.css';
 
 export * from './components/accordion';
diff --git a/packages/ui/src/styles/provisional.css b/packages/ui/src/styles/_provisional.css
similarity index 100%
rename from packages/ui/src/styles/provisional.css
rename to packages/ui/src/styles/_provisional.css
diff --git a/packages/ui/src/styles/typography.css b/packages/ui/src/styles/typography.css
index 358e10b8c..a3432eef5 100644
--- a/packages/ui/src/styles/typography.css
+++ b/packages/ui/src/styles/typography.css
@@ -169,7 +169,7 @@
 
   /* DS 2.0 type roles — one class per text style from the Typography guidelines.
      Naming: wb-text-{family}-{size}[-emphasized]; Emphasized = SemiBold 600.
-     Font sizes reference the wb/font-size primitives (see provisional.css
+     Font sizes reference the wb/font-size primitives (see _provisional.css
      until the DS 2.0 export ships them). */
 
   .wb-text-display-s,

From a85e2b72b0d2d6945be9e38fa1aadfcbdd8ababa Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Thu, 20 Aug 2026 15:54:23 +0200
Subject: [PATCH 11/20] docs(sdk): move the wb-font-family lifecycle note to
 its definition

The theming section stays about what the variable does today; the 3.0.0
removal-or-narrowing decision lives as a comment at the definition, where
whoever touches it will actually look.
---
 packages/sdk/README.md     | 2 +-
 packages/sdk/src/index.css | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/sdk/README.md b/packages/sdk/README.md
index 006017be4..7ed4d2bb9 100644
--- a/packages/sdk/README.md
+++ b/packages/sdk/README.md
@@ -210,7 +210,7 @@ The editor exposes a small set of CSS custom properties for top-level styling. O
 }
 ```
 
-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`). One deliberate carve-out: the `wb-text-*` typography classes from `@workflowbuilder/ui` carry their own font families (Poppins; Inter for `wb-text-code`) and do not follow `--wb-font-family` — each class reproduces a complete Figma text style.
+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`).
 
 Deeper color and spacing customization (palette, semantic UI tokens) goes through the `--ax-*` token layer from `@workflowbuilder/ui`. Full guide: [Design system and customization](https://www.workflowbuilder.io/docs/overview/features/design-system-and-customization/).
 
diff --git a/packages/sdk/src/index.css b/packages/sdk/src/index.css
index 559dec856..a9cf22c47 100644
--- a/packages/sdk/src/index.css
+++ b/packages/sdk/src/index.css
@@ -23,6 +23,10 @@
     --wb-scroll-radius: 0.625rem;
     --wb-scroll-thumb-color: var(--ax-scrollbar-bg-default);
     --wb-scroll-track-color: 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;
   }
 }

From 3f0d707e1e264c2e973fdee394824ae7012590d3 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Thu, 20 Aug 2026 17:02:50 +0200
Subject: [PATCH 12/20] docs(ui): drop the wb-text section header

The Emphasized=600 mapping is visible in the weight rule itself and the
provisional file announces itself by name.
---
 packages/ui/src/styles/typography.css | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/ui/src/styles/typography.css b/packages/ui/src/styles/typography.css
index a3432eef5..08e503cc9 100644
--- a/packages/ui/src/styles/typography.css
+++ b/packages/ui/src/styles/typography.css
@@ -167,11 +167,6 @@
     line-height: 100%;
   }
 
-  /* DS 2.0 type roles — one class per text style from the Typography guidelines.
-     Naming: wb-text-{family}-{size}[-emphasized]; Emphasized = SemiBold 600.
-     Font sizes reference the wb/font-size primitives (see _provisional.css
-     until the DS 2.0 export ships them). */
-
   .wb-text-display-s,
   .wb-text-display-m,
   .wb-text-display-l,

From 50f47a9308a5ba53c1df92fd06833ef4db98c005 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Thu, 20 Aug 2026 17:06:06 +0200
Subject: [PATCH 13/20] docs(ui): generalize the descendant-selector rationale
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hazard is any universal font-family reset, not specifically the SDK's —
the comment should survive the variable's possible 3.0.0 removal.
---
 packages/ui/src/styles/typography.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/styles/typography.css b/packages/ui/src/styles/typography.css
index 08e503cc9..3ca59903b 100644
--- a/packages/ui/src/styles/typography.css
+++ b/packages/ui/src/styles/typography.css
@@ -208,9 +208,9 @@
     font-family: 'Poppins', system-ui, sans-serif;
   }
 
-  /* Descendants too: the SDK sets font-family on every element via a
-     universal selector, which would otherwise override the inherited family
-     inside a code-role element. */
+  /* Descendants too: a universal font-family reset (the SDK ships one, host
+     apps commonly do too) sets the family explicitly on every element, and
+     an explicit declaration beats the family inherited from this class. */
   .wb-text-code,
   .wb-text-code * {
     font-family: 'Inter', system-ui, sans-serif;

From 88c16065de10766d895b687dbad097cfd41eb2a2 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Thu, 20 Aug 2026 17:09:55 +0200
Subject: [PATCH 14/20] docs(ui): drop the Regular-only comment

The docs page's scale table already records it.
---
 packages/ui/src/styles/typography.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ui/src/styles/typography.css b/packages/ui/src/styles/typography.css
index 3ca59903b..32f9b9261 100644
--- a/packages/ui/src/styles/typography.css
+++ b/packages/ui/src/styles/typography.css
@@ -353,7 +353,6 @@
     line-height: 140%;
   }
 
-  /* No emphasized variant by design — UI/Code ships Regular only. */
   .wb-text-code {
     font-size: var(--wb-font-size-150);
     line-height: 130%;

From b79afbb7108a6668db38074da42b6c7c40e5c112 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Thu, 20 Aug 2026 18:30:38 +0200
Subject: [PATCH 15/20] chore: drop tracker ids from changeset filenames

---
 .changeset/{wb-488-type-roles.md => type-role-classes.md} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename .changeset/{wb-488-type-roles.md => type-role-classes.md} (100%)

diff --git a/.changeset/wb-488-type-roles.md b/.changeset/type-role-classes.md
similarity index 100%
rename from .changeset/wb-488-type-roles.md
rename to .changeset/type-role-classes.md

From edcbb76898fecf5154c7b3373b5ade19f36cd97b Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Thu, 20 Aug 2026 18:56:32 +0200
Subject: [PATCH 16/20] fix(ui): declare the fontsource dependencies the fonts
 entry imports
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The original move committed fonts.css but lost the package.json/lockfile
hunks in a branch-hop stash; local builds kept passing on node_modules
installed outside git, and a clean install failed to resolve the imports —
vite then emits no CSS assets at all and the combine step aborts.
---
 packages/ui/package.json |  2 ++
 pnpm-lock.yaml           | 16 ++++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2edd03db7..5e9a3ea7a 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -65,6 +65,8 @@
     "react-textarea-autosize": "^8.5.6"
   },
   "devDependencies": {
+    "@fontsource/inter": "^5.3.0",
+    "@fontsource/poppins": "^5.3.0",
     "@types/react": "catalog:",
     "@types/react-dom": "^19.1.0",
     "@workflowbuilder/ui-tokens": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 968c229a3..606e2b08f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -640,6 +640,12 @@ importers:
         specifier: ^8.5.6
         version: 8.5.9(@types/react@19.1.8)(react@19.1.0)
     devDependencies:
+      '@fontsource/inter':
+        specifier: ^5.3.0
+        version: 5.3.0
+      '@fontsource/poppins':
+        specifier: ^5.3.0
+        version: 5.3.0
       '@types/react':
         specifier: 'catalog:'
         version: 19.1.8
@@ -1871,6 +1877,12 @@ packages:
   '@floating-ui/utils@0.2.12':
     resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
 
+  '@fontsource/inter@5.3.0':
+    resolution: {integrity: sha512-RofMylZmjlJEfELXeNHFWBRcSs75rGU/6bV2S2jfnvv/3rPXPGe0LgUJTklcHZ9lM4OZmAVFhcJPnACfb91A3g==}
+
+  '@fontsource/poppins@5.3.0':
+    resolution: {integrity: sha512-cms1nM7U6SN8epIV1WMVOV8VsA645aSm3wHfzIQnkk188U341ThbJGSl2Sv54V29gnDbT2arMPfLzvVIIVCceQ==}
+
   '@gerrit0/mini-shiki@3.23.0':
     resolution: {integrity: sha512-bEMORlG0cqdjVyCEuU0cDQbORWX+kYCeo0kV1lbxF5bt4r7SID2l9bqsxJEM0zndaxpOUT7riCyIVEuqq/Ynxg==}
 
@@ -9640,6 +9652,10 @@ snapshots:
 
   '@floating-ui/utils@0.2.12': {}
 
+  '@fontsource/inter@5.3.0': {}
+
+  '@fontsource/poppins@5.3.0': {}
+
   '@gerrit0/mini-shiki@3.23.0':
     dependencies:
       '@shikijs/engine-oniguruma': 3.23.0

From 0c3e8d257519246592eabeb895452bb5ca3e55a0 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Thu, 20 Aug 2026 19:08:34 +0200
Subject: [PATCH 17/20] docs: deprecate the ax-public typography classes
 explicitly

"Remain available" invited new adoption; they only exist for the migration
window and are removed in 3.0.0.
---
 apps/docs/src/content/docs/ui-library/typography.mdx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/docs/src/content/docs/ui-library/typography.mdx b/apps/docs/src/content/docs/ui-library/typography.mdx
index 7dd1c1118..76006c7f1 100644
--- a/apps/docs/src/content/docs/ui-library/typography.mdx
+++ b/apps/docs/src/content/docs/ui-library/typography.mdx
@@ -54,5 +54,6 @@ rem). Until the DS 2.0 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-h*`/`ax-public-p*` classes remain available; components
-move to `wb-text-*` as they are redesigned.
+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.

From d28b0939b66ce0fb49f9a6e4ea28a8e854ab24b2 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Thu, 20 Aug 2026 19:12:57 +0200
Subject: [PATCH 18/20] refactor(ui): drop the descendant font selector from
 the code role
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It patched one role against the universal font-family reset while every
role's descendants stay exposed — symptom-level and inconsistent. The
reset's fate is decided at the 3.0.0 close-out; until then the layers are
allowed to be individually incomplete as long as the whole stack lands
coherent.
---
 packages/ui/src/styles/typography.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/ui/src/styles/typography.css b/packages/ui/src/styles/typography.css
index 32f9b9261..76a06cacb 100644
--- a/packages/ui/src/styles/typography.css
+++ b/packages/ui/src/styles/typography.css
@@ -208,11 +208,7 @@
     font-family: 'Poppins', system-ui, sans-serif;
   }
 
-  /* Descendants too: a universal font-family reset (the SDK ships one, host
-     apps commonly do too) sets the family explicitly on every element, and
-     an explicit declaration beats the family inherited from this class. */
-  .wb-text-code,
-  .wb-text-code * {
+  .wb-text-code {
     font-family: 'Inter', system-ui, sans-serif;
   }
 

From 077dee3e8f7d36afc25f28efce8a04fa06c0ac26 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Thu, 20 Aug 2026 21:07:14 +0200
Subject: [PATCH 19/20] docs(ui): tighten the fonts.css header to the two facts
 that matter

---
 packages/ui/src/styles/fonts.css | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/styles/fonts.css b/packages/ui/src/styles/fonts.css
index 99357e0f9..076b36ed3 100644
--- a/packages/ui/src/styles/fonts.css
+++ b/packages/ui/src/styles/fonts.css
@@ -1,10 +1,6 @@
-/* The typefaces behind the wb-text-* classes ship with this package, bundled
-   rather than fetched from a CDN: strict CSPs block the request, the
-   pre-consent IP leak breaks GDPR flows, and air-gapped deployments have no
-   outbound internet. Vite inlines these imports (lib mode embeds the files
-   as base64, exactly as the SDK bundle always did); they reach consumers
-   through the JS module graph via the root barrel, so subpath-only
-   consumers must load the families themselves. */
+/* Bundled instead of CDN-fetched: strict CSPs, GDPR (pre-consent request),
+   and air-gapped deployments all rule a CDN out. Loaded via the root barrel
+   import — consumers importing only subpaths load the families themselves. */
 @import '@fontsource/poppins/latin-300.css' layer(ui.base);
 @import '@fontsource/poppins/latin-400.css' layer(ui.base);
 @import '@fontsource/poppins/latin-500.css' layer(ui.base);

From 6c5addbff8f14d86a0954fd0edf744be6da4cbe5 Mon Sep 17 00:00:00 2001
From: Jan Librowski <janlibrowski@gmail.com>
Date: Fri, 21 Aug 2026 02:48:31 +0200
Subject: [PATCH 20/20] docs: drop the version label from evergreen prose

Naming the system version in component docs and headers goes stale
the moment the next version starts; the export references carry the
meaning on their own.
---
 apps/docs/src/content/docs/ui-library/typography.mdx | 6 +++---
 packages/sdk/README.md                               | 2 +-
 packages/ui/src/styles/_provisional.css              | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/docs/src/content/docs/ui-library/typography.mdx b/apps/docs/src/content/docs/ui-library/typography.mdx
index 76006c7f1..298fa4b7e 100644
--- a/apps/docs/src/content/docs/ui-library/typography.mdx
+++ b/apps/docs/src/content/docs/ui-library/typography.mdx
@@ -1,9 +1,9 @@
 ---
 title: Typography
-description: The DS 2.0 type roles shipped by @workflowbuilder/ui as wb-text-* utility classes.
+description: The type roles shipped by @workflowbuilder/ui as wb-text-* utility classes.
 ---
 
-`@workflowbuilder/ui` ships the Design System 2.0 type scale as utility
+`@workflowbuilder/ui` ships the type scale as utility
 classes: one class per text style, named `wb-text-{family}-{size}` with an
 optional `-emphasized` suffix. A class carries the complete style — family,
 size, weight, and line-height — so text never hard-codes font values.
@@ -50,7 +50,7 @@ Which role to reach for:
 
 Class font sizes reference the `--wb-font-size-*` primitives
 (`wb/font-size/NNN` in Figma, where `NNN` ≈ px × 12.5, truncated; the CSS values are
-rem). Until the DS 2.0 token export ships them through
+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.
 
diff --git a/packages/sdk/README.md b/packages/sdk/README.md
index 7ed4d2bb9..e11e10f14 100644
--- a/packages/sdk/README.md
+++ b/packages/sdk/README.md
@@ -214,7 +214,7 @@ Available `--wb-*` tokens: `--wb-background-color`, `--wb-font-family`, `--wb-tr
 
 Deeper color and spacing customization (palette, semantic UI tokens) goes through the `--ax-*` token layer from `@workflowbuilder/ui`. Full guide: [Design system and customization](https://www.workflowbuilder.io/docs/overview/features/design-system-and-customization/).
 
-**Prefix ownership.** The `--wb-*` namespace is shared by two owners, split by convention: names with a design-domain segment (`--wb-ui-*`, `--wb-components-*`, `--wb-canvas-*`, `--wb-colors-*`, `--wb-space-*`, `--wb-radius-*`, `--wb-size-*`, `--wb-font-size-*`, `--wb-shadow-*`) belong to the design-token export and will arrive with Design System 2.0; everything else under `--wb-*` (like the theming variables above) is defined by the SDK itself. The two sets do not collide because exported names always carry a domain segment. Every `var(--…)` in workspace CSS is validated in CI against the set of names that actually exist (stylelint, see `packages/tokens/README.md`).
+**Prefix ownership.** The `--wb-*` namespace is shared by two owners, split by convention: names with a design-domain segment (`--wb-ui-*`, `--wb-components-*`, `--wb-canvas-*`, `--wb-colors-*`, `--wb-space-*`, `--wb-radius-*`, `--wb-size-*`, `--wb-font-size-*`, `--wb-shadow-*`) belong to the design-token export; everything else under `--wb-*` (like the theming variables above) is defined by the SDK itself. The two sets do not collide because exported names always carry a domain segment. Every `var(--…)` in workspace CSS is validated in CI against the set of names that actually exist (stylelint, see `packages/tokens/README.md`).
 
 ## CSS — global resets
 
diff --git a/packages/ui/src/styles/_provisional.css b/packages/ui/src/styles/_provisional.css
index a91394432..2a5a192cb 100644
--- a/packages/ui/src/styles/_provisional.css
+++ b/packages/ui/src/styles/_provisional.css
@@ -1,5 +1,5 @@
 /* PROVISIONAL — this whole file is scheduled for deletion.
-   Tokens the DS 2.0 Figma export does not ship yet, defined here so the
+   Tokens the Figma token export does not ship yet, defined here so the
    classes that consume them work today. When the export lands in tokens.css
    its unlayered definitions override this layered block automatically; then
    delete this file together with its two wire-ups (src/index.ts import and