diff --git a/packages/x-design-system/demo/shims-vue.d.ts b/packages/x-design-system/demo/shims-vue.d.ts
index 0bcd215127..bfd7bde37a 100644
--- a/packages/x-design-system/demo/shims-vue.d.ts
+++ b/packages/x-design-system/demo/shims-vue.d.ts
@@ -1,7 +1,6 @@
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
-  // eslint-disable-next-line ts/no-empty-object-type
-  const component: DefineComponent<{}, {}, any>
+  const component: DefineComponent<object, object, unknown>
   export default component
 }
 
diff --git a/packages/x-design-system/demo/src/app.vue b/packages/x-design-system/demo/src/app.vue
index 2ef4f756c5..13095e2859 100644
--- a/packages/x-design-system/demo/src/app.vue
+++ b/packages/x-design-system/demo/src/app.vue
@@ -7,6 +7,7 @@
   <Input />
   <ProgressBar />
   <Integration />
+  <Typography />
 </template>
 
 <script setup lang="ts">
@@ -18,4 +19,5 @@ import Icon from './components/icon.vue'
 import Input from './components/input.vue'
 import Integration from './components/integration.vue'
 import ProgressBar from './components/progress-bar.vue'
+import Typography from './components/typography.vue'
 </script>
diff --git a/packages/x-design-system/demo/src/components/icon.vue b/packages/x-design-system/demo/src/components/icon.vue
index aa3e2e0c41..0447220538 100644
--- a/packages/x-design-system/demo/src/components/icon.vue
+++ b/packages/x-design-system/demo/src/components/icon.vue
@@ -139,7 +139,6 @@ const rows = [
   'background-color',
   'sharp',
   'stroke-width',
-  'icon-offset',
   'combinations',
 ]
 
diff --git a/packages/x-design-system/demo/src/components/typography.vue b/packages/x-design-system/demo/src/components/typography.vue
new file mode 100644
index 0000000000..298ea40a93
--- /dev/null
+++ b/packages/x-design-system/demo/src/components/typography.vue
@@ -0,0 +1,31 @@
+<template>
+  <Wrapper feature="Typography" :rows="rows">
+    <template v-for="row in rows" :key="row" #[row]>
+      <p
+        class="xds:whitespace-normal"
+        :class="[row.includes('-') ? `xds:${row.split('-')[0]}` : '', `xds:${row}`]"
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida posuere nisi, sed
+        porttitor sem semper ac. Aliquam erat volutpat
+      </p>
+    </template>
+  </Wrapper>
+</template>
+
+<script setup lang="ts">
+import Wrapper from './wrapper.vue'
+
+/*
+  Tailwind safelist classes:
+  xds:text1 xds:text1-sm xds:text1-md xds:text1-lg
+  xds:text2 xds:text2-sm xds:text2-md xds:text2-lg
+  xds:title1 xds:title1-sm xds:title1-md xds:title1-lg
+  xds:title2 xds:title2-sm xds:title2-md xds:title2-lg
+  xds:title3 xds:title3-sm xds:title3-md xds:title3-lg
+  xds:title4 xds:title4-sm xds:title4-md xds:title4-lg
+*/
+
+const utilities = ['text1', 'text2', 'title1', 'title2', 'title3', 'title4']
+const sizes = ['sm', 'md', 'lg']
+const rows = utilities.map(utility => [utility, ...sizes.map(size => `${utility}-${size}`)]).flat()
+</script>
diff --git a/packages/x-design-system/lib/components/index.css b/packages/x-design-system/lib/components/index.css
index b439de6596..8614279da0 100644
--- a/packages/x-design-system/lib/components/index.css
+++ b/packages/x-design-system/lib/components/index.css
@@ -6,3 +6,4 @@
 @import './icon.css';
 @import './input.css';
 @import './progress-bar.css';
+@import './typography.css';
diff --git a/packages/x-design-system/lib/components/typography.css b/packages/x-design-system/lib/components/typography.css
new file mode 100644
index 0000000000..6bf4ab4103
--- /dev/null
+++ b/packages/x-design-system/lib/components/typography.css
@@ -0,0 +1,89 @@
+/* text1 */
+@utility text1 {
+  @apply xds:font-family-main xds:font-regular;
+  @apply xds:text1-md;
+}
+@utility text1-sm {
+  @apply xds:text-xs/(--xds-line-height-lg);
+}
+@utility text1-md {
+  @apply xds:text-sm/(--xds-line-height-md);
+}
+@utility text1-lg {
+  @apply xds:text-md;
+}
+
+/* text2 */
+@utility text2 {
+  @apply xds:font-family-main xds:font-regular;
+  @apply xds:text2-md;
+}
+@utility text2-sm {
+  @apply xds:text-xs/(--xds-line-height-lg);
+}
+@utility text2-md {
+  @apply xds:text-sm/(--xds-line-height-md);
+}
+@utility text2-lg {
+  @apply xds:text-md;
+}
+
+/* title1 */
+@utility title1 {
+  @apply xds:font-family-main xds:font-bold;
+  @apply xds:title1-md;
+}
+@utility title1-sm {
+  @apply xds:text-xl/(--xds-line-height-md);
+}
+@utility title1-md {
+  @apply xds:text-2xl/(--xds-line-height-sm);
+}
+@utility title1-lg {
+  @apply xds:text-4xl;
+}
+
+/* title2 */
+@utility title2 {
+  @apply xds:font-family-main xds:font-bold;
+  @apply xds:title2-md;
+}
+@utility title2-sm {
+  @apply xds:text-lg;
+}
+@utility title2-md {
+  @apply xds:text-xl/(--xds-line-height-md);
+}
+@utility title2-lg {
+  @apply xds:text-3xl/(--xds-line-height-sm);
+}
+
+/* title3 */
+@utility title3 {
+  @apply xds:font-family-main xds:font-bold;
+  @apply xds:title3-md;
+}
+@utility title3-sm {
+  @apply xds:text-sm;
+}
+@utility title3-md {
+  @apply xds:text-md/(--xds-line-height-md);
+}
+@utility title3-lg {
+  @apply xds:text-xl;
+}
+
+/* title4 */
+@utility title4 {
+  @apply xds:font-family-main xds:font-bold;
+  @apply xds:title4-md;
+}
+@utility title4-sm {
+  @apply xds:text-xs;
+}
+@utility title4-md {
+  @apply xds:text-sm/(--xds-line-height-md);
+}
+@utility title4-lg {
+  @apply xds:text-lg;
+}