diff --git a/docs/html/typography/typography-utilities.html b/docs/html/typography/typography-utilities.html
new file mode 100644
index 00000000..d69e51b6
--- /dev/null
+++ b/docs/html/typography/typography-utilities.html
@@ -0,0 +1 @@
+<div class="ray-text-monospace">Dock 72 at the brooklyn navy yard</div>
diff --git a/docs/principles/typography.md b/docs/principles/typography.md
index ea19d1af..fefb4d12 100644
--- a/docs/principles/typography.md
+++ b/docs/principles/typography.md
@@ -27,7 +27,7 @@ title: Typography
 
 ## Running Text
 
-This utility is useful for long-form content, especially content that is dynamically genereated from markdown. It will directly style `h1`–`h6`, `p`, `ul`, and `ol` tags.
+This utility is useful for long-form content, especially content that is dynamically genereated from markdown. It will directly style `h1`–`h6`, `p`, `blockquote`, `ul`, and `ol` tags.
 
 <component
     component="typography"
@@ -35,6 +35,14 @@ This utility is useful for long-form content, especially content that is dynamic
     >
 </component>
 
+# Utilities
+
+<component
+    component="typography"
+    variation="typography-utilities"
+    >
+</component>
+
 # Font Family
 
 <p class="ray-p3">Limiting font-families, a tight type scale, and content limits will keep it tight.</p>
diff --git a/packages/core/src/global/_typography.scss b/packages/core/src/global/_typography.scss
index 8d07fba2..e83342df 100644
--- a/packages/core/src/global/_typography.scss
+++ b/packages/core/src/global/_typography.scss
@@ -193,6 +193,21 @@
     line-height: 12px;
   }
 
+  .#{$ray-class-prefix}text-monospace {
+    font-family: $ray-font-stack-mono;
+    font-weight: 400;
+  }
+
+  .#{$ray-class-prefix}blockquote {
+    padding: $ray-spacing-md;
+    margin: $ray-spacing-lg 0;
+    background-color: $ray-color-gray-02;
+    color: $ray-color-text-dark;
+    border-radius: $ray-border-radius;
+    border: 1px solid $ray-color-gray-10;
+    border-left: 2px solid $ray-color-blue-50;
+  }
+
   .#{$ray-class-prefix}running-text {
     h1,
     h2,
@@ -244,5 +259,9 @@
     ol li {
       list-style-type: decimal;
     }
+
+    blockquote {
+      @extend .#{$ray-class-prefix}blockquote;
+    }
   }
 }
diff --git a/packages/docs-app/src/components/CodeExample/code-example.scss b/packages/docs-app/src/components/CodeExample/code-example.scss
index 0ff9f408..3d853dc2 100644
--- a/packages/docs-app/src/components/CodeExample/code-example.scss
+++ b/packages/docs-app/src/components/CodeExample/code-example.scss
@@ -55,7 +55,6 @@ pre[class*='language-'] {
   border-top-width: 0;
   padding: $ray-spacing-md 0 $ray-spacing-md $ray-spacing-md;
   max-height: 12rem;
-  min-height: 7rem;
   height: auto;
   display: flex;
   flex-direction: column;
diff --git a/packages/docs-app/src/styles/_page.scss b/packages/docs-app/src/styles/_page.scss
index b43d416d..1393206b 100644
--- a/packages/docs-app/src/styles/_page.scss
+++ b/packages/docs-app/src/styles/_page.scss
@@ -117,14 +117,6 @@ button,
 }
 
 blockquote {
-  padding: $ray-spacing-md;
-  margin: 1rem 0;
-  background-color: hsla(240, 17%, 98%, 1);
-  color: $ray-color-text-dark;
-  border-radius: $ray-border-radius;
-  border: 1px solid $ray-color-gray-10;
-  border-left: 2px solid $ray-color-blue-50;
-
   p:last-child {
     margin: 0;
   }
diff --git a/packages/docs-app/src/templates/page.js b/packages/docs-app/src/templates/page.js
index f0a49322..163fcfd5 100644
--- a/packages/docs-app/src/templates/page.js
+++ b/packages/docs-app/src/templates/page.js
@@ -98,6 +98,9 @@ const renderAst = new RehypeReact({
         </table>
       );
     },
+    blockquote: function blockquote({ children }) {
+      return <blockquote className="ray-blockquote">{children}</blockquote>;
+    },
     pre: CodeSnippet,
     'page-intro': PageIntro,
     'flex-group': FlexGroup,