diff --git a/landing/investor-profile-modal.react.js b/landing/investor-profile-modal.react.js
index bbdc83a65..191b3b7dc 100644
--- a/landing/investor-profile-modal.react.js
+++ b/landing/investor-profile-modal.react.js
@@ -1,48 +1,48 @@
 // @flow
 
 import * as React from 'react';
 
 import ModalOverlay from 'lib/components/modal-overlay.react.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 
 import { keyedInvestorData } from './investor-data.js';
 import css from './investor-profile-modal.css';
 import InvestorProfile from './investor-profile.react.js';
 
 type Props = {
   +investorID: string,
 };
 
 function InvestorProfileModal(props: Props): React.Node {
   const { investorID } = props;
   const { popModal } = useModalContext();
 
   const selectedInvestor = React.useMemo(() => {
     const foundInvestor = keyedInvestorData[investorID];
     if (!foundInvestor) {
       return undefined;
     }
 
     return (
       <InvestorProfile
         name={foundInvestor.name}
         description={foundInvestor.description}
         involvement={foundInvestor.involvement}
         imageURL={foundInvestor.imageURL}
         onClick={popModal}
         isModalActive
         website={foundInvestor.website}
         twitterHandle={foundInvestor.twitter}
         linkedinHandle={foundInvestor.linkedin}
       />
     );
   }, [investorID, popModal]);
 
   return (
-    <ModalOverlay onClose={popModal}>
+    <ModalOverlay onClose={popModal} backgroundColor="var(--modal-overlay)">
       <div className={css.modalContainer}>{selectedInvestor}</div>
     </ModalOverlay>
   );
 }
 
 export default InvestorProfileModal;
diff --git a/landing/investor-profile.css b/landing/investor-profile.css
index ded6431c4..6f33269e3 100644
--- a/landing/investor-profile.css
+++ b/landing/investor-profile.css
@@ -1,94 +1,89 @@
 .profile {
   display: flex;
   flex-direction: row;
   width: 576px;
   border-radius: 20px;
   padding: 40px 32px;
   background-color: #7e57c221;
   box-shadow: 0px 4px 4px #00000040, inset 0px 0px 12px 5px #7e57c24d;
   cursor: pointer;
 }
 
 .profile:hover {
   box-shadow: 0px 2px 4px #7847ff99, inset 0px 0px 12px 5px #7e57c24d;
   transition: 200ms;
 }
 
 .profile img {
   border-radius: 72px;
   max-width: 144px;
   max-height: 144px;
   filter: saturate(0);
   align-self: center;
 }
 
 div.investorInfoContainer {
   margin-left: 32px;
   display: flex;
   flex-direction: column;
 }
 
 p.name {
-  font-size: 24px;
-  font-weight: 500;
   margin-bottom: 12px;
 }
 
 p.description {
-  font-size: 18px;
   margin-bottom: 32px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   height: 56px;
 }
 
 p.involvement {
-  font-weight: 500;
-  font-size: 14px;
   margin-bottom: 8px;
 }
 
 .profile span svg {
-  color: var(--grey);
+  color: var(--black-60);
 }
 
 .profile span svg:hover {
-  color: var(--white);
+  color: var(--white-100);
 }
 
 .profile span > a + a {
   margin-left: 8px;
 }
 
 a.profileModal {
   background-color: #7e57c266;
   cursor: default;
   min-width: 576px;
   width: max-content;
   max-width: min(692px, 90vw);
 }
 
 p.descriptionModal {
   display: block;
   min-height: 56px;
   height: auto;
 }
 
 @media (max-width: 600px) {
   .profile {
     flex-direction: column;
     width: 90vw;
   }
 
   a.profileModal {
     min-width: 90vw;
     width: 90vw;
   }
 
   div.investorInfoContainer {
     margin: 16px 0 0;
   }
 }
diff --git a/landing/investor-profile.react.js b/landing/investor-profile.react.js
index d240dec05..3fa7dff24 100644
--- a/landing/investor-profile.react.js
+++ b/landing/investor-profile.react.js
@@ -1,107 +1,113 @@
 // @flow
 
 import { faTwitter, faLinkedin } from '@fortawesome/free-brands-svg-icons';
 import { faGlobe } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import * as React from 'react';
 
 import css from './investor-profile.css';
