diff --git a/components/Branding/ColorSection/ColorSection.js b/components/Branding/ColorSection/ColorSection.js
index 1376799a9..0b150782e 100644
--- a/components/Branding/ColorSection/ColorSection.js
+++ b/components/Branding/ColorSection/ColorSection.js
@@ -1,7 +1,6 @@
 import { brandColorsObject } from 'common/styles/styleExports';
 import Swatch from 'components/Branding/Swatch/Swatch';
 import Content from 'components/Content/Content';
-import styles from './ColorSection.module.css';
 
 function ColorSection() {
   const primaryColor = { name: 'Primary', hexCode: brandColorsObject.primary };
@@ -23,11 +22,11 @@ function ColorSection() {
         theme="white"
         columns={[
           <div>
-            <h3 className={styles.centeredText}>Primary</h3>
+            <h3 className="text-center">Primary</h3>
             <Swatch colorName={primaryColor.name} hexCode={primaryColor.hexCode} />
           </div>,
           <div>
-            <h3 className={styles.centeredText}>Secondary</h3>
+            <h3 className="text-center">Secondary</h3>
             <Swatch colorName={secondaryColor.name} hexCode={secondaryColor.hexCode} />
           </div>,
         ]}
diff --git a/components/Branding/ColorSection/ColorSection.module.css b/components/Branding/ColorSection/ColorSection.module.css
deleted file mode 100644
index 3194ef737..000000000
--- a/components/Branding/ColorSection/ColorSection.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.centeredText {
-  text-align: center;
-}
diff --git a/components/Branding/ColorSection/__tests__/__snapshots__/ColorSection.test.js.snap b/components/Branding/ColorSection/__tests__/__snapshots__/ColorSection.test.js.snap
index ca74425b6..f40f04eb0 100644
--- a/components/Branding/ColorSection/__tests__/__snapshots__/ColorSection.test.js.snap
+++ b/components/Branding/ColorSection/__tests__/__snapshots__/ColorSection.test.js.snap
@@ -8,7 +8,7 @@ exports[`ColorSection should render with required props 1`] = `
       Array [
         <div>
           <h3
-            className="centeredText"
+            className="text-center"
           >
             Primary
           </h3>
@@ -19,7 +19,7 @@ exports[`ColorSection should render with required props 1`] = `
         </div>,
         <div>
           <h3
-            className="centeredText"
+            className="text-center"
           >
             Secondary
           </h3>