diff --git a/src/components/Intro.module.scss b/src/components/Intro.module.scss
index 7095b1aeb..49f01e327 100644
--- a/src/components/Intro.module.scss
+++ b/src/components/Intro.module.scss
@@ -1,5 +1,3 @@
-.container p {
-  color: var(--color-neutrals-600);
-  font-size: 1.125rem;
-  line-height: 2rem;
+.container {
+  composes: intro-text from global;
 }
diff --git a/src/components/styles.scss b/src/components/styles.scss
index 617f1d2b4..4c661a3f1 100644
--- a/src/components/styles.scss
+++ b/src/components/styles.scss
@@ -82,7 +82,7 @@ body {
   margin: 0;
   font-size: 16px;
   font-family: var(--primary-font-family);
-  color: var(--color-black);
+  color: var(--color-neutrals-700);
   background-color: var(--color-white);
   line-height: 1.2;
 }
@@ -104,7 +104,6 @@ img {
 p {
   margin: 0;
   margin-top: 8px;
-  color: var(--color-neutrals-700);
 }
 
 h1,
@@ -164,12 +163,17 @@ button,
 
 ul {
   padding-left: 30px;
-  font-size: 14px;
-  line-height: 22px;
-  color: var(--color-neutrals-700);
-  font-size: 1rem;
+  line-height: 1.6;
 }
 
 li {
   margin-bottom: 1rem;
 }
+
+:global {
+  .intro-text {
+    color: var(--color-neutrals-600);
+    font-size: 1.125rem;
+    line-height: 2rem;
+  }
+}
diff --git a/src/templates/ComponentReferenceTemplate.js b/src/templates/ComponentReferenceTemplate.js
index 1c88795ee..32f117deb 100644
--- a/src/templates/ComponentReferenceTemplate.js
+++ b/src/templates/ComponentReferenceTemplate.js
@@ -49,7 +49,11 @@ const ComponentReferenceTemplate = ({ data }) => {
           <h1>{component}</h1>
 
           <section
-            className={cx(templateStyles.section, templateStyles.description)}
+            className={cx(
+              templateStyles.section,
+              templateStyles.description,
+              'intro-text'
+            )}
           >
             <ReactMarkdown source={componentDescription} />
           </section>