+import typography from './typography.css';
 
 type Props = {
   +name: string,
   +description: string,
   +involvement?: string,
   +imageURL: string,
   +onClick: () => void,
   +isModalActive?: boolean,
   +website?: string,
   +twitterHandle?: string,
   +linkedinHandle?: string,
 };
 
 function InvestorProfile(props: Props): React.Node {
   const {
     name,
     description,
     involvement,
     imageURL,
     onClick,
     isModalActive,
     website,
     twitterHandle,
     linkedinHandle,
   } = props;
 
   const profileContainerClassName = classNames({
     [css.profile]: true,
     [css.profileModal]: isModalActive,
   });
-
+  const nameClassName = classNames([typography.heading3, css.name]);
   const descriptionClassName = classNames({
+    [typography.paragraph1]: true,
     [css.description]: true,
     [css.descriptionModal]: isModalActive,
   });
+  const involvementClassName = classNames([
+    typography.paragraph3,
+    css.involvement,
+  ]);
 
   const stopPropagation = React.useCallback(e => e.stopPropagation(), []);
 
   let websiteIcon;
   if (website) {
     websiteIcon = (
       <a
         href={website}
         target="_blank"
         rel="noreferrer"
         onClick={stopPropagation}
       >
         <FontAwesomeIcon icon={faGlobe} size="lg" />
       </a>
     );
   }
 
   let twitterIcon;
   if (twitterHandle) {
     twitterIcon = (
       <a
         href={`https://twitter.com/${twitterHandle}`}
         target="_blank"
         rel="noreferrer"
         onClick={stopPropagation}
       >
         <FontAwesomeIcon icon={faTwitter} size="lg" />
       </a>
     );
   }
 
   let linkedinIcon;
   if (linkedinHandle) {
     linkedinIcon = (
       <a
         href={`https://linkedin.com/${linkedinHandle}`}
         target="_blank"
         rel="noreferrer"
         onClick={stopPropagation}
       >
         <FontAwesomeIcon icon={faLinkedin} size="lg" />
       </a>
     );
   }
 
   return (
     <a className={profileContainerClassName} onClick={onClick}>
       <img alt={`image of Comm investor ${name}`} src={imageURL} />
       <div className={css.investorInfoContainer}>
-        <p className={css.name}>{name}</p>
+        <p className={nameClassName}>{name}</p>
         <p className={descriptionClassName}>{description}</p>
-        <p className={css.involvement}>{involvement}</p>
+        <p className={involvementClassName}>{involvement}</p>
         <span>
           {websiteIcon}
           {twitterIcon}
           {linkedinIcon}
         </span>
       </div>
     </a>
   );
 }
 
 export default InvestorProfile;
diff --git a/landing/investors.css b/landing/investors.css
index 697fd674a..dd148b6db 100644
--- a/landing/investors.css
+++ b/landing/investors.css
@@ -1,54 +1,37 @@
 .wrapper {
   padding: 16px 0;
   margin: 0 auto 48px auto;
   max-width: 1200px;
+  padding-top: 72px;
 }
 
 .header {
-  font-family: 'iA Writer Duo S', monospace;
-  font-weight: 500;
-  line-height: 1.35;
   text-align: center;
-  --scale: calc(0.75rem + 2vw);
-  --smallest-font-size: 30px;
-  --largest-font-size: 50px;
-  --smallest-padding-size: 32px;
-  --largest-padding-size: 64px;
-
-  padding-bottom: clamp(
-    var(--smallest-padding-size),
-    var(--scale),
-    var(--largest-padding-size)
-  );
-
-  font-size: clamp(
-    var(--smallest-font-size),
-    var(--scale),
-    var(--largest-font-size)
-  );
+  color: var(--white-80);
+  margin-bottom: 48px;
 }
 
 .investorContainer {
   transition-property: max-width;
   transition: 300ms;
   display: flex;
   flex-wrap: wrap;
   row-gap: 24px;
   column-gap: 32px;
   justify-content: center;
   min-width: 320px;
   margin: 0 auto;
   padding-bottom: 72px;
 }
 
 div.headingContainer {
   text-align: center;
   padding-bottom: 72px;
 }
 
 p.subtitle {
   max-width: 60ch;
   margin: 0 auto;
-  padding: 0 16px 36px 16px;
-  font-size: 1.6rem;
+  padding: 0 32px 40px 32px;
+  color: var(--white-80);
 }
diff --git a/landing/investors.react.js b/landing/investors.react.js
index 06e3bd482..80cc5440c 100644
--- a/landing/investors.react.js
+++ b/landing/investors.react.js
@@ -1,56 +1,61 @@
 // @flow
 
+import classNames from 'classnames';
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 
 import { shuffledInvestorsData } from './investor-data.js';
 import InvestorProfileModal from './investor-profile-modal.react.js';
 import InvestorProfile from './investor-profile.react.js';
 import css from './investors.css';
+import typography from './typography.css';
 
 function Investors(): React.Node {
   const { pushModal } = useModalContext();
 
   const onClickInvestorProfileCard = React.useCallback(
     (id: string) => {
       pushModal(<InvestorProfileModal investorID={id} />);
     },
     [pushModal],
   );
 
   const investors = React.useMemo(() => {
     return shuffledInvestorsData.map(investor => (
       <InvestorProfile
         key={investor.id}
         name={investor.name}
         description={investor.description}
         involvement={investor.involvement}
         imageURL={investor.imageURL}
         onClick={() => onClickInvestorProfileCard(investor.id)}
         website={investor.website}
         twitterHandle={investor.twitter}
         linkedinHandle={investor.linkedin}
       />
     ));
   }, [onClickInvestorProfileCard]);
 
+  const headerClassName = classNames([typography.heading1, css.header]);
+  const subheaderClassName = classNames([typography.subheading2, css.subtitle]);
+
   return (
     <div className={css.wrapper}>
-      <h2 className={css.header}>Investors</h2>
+      <h2 className={headerClassName}>Investors</h2>
 
       <section>
         <div className={css.headingContainer}>
-          <p className={css.subtitle}>
+          <p className={subheaderClassName}>
             Comm is proud to count over 80 individuals &amp; organizations from
             our community as investors.
           </p>
         </div>
 
         <div className={css.investorContainer}>{investors}</div>
       </section>
     </div>
   );
 }
 
 export default Investors;