diff --git a/packages/stage-ui/histoire.config.ts b/packages/stage-ui/histoire.config.ts
index 28c5b8396..1c1769876 100644
--- a/packages/stage-ui/histoire.config.ts
+++ b/packages/stage-ui/histoire.config.ts
@@ -26,6 +26,10 @@ export default defineConfig({
         id: 'design-system',
         title: 'Design System',
       },
+      {
+        id: 'typography',
+        title: 'Typography',
+      },
       {
         id: 'common',
         title: 'Common',
diff --git a/packages/stage-ui/src/components/Typography/Mono.story.vue b/packages/stage-ui/src/components/Typography/Mono.story.vue
new file mode 100644
index 000000000..c2b1ebe47
--- /dev/null
+++ b/packages/stage-ui/src/components/Typography/Mono.story.vue
@@ -0,0 +1,23 @@
+<template>
+  <Story
+    title="Mono"
+    group="typography"
+    :layout="{ type: 'grid', width: 500 }"
+  >
+    <Variant title="Mono">
+      <div>
+        <div>
+          <div font-mono>
+            Hello, world!
+          </div>
+          <div font-mono>
+            こんにちは、世界！
+          </div>
+          <div font-mono>
+            你好，世界！
+          </div>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/stage-ui/src/components/Typography/Sans.story.vue b/packages/stage-ui/src/components/Typography/Sans.story.vue
new file mode 100644
index 000000000..89bd5a23d
--- /dev/null
+++ b/packages/stage-ui/src/components/Typography/Sans.story.vue
@@ -0,0 +1,71 @@
+<template>
+  <Story
+    title="Sans"
+    group="typography"
+    :layout="{ type: 'grid', width: 500 }"
+  >
+    <Variant title="Sans">
+      <div>
+        <div flex flex-col gap-1>
+          <div font-sans>
+            Hello, world!
+          </div>
+          <div font-sans>
+            こんにちは、世界！
+          </div>
+          <div font-sans>
+            你好，世界！
+          </div>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Cute Sans">
+      <div>
+        <div flex flex-col gap-1>
+          <div font-cuteen>
+            Hello, world!
+          </div>
+          <div font-cute>
+            こんにちは、世界！
+          </div>
+          <div font-cute>
+            你好，世界！
+          </div>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Jura Sans">
+      <div>
+        <div flex flex-col gap-1>
+          <div font-jura>
+            Hello, world!
+          </div>
+          <div font-jura bg="red-100" w-fit>
+            こんにちは、世界！
+          </div>
+          <div font-jura bg="red-100" w-fit>
+            你好，世界！
+          </div>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Tech Sans">
+      <div>
+        <div flex flex-col gap-1>
+          <div font-quicksand>
+            Hello, world!
+          </div>
+          <div font-quicksand bg="red-100" w-fit>
+            こんにちは、世界！
+          </div>
+          <div font-quicksand bg="red-100" w-fit>
+            你好，世界！
+          </div>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>