diff --git a/packages/web/src/scss/helpers/text/index.html b/packages/web/src/scss/helpers/text/index.html
index 807c5c9ae7..76230f1783 100644
--- a/packages/web/src/scss/helpers/text/index.html
+++ b/packages/web/src/scss/helpers/text/index.html
@@ -1,20 +1,44 @@
 {{#> layout/plain }}
 
 <section class="docs-Section">
+  
+  <h2 class="docs-Heading">Default</h2>
+  
+  <div class="docs-Stack docs-Stack--start">
+
+    <p class="typography-body-medium-text-regular">Text</p>
+  
+  </div>
+
+</section>
+
+
+<section class="docs-Section">
+
+  <h2 class="docs-Heading">Sizes</h2>
+
+  <div class="docs-Stack docs-Stack--start">
+
+    <p class="typography-body-xsmall-text-regular">Text xsmall</p>
+    <p class="typography-body-small-text-regular">Text small</p>
+    <p class="typography-body-medium-text-regular">Text medium</p>
+    <p class="typography-body-large-text-regular">Text large</p>
+    <p class="typography-body-xlarge-text-regular">Text xlarge</p>
+
+  </div>
+
+</section>
+
+<section class="docs-Section">
+
+  <h2 class="docs-Heading">Emphasis</h2>
+
+  <div class="docs-Stack docs-Stack--start">
+
+    <p class="typography-body-medium-text-regular">Text regular</p>
+    <p class="typography-body-medium-text-bold">Text bold</p>
+    <p class="typography-body-medium-text-italic">Text italic</p>
 
-  <h2 class="docs-Heading">Text</h2>
-
-  <div style="width: 400px">
-    <p class="text-truncate">
-      This is a truncated single-line text.
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-    </p>
-    <p class="text-truncate-multiline">
-      This is a truncated multi-line text.
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-      perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-      provident unde. Eveniet, iste, molestiae?
-    </p>
   </div>
 
 </section>