From 77965ed371568fd61dc6004bb2048c1c3538a793 Mon Sep 17 00:00:00 2001
From: Morgan Ludtke <ludtkemorgan@gmail.com>
Date: Tue, 18 Oct 2022 12:28:18 -0500
Subject: [PATCH] chore: 2022-10-06 release (#504) (#505)

---
 shared-helpers/src/multiselectQuestions.tsx   |   2 +-
 .../locale_overrides/general.json             |   2 +
 .../[id]/applications/pending/index.tsx       |   5 +-
 .../[id]/applications/resolved/index.tsx      |   5 +-
 .../sections/FormApplicationData.tsx          |   4 +-
 sites/partners/src/users/FormUserConfirm.tsx  |   2 +-
 sites/public/lib/helpers.tsx                  |  23 ++-
 sites/public/pages/_app.tsx                   |   2 +-
 sites/public/pages/account/edit.tsx           |   4 +-
 sites/public/pages/additional-resources.tsx   |   2 +-
 .../pages/applications/contact/address.tsx    |  10 +-
 .../contact/alternate-contact-contact.tsx     |   6 +-
 .../contact/alternate-contact-name.tsx        |   2 +-
 .../contact/alternate-contact-type.tsx        |   2 +-
 .../pages/applications/contact/name.tsx       |   4 +-
 .../pages/applications/household/member.tsx   |  12 +-
 .../applications/review/demographics.tsx      |   6 +-
 .../applications/start/choose-language.tsx    |   2 +-
 sites/public/pages/create-account.tsx         |   2 +-
 .../ApplicationMultiselectQuestionStep.tsx    |   2 +-
 sites/public/src/ListingView.tsx              |   4 +-
 ui-components/.storybook/preview.ts           |   5 +
 ui-components/__tests__/blocks/Card.test.tsx  |  74 +++++++
 ui-components/index.ts                        |   4 +-
 ui-components/package.json                    |   3 +
 ui-components/src/actions/Button.scss         |   2 +-
 ui-components/src/blocks/Card.docs.mdx        |  60 ++++++
 ui-components/src/blocks/Card.scss            |  65 +++++++
 ui-components/src/blocks/Card.stories.tsx     | 182 ++++++++++++++++++
 ui-components/src/blocks/Card.tsx             |  74 +++++++
 ui-components/src/blocks/ImageCard.scss       |   2 +-
 ui-components/src/blocks/StandardCard.scss    |   2 +-
 ui-components/src/blocks/StandardCard.tsx     |   2 +-
 .../src/documentation/Utilities.scss          |  30 +++
 .../src/documentation/Utilities.stories.mdx   |  25 +++
 ui-components/src/documentation/Utilities.tsx |  67 +++++++
 ui-components/src/forms/DOBField.tsx          |   2 +-
 ui-components/src/forms/Field.tsx             |   2 +-
 ui-components/src/forms/FieldGroup.tsx        |   2 +-
 ui-components/src/forms/MultiSelectField.scss |   4 +-
 ui-components/src/forms/PhoneField.tsx        |   2 +-
 ui-components/src/global/forms.scss           |  18 +-
 ui-components/src/global/mixins.scss          |   4 +-
 ui-components/src/global/text.scss            | 144 ++++++++------
 ui-components/src/global/tokens/colors.scss   |   1 +
 ui-components/src/headers/Heading.stories.tsx |  27 ---
 ui-components/src/headers/Heading.tsx         |  31 ---
 .../src/headers/HeadingGroup.docs.mdx         |  25 +++
 ui-components/src/headers/HeadingGroup.scss   |  23 +++
 .../src/headers/HeadingGroup.stories.tsx      |  49 +++++
 ui-components/src/headers/HeadingGroup.tsx    |  31 +++
 ui-components/src/navigation/ProgressNav.scss |   2 +-
 .../listing/ListingCard.stories.tsx           |  20 +-
 .../page_components/listing/ListingCard.tsx   |  32 +--
 .../page_components/listing/ListingMap.tsx    |   4 +-
 .../listing/listing_sidebar/Contact.tsx       |   6 +-
 .../listing_sidebar/ExpandableSection.tsx     |   5 +-
 .../listing_sidebar/GetApplication.tsx        |  11 +-
 .../listing_sidebar/QuantityRowSection.tsx    |   5 +-
 .../listing_sidebar/ReferralApplication.tsx   |   5 +-
 .../listing_sidebar/SidebarBlock.stories.tsx  |   2 +-
 .../listing/listing_sidebar/SidebarBlock.tsx  |   6 +-
 .../listing_sidebar/SubmitApplication.tsx     |   8 +-
 .../listing_sidebar/events/EventSection.tsx   |   7 +-
 ui-components/src/sections/InfoCardGrid.tsx   |   4 +-
 ui-components/src/tables/CategoryTable.tsx    |   4 +-
 ui-components/src/text/Heading.docs.mdx       |  18 ++
 ui-components/src/text/Heading.stories.tsx    |  31 +++
 ui-components/src/text/Heading.tsx            |  32 +++
 ui-components/src/text/Message.stories.tsx    |   2 +-
 ui-components/src/text/Tag.scss               |   2 +-
 ui-components/src/text/Tag.stories.tsx        |   2 +-
 ui-components/tailwind.config.js              |   1 +
 yarn.lock                                     | 112 ++++++++++-
 74 files changed, 1142 insertions(+), 244 deletions(-)
 create mode 100644 ui-components/__tests__/blocks/Card.test.tsx
 create mode 100644 ui-components/src/blocks/Card.docs.mdx
 create mode 100644 ui-components/src/blocks/Card.scss
 create mode 100644 ui-components/src/blocks/Card.stories.tsx
 create mode 100644 ui-components/src/blocks/Card.tsx
 create mode 100644 ui-components/src/documentation/Utilities.scss
 create mode 100644 ui-components/src/documentation/Utilities.stories.mdx
 create mode 100644 ui-components/src/documentation/Utilities.tsx
 delete mode 100644 ui-components/src/headers/Heading.stories.tsx
 delete mode 100644 ui-components/src/headers/Heading.tsx
 create mode 100644 ui-components/src/headers/HeadingGroup.docs.mdx
 create mode 100644 ui-components/src/headers/HeadingGroup.scss
 create mode 100644 ui-components/src/headers/HeadingGroup.stories.tsx
 create mode 100644 ui-components/src/headers/HeadingGroup.tsx
 create mode 100644 ui-components/src/text/Heading.docs.mdx
 create mode 100644 ui-components/src/text/Heading.stories.tsx
 create mode 100644 ui-components/src/text/Heading.tsx

diff --git a/shared-helpers/src/multiselectQuestions.tsx b/shared-helpers/src/multiselectQuestions.tsx
index b1c5b2e44a..168719cc63 100644
--- a/shared-helpers/src/multiselectQuestions.tsx
+++ b/shared-helpers/src/multiselectQuestions.tsx
@@ -122,7 +122,7 @@ export const getRadioFields = (
   return (
     <fieldset>
       {applicationSection === ApplicationSection.preferences && (
-        <legend className="field-label--caps mb-4">{question?.text}</legend>
+        <legend className="text__caps-spaced mb-4">{question?.text}</legend>
       )}
       <p className="field-note mb-8">{question?.description}</p>
       <FieldGroup
diff --git a/sites/partners/page_content/locale_overrides/general.json b/sites/partners/page_content/locale_overrides/general.json
index 28ae83fb84..9f8261a5c3 100644
--- a/sites/partners/page_content/locale_overrides/general.json
+++ b/sites/partners/page_content/locale_overrides/general.json
@@ -58,6 +58,8 @@
   "applications.duplicates.validApplications": "Valid Applications",
   "applications.duplicates.duplicateGroup": "Duplicate group",
   "applications.duplicates.primaryApplicant": "Primary applicant",
+  "applications.duplicates.set": "Set",
+  "applications.duplicates.sets": "Sets",
   "applications.namedob": "Name + DOB",
   "applications.newApplication": "New Application",
   "applications.pending": "Pending",
diff --git a/sites/partners/pages/listings/[id]/applications/pending/index.tsx b/sites/partners/pages/listings/[id]/applications/pending/index.tsx
index cc7ade394d..8c24a62b8a 100644
--- a/sites/partners/pages/listings/[id]/applications/pending/index.tsx
+++ b/sites/partners/pages/listings/[id]/applications/pending/index.tsx
@@ -175,7 +175,10 @@ const ApplicationsList = () => {
                   config={{
                     gridComponents,
                     columns,
-                    totalItemsLabel: t("applications.totalApplications"),
+                    totalItemsLabel:
+                      flaggedAppsData?.meta?.totalItems === 1
+                        ? t("applications.duplicates.set")
+                        : t("applications.duplicates.sets"),
                   }}
                   data={{
                     items: flaggedAppsData?.items ?? [],
diff --git a/sites/partners/pages/listings/[id]/applications/resolved/index.tsx b/sites/partners/pages/listings/[id]/applications/resolved/index.tsx
index e78c7b360c..f75fbcdb8a 100644
--- a/sites/partners/pages/listings/[id]/applications/resolved/index.tsx
+++ b/sites/partners/pages/listings/[id]/applications/resolved/index.tsx
@@ -128,7 +128,10 @@ const ApplicationsList = () => {
               config={{
                 gridComponents: { formatLinkCell: getLinkCellFormatter(router) },
                 columns: columns,
-                totalItemsLabel: t("applications.totalApplications"),
+                totalItemsLabel:
+                  flaggedAppsData?.meta?.totalItems === 1
+                    ? t("applications.duplicates.set")
+                    : t("applications.duplicates.sets"),
               }}
               data={{
                 items: flaggedAppsData?.items ?? [],
diff --git a/sites/partners/src/applications/PaperApplicationForm/sections/FormApplicationData.tsx b/sites/partners/src/applications/PaperApplicationForm/sections/FormApplicationData.tsx
index 38096e625d..aaa3750c50 100644
--- a/sites/partners/src/applications/PaperApplicationForm/sections/FormApplicationData.tsx
+++ b/sites/partners/src/applications/PaperApplicationForm/sections/FormApplicationData.tsx
@@ -47,7 +47,7 @@ const FormApplicationData = () => {
             readerOnly
             errorMessage={t("errors.dateError")}
             required={!!isDateRequired}
-            labelClass={"field-label--caps"}
+            labelClass={"text__caps-spaced"}
           />
         </ViewItem>
 
@@ -62,7 +62,7 @@ const FormApplicationData = () => {
             readerOnly
             disabled={!isDateFilled}
             required={!!isDateFilled}
-            labelClass={"field-label--caps"}
+            labelClass={"text__caps-spaced"}
           />
         </ViewItem>
 
diff --git a/sites/partners/src/users/FormUserConfirm.tsx b/sites/partners/src/users/FormUserConfirm.tsx
index 5ac2be6f49..22a61beace 100644
--- a/sites/partners/src/users/FormUserConfirm.tsx
+++ b/sites/partners/src/users/FormUserConfirm.tsx
@@ -131,7 +131,7 @@ const FormUserConfirm = () => {
         <Form id="update-password" onSubmit={handleSubmit(onSubmit)}>
           <div className="form-card__group is-borderless">
             <fieldset>
-              <legend className="field-label--caps">
+              <legend className="text__caps-spaced">
                 {t("authentication.createAccount.password")}
               </legend>
               <p className="field-note mb-4">{t("users.makeNote")}</p>
diff --git a/sites/public/lib/helpers.tsx b/sites/public/lib/helpers.tsx
index 3ad43e299c..e8bd831ee1 100644
--- a/sites/public/lib/helpers.tsx
+++ b/sites/public/lib/helpers.tsx
@@ -5,7 +5,6 @@ import {
   ListingReviewOrder,
   UnitsSummarized,
   ListingStatus,
-  ListingAvailability,
 } from "@bloom-housing/backend-core/types"
 import {
   t,
@@ -52,10 +51,10 @@ const getListingCardSubtitle = (address: Address) => {
 
 const getListingTableData = (
   unitsSummarized: UnitsSummarized,
-  listingAvailability: ListingAvailability
+  listingReviewOrder: ListingReviewOrder
 ) => {
   return unitsSummarized !== undefined
-    ? getSummariesTable(unitsSummarized.byUnitTypeAndRent, listingAvailability)
+    ? getSummariesTable(unitsSummarized.byUnitTypeAndRent, listingReviewOrder)
     : []
 }
 
@@ -113,10 +112,18 @@ export const getListings = (listings) => {
   }
 
   const generateTableSubHeader = (listing) => {
-    if (listing.listingAvailability === ListingAvailability.availableUnits) {
-      return { content: t("listings.availableUnits"), styleType: AppearanceStyleType.success }
-    } else if (listing.listingAvailability === ListingAvailability.openWaitlist) {
-      return { content: t("listings.waitlist.open"), styleType: AppearanceStyleType.primary }
+    if (listing.reviewOrderType !== ListingReviewOrder.waitlist) {
+      return {
+        content: t("listings.availableUnits"),
+        styleType: AppearanceStyleType.success,
+        isPillType: true,
+      }
+    } else if (listing.reviewOrderType === ListingReviewOrder.waitlist) {
+      return {
+        content: t("listings.waitlist.open"),
+        styleType: AppearanceStyleType.primary,
+        isPillType: true,
+      }
     }
     return null
   }
@@ -139,7 +146,7 @@ export const getListings = (listings) => {
         }}
         tableProps={{
           headers: unitSummariesHeaders,
-          data: getListingTableData(listing.unitsSummarized, listing.listingAvailability),
+          data: getListingTableData(listing.unitsSummarized, listing.reviewOrderType),
           responsiveCollapse: true,
           cellClassName: "px-5 py-3",
         }}
diff --git a/sites/public/pages/_app.tsx b/sites/public/pages/_app.tsx
index 28c4ceb255..f0fb0f5b12 100644
--- a/sites/public/pages/_app.tsx
+++ b/sites/public/pages/_app.tsx
@@ -71,7 +71,7 @@ function BloomApp({ Component, router, pageProps }: AppProps) {
     if (process.env.NODE_ENV !== "production") {
       // eslint-disable-next-line @typescript-eslint/no-var-requires
       const axe = require("@axe-core/react")
-      void axe(React, ReactDOM, 1000)
+      void axe(React, ReactDOM, 5000)
     }
   }, [])
 
diff --git a/sites/public/pages/account/edit.tsx b/sites/public/pages/account/edit.tsx
index 590867f703..77ad940a9c 100644
--- a/sites/public/pages/account/edit.tsx
+++ b/sites/public/pages/account/edit.tsx
@@ -162,7 +162,7 @@ const Edit = () => {
               </AlertBox>
             )}
             <div className="form-card__group border-b">
-              <label className="field-label--caps" htmlFor="firstName">
+              <label className="text__caps-spaced" htmlFor="firstName">
                 {t("application.name.yourName")}
               </label>
 
@@ -269,7 +269,7 @@ const Edit = () => {
             )}
             <div className="form-card__group border-b">
               <fieldset>
-                <legend className="field-label--caps">
+                <legend className="text__caps-spaced">
                   {t("authentication.createAccount.password")}
                 </legend>
                 <p className="field-note mb-4">{t("account.settings.passwordRemember")}</p>
diff --git a/sites/public/pages/additional-resources.tsx b/sites/public/pages/additional-resources.tsx
index 2854624a83..bf86e4a00e 100644
--- a/sites/public/pages/additional-resources.tsx
+++ b/sites/public/pages/additional-resources.tsx
@@ -80,7 +80,7 @@ const AdditionalResources = () => {
                   overrides: {
                     h4: {
                       component: ({ children, ...props }) => (
-                        <h4 {...props} className="text-caps-underline">
+                        <h4 {...props} className={"text__caps_underline"}>
                           {children}
                         </h4>
                       ),
diff --git a/sites/public/pages/applications/contact/address.tsx b/sites/public/pages/applications/contact/address.tsx
index 408c0daf9b..079ec56244 100644
--- a/sites/public/pages/applications/contact/address.tsx
+++ b/sites/public/pages/applications/contact/address.tsx
@@ -288,7 +288,7 @@ const ApplicationAddress = () => {
             <div className="form-card__group border-b">
               <fieldset>
                 <legend
-                  className={`field-label--caps ${errors.applicant?.address ? "text-alert" : ""}`}
+                  className={`text__caps-spaced ${errors.applicant?.address ? "text-alert" : ""}`}
                 >
                   {t("application.contact.address")}
                 </legend>
@@ -378,7 +378,7 @@ const ApplicationAddress = () => {
             {clientLoaded && (sendMailToMailingAddress || application.sendMailToMailingAddress) && (
               <div className="form-card__group border-b">
                 <fieldset>
-                  <legend className="field-label--caps">
+                  <legend className="text__caps-spaced">
                     {t("application.contact.mailingAddress")}
                   </legend>
 
@@ -456,7 +456,7 @@ const ApplicationAddress = () => {
             <div className="form-card__group border-b">
               <fieldset>
                 <legend
-                  className={`field-label--caps ${errors?.contactPreferences ? "text-alert" : ""}`}
+                  className={`text__caps-spaced ${errors?.contactPreferences ? "text-alert" : ""}`}
                 >
                   {t("application.contact.contactPreference")}
                 </legend>
@@ -476,7 +476,7 @@ const ApplicationAddress = () => {
             <div className="form-card__group">
               <fieldset>
                 <legend
-                  className={`field-label--caps ${
+                  className={`text__caps-spaced ${
                     errors?.applicant?.workInRegion ? "text-alert" : ""
                   }`}
                 >
@@ -529,7 +529,7 @@ const ApplicationAddress = () => {
                 (!workInRegion && application.applicant.workInRegion == "yes")) && (
                 <div className="form-card__group mx-0 px-0 mt-2">
                   <fieldset>
-                    <legend className="field-label--caps">
+                    <legend className="text__caps-spaced">
                       {t("application.contact.workAddress")}
                     </legend>
 
diff --git a/sites/public/pages/applications/contact/alternate-contact-contact.tsx b/sites/public/pages/applications/contact/alternate-contact-contact.tsx
index 893b5ce31d..dcc6c378d8 100644
--- a/sites/public/pages/applications/contact/alternate-contact-contact.tsx
+++ b/sites/public/pages/applications/contact/alternate-contact-contact.tsx
@@ -102,7 +102,7 @@ export default () => {
           onSubmit={handleSubmit(onSubmit, onError)}
         >
           <div className="form-card__group border-b">
-            <label className="field-label--caps" htmlFor="phoneNumber">
+            <label className="text__caps-spaced" htmlFor="phoneNumber">
               {t("application.alternateContact.contact.phoneNumberFormLabel")}
             </label>
             <PhoneField
@@ -120,7 +120,7 @@ export default () => {
             />
           </div>
           <div className="form-card__group border-b">
-            <h3 className="field-label--caps">
+            <h3 className="text__caps-spaced">
               {t("application.alternateContact.contact.emailAddressFormLabel")}
             </h3>
             <Field
@@ -140,7 +140,7 @@ export default () => {
           </div>
           <div className="form-card__group">
             <fieldset>
-              <legend className="field-label--caps">
+              <legend className="text__caps-spaced">
                 {t("application.alternateContact.contact.contactMailingAddressLabel")}
               </legend>
               <p className="field-note mb-4">
diff --git a/sites/public/pages/applications/contact/alternate-contact-name.tsx b/sites/public/pages/applications/contact/alternate-contact-name.tsx
index 1f3a7c1b1a..71c37ef467 100644
--- a/sites/public/pages/applications/contact/alternate-contact-name.tsx
+++ b/sites/public/pages/applications/contact/alternate-contact-name.tsx
@@ -85,7 +85,7 @@ export default () => {
         <Form id="applications-contact-alternate-name" onSubmit={handleSubmit(onSubmit, onError)}>
           <div className="form-card__group">
             <fieldset>
-              <legend className="field-label--caps">
+              <legend className="text__caps-spaced">
                 {t("application.alternateContact.name.alternateContactFormLabel")}
               </legend>
               <Field
diff --git a/sites/public/pages/applications/contact/alternate-contact-type.tsx b/sites/public/pages/applications/contact/alternate-contact-type.tsx
index 4cf610c35c..e6bc3349d4 100644
--- a/sites/public/pages/applications/contact/alternate-contact-type.tsx
+++ b/sites/public/pages/applications/contact/alternate-contact-type.tsx
@@ -96,7 +96,7 @@ const ApplicationAlternateContactType = () => {
         <Form id="applications-contact-alternate-type" onSubmit={handleSubmit(onSubmit, onError)}>
           <div className="form-card__group">
             <fieldset>
-              <legend className={`field-label--caps ${errors?.type ? "text-alert" : ""}`}>
+              <legend className={`text__caps-spaced ${errors?.type ? "text-alert" : ""}`}>
                 {t("application.alternateContact.type.label")}
               </legend>
               <p className="field-note mb-4">{t("t.pleaseSelectOne")}</p>
diff --git a/sites/public/pages/applications/contact/name.tsx b/sites/public/pages/applications/contact/name.tsx
index d932929109..4062e85e1a 100644
--- a/sites/public/pages/applications/contact/name.tsx
+++ b/sites/public/pages/applications/contact/name.tsx
@@ -101,7 +101,7 @@ const ApplicationName = () => {
           <div className="form-card__group border-b" data-test-id={"application-initial-page"}>
             <fieldset>
               <legend
-                className={`field-label--caps ${errors.applicant?.firstName ? "text-alert" : ""}`}
+                className={`text__caps-spaced ${errors.applicant?.firstName ? "text-alert" : ""}`}
               >
                 {t("application.name.yourName")}
                 <LockIcon />
@@ -175,7 +175,7 @@ const ApplicationName = () => {
 
           <div className="form-card__group">
             <legend
-              className={`field-label--caps ${errors.applicant?.emailAddress ? "text-alert" : ""}`}
+              className={`text__caps-spaced ${errors.applicant?.emailAddress ? "text-alert" : ""}`}
             >
               {t("application.name.yourEmailAddress")}
               <LockIcon />
diff --git a/sites/public/pages/applications/household/member.tsx b/sites/public/pages/applications/household/member.tsx
index dfd4a0efd2..72cebcc3a9 100644
--- a/sites/public/pages/applications/household/member.tsx
+++ b/sites/public/pages/applications/household/member.tsx
@@ -148,7 +148,7 @@ const ApplicationMember = () => {
             <Form onSubmit={handleSubmit(onSubmit, onError)}>
               <div className="form-card__group border-b">
                 <fieldset>
-                  <legend className="field-label--caps">
+                  <legend className="text__caps-spaced">
                     {t("application.household.member.name")}
                   </legend>
 
@@ -211,7 +211,7 @@ const ApplicationMember = () => {
 
               <div className="form-card__group border-b">
                 <fieldset>
-                  <legend className="field-label--caps">
+                  <legend className="text__caps-spaced">
                     {t("application.household.member.haveSameAddress")}
                   </legend>
                   <FieldGroup
@@ -230,7 +230,7 @@ const ApplicationMember = () => {
 
                 {(sameAddress == "no" || (!sameAddress && member.sameAddress == "no")) && (
                   <fieldset className="mt-8">
-                    <legend className="field-label--caps">
+                    <legend className="text__caps-spaced">
                       {t("application.contact.address")}
                     </legend>
 
@@ -306,7 +306,7 @@ const ApplicationMember = () => {
 
               <div className="form-card__group border-b">
                 <fieldset>
-                  <legend className="field-label--caps">
+                  <legend className="text__caps-spaced">
                     {t("application.household.member.workInRegion", {
                       county: listing?.countyCode,
                     })}
@@ -328,7 +328,7 @@ const ApplicationMember = () => {
 
                 {(workInRegion == "yes" || (!workInRegion && member.workInRegion == "yes")) && (
                   <fieldset className="mt-8">
-                    <legend className="field-label--caps">
+                    <legend className="text__caps-spaced">
                       {t("application.contact.address")}
                     </legend>
 
@@ -402,7 +402,7 @@ const ApplicationMember = () => {
 
               <div className="form-card__group">
                 <div className={"field " + (errors.relationship ? "error" : "")}>
-                  <label className="field-label--caps" htmlFor="relationship">
+                  <label className="text__caps-spaced" htmlFor="relationship">
                     {t("application.household.member.whatIsTheirRelationship")}
                   </label>
                   <div className="control">
diff --git a/sites/public/pages/applications/review/demographics.tsx b/sites/public/pages/applications/review/demographics.tsx
index ba02053fac..b5081bc4b5 100644
--- a/sites/public/pages/applications/review/demographics.tsx
+++ b/sites/public/pages/applications/review/demographics.tsx
@@ -109,7 +109,7 @@ const ApplicationDemographics = () => {
         <Form onSubmit={handleSubmit(onSubmit)}>
           <div className="form-card__group border-b">
             <fieldset>
-              <legend className="field-label--caps">
+              <legend className="text__caps-spaced">
                 {t("application.review.demographics.raceLabel")}
               </legend>
               <FieldGroup
@@ -140,7 +140,7 @@ const ApplicationDemographics = () => {
                 label={t("application.review.demographics.ethnicityLabel")}
                 placeholder={t("t.selectOne")}
                 register={register}
-                labelClassName="field-label--caps mb-3"
+                labelClassName="text__caps-spaced mb-3"
                 controlClassName="control"
                 options={ethnicityKeys}
                 keyPrefix="application.review.demographics.ethnicityOptions"
@@ -151,7 +151,7 @@ const ApplicationDemographics = () => {
 
           <div className="form-card__group is-borderless">
             <fieldset>
-              <legend className="field-label--caps">
+              <legend className="text__caps-spaced">
                 {t("application.review.demographics.howDidYouHearLabel")}
               </legend>
               <FieldGroup
diff --git a/sites/public/pages/applications/start/choose-language.tsx b/sites/public/pages/applications/start/choose-language.tsx
index 66437dc107..62d7b49752 100644
--- a/sites/public/pages/applications/start/choose-language.tsx
+++ b/sites/public/pages/applications/start/choose-language.tsx
@@ -139,7 +139,7 @@ const ApplicationChooseLanguage = () => {
             {listing?.applicationConfig.languages.length > 1 && (
               <>
                 <div className="w-full">
-                  <Heading style="sidebarHeader">
+                  <Heading styleType="underlineWeighted">
                     {t("application.chooseLanguage.chooseYourLanguage")}
                   </Heading>
                 </div>
diff --git a/sites/public/pages/create-account.tsx b/sites/public/pages/create-account.tsx
index a5f7a265c4..756dfb4f21 100644
--- a/sites/public/pages/create-account.tsx
+++ b/sites/public/pages/create-account.tsx
@@ -89,7 +89,7 @@ export default () => {
 
         <Form id="create-account" onSubmit={handleSubmit(onSubmit)}>
           <div className="form-card__group border-b">
-            <label className="field-label--caps" htmlFor="firstName">
+            <label className="text__caps-spaced" htmlFor="firstName">
               {t("application.name.yourName")}
             </label>
 
diff --git a/sites/public/src/ApplicationMultiselectQuestionStep.tsx b/sites/public/src/ApplicationMultiselectQuestionStep.tsx
index 959afdbd39..a26329959c 100644
--- a/sites/public/src/ApplicationMultiselectQuestionStep.tsx
+++ b/sites/public/src/ApplicationMultiselectQuestionStep.tsx
@@ -188,7 +188,7 @@ const ApplicationMultiselectQuestionStep = ({
             <div className={`form-card__group`}>
               {questionSetInputType === "checkbox" ? (
                 <fieldset>
-                  <legend className="field-label--caps mb-4">{question?.text}</legend>
+                  <legend className="text__caps-spaced mb-4">{question?.text}</legend>
                   <p className="field-note mb-8">{question?.description}</p>
 
                   {allOptions.map((option) => {
diff --git a/sites/public/src/ListingView.tsx b/sites/public/src/ListingView.tsx
index 84ba8b2de8..63dc06d453 100644
--- a/sites/public/src/ListingView.tsx
+++ b/sites/public/src/ListingView.tsx
@@ -513,10 +513,10 @@ export const ListingView = (props: ListingProps) => {
           description={listing.name}
         />
         <div className="py-3 mx-3 flex flex-col items-center md:items-start text-center md:text-left">
-          <Heading priority={1} style={"cardHeader"} className={"text-black"}>
+          <Heading priority={1} styleType={"largePrimary"} className={"text-black"}>
             {listing.name}
           </Heading>
-          <Heading priority={2} style={"cardSubheader"} className={"mb-1"}>
+          <Heading priority={2} styleType={"mediumNormal"} className={"mb-1"}>
             {oneLineAddress}
           </Heading>
           <p className="text-gray-750 text-base mb-1">{listing.developer}</p>
diff --git a/ui-components/.storybook/preview.ts b/ui-components/.storybook/preview.ts
index 0196ae6e35..1072e465c0 100644
--- a/ui-components/.storybook/preview.ts
+++ b/ui-components/.storybook/preview.ts
@@ -12,6 +12,7 @@ export const parameters = {
   options: {
     storySort: {
       order: [
+        "Documentation",
         "Actions",
         "Blocks",
         "Footers",
@@ -24,6 +25,10 @@ export const parameters = {
         "Overlays",
         "Sections",
         "Tables",
+        "Text",
+        "Listing Sidebar",
+        "Listing",
+        "Prototypes",
       ],
     },
   },
diff --git a/ui-components/__tests__/blocks/Card.test.tsx b/ui-components/__tests__/blocks/Card.test.tsx
new file mode 100644
index 0000000000..00721b3750
--- /dev/null
+++ b/ui-components/__tests__/blocks/Card.test.tsx
@@ -0,0 +1,74 @@
+import React from "react"
+import { render, cleanup } from "@testing-library/react"
+import { Card } from "../../src/blocks/Card"
+import { HeadingGroup } from "../../src/headers/HeadingGroup"
+import { Button } from "../../src/actions/Button"
+import { ButtonGroup } from "../../src/actions/ButtonGroup"
+import { LinkButton } from "../../src/actions/LinkButton"
+import { AppearanceStyleType } from "../../src/global/AppearanceTypes"
+
+afterEach(cleanup)
+
+describe("<Card>", () => {
+  it("renders text structure", () => {
+    const { getByText } = render(
+      <Card>
+        <Card.Header>
+          <h3>I'm just a heading</h3>
+        </Card.Header>
+
+        <Card.Section className="markdown">
+          <p>Markdown styled content here.</p>
+        </Card.Section>
+
+        <Card.Footer>
+          <Card.Section>
+            <p>Footer content here.</p>
+          </Card.Section>
+        </Card.Footer>
+      </Card>
+    )
+
+    expect(getByText("I'm just a heading")).toBeTruthy()
+    expect(getByText("Markdown styled content here.")).toBeTruthy()
+    expect(getByText("Footer content here.")).toBeTruthy()
+  })
+
+  it("renders headers and buttons", () => {
+    const { getByText } = render(
+      <Card>
+        <Card.Header>
+          <HeadingGroup
+            headingPriority={2}
+            heading="Household Maximum Income"
+            subheading="To determine your eligibility for this property, choose your household size (include yourself in that calculation)."
+          />
+        </Card.Header>
+
+        <Card.Footer>
+          <ButtonGroup
+            columns={[
+              <Button>Previous</Button>,
+              <Button styleType={AppearanceStyleType.primary}>Next</Button>,
+            ]}
+          />
+          <Card.Section centered={true}>
+            <LinkButton href="#" unstyled className="m-0">
+              Skip this and show me listings
+            </LinkButton>
+          </Card.Section>
+        </Card.Footer>
+      </Card>
+    )
+
+    expect(getByText("Household Maximum Income")).toBeTruthy()
+    expect(
+      getByText(
+        "To determine your eligibility for this property, choose your household size (include yourself in that calculation)."
+      )
+    ).toBeTruthy()
+    expect(getByText("Previous")).toBeTruthy()
+    expect(getByText("Next")).toBeTruthy()
+    expect(getByText("Skip this and show me listings")).toBeTruthy()
+  })
+})
diff --git a/ui-components/index.ts b/ui-components/index.ts
index c26bf41d8b..859dcf4578 100644
--- a/ui-components/index.ts
+++ b/ui-components/index.ts
@@ -10,6 +10,7 @@ export * from "./src/actions/Video"
 /* Blocks */
 export * from "./src/blocks/ActionBlock"
 export * from "./src/blocks/StatusItem"
+export * from "./src/blocks/Card"
 export * from "./src/blocks/DashBlock"
 export * from "./src/blocks/DashBlocks"
 export * from "./src/blocks/FormCard"
@@ -54,7 +55,7 @@ export * from "./src/headers/Hero"
 export * from "./src/headers/PageHeader"
 export * from "./src/headers/SiteHeader"
 export * from "./src/headers/StepHeader"
-export * from "./src/headers/Heading"
+export * from "./src/headers/HeadingGroup"
 
 /* Helpers */
 export * from "./src/helpers/capitalize"
@@ -162,5 +163,6 @@ export * from "./src/tables/AgPagination"
 
 /* Text */
 export * from "./src/text/Description"
+export * from "./src/text/Heading"
 export * from "./src/text/Message"
 export * from "./src/text/Tag"
diff --git a/ui-components/package.json b/ui-components/package.json
index 2c7c7f7e28..3f1a1a4379 100644
--- a/ui-components/package.json
+++ b/ui-components/package.json
@@ -43,6 +43,7 @@
     "@types/dompurify": "^2.3.3",
     "@types/jest": "^26.0.14",
     "@types/jwt-decode": "^2.2.1",
+    "@types/pretty": "2.0.1",
     "@types/react-map-gl": "^5.2.10",
     "@types/react-tabs": "^2.3.2",
     "@types/react-test-renderer": "^16.9.3",
@@ -57,8 +58,10 @@
     "postcss": "^8.3.6",
     "postcss-loader": "^4.3",
     "preact": "^10.5.14",
+    "pretty": "2.0.0",
     "puppeteer": "^10.1.0",
     "react-is": "^17.0.2",
+    "react-dom-server": "0.0.5",
     "react-test-renderer": "^17.0.2",
     "regenerator-runtime": "^0.13.7",
     "sass": "1.52.1",
diff --git a/ui-components/src/actions/Button.scss b/ui-components/src/actions/Button.scss
index 335d04c0f8..6a223f45f1 100644
--- a/ui-components/src/actions/Button.scss
+++ b/ui-components/src/actions/Button.scss
@@ -54,7 +54,7 @@
 
   &.is-secondary {
     border-color: var(--bloom-color-gray-700);
-    color: var(--bloom-color-gray-700);
+    color: var(--bloom-text-color-light);
 
     &:hover {
       background-color: var(--bloom-color-gray-700);
diff --git a/ui-components/src/blocks/Card.docs.mdx b/ui-components/src/blocks/Card.docs.mdx
new file mode 100644
index 0000000000..fbc75a3daa
--- /dev/null
+++ b/ui-components/src/blocks/Card.docs.mdx
@@ -0,0 +1,60 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { Swatch } from "../prototypes/Swatch"
+import { Card } from "./Card"
+
+# Card
+
+<Canvas>
+  <Story id="blocks-card--text-content" />
+</Canvas>
+
+The 2nd-generation Card component is intended to serve as a flexible content container with a header, optional content sections, and a footer. Over time our intention is to "port" some other card types and content blocks in the system to use Card as their underlying structure.
+
+Styles within the Card node tree are intended to set up sensible defaults without requiring the consumer to configure bespoke styling as they author a card. For example, rule lines will be drawn automatically between the various subcomponents within a card, and margin/padding will be set according to top-level variables.
+
+You can author a Card using subcomponents simply by referencing them via a single Card import. For example, `<Card.Header>`, `<Card.Footer>` etc. In the case where you want to create a new type of card, you can import the subcomponents directly as `<CardHeader>`, `<CardFooter>`, etc. and place them in any container. It's still recommended you include the `.card` class on your custom container so you inherit a base set of CSS properties.
+
+Note that the `<Card.Footer>` subcomponent doesn't inherently add rules or padding so that you can use other components with self-contained styling such as `<ButtonGroup>`. However, you can add `<Card.Section>` within `<Card.Footer>` to add rules and padding.
+
+The `<Card.Header>` subcomponent will typically be paired with a child `<HeadingGroup>` for a title + subtitle grouping, but that's not a requirement.
+
+You can browse through the various stories for different examples of how you'd pattern a card with various subcomponents. Many of the visual aspects of a Card can be customized using the CSS variables listed below. For example, this "Detroit style" example:
+
+<Canvas>
+  <Story id="blocks-card--detroit-style" />
+</Canvas>
+
+## Card Properties
+
+<ArgsTable of={Card} />
+
+## Card.Header Properties
+
+<ArgsTable of={Card.Header} />
+
+## Card.Section Properties
+
+<ArgsTable of={Card.Section} />
+
+## Card.Footer Properties
+
+<ArgsTable of={Card.Footer} />
+
+## Theming Variables
+
+You can apply CSS variables to the `.card` selector to customize the appearance of both the component and various subcomponents.
+
+| Name                              | Type                                         | Description                                                                  | Default                  |
+| --------------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------- | ------------------------ |
+| `--background-color`              | <Swatch colorVar="--bloom-color-white" />    | Background color of the card                                                 | `--bloom-color-white`    |
+| `--border-radius`                 | Size                                         | Border radius of the card                                                    | `--bloom-rounded-lg`     |
+| `--border-width`                  | Size                                         | Border width of the card (and rules by default)                              | `--bloom-border-1`       |
+| `--border-color`                  | <Swatch colorVar="--bloom-color-gray-450" /> | Border color of the card (and rules by default)                              | `--bloom-color-gray-450` |
+| `--rule-width`                    | Size                                         | Width of the inset rules                                                     | `--border-width`         |
+| `--rule-color`                    | <Swatch colorVar="--bloom-color-gray-450" /> | Color of the inset rules                                                     | `--border-color`         |
+| `--content-padding-block`         | Size                                         | The space above and below content sections                                   | `--bloom-s8`             |
+| `--content-margin-inline-desktop` | Size                                         | The space to the left and right of content sections for desktop-size screens | `--bloom-s16`            |
+| `--content-margin-inline-mobile`  | Size                                         | The space to the left and right of content sections for mobile-size screens  | `--bloom-s4`             |
+| `--header-padding-block`          | Size                                         | The space above and below the header                                         | `--bloom-s8`             |
+| `--header-margin-inline-desktop`  | Size                                         | The space to the left and right of the header for desktop-size screens       | `--bloom-s16`            |
+| `--header-margin-inline-mobile`   | Size                                         | The space to the left and right of the header for mobile-size screens        | `--bloom-s4`             |
diff --git a/ui-components/src/blocks/Card.scss b/ui-components/src/blocks/Card.scss
new file mode 100644
index 0000000000..eab0c046dc
--- /dev/null
+++ b/ui-components/src/blocks/Card.scss
@@ -0,0 +1,65 @@
+.card {
+  /* Component Variables */
+  --background-color: var(--bloom-color-white);
+  --border-radius: var(--bloom-rounded-lg);
+  --border-width: var(--bloom-border-1);
+  --border-color: var(--bloom-color-gray-450);
+  --rule-width: var(--border-width);
+  --rule-color: var(--border-color);
+
+  --content-padding-block: var(--bloom-s8);
+  --content-margin-inline-desktop: var(--bloom-s16);
+  --content-margin-inline-mobile: var(--bloom-s4);
+  --content-margin-inline: var(--content-margin-inline-desktop);
+
+  --header-padding-block: var(--bloom-s8) var(--bloom-s3);
+  --header-margin-inline-desktop: var(--content-margin-inline-desktop);
+  --header-margin-inline-mobile: var(--content-margin-inline-mobile);
+  --header-margin-inline: var(--header-margin-inline-desktop);
+
+  @media (max-width: $screen-sm) {
+    --content-margin-inline: var(--content-margin-inline-mobile);
+    --header-margin-inline: var(--header-margin-inline-mobile);
+  }
+
+  /* Default Styles */
+  background-color: var(--background-color);
+  border: var(--border-width) solid var(--border-color);
+  overflow: hidden;
+  border-radius: var(--border-radius);
+  display: flex;
+  flex-direction: column;
+}
+
+.card__header {
+  padding-block: var(--header-padding-block);
+  margin-inline: var(--header-margin-inline);
+  border-bottom: var(--rule-width) solid var(--rule-color);
+
+  &.is-flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--bloom-s7);
+  }
+}
+
+.card__header + .card__footer {
+  margin-block-start: var(--content-padding-block);
+}
+
+.card > *:nth-child(n + 3),
+.card__footer > .card__section {
+  border-top: var(--rule-width) solid var(--rule-color);
+}
+
+.card__section {
+  padding-block: var(--content-padding-block);
+  margin-inline: var(--content-margin-inline);
+}
+
+/* Using the double-class specificity hack, proceed with caution: */
+.card__footer.card__footer,
+.card__footer.card__footer > :not(.card__section) + .card__section {
+  border-top: none;
+}
diff --git a/ui-components/src/blocks/Card.stories.tsx b/ui-components/src/blocks/Card.stories.tsx
new file mode 100644
index 0000000000..9f7344ea48
--- /dev/null
+++ b/ui-components/src/blocks/Card.stories.tsx
@@ -0,0 +1,182 @@
+import React from "react"
+import { BADGES } from "../../.storybook/constants"
+import { AppearanceStyleType, Button, ButtonGroup, ButtonGroupSpacing, LinkButton } from "../.."
+import { HeadingGroup } from "../headers/HeadingGroup"
+import Card from "./Card"
+import CardDocumentation from "./Card.docs.mdx"
+
+export default {
+  title: "Blocks/Card 🚩",
+  id: "blocks/card",
+  parameters: {
+    docs: {
+      page: CardDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const TextContent = () => (
+  <div style={{ maxWidth: "500px" }}>
+    <Card>
+      <Card.Header>
+        <h3>I'm just a heading</h3>
+      </Card.Header>
+
+      <Card.Section className="markdown">
+        <p>Markdown styled content here.</p>
+
+        <ul>
+          <li>List Item 1</li>
+          <li>List Item 2</li>
+        </ul>
+      </Card.Section>
+
+      <Card.Footer>
+        <Card.Section>
+          <p>Footer content here.</p>
+        </Card.Section>
+      </Card.Footer>
+    </Card>
+  </div>
+)
+
+export const MixedContent = () => (
+  <div style={{ maxWidth: "500px" }}>
+    <Card>
+      <div>
+        <figure>
+          <img src="/images/listing.jpg" />
+        </figure>
+
+        <Card.Header
+          suffix={
+            <div>
+              <Button>Click</Button>
+            </div>
+          }
+        >
+          <h3 className="card-header">I'm a heading!</h3>
+        </Card.Header>
+      </div>
+
+      <Card.Section>
+        <p>Hello World!</p>
+      </Card.Section>
+
+      <Card.Footer>
+        <ButtonGroup
+          spacing={ButtonGroupSpacing.even}
+          columns={[<Button styleType={AppearanceStyleType.primary}>Call to Action</Button>]}
+        />
+      </Card.Footer>
+    </Card>
+  </div>
+)
+
+export const HeaderFooterOnly = () => (
+  <div style={{ maxWidth: "600px" }}>
+    <Card>
+      <Card.Header>
+        <HeadingGroup
+          headingPriority={2}
+          heading="Household Maximum Income"
+          subheading="To determine your eligibility for this property, choose your household size (include yourself in that calculation)."
+        />
+      </Card.Header>
+
+      <Card.Footer>
+        <ButtonGroup
+          columns={[
+            <Button>Previous</Button>,
+            <Button styleType={AppearanceStyleType.primary}>Next</Button>,
+          ]}
+        />
+        <Card.Section centered={true}>
+          <LinkButton href="#" unstyled className="m-0">
+            Skip this and show me listings
+          </LinkButton>
+        </Card.Section>
+      </Card.Footer>
+    </Card>
+  </div>
+)
+
+export const DetroitStyle = () => {
+  const cssVarsOverride = `
+    .card-overrides {
+      --bloom-font-sans: Montserrat;
+      --bloom-font-alt-sans: var(--bloom-font-sans);
+      --bloom-color-primary: rgb(41,126,115);
+      --bloom-color-primary-dark: rgb(0,68,69);
+
+      --primary-appearance-hover-background-color: white;
+      --primary-appearance-hover-label-color: var(--bloom-color-primary-dark);
+
+      --outlined-appearance-hover-background-color: var(--bloom-color-primary);
+      --outlined-appearance-hover-border-color: var(--bloom-color-primary);
+
+      font-family: var(--bloom-font-sans);
+    }
+
+    .card-overrides .heading-group > *:first-child {
+      font-family: var(--bloom-font-sans);
+    }
+
+    .card-overrides .button {
+      --normal-rounded: 60px;
+      --normal-padding: 0.5rem 1rem;
+      --normal-font-size: var(--bloom-font-size-base);
+      --label-letter-spacing: normal;
+      --label-transform: none;
+    }
+  `
+
+  return (
+    <>
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
+        rel="stylesheet"
+      ></link>
+      <div className="card-overrides" style={{ maxWidth: "600px" }}>
+        <Card>
+          <Card.Header>
+            <HeadingGroup
+              headingPriority={2}
+              heading="Household Maximum Income"
+              subheading="To determine your eligibility for this property, choose your household size (include yourself in that calculation)."
+            />
+          </Card.Header>
+
+          <Card.Section className="markdown">
+            <div className="field">
+              <input type="radio" name="household-size" id="one-two" />
+              <label htmlFor="one-two">1-2 People</label>
+            </div>
+            <div className="field">
+              <input type="radio" name="household-size" id="three-six" />
+              <label htmlFor="three-six">3-6 People</label>
+            </div>
+          </Card.Section>
+
+          <Card.Footer>
+            <ButtonGroup
+              columns={[
+                <Button>Previous</Button>,
+                <Button styleType={AppearanceStyleType.primary}>Next</Button>,
+              ]}
+            />
+            <Card.Section centered={true}>
+              <LinkButton href="#" unstyled className="m-0">
+                Skip this and show me listings
+              </LinkButton>
+            </Card.Section>
+          </Card.Footer>
+        </Card>
+        <style>{cssVarsOverride}</style>
+      </div>
+    </>
+  )
+}
diff --git a/ui-components/src/blocks/Card.tsx b/ui-components/src/blocks/Card.tsx
new file mode 100644
index 0000000000..baec577913
--- /dev/null
+++ b/ui-components/src/blocks/Card.tsx
@@ -0,0 +1,74 @@
+import React from "react"
+import "./Card.scss"
+
+export interface CardHeaderProps {
+  /** An additional element(s) you can add to the side of the main child element(s) */
+  suffix?: React.ReactNode
+  /** Additional class name */
+  className?: string
+  children: React.ReactNode
+}
+
+const CardHeader = (props: CardHeaderProps) => {
+  const classNames = ["card__header"]
+  if (props.suffix) classNames.push("is-flex")
+  if (props.className) classNames.push(props.className)
+
+  return (
+    <header className={classNames.join(" ")}>
+      {props.children}
+      {props.suffix}
+    </header>
+  )
+}
+
+export interface CardSectionProps {
+  /**
+   * Whether to center the text within the section
+   * @default false
+   */
+  centered?: boolean
+  /** Additional class name */
+  className?: string
+  children: React.ReactNode
+}
+
+const CardSection = (props: CardSectionProps) => {
+  const classNames = ["card__section"]
+  if (props.centered) classNames.push("text-center")
+  if (props.className) classNames.push(props.className)
+
+  return <div className={classNames.join(" ")}>{props.children}</div>
+}
+
+export interface CardFooterProps {
+  /** Additional class name */
+  className?: string
+  children: React.ReactNode
+}
+
+const CardFooter = (props: CardFooterProps) => {
+  const classNames = ["card__footer"]
+  if (props.className) classNames.push(props.className)
+
+  return <footer className={classNames.join(" ")}>{props.children}</footer>
+}
+
+export interface CardProps {
+  /** Additional class name */
+  className?: string
+  children: React.ReactNode
+}
+
+const Card = (props: CardProps) => {
+  const classNames = ["card"]
+  if (props.className) classNames.push(props.className)
+
+  return <article className={classNames.join(" ")}>{props.children}</article>
+}
+
+Card.Header = CardHeader
+Card.Section = CardSection
+Card.Footer = CardFooter
+
+export { Card as default, Card, CardHeader, CardSection, CardFooter }
diff --git a/ui-components/src/blocks/ImageCard.scss b/ui-components/src/blocks/ImageCard.scss
index bc56306d95..2bcc347a24 100644
--- a/ui-components/src/blocks/ImageCard.scss
+++ b/ui-components/src/blocks/ImageCard.scss
@@ -150,7 +150,7 @@
 }
 
 .modal.image-card__gallery-modal {
-  --title-color: var(--bloom-color-gray-750);
+  --title-color: var(--bloom-text-color);
   --background-color: transparent;
   --content-padding-block: var(--bloom-s2) var(--bloom-s4);
   --footer-background-color: transparent;
diff --git a/ui-components/src/blocks/StandardCard.scss b/ui-components/src/blocks/StandardCard.scss
index 123f4ecf0c..5e2381c1e5 100644
--- a/ui-components/src/blocks/StandardCard.scss
+++ b/ui-components/src/blocks/StandardCard.scss
@@ -5,7 +5,7 @@
   --border-color: var(--bloom-color-gray-500);
   --title-color: var(--bloom-color-gray-900);
   --background-color: var(--bloom-color-white);
-  --blank-color: var(--bloom-color-gray-750);
+  --blank-color: var(--bloom-text-color);
   --blank-background: var(--bloom-color-gray-200);
 }
 
diff --git a/ui-components/src/blocks/StandardCard.tsx b/ui-components/src/blocks/StandardCard.tsx
index cc7d1e46ad..620e504124 100644
--- a/ui-components/src/blocks/StandardCard.tsx
+++ b/ui-components/src/blocks/StandardCard.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { Heading } from "../headers/Heading"
+import { Heading } from "../text/Heading"
 import "./StandardCard.scss"
 
 export interface StandardCardProps {
diff --git a/ui-components/src/documentation/Utilities.scss b/ui-components/src/documentation/Utilities.scss
new file mode 100644
index 0000000000..4d3080448a
--- /dev/null
+++ b/ui-components/src/documentation/Utilities.scss
@@ -0,0 +1,30 @@
+.mdx-table {
+  width: 100%;
+  table-layout: auto;
+  white-space: nowrap;
+  margin-top: var(--bloom-s8);
+  font-size: var(--bloom-font-size-tiny);
+
+  tr {
+    padding: var(--bloom-s4);
+    background-color: var(--bloom-color-white) !important;
+  }
+
+  th {
+    background-color: var(--bloom-color-primary-lighter);
+    text-transform: uppercase;
+    font-weight: 700;
+    color: var(--bloom-text-color-darker);
+    letter-spacing: var(--bloom-letter-spacing-wide);
+  }
+
+  td:not(:first-child) {
+    width: 100%;
+  }
+
+  td,
+  th {
+    padding: var(--bloom-s2) var(--bloom-s4) var(--bloom-s2) var(--bloom-s4);
+    border: 1px solid var(--bloom-color-gray-450);
+  }
+}
diff --git a/ui-components/src/documentation/Utilities.stories.mdx b/ui-components/src/documentation/Utilities.stories.mdx
new file mode 100644
index 0000000000..d422279878
--- /dev/null
+++ b/ui-components/src/documentation/Utilities.stories.mdx
@@ -0,0 +1,25 @@
+import { Canvas, Story, Meta, DocsContainer, Source } from "@storybook/addon-docs"
+import { LargeHeader, LargeHeaderSource, Typography } from "./Utilities"
+
+<Meta
+  title="Documentation/Utilities"
+  parameters={{
+    docs: {
+      container: ({ children, context }) => (
+        <DocsContainer context={context}>
+          <div>{children}</div>
+        </DocsContainer>
+      ),
+    },
+  }}
+/>
+
+# Utilities
+
+These styles are component agnostic and can be used to ensure UI consistency across the application.
+
+## Typography
+
+These classes can be added to any text element in order to give it visual identity and hierarchy.
+
+<Typography />
diff --git a/ui-components/src/documentation/Utilities.tsx b/ui-components/src/documentation/Utilities.tsx
new file mode 100644
index 0000000000..e92011e0a8
--- /dev/null
+++ b/ui-components/src/documentation/Utilities.tsx
@@ -0,0 +1,67 @@
+import * as React from "react"
+import "./Utilities.scss"
+
+interface CustomMdxTableProps {
+  data: (string | React.ReactNode)[][]
+  headers: (string | React.ReactNode)[]
+}
+
+const CustomMdxTable = (props: CustomMdxTableProps) => {
+  return (
+    <table className={"mdx-table"}>
+      {props.headers.length > 0 && (
+        <tr>
+          {props.headers.map((header) => {
+            return <th align="left">{header}</th>
+          })}
+        </tr>
+      )}
+
+      {props.data.map((row) => {
+        return (
+          <tr>
+            {row.map((cell) => {
+              return <td>{cell}</td>
+            })}
+          </tr>
+        )
+      })}
+    </table>
+  )
+}
+
+export const Typography = () => {
+  return (
+    <CustomMdxTable
+      headers={["Class", "Example"]}
+      data={[
+        [
+          "text__large-primary",
+          <div className={"text__large-primary"}>Large Primary Text Style</div>,
+        ],
+        [
+          "text__medium-normal",
+          <div className={"text__medium-normal"}>Medium Normal Text Style</div>,
+        ],
+        [
+          "text__small-weighted",
+          <div className={"text__small-weighted"}>Small Weighted Text Style</div>,
+        ],
+        ["text__small-normal", <div className={"text__small-normal"}>Small Normal Text Style</div>],
+        [
+          "text__underline-weighted",
+          <div className={"text__underline-weighted"}>Underline Weighted Text Style</div>,
+        ],
+        [
+          "text__light-weighted",
+          <div className={"text__light-weighted"}>Light Weighted Text Style</div>,
+        ],
+        [
+          "text__caps-weighted",
+          <div className={"text__caps-weighted"}>Caps Weighted Text Style</div>,
+        ],
+        ["text__caps-spaced", <div className={"text__caps-spaced"}>Caps Spaced Text Style</div>],
+      ]}
+    />
+  )
+}
diff --git a/ui-components/src/forms/DOBField.tsx b/ui-components/src/forms/DOBField.tsx
index 0ce14c0749..800a69f803 100644
--- a/ui-components/src/forms/DOBField.tsx
+++ b/ui-components/src/forms/DOBField.tsx
@@ -56,7 +56,7 @@ const DOBField = (props: DOBFieldProps) => {
     )
   }
 
-  const labelClasses = ["field-label--caps"]
+  const labelClasses = ["text__caps-spaced"]
   if (props.readerOnly) labelClasses.push("sr-only")
   if (hasError) labelClasses.push("text-alert")
 
diff --git a/ui-components/src/forms/Field.tsx b/ui-components/src/forms/Field.tsx
index de20e935f0..df0fae4b69 100644
--- a/ui-components/src/forms/Field.tsx
+++ b/ui-components/src/forms/Field.tsx
@@ -75,7 +75,7 @@ const Field = (props: FieldProps) => {
 
   const label = useMemo(() => {
     const labelClasses = ["label"]
-    if (props.caps) labelClasses.push("field-label--caps")
+    if (props.caps) labelClasses.push("text__caps-spaced")
     if (props.primary) labelClasses.push("text-primary")
     if (props.readerOnly) labelClasses.push("sr-only")
     if (props.type === "radio") {
diff --git a/ui-components/src/forms/FieldGroup.tsx b/ui-components/src/forms/FieldGroup.tsx
index ecda4e5b4a..1eabe44d39 100644
--- a/ui-components/src/forms/FieldGroup.tsx
+++ b/ui-components/src/forms/FieldGroup.tsx
@@ -165,7 +165,7 @@ const FieldGroup = ({
   }
   return (
     <div>
-      {groupLabel && <label className="field-label--caps">{groupLabel}</label>}
+      {groupLabel && <label className="text__caps-spaced">{groupLabel}</label>}
       {groupNote && <p className="field-note mb-4">{groupNote}</p>}
 
       <div className={`field ${error && "error"} ${fieldGroupClassName || ""} mb-0`}>
diff --git a/ui-components/src/forms/MultiSelectField.scss b/ui-components/src/forms/MultiSelectField.scss
index b2ddeab92c..f9edb5a839 100644
--- a/ui-components/src/forms/MultiSelectField.scss
+++ b/ui-components/src/forms/MultiSelectField.scss
@@ -82,7 +82,7 @@
   width: 100%;
   padding: var(--bloom-s1) var(--bloom-s2);
   font-size: var(--bloom-font-size-sm);
-  color: var(--bloom-color-gray-750);
+  color: var(--bloom-text-color);
   text-align: right;
 }
 
@@ -126,7 +126,7 @@
 
 .multi-select-field__option--no-results,
 .multi-select-field__option[aria-disabled="true"] {
-  color: var(--bloom-color-gray-750) !important;
+  color: var(--bloom-text-color) !important;
   cursor: not-allowed !important;
   text-decoration: none !important;
 }
diff --git a/ui-components/src/forms/PhoneField.tsx b/ui-components/src/forms/PhoneField.tsx
index 8ab9dc3930..439beacb28 100644
--- a/ui-components/src/forms/PhoneField.tsx
+++ b/ui-components/src/forms/PhoneField.tsx
@@ -22,7 +22,7 @@ export const PhoneField = (props: {
   dataTestId?: string
 }) => {
   const labelClasses = ["label"]
-  if (props.caps) labelClasses.push("field-label--caps")
+  if (props.caps) labelClasses.push("text__caps-spaced")
   if (props.readerOnly) labelClasses.push("sr-only")
   /**
    * we need to handle two different use cases,
diff --git a/ui-components/src/global/forms.scss b/ui-components/src/global/forms.scss
index f4a3204834..44565fa1e3 100644
--- a/ui-components/src/global/forms.scss
+++ b/ui-components/src/global/forms.scss
@@ -23,7 +23,7 @@
   }
 
   label.sr-only + .control,
-  label.field-label--caps + .control {
+  label.text__caps-spaced + .control {
     @apply mt-0;
   }
 
@@ -31,7 +31,7 @@
     @apply mt-2;
   }
 
-  .field-label--caps.label + .field-note {
+  .text__caps-spaced.label + .field-note {
     @apply mt-0;
   }
 
@@ -256,10 +256,9 @@
   }
 }
 
-/* Restore previous Tailwind v1 color */
 input::placeholder,
 textarea::placeholder {
-  color: #a0aec0;
+  color: var(--bloom-color-gray-650);
 }
 
 input[type],
@@ -298,17 +297,6 @@ input[type="number"] {
   @apply text-gray-800;
 }
 
-.field-label--caps {
-  @apply font-sans;
-  @apply uppercase;
-  @apply text-gray-750;
-  @apply tracking-widest;
-  @apply font-semibold;
-  @apply text-tiny;
-  @apply mb-3;
-  @apply inline-block;
-}
-
 .field--inline {
   display: inline-block;
 }
diff --git a/ui-components/src/global/mixins.scss b/ui-components/src/global/mixins.scss
index 90ad32f08d..3db3517f98 100644
--- a/ui-components/src/global/mixins.scss
+++ b/ui-components/src/global/mixins.scss
@@ -116,7 +116,7 @@
   &.is-warning {
     background-color: var(--warning-appearance-background-color, var(--bloom-color-warn));
     border-color: var(--warning-appearance-border-color, var(--bloom-color-warn));
-    color: var(--warning-appearance-label-color, var(--bloom-color-gray-800));
+    color: var(--warning-appearance-label-color, var(--bloom-text-color-dark));
 
     &:hover {
       background-color: var(
@@ -176,7 +176,7 @@
     }
 
     &.is-warning {
-      color: var(--bloom-color-gray-800);
+      color: var(--bloom-text-color-dark);
 
       &:hover {
         color: var(--bloom-color-white);
diff --git a/ui-components/src/global/text.scss b/ui-components/src/global/text.scss
index 004303675e..ac2468de66 100644
--- a/ui-components/src/global/text.scss
+++ b/ui-components/src/global/text.scss
@@ -72,31 +72,6 @@ h1.title {
   @apply text-4xl;
 }
 
-.text-caps-underline {
-  @apply font-alt-sans;
-  @apply uppercase;
-  @apply text-tiny;
-  @apply mb-5;
-  @apply pb-2;
-  @apply border-0;
-  @apply border-b-4;
-  @apply border-primary;
-  @apply font-semibold;
-  @apply text-gray-800;
-  @apply tracking-widest;
-  @apply inline-block;
-}
-
-.text-caps-tiny {
-  @apply mb-3;
-  @apply text-gray-750;
-  @apply uppercase;
-  @apply font-sans;
-  @apply font-bold;
-  @apply text-tiny;
-  @apply tracking-wide;
-}
-
 .text-serif-lg {
   @apply font-serif;
   @apply text-lg;
@@ -140,42 +115,85 @@ h1.title {
   @apply block;
 }
 
-.card-header {
-  font-family: var(--card-header-font-family, var(--bloom-font-alt-sans));
-  font-weight: var(--card-header-font-weight, 600);
-  color: var(--card-header-color, var(--bloom-color-blue-700));
-  font-size: var(--card-header-font-size, var(--bloom-font-size-3xl));
-  margin-block: var(--card-header-margin-block, 0 var(--bloom-s3));
-  line-height: var(--card-header-line-height, var(--bloom-line-height-tight));
-}
-
-.card-subheader {
-  font-family: var(--card-subheader-font-family, var(--bloom-font-alt-sans));
-  font-weight: var(--card-subheader-font-weight, normal);
-  color: var(--card-subheader-color, var(--bloom-color-black));
-  font-size: var(--card-subheader-font-size, var(--bloom-font-size-base));
-  margin-block: var(--card-subheader-margin-block, 0 var(--bloom-s3));
-}
-
-.table-header {
-  font-family: var(--table-header-font-family, var(--bloom-font-alt-sans));
-  font-weight: var(--table-header-font-weight, 600);
-  color: var(--table-header-color, var(--bloom-color-gray-800));
-  font-size: var(--table-header-font-size, var(--bloom-font-size-sm));
-  margin-block: var(--table-header-margin-block, 0 var(--bloom-s1));
-}
-
-.table-subheader {
-  font-family: var(--table-subheader-font-family, var(--bloom-font-alt-sans));
-  font-weight: var(--table-subheader-font-weight, normal);
-  color: var(--table-subheader-color, var(--bloom-color-gray-750));
-  font-size: var(--table-subheader-font-size, var(--bloom-font-size-sm));
-  margin-block: var(--table-header-margin-block, 0 var(--bloom-s3));
-}
-
-.category-header {
-  font-family: var(--category-header-font-family, var(--bloom-font-alt-sans));
-  font-weight: var(--category-header-font-weight, 600);
-  color: var(--category-header-color, var(--bloom-color-gray-700));
-  font-size: var(--category-header-font-size, var(--bloom-font-size-sm));
+:root {
+  --bloom-text-color-light: var(--bloom-color-gray-700);
+  --bloom-text-color: var(--bloom-color-gray-750);
+  --bloom-text-color-dark: var(--bloom-color-gray-800);
+  --bloom-text-color-darker: var(--bloom-color-gray-850);
+  --bloom-text-color-darkest: var(--bloom-color-black);
+}
+
+.text__large-primary {
+  font-family: var(--text-large-primary-font-family, var(--bloom-font-alt-sans));
+  font-weight: var(--text-large-primary-font-weight, 600);
+  color: var(--text-large-primary--color, var(--bloom-color-primary-dark));
+  font-size: var(--text-large-primary-font-size, var(--bloom-font-size-3xl));
+  margin-block: var(--text-large-primary-margin-block, 0 var(--bloom-s3));
+  line-height: var(--text-large-primary-line-height, var(--bloom-line-height-tight));
+}
+
+.text__medium-normal {
+  font-family: var(--text-medium-normal-font-family, var(--bloom-font-alt-sans));
+  font-weight: var(--text-medium-normal-font-weight, normal);
+  color: var(--text-medium-normal-color, var(--bloom-text-color-darkest));
+  font-size: var(--text-medium-normal-font-size, var(--bloom-font-size-base));
+  margin-block: var(--text-medium-normal-margin-block, 0 var(--bloom-s3));
+}
+
+.text__small-weighted {
+  font-family: var(--text-small-weighted-font-family, var(--bloom-font-alt-sans));
+  font-weight: var(--text-small-weighted-font-weight, 600);
+  color: var(--text-small-weighted-color, var(--bloom-text-color-dark));
+  font-size: var(--text-small-weighted-font-size, var(--bloom-font-size-sm));
+  margin-block: var(--text-small-weighted-margin-block, 0 var(--bloom-s1));
+}
+
+.text__small-normal {
+  font-family: var(--text-small-normal-font-family, var(--bloom-font-alt-sans));
+  font-weight: var(--text-small-normal-font-weight, normal);
+  color: var(--text-small-normal-color, var(--bloom-text-color));
+  font-size: var(--text-small-normal-font-size, var(--bloom-font-size-sm));
+  margin-block: var(--text-small-normal-margin-block, 0 var(--bloom-s3));
+}
+
+.text__light-weighted {
+  font-family: var(--text-light-weighted-font-family, var(--bloom-font-alt-sans));
+  font-weight: var(--text-light-weighted-font-weight, 600);
+  color: var(--text-light-weighted-color, var(--bloom-text-color-light));
+  font-size: var(--text-light-weighted-font-size, var(--bloom-font-size-sm));
+}
+
+.text__caps-spaced {
+  font-family: var(--text-caps-spaced-font-family, var(--bloom-font-sans));
+  text-transform: uppercase;
+  color: var(--text-caps-spaced-color, var(--bloom-text-color));
+  letter-spacing: var(--text-caps-spaced-letter-spacing, var(--bloom-letter-spacing-widest));
+  font-weight: var(--text-caps-spaced-font-weight, 600);
+  font-size: var(--text-caps-spaced-font-size, var(--bloom-font-size-tiny));
+  margin-bottom: var(--text-caps-spaced-margin-bottom, var(--bloom-s3));
+  display: inline-block;
+}
+
+.text__underline-weighted {
+  font-family: var(--text-underline-weighted-font-family, var(--bloom-font-alt-sans));
+  text-transform: var(--text-underline-weighted-transform, uppercase);
+  font-size: var(--text-underline-weighted-font-size, var(--bloom-font-size-tiny));
+  margin-bottom: var(--text-underline-weighted-bottom-margin, var(--bloom-s5));
+  padding-bottom: var(--text-underline-weighted-bottom-padding, var(--bloom-s2));
+  border: var(--text-underline-weighted-border, 0);
+  border-bottom: var(--text-underline-weighted-border, 4px solid var(--bloom-color-primary));
+  font-weight: var(--text-underline-weighted-font-weight, 600);
+  color: var(--text-underline-weighted-color, var(--bloom-text-color-dark));
+  letter-spacing: var(--text-underline-weighted-letter-spacing, var(--bloom-letter-spacing-widest));
+  display: inline-block;
+}
+
+.text__caps-weighted {
+  margin-bottom: var(--text-caps-weighted-bottom-margin, var(--bloom-s3));
+  color: var(--text-caps-weighted-color, var(--bloom-text-color));
+  text-transform: var(--text-caps-weighted-text-transform, uppercase);
+  font-family: var(--text-caps-weighted-font-family, var(--bloom-font-sans));
+  font-weight: var(--text-caps-weighted-font-weight, 700);
+  font-size: var(--text-caps-weighted-font-size, var(--bloom-font-size-tiny));
+  letter-spacing: var(--text-caps-weighted-letter-spacing, var(--bloom-letter-spacing-wide));
 }
diff --git a/ui-components/src/global/tokens/colors.scss b/ui-components/src/global/tokens/colors.scss
index 21e52aabc7..b24e001048 100644
--- a/ui-components/src/global/tokens/colors.scss
+++ b/ui-components/src/global/tokens/colors.scss
@@ -26,6 +26,7 @@
   --bloom-color-gray-800: #30383a;
   --bloom-color-gray-750: #555555;
   --bloom-color-gray-700: #767676;
+  --bloom-color-gray-650: #888888;
   --bloom-color-gray-600: #999999;
   --bloom-color-gray-550: #aaaaaa;
   --bloom-color-gray-500: #cccccc;
diff --git a/ui-components/src/headers/Heading.stories.tsx b/ui-components/src/headers/Heading.stories.tsx
deleted file mode 100644
index ce1ce02ef6..0000000000
--- a/ui-components/src/headers/Heading.stories.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from "react"
-import { Heading } from "./Heading"
-
-export default {
-  title: "Headers/Heading",
-}
-export const base1 = () => <Heading>Test Header</Heading>
-export const base2 = () => <Heading priority={2}>Test Header</Heading>
-export const base3 = () => <Heading priority={3}>Test Header</Heading>
-export const base4 = () => <Heading priority={4}>Test Header</Heading>
-export const base5 = () => <Heading priority={5}>Test Header</Heading>
-export const base6 = () => <Heading priority={6}>Test Header</Heading>
-export const cardHeader = () => <Heading style={"cardHeader"}>Card Header</Heading>
-export const cardSubheader = () => <Heading style={"cardSubheader"}>Card Subheader</Heading>
-export const tableHeader = () => <Heading style={"tableHeader"}>Table Header</Heading>
-export const tableSubheader = () => <Heading style={"tableSubheader"}>Table Subheader</Heading>
-export const sidebarHeader = () => <Heading style={"sidebarHeader"}>Sidebar Header</Heading>
-export const categoryHeader = () => <Heading style={"categoryHeader"}>Category Header</Heading>
-export const sidebarSubHeader = () => (
-  <Heading style={"sidebarSubHeader"}>Sidebar Subheader</Heading>
-)
-
-export const customPriority = () => (
-  <Heading style={"cardSubheader"} priority={6}>
-    Custom Priority
-  </Heading>
-)
diff --git a/ui-components/src/headers/Heading.tsx b/ui-components/src/headers/Heading.tsx
deleted file mode 100644
index 071896cef3..0000000000
--- a/ui-components/src/headers/Heading.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from "react"
-
-export interface HeadingProps {
-  children?: React.ReactNode
-  className?: string
-  priority?: number
-  style?: HeaderType
-}
-
-export type HeaderType = keyof typeof HeaderStyleMap
-
-const HeaderStyleMap = {
-  cardHeader: "card-header",
-  cardSubheader: "card-subheader",
-  tableHeader: "table-header",
-  tableSubheader: "table-subheader",
-  sidebarHeader: "text-caps-underline",
-  categoryHeader: "category-header",
-  sidebarSubHeader: "text-caps-tiny",
-}
-
-const Heading = (props: HeadingProps) => {
-  const priority = props.priority && props.priority >= 1 && props.priority <= 6 ? props.priority : 1
-  const Tag = `h${priority}` as keyof JSX.IntrinsicElements
-  const classNames = `${props.style && HeaderStyleMap[props.style]} ${
-    props.className && props.className
-  }`
-  return <Tag className={classNames}>{props.children}</Tag>
-}
-
-export { Heading as default, Heading }
diff --git a/ui-components/src/headers/HeadingGroup.docs.mdx b/ui-components/src/headers/HeadingGroup.docs.mdx
new file mode 100644
index 0000000000..8e8298971c
--- /dev/null
+++ b/ui-components/src/headers/HeadingGroup.docs.mdx
@@ -0,0 +1,25 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { HeadingGroup } from "./HeadingGroup"
+
+# Heading Group
+
+<Canvas>
+  <Story id="headers-heading-group--with-content" />
+</Canvas>
+
+The HeadingGroup component provides a heading tag (h1-h6) combined with a paragraph tag as a subheading in an aria-minded fashion. Good for use in Card header components and other headers.
+
+## Heading Group Properties
+
+<ArgsTable of={HeadingGroup} />
+
+## Theming Variables
+
+You can apply CSS variables to the `.heading-group` selector to customize the appearance of the component.
+
+| Name                  | Type  | Description                                         | Default      |
+| --------------------- | ----- | --------------------------------------------------- | ------------ |
+| `--heading-margin`    | Size  | Vertical space added around the top heading, if any | `0rem`       |
+| `--subheading-margin` | Size  | The space between the heading and subheading        | `--bloom-s3` |
+| `--heading-color`     | Color | Override to set a specific heading text color       | `inherit`    |
+| `--subheading-color`  | Color | Override to set a specific subheading text color    | `inherit`    |
diff --git a/ui-components/src/headers/HeadingGroup.scss b/ui-components/src/headers/HeadingGroup.scss
new file mode 100644
index 0000000000..bf4f44962c
--- /dev/null
+++ b/ui-components/src/headers/HeadingGroup.scss
@@ -0,0 +1,23 @@
+.heading-group {
+  /* Component Variables */
+  --heading-margin: 0rem;
+  --subheading-margin: var(--bloom-s3);
+  --heading-color: inherit;
+  --subheading-color: inherit;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-block: var(--heading-margin);
+    color: var(--heading-color);
+  }
+
+  p {
+    margin-block: var(--subheading-margin);
+    font-size: var(--bloom-font-size-base);
+    color: var(--subheading-color);
+  }
+}
diff --git a/ui-components/src/headers/HeadingGroup.stories.tsx b/ui-components/src/headers/HeadingGroup.stories.tsx
new file mode 100644
index 0000000000..46aa3bc2a0
--- /dev/null
+++ b/ui-components/src/headers/HeadingGroup.stories.tsx
@@ -0,0 +1,49 @@
+import React from "react"
+import { BADGES } from "../../.storybook/constants"
+import HeadingGroup from "./HeadingGroup"
+import HeadingGroupDocumentation from "./HeadingGroup.docs.mdx"
+
+export default {
+  title: "Headers/Heading Group 🚩",
+  id: "headers/heading-group",
+  parameters: {
+    docs: {
+      page: HeadingGroupDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const withContent = () => (
+  <div style={{ maxWidth: "700px" }}>
+    <HeadingGroup
+      headingPriority={2}
+      heading="Household Maximum Income"
+      subheading="To determine your eligibility for this property, choose your household size (include yourself in that calculation)."
+    />
+  </div>
+)
+
+export const customStyled = () => {
+  const customStyles = `
+    .custom-heading-group {
+      --heading-margin: 2rem;
+      --heading-color: maroon;
+      --subheading-color: forestgreen;
+      --subheading-margin: var(--heading-margin);
+    }
+  `
+  return (
+    <div>
+      <HeadingGroup
+        className="custom-heading-group"
+        headingPriority={2}
+        heading="Household Maximum Income"
+        subheading="To determine your eligibility for this property, choose your household size (include yourself in that calculation)."
+      />
+      <hr className="mb-8" />
+      <p>More content here.</p>
+      <style>{customStyles}</style>
+    </div>
+  )
+}
diff --git a/ui-components/src/headers/HeadingGroup.tsx b/ui-components/src/headers/HeadingGroup.tsx
new file mode 100644
index 0000000000..d0462402b0
--- /dev/null
+++ b/ui-components/src/headers/HeadingGroup.tsx
@@ -0,0 +1,31 @@
+import React from "react"
+import { Heading } from "../text/Heading"
+import "./HeadingGroup.scss"
+
+export interface HeadingGroupProps {
+  /** A string or element to display in an `h2` tag (overridable via `headingPriority`) */
+  heading: React.ReactNode
+  /** A string or element to display in an `p` tag (using `aria-roledescription="subtitle"`) */
+  subheading: React.ReactNode
+  /**
+   * The heading level (1 through 6)
+   * @default 2
+   */
+  headingPriority?: number
+  /** Additional class name for the whole group */
+  className?: string
+}
+
+const HeadingGroup = (props: HeadingGroupProps) => {
+  const classNames = ["heading-group"]
+  if (props.className) classNames.push(props.className)
+
+  return (
+    <hgroup className={classNames.join(" ")} role="group">
+      <Heading priority={props.headingPriority ?? 2}>{props.heading}</Heading>
+      <p aria-roledescription="subtitle">{props.subheading}</p>
+    </hgroup>
+  )
+}
+
+export { HeadingGroup as default, HeadingGroup }
diff --git a/ui-components/src/navigation/ProgressNav.scss b/ui-components/src/navigation/ProgressNav.scss
index 4bd536db8a..a4661abedc 100644
--- a/ui-components/src/navigation/ProgressNav.scss
+++ b/ui-components/src/navigation/ProgressNav.scss
@@ -4,7 +4,7 @@
   --active-step-color: var(--bloom-color-primary);
   --active-step-font-color: var(--bloom-color-gray-900);
   --future-step-color: var(--bloom-color-gray-450);
-  --future-step-font-color: var(--bloom-color-gray-750);
+  --future-step-font-color: var(--bloom-text-color);
 
   --dot-size: var(--bloom-s3);
   --dot-padding-left-mobile: var(--bloom-s2);
diff --git a/ui-components/src/page_components/listing/ListingCard.stories.tsx b/ui-components/src/page_components/listing/ListingCard.stories.tsx
index 37282ee54c..33f119d3c6 100644
--- a/ui-components/src/page_components/listing/ListingCard.stories.tsx
+++ b/ui-components/src/page_components/listing/ListingCard.stories.tsx
@@ -110,6 +110,22 @@ export const WithHeaders = () => {
   )
 }
 
+export const WithPillHeader = () => {
+  return (
+    <ListingCard
+      imageCardProps={{ ...standardImageCardProps, href: undefined }}
+      tableProps={{ ...standardTableProps }}
+      footerButtons={[{ text: "See Details", href: "see-details-link", ariaHidden: true }]}
+      contentProps={{
+        contentHeader: { content: "Optional content header", href: "listing-link" },
+        contentSubheader: { content: "Optional content subheader" },
+        tableHeader: { content: "Optional table header", isPillType: true },
+        tableSubheader: { content: "Optional table subheader" },
+      }}
+    />
+  )
+}
+
 export const WithTags = () => {
   return (
     <ListingCard
@@ -361,8 +377,8 @@ export const detroitStyle = () => {
           tableProps={{ ...standardTableProps }}
           footerButtons={[{ text: "See Details", href: "see-details-link" }]}
           contentProps={{
-            contentHeader: { text: "Optional content header" },
-            contentSubheader: { text: "Optional content subheader" },
+            contentHeader: { content: "Optional content header" },
+            contentSubheader: { content: "Optional content subheader" },
           }}
           cardTags={[
             { text: "Tag 1 text" },
diff --git a/ui-components/src/page_components/listing/ListingCard.tsx b/ui-components/src/page_components/listing/ListingCard.tsx
index 52578847d4..2be13aa2cd 100644
--- a/ui-components/src/page_components/listing/ListingCard.tsx
+++ b/ui-components/src/page_components/listing/ListingCard.tsx
@@ -3,7 +3,7 @@ import { ImageCard, ImageCardProps, ImageTag } from "../../blocks/ImageCard"
 import { LinkButton } from "../../actions/LinkButton"
 import { StackedTable, StackedTableProps } from "../../tables/StackedTable"
 import { StandardTable, StandardTableProps } from "../../tables/StandardTable"
-import { Heading, HeaderType } from "../../headers/Heading"
+import { Heading, HeaderType } from "../../text/Heading"
 import { Tag } from "../../text/Tag"
 import { AppearanceShadeType, AppearanceStyleType } from "../../global/AppearanceTypes"
 import { Icon, IconFillColors } from "../../icons/Icon"
@@ -12,24 +12,25 @@ import { NavigationContext } from "../../config/NavigationContext"
 
 interface ListingCardTableProps extends StandardTableProps, StackedTableProps {}
 
-export interface CardHeader {
+export interface ListingCardHeader {
   content: string | React.ReactNode
   href?: string
   customClass?: string
   styleType?: AppearanceStyleType
+  isPillType?: boolean
 }
 
-export interface FooterButton {
+export interface ListingFooterButton {
   href: string
   text: string
   ariaHidden?: boolean
 }
 
 export interface ListingCardContentProps {
-  contentHeader?: CardHeader
-  contentSubheader?: CardHeader
-  tableHeader?: CardHeader
-  tableSubheader?: CardHeader
+  contentHeader?: ListingCardHeader
+  contentSubheader?: ListingCardHeader
+  tableHeader?: ListingCardHeader
+  tableSubheader?: ListingCardHeader
 }
 export interface ListingCardProps {
   /** A list of tags to be rendered below the content header, a Tag component is rendered for each */
@@ -39,7 +40,7 @@ export interface ListingCardProps {
   /** An object containing fields that render optional headers above the content section's table */
   contentProps?: ListingCardContentProps
   /** A list of buttons to render in the footer of the content section */
-  footerButtons?: FooterButton[]
+  footerButtons?: ListingFooterButton[]
   /** A class name applied to the footer container of the content section */
   footerContainerClass?: string
   /** Custom content rendered below the content table */
@@ -73,14 +74,13 @@ const ListingCard = (props: ListingCardProps) => {
   const { LinkComponent } = useContext(NavigationContext)
 
   const getHeader = (
-    header: CardHeader | undefined,
+    header: ListingCardHeader | undefined,
     priority: number,
     styleType?: HeaderType,
-    pillStyle?: boolean,
     customClass?: string
   ) => {
     if (header && header.content) {
-      if (pillStyle) {
+      if (header.isPillType) {
         return (
           <Tag
             className="listings-pill_header"
@@ -94,7 +94,7 @@ const ListingCard = (props: ListingCardProps) => {
         )
       }
       return (
-        <Heading priority={priority} style={styleType} className={customClass}>
+        <Heading priority={priority} styleType={styleType} className={customClass}>
           {header.href ? (
             <LinkComponent className="is-card-link" href={header.href}>
               {header.content}
@@ -112,8 +112,8 @@ const ListingCard = (props: ListingCardProps) => {
   const getContentHeader = () => {
     return (
       <div className="listings-row_headers">
-        {getHeader(contentProps?.contentHeader, 2, "cardHeader", false, "order-1")}
-        {getHeader(contentProps?.contentSubheader, 3, "cardSubheader", false, "order-2")}
+        {getHeader(contentProps?.contentHeader, 2, "largePrimary", "order-1")}
+        {getHeader(contentProps?.contentSubheader, 3, "mediumNormal", "order-2")}
         {cardTags && cardTags?.length > 0 && (
           <div className="listings-row_tags">
             {cardTags?.map((cardTag, index) => {
@@ -145,8 +145,8 @@ const ListingCard = (props: ListingCardProps) => {
               <hr className={"mb-2"} />
             )}
           <div className={"listings-row_headers"}>
-            {getHeader(contentProps?.tableHeader, 4, "tableHeader", true)}
-            {getHeader(contentProps?.tableSubheader, 5, "tableSubheader")}
+            {getHeader(contentProps?.tableHeader, 4, "smallWeighted")}
+            {getHeader(contentProps?.tableSubheader, 5, "smallNormal")}
           </div>
           {children && children}
           {tableProps && (tableProps.data || tableProps.stackedData) && (
diff --git a/ui-components/src/page_components/listing/ListingMap.tsx b/ui-components/src/page_components/listing/ListingMap.tsx
index d1bd80f317..5c0d2b4996 100644
--- a/ui-components/src/page_components/listing/ListingMap.tsx
+++ b/ui-components/src/page_components/listing/ListingMap.tsx
@@ -5,7 +5,7 @@ import MapGL, { Marker } from "react-map-gl"
 import "./ListingMap.scss"
 import { MultiLineAddress, Address } from "../../helpers/MultiLineAddress"
 import { useIntersect } from "../../.."
-import { Heading } from "../../headers/Heading"
+import { Heading } from "../../text/Heading"
 
 export interface ListingMapProps {
   address?: Address
@@ -109,7 +109,7 @@ const ListingMap = (props: ListingMapProps) => {
     <div className="listing-map" ref={setIntersectingElement}>
       <div className="addressPopup">
         {props.listingName && (
-          <Heading priority={3} style={"sidebarSubHeader"}>
+          <Heading priority={3} styleType={"capsWeighted"}>
             {props.listingName}
           </Heading>
         )}
diff --git a/ui-components/src/page_components/listing/listing_sidebar/Contact.tsx b/ui-components/src/page_components/listing/listing_sidebar/Contact.tsx
index ecd63297a9..6a8f6e0973 100644
--- a/ui-components/src/page_components/listing/listing_sidebar/Contact.tsx
+++ b/ui-components/src/page_components/listing/listing_sidebar/Contact.tsx
@@ -2,7 +2,7 @@ import * as React from "react"
 import { ContactAddress } from "./ContactAddress"
 import { Icon, IconFillColors } from "../../../icons/Icon"
 import { Address } from "../../../helpers/MultiLineAddress"
-import { Heading } from "../../../headers/Heading"
+import { Heading } from "../../../text/Heading"
 
 export interface ContactProps {
   /** Any number of text sections rendered after the contact information */
@@ -49,7 +49,7 @@ const Contact = ({
 
   return (
     <section className="aside-block">
-      <Heading priority={4} style={"sidebarHeader"}>
+      <Heading priority={4} styleType={"underlineWeighted"}>
         {sectionTitle}
       </Heading>
 
@@ -96,7 +96,7 @@ const Contact = ({
       {additionalInformation?.map((info) => {
         return (
           <div key={info.title} className={"my-3"}>
-            <Heading priority={3} style={"sidebarSubHeader"}>
+            <Heading priority={3} styleType={"capsWeighted"}>
               {info.title}
             </Heading>
             <div className="text-gray-800 text-tiny markdown">{info.content}</div>
diff --git a/ui-components/src/page_components/listing/listing_sidebar/ExpandableSection.tsx b/ui-components/src/page_components/listing/listing_sidebar/ExpandableSection.tsx
index a31300df8e..c13388bf01 100644
--- a/ui-components/src/page_components/listing/listing_sidebar/ExpandableSection.tsx
+++ b/ui-components/src/page_components/listing/listing_sidebar/ExpandableSection.tsx
@@ -1,6 +1,7 @@
 import * as React from "react"
 import Markdown from "markdown-to-jsx"
 import { ExpandableContent } from "../../../actions/ExpandableContent"
+import { Heading } from "../../../text/Heading"
 
 export interface ExpandableSectionProps {
   content: string | React.ReactNode
@@ -28,7 +29,9 @@ const ExpandableSection = ({ content, expandableContent, strings }: ExpandableSe
   }
   return (
     <section className="aside-block">
-      <h4 className="text-caps-underline">{strings.title}</h4>
+      <Heading priority={4} styleType={"underlineWeighted"}>
+        {strings.title}
+      </Heading>
       <div className="text-tiny text-gray-750">
         {getTextContent(content)}
         {expandableContent && (
diff --git a/ui-components/src/page_components/listing/listing_sidebar/GetApplication.tsx b/ui-components/src/page_components/listing/listing_sidebar/GetApplication.tsx
index bdef9e01b6..e421b0293e 100644
--- a/ui-components/src/page_components/listing/listing_sidebar/GetApplication.tsx
+++ b/ui-components/src/page_components/listing/listing_sidebar/GetApplication.tsx
@@ -4,7 +4,7 @@ import { Button } from "../../../actions/Button"
 import { LinkButton } from "../../../actions/LinkButton"
 import { AppearanceStyleType } from "../../../global/AppearanceTypes"
 import { Address } from "../../../helpers/MultiLineAddress"
-import { Heading } from "../../../headers/Heading"
+import { Heading } from "../../../text/Heading"
 import { t } from "../../../helpers/translator"
 import { OrDivider } from "./OrDivider"
 import { ContactAddress } from "./ContactAddress"
@@ -56,9 +56,10 @@ const GetApplication = (props: ApplicationsProps) => {
 
   return (
     <section className="aside-block" data-test-id="get-application-section">
-      <h2 className="text-caps-underline">
+      <Heading priority={2} styleType={"underlineWeighted"}>
         {props.strings?.howToApply ?? t("listings.apply.howToApply")}
-      </h2>
+      </Heading>
+
       {!props.applicationsOpen && (
         <p className="mb-5 text-gray-700">
           {props.strings?.applicationsOpenInFuture ??
@@ -121,7 +122,7 @@ const GetApplication = (props: ApplicationsProps) => {
           {props.applicationsOpen && (props.onlineApplicationURL || props.paperMethod) && (
             <OrDivider bgColor="white" />
           )}
-          <Heading priority={3} style={"sidebarSubHeader"}>
+          <Heading priority={3} styleType={"capsWeighted"}>
             {props.strings?.pickUpApplication ?? t("listings.apply.pickUpAnApplication")}
           </Heading>
           <ContactAddress
@@ -130,7 +131,7 @@ const GetApplication = (props: ApplicationsProps) => {
           />
           {props.applicationPickUpAddressOfficeHours && (
             <>
-              <Heading priority={3} style={"sidebarSubHeader"}>
+              <Heading priority={3} styleType={"capsWeighted"}>
                 {props.strings?.officeHoursHeading ?? t("leasingAgent.officeHours")}
               </Heading>
               <p className="text-gray-800 text-tiny markdown">
diff --git a/ui-components/src/page_components/listing/listing_sidebar/QuantityRowSection.tsx b/ui-components/src/page_components/listing/listing_sidebar/QuantityRowSection.tsx
index 10da363003..b10b6783be 100644
--- a/ui-components/src/page_components/listing/listing_sidebar/QuantityRowSection.tsx
+++ b/ui-components/src/page_components/listing/listing_sidebar/QuantityRowSection.tsx
@@ -1,4 +1,5 @@
 import * as React from "react"
+import { Heading } from "../../../text/Heading"
 
 export interface QuantityRow {
   amount: number | null
@@ -33,7 +34,9 @@ const QuantityRowSection = ({ quantityRows, strings }: QuantityRowSectionProps)
 
   return (
     <section className="aside-block is-tinted">
-      <h4 className="text-caps-tiny">{strings.sectionTitle}</h4>
+      <Heading priority={4} styleType={"capsWeighted"}>
+        {strings.sectionTitle}
+      </Heading>
       <div>
         {strings.description && (
           <p className="text-tiny text-gray-800 pb-3">{strings.description}</p>
diff --git a/ui-components/src/page_components/listing/listing_sidebar/ReferralApplication.tsx b/ui-components/src/page_components/listing/listing_sidebar/ReferralApplication.tsx
index 856342f6e7..eb0a1374eb 100644
--- a/ui-components/src/page_components/listing/listing_sidebar/ReferralApplication.tsx
+++ b/ui-components/src/page_components/listing/listing_sidebar/ReferralApplication.tsx
@@ -1,4 +1,5 @@
 import * as React from "react"
+import { Heading } from "../../../text/Heading"
 import { t } from "../../../helpers/translator"
 import { Icon, IconFillColors } from "../../../icons/Icon"
 
@@ -16,7 +17,9 @@ const ReferralApplication = (props: ReferralApplicationProps) => {
 
   return (
     <section className="aside-block">
-      <h2 className="text-caps-underline">{props.strings.title}</h2>
+      <Heading priority={2} styleType={"underlineWeighted"}>
+        {props.strings.title}
+      </Heading>
       <p>
         <a href={linkedPhoneNumber}>
           <Icon symbol="phone" size="medium" fill={IconFillColors.primary} />{" "}
diff --git a/ui-components/src/page_components/listing/listing_sidebar/SidebarBlock.stories.tsx b/ui-components/src/page_components/listing/listing_sidebar/SidebarBlock.stories.tsx
index b3d738d22b..9d059c0073 100644
--- a/ui-components/src/page_components/listing/listing_sidebar/SidebarBlock.stories.tsx
+++ b/ui-components/src/page_components/listing/listing_sidebar/SidebarBlock.stories.tsx
@@ -22,7 +22,7 @@ export const Default = () => {
 
 export const Styled = () => {
   return (
-    <SidebarBlock title={"Title"} style={"sidebarSubHeader"} className={"bg-blue-200"}>
+    <SidebarBlock title={"Title"} style={"capsWeighted"} className={"bg-blue-200"}>
       Content
     </SidebarBlock>
   )
diff --git a/ui-components/src/page_components/listing/listing_sidebar/SidebarBlock.tsx b/ui-components/src/page_components/listing/listing_sidebar/SidebarBlock.tsx
index 64409f7d95..94705c62bd 100644
--- a/ui-components/src/page_components/listing/listing_sidebar/SidebarBlock.tsx
+++ b/ui-components/src/page_components/listing/listing_sidebar/SidebarBlock.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Heading, HeadingProps } from "../../../headers/Heading"
+import { Heading, HeadingProps } from "../../../text/Heading"
 
 export interface SidebarBlockProps extends Omit<HeadingProps, "children" | "className"> {
   children: React.ReactNode
@@ -7,11 +7,11 @@ export interface SidebarBlockProps extends Omit<HeadingProps, "children" | "clas
   title?: string
 }
 
-const SidebarBlock = ({ children, className, title, priority, style }: SidebarBlockProps) => {
+const SidebarBlock = ({ children, className, title, priority, styleType }: SidebarBlockProps) => {
   return (
     <section className={`aside-block ${className ? className : ""}`}>
       {title && (
-        <Heading priority={priority ?? 4} style={style ?? "sidebarHeader"}>
+        <Heading priority={priority ?? 4} styleType={styleType ?? "underlineWeighted"}>
           {title}
         </Heading>
       )}
diff --git a/ui-components/src/page_components/listing/listing_sidebar/SubmitApplication.tsx b/ui-components/src/page_components/listing/listing_sidebar/SubmitApplication.tsx
index fe6a419d8f..bc983bd9b8 100644
--- a/ui-components/src/page_components/listing/listing_sidebar/SubmitApplication.tsx
+++ b/ui-components/src/page_components/listing/listing_sidebar/SubmitApplication.tsx
@@ -3,7 +3,7 @@ import Markdown from "markdown-to-jsx"
 import { Address } from "../../../helpers/MultiLineAddress"
 import { ContactAddress } from "./ContactAddress"
 import { OrDivider } from "./OrDivider"
-import { Heading } from "../../../headers/Heading"
+import { Heading } from "../../../text/Heading"
 
 export interface ApplicationAddressesProps {
   /** The dropoff address for paper applications */
@@ -38,7 +38,7 @@ const SubmitApplication = ({
         <div className="text-serif-lg">{strings.sectionHeader}</div>
         {applicationMailingAddress && (
           <>
-            <Heading priority={3} style={"sidebarSubHeader"}>
+            <Heading priority={3} styleType={"capsWeighted"}>
               {strings.mailHeader}
             </Heading>
             <>
@@ -51,13 +51,13 @@ const SubmitApplication = ({
         {applicationDropOffAddress && (
           <>
             {applicationMailingAddress && <OrDivider bgColor="gray-100" />}
-            <Heading priority={3} style={"sidebarSubHeader"}>
+            <Heading priority={3} styleType={"capsWeighted"}>
               {strings.dropOffHeader}
             </Heading>
             <ContactAddress address={applicationDropOffAddress} mapString={strings.mapString} />
             {applicationDropOffAddressOfficeHours && (
               <>
-                <Heading priority={3} style={"sidebarSubHeader"}>
+                <Heading priority={3} styleType={"capsWeighted"}>
                   {strings.officeHoursHeader}
                 </Heading>
                 <p className="mt-4 text-tiny text-gray-750">
diff --git a/ui-components/src/page_components/listing/listing_sidebar/events/EventSection.tsx b/ui-components/src/page_components/listing/listing_sidebar/events/EventSection.tsx
index d413c12831..b5f0fda32c 100644
--- a/ui-components/src/page_components/listing/listing_sidebar/events/EventSection.tsx
+++ b/ui-components/src/page_components/listing/listing_sidebar/events/EventSection.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Heading } from "../../../../headers/Heading"
+import { Heading } from "../../../../text/Heading"
 
 export type EventType = {
   timeString?: string
@@ -28,7 +28,10 @@ const EventSection = (props: EventSectionProps) => {
   return (
     <section className="aside-block">
       {props.headerText && (
-        <Heading priority={4} style={props.sectionHeader ? "sidebarHeader" : "sidebarSubHeader"}>
+        <Heading
+          priority={4}
+          styleType={props.sectionHeader ? "underlineWeighted" : "capsWeighted"}
+        >
           {props.headerText}
         </Heading>
       )}
diff --git a/ui-components/src/sections/InfoCardGrid.tsx b/ui-components/src/sections/InfoCardGrid.tsx
index 2d0c6f4283..fecea68857 100644
--- a/ui-components/src/sections/InfoCardGrid.tsx
+++ b/ui-components/src/sections/InfoCardGrid.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Heading } from "../headers/Heading"
+import { Heading } from "../text/Heading"
 import "./InfoCardGrid.scss"
 
 export interface InfoCardGridProps {
@@ -11,7 +11,7 @@ export interface InfoCardGridProps {
 const InfoCardGrid = (props: InfoCardGridProps) => (
   <section className="info-cards">
     <header className="info-cards__header">
-      <Heading style={"sidebarHeader"} priority={2} className={"text-tiny"}>
+      <Heading styleType={"underlineWeighted"} priority={2} className={"text-tiny"}>
         {props.title}
       </Heading>
       {props.subtitle && <p className="info-cards__subtitle">{props.subtitle}</p>}
diff --git a/ui-components/src/tables/CategoryTable.tsx b/ui-components/src/tables/CategoryTable.tsx
index cb6db1f721..44a11b6b8c 100644
--- a/ui-components/src/tables/CategoryTable.tsx
+++ b/ui-components/src/tables/CategoryTable.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 import { StackedTable, StackedTableProps } from "./StackedTable"
-import { Heading } from "../headers/Heading"
+import { Heading } from "../text/Heading"
 
 export interface CategoryTableSection {
   /** The header text for a category */
@@ -18,7 +18,7 @@ const CategoryTable = (props: CategoryTableProps) => {
   const tables = props.categoryData.map((category, index) => {
     return (
       <div key={index}>
-        <Heading priority={3} style={"categoryHeader"}>
+        <Heading priority={3} styleType={"lightWeighted"}>
           {category.header}
         </Heading>
         <hr className={"my-2"} />
diff --git a/ui-components/src/text/Heading.docs.mdx b/ui-components/src/text/Heading.docs.mdx
new file mode 100644
index 0000000000..4c00b0d342
--- /dev/null
+++ b/ui-components/src/text/Heading.docs.mdx
@@ -0,0 +1,18 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { Swatch } from "../prototypes/Swatch"
+import { Heading } from "./Heading"
+
+# Heading
+
+The heading component renders an HTML heading with a flexible priority and style. Each style available maps to a [Typography](?path=/story/theming-typography--page) variant.
+
+<Canvas>
+  <Story id="text-heading--large-header" />
+</Canvas>
+
+<br />
+<br />
+
+## Component Properties
+
+<ArgsTable of={Heading} />
diff --git a/ui-components/src/text/Heading.stories.tsx b/ui-components/src/text/Heading.stories.tsx
new file mode 100644
index 0000000000..fee5ef08ce
--- /dev/null
+++ b/ui-components/src/text/Heading.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from "react"
+import { BADGES } from "../../.storybook/constants"
+import HeadingDocumentation from "./Heading.docs.mdx"
+import { Heading } from "./Heading"
+
+export default {
+  title: "Text/Heading 🚩",
+  id: "text/heading",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  parameters: {
+    docs: {
+      page: HeadingDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+export const base1 = () => <Heading>Test Header</Heading>
+export const base2 = () => <Heading priority={2}>Test Header</Heading>
+export const base3 = () => <Heading priority={3}>Test Header</Heading>
+export const base4 = () => <Heading priority={4}>Test Header</Heading>
+export const base5 = () => <Heading priority={5}>Test Header</Heading>
+export const base6 = () => <Heading priority={6}>Test Header</Heading>
+export const largeHeader = () => <Heading styleType={"largePrimary"}>Large Header</Heading>
+export const mediumHeader = () => <Heading styleType={"mediumNormal"}>Medium Header</Heading>
+export const smallWeighted = () => <Heading styleType={"smallWeighted"}>Small Weighted</Heading>
+export const smallNormal = () => <Heading styleType={"smallNormal"}>Small Normal</Heading>
+export const underlineHeader = () => (
+  <Heading styleType={"underlineWeighted"}>Underline Header</Heading>
+)
+export const lightWeighted = () => <Heading styleType={"lightWeighted"}>Light Weighted</Heading>
+export const capsWeighted = () => <Heading styleType={"capsWeighted"}>Caps Weighted</Heading>
diff --git a/ui-components/src/text/Heading.tsx b/ui-components/src/text/Heading.tsx
new file mode 100644
index 0000000000..4fedac5b46
--- /dev/null
+++ b/ui-components/src/text/Heading.tsx
@@ -0,0 +1,32 @@
+import * as React from "react"
+
+export interface HeadingProps {
+  children?: React.ReactNode
+  className?: string
+  priority?: number
+  styleType?: HeaderType
+}
+
+export type HeaderType = keyof typeof HeaderStyleMap
+
+const HeaderStyleMap = {
+  largePrimary: "text__large-primary",
+  mediumNormal: "text__medium-normal",
+  smallWeighted: "text__small-weighted",
+  smallNormal: "text__small-normal",
+  underlineWeighted: "text__underline-weighted",
+  lightWeighted: "text__light-weighted",
+  capsWeighted: "text__caps-weighted",
+}
+
+const Heading = (props: HeadingProps) => {
+  const priority = props.priority && props.priority >= 1 && props.priority <= 6 ? props.priority : 1
+  const Tag = `h${priority}` as keyof JSX.IntrinsicElements
+  const classNames = []
+  if (props.styleType) classNames.push(HeaderStyleMap[props.styleType])
+  if (props.className) classNames.push(props.className)
+
+  return <Tag className={classNames.join(" ")}>{props.children}</Tag>
+}
+
+export { Heading as default, Heading }
diff --git a/ui-components/src/text/Message.stories.tsx b/ui-components/src/text/Message.stories.tsx
index 4692baab2a..d4cb123ecd 100644
--- a/ui-components/src/text/Message.stories.tsx
+++ b/ui-components/src/text/Message.stories.tsx
@@ -2,7 +2,7 @@ import * as React from "react"
 import { Message } from "./Message"
 
 export default {
-  title: "Prototypes/Message",
+  title: "Text/Message",
   decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
 }
 
diff --git a/ui-components/src/text/Tag.scss b/ui-components/src/text/Tag.scss
index 795c00d0dc..4a50fd6a0f 100644
--- a/ui-components/src/text/Tag.scss
+++ b/ui-components/src/text/Tag.scss
@@ -122,7 +122,7 @@
   }
 
   &.is-info {
-    color: var(--info-appearance-label-color, var(--bloom-color-gray-800));
+    color: var(--info-appearance-label-color, var(--bloom-text-color-dark));
     background-color: var(--info-appearance-background-color, var(--bloom-color-warn-light));
   }
 
diff --git a/ui-components/src/text/Tag.stories.tsx b/ui-components/src/text/Tag.stories.tsx
index 4fb4625261..4b7760be84 100644
--- a/ui-components/src/text/Tag.stories.tsx
+++ b/ui-components/src/text/Tag.stories.tsx
@@ -1,10 +1,10 @@
+import * as React from "react"
 import {
   AppearanceSizeType,
   AppearanceStyleType,
   AppearanceShadeType,
 } from "../global/AppearanceTypes"
 import { BADGES } from "../../.storybook/constants"
-import * as React from "react"
 import { Tag } from "./Tag"
 import TagDocumentation from "./Tag.docs.mdx"
 
diff --git a/ui-components/tailwind.config.js b/ui-components/tailwind.config.js
index 2bf85d5959..b214cf548c 100644
--- a/ui-components/tailwind.config.js
+++ b/ui-components/tailwind.config.js
@@ -89,6 +89,7 @@ module.exports = {
         800: "var(--bloom-color-gray-800)",
         750: "var(--bloom-color-gray-750)",
         700: "var(--bloom-color-gray-700)",
+        650: "var(--bloom-color-gray-650)",
         600: "var(--bloom-color-gray-600)",
         550: "var(--bloom-color-gray-550)",
         500: "var(--bloom-color-gray-500)",
diff --git a/yarn.lock b/yarn.lock
index 8dcf083efd..c95f771206 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7337,6 +7337,11 @@
   resolved "https://registry.yarnpkg.com/@types/pretty-hrtime/-/pretty-hrtime-1.0.0.tgz#c5a2d644a135e988b2932f99737e67b3c62528d0"
   integrity sha512-xl+5r2rcrxdLViAYkkiLMYsoUs3qEyrAnHFyEzYysgRxdVp3WbhysxIvJIxZp9FvZ2CYezh0TaHZorivH+voOQ==
 
+"@types/pretty@2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/pretty/-/pretty-2.0.1.tgz#192426eb6f640239e3e0224f60ebec39d4e125e4"
+  integrity sha512-l18spTC0Q2OEUIHGPyw37XBOacFI4Kng1fgfFjgDTg2FR9wqJ/NY9zWyXv87NRUlFDU6JA+E/GVnNJiWgyon6A==
+
 "@types/prop-types@*":
   version "15.7.3"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
@@ -8013,7 +8018,7 @@ abab@^2.0.3, abab@^2.0.5:
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
   integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
 
-abbrev@1:
+abbrev@1, abbrev@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
@@ -9218,6 +9223,13 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
 braces@^2.3.1, braces@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
@@ -10546,6 +10558,15 @@ concurrently@^5.3.0:
     tree-kill "^1.2.2"
     yargs "^13.3.0"
 
+condense-newlines@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/condense-newlines/-/condense-newlines-0.2.1.tgz#3de985553139475d32502c83b02f60684d24c55f"
+  integrity sha512-P7X+QL9Hb9B/c8HI5BFFKmjgBu2XpQuF98WZ9XkO+dBGgk5XgwiQz7o1SmpglNWId3581UcS0SFAWfoIhMHPfg==
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-whitespace "^0.3.0"
+    kind-of "^3.0.2"
+
 config-chain@^1.1.11:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa"
@@ -10554,7 +10575,7 @@ config-chain@^1.1.11:
     ini "^1.3.4"
     proto-list "~1.2.1"
 
-config-chain@^1.1.12:
+config-chain@^1.1.12, config-chain@^1.1.13:
   version "1.1.13"
   resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.13.tgz#fad0795aa6a6cdaff9ed1b68e9dff94372c232f4"
   integrity sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==
@@ -11903,6 +11924,16 @@ ecdsa-sig-formatter@1.0.11, ecdsa-sig-formatter@^1.0.11:
   dependencies:
     safe-buffer "^5.0.1"
 
+editorconfig@^0.15.3:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
+  integrity sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==
+  dependencies:
+    commander "^2.19.0"
+    lru-cache "^4.1.5"
+    semver "^5.6.0"
+    sigmund "^1.0.1"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -13898,6 +13929,17 @@ glob@^7.0.0, glob@^7.1.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, gl
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^8.0.3:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-8.0.3.tgz#415c6eb2deed9e502c68fa44a272e6da6eeca42e"
+  integrity sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^5.0.1"
+    once "^1.3.0"
+
 global-agent@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/global-agent/-/global-agent-3.0.0.tgz#ae7cd31bd3583b93c5a16437a1afe27cc33a1ab6"
@@ -15678,6 +15720,11 @@ is-whitespace-character@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
   integrity sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==
 
+is-whitespace@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f"
+  integrity sha512-RydPhl4S6JwAyj0JJjshWJEFG6hNye3pZFBRZaTUfZFwGHxzppNaNOVgQuS/E/SlhrApuMXrpnK1EEIXfdo3Dg==
+
 is-window@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-window/-/is-window-1.0.2.tgz#2c896ca53db97de45d3c33133a65d8c9f563480d"
@@ -16399,6 +16446,16 @@ joi@^17.3.0:
     "@sideway/formula" "^3.0.0"
     "@sideway/pinpoint" "^2.0.0"
 
+js-beautify@^1.6.12:
+  version "1.14.6"
+  resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.14.6.tgz#b23ca5d74a462c282c7711bb51150bcc97f2b507"
+  integrity sha512-GfofQY5zDp+cuHc+gsEXKPpNw2KbPddreEo35O6jT6i0RVK6LhsoYBhq5TvK4/n74wnA0QbK8gGd+jUZwTMKJw==
+  dependencies:
+    config-chain "^1.1.13"
+    editorconfig "^0.15.3"
+    glob "^8.0.3"
+    nopt "^6.0.0"
+
 js-levenshtein@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
@@ -17274,6 +17331,14 @@ lru-cache@6.0.0, lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lru-cache@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
+  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -17768,6 +17833,13 @@ minimatch@3.0.4, minimatch@^3.0.2, minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^5.0.1:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.0.tgz#1717b464f4971b144f6aabe8f2d0b8e4511e09c7"
+  integrity sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist-options@4.1.0, minimist-options@^4.0.2:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
@@ -18472,6 +18544,13 @@ nopt@^5.0.0:
   dependencies:
     abbrev "1"
 
+nopt@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-6.0.0.tgz#245801d8ebf409c6df22ab9d95b65e1309cdb16d"
+  integrity sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==
+  dependencies:
+    abbrev "^1.0.0"
+
 normalize-package-data@^2.0.0, normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -20017,6 +20096,15 @@ pretty-hrtime@^1.0.3:
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
 
+pretty@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pretty/-/pretty-2.0.0.tgz#adbc7960b7bbfe289a557dc5f737619a220d06a5"
+  integrity sha512-G9xUchgTEiNpormdYBl+Pha50gOUovT18IvAe7EYMZ1/f9W/WWMPRn+xI68yXNMUk3QXHDwo/1wV/4NejVNe1w==
+  dependencies:
+    condense-newlines "^0.2.1"
+    extend-shallow "^2.0.1"
+    js-beautify "^1.6.12"
+
 prismjs@^1.21.0, prismjs@~1.22.0:
   version "1.22.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.22.0.tgz#73c3400afc58a823dd7eed023f8e1ce9fd8977fa"
@@ -20210,6 +20298,11 @@ prr@~1.0.1:
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
   integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
 
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+  integrity sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==
+
 psl@^1.1.28, psl@^1.1.33:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
@@ -20556,6 +20649,11 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
+react-dom-server@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/react-dom-server/-/react-dom-server-0.0.5.tgz#75b6c0f5946e08e84db9dda6eca5e48fed25f723"
+  integrity sha512-MI/kjsunWm+7K0buGxYCr685xLseLbfLXtX5I76rhcWNy6T+iEuRELTj59L+4JefR57gZLnxBPVfU2Sqy7XxHw==
+
 react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -22005,6 +22103,11 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
+sigmund@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
+  integrity sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g==
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -24944,6 +25047,11 @@ y18n@^5.0.5:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
   integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+  integrity sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==
+
 yallist@^3.0.0, yallist@^3.0.2, yallist@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"