From 93f73636c72a5006a5f246409e1824b384480eae Mon Sep 17 00:00:00 2001
From: Rajat Talesra <rajat@forem.com>
Date: Thu, 2 Feb 2023 15:52:35 +0530
Subject: [PATCH] Post bootstrap changes - remove headings from admin.scss
 (#19019)

* h1 and h2 design fixes

* h2 redesign fixes

* Removed incorrect code

* Revert incorrect test code

* h3 heading redesign

* h4,h4,h5 headings redesign

* Minor design fixes

* Fixed all heading styles

* Test case fix

* Revert incorrect if condition

* Revert incorrect if condition

* Removed non required div
---
 app/assets/stylesheets/admin.scss             | 40 -----------
 .../articles/_individual_article.html.erb     |  2 +-
 app/views/admin/articles/index.html.erb       |  4 +-
 .../admin/badge_achievements/award.html.erb   |  2 +-
 .../admin/badge_achievements/index.html.erb   | 26 ++++---
 app/views/admin/broadcasts/edit.html.erb      |  2 +-
 app/views/admin/broadcasts/index.html.erb     |  2 +-
 app/views/admin/broadcasts/new.html.erb       |  2 +-
 app/views/admin/broadcasts/show.html.erb      |  2 +-
 app/views/admin/consumer_apps/edit.html.erb   |  2 +-
 app/views/admin/consumer_apps/index.html.erb  |  2 +-
 app/views/admin/consumer_apps/new.html.erb    |  2 +-
 app/views/admin/display_ads/edit.html.erb     |  2 +-
 app/views/admin/display_ads/new.html.erb      |  2 +-
 app/views/admin/email_messages/show.html.erb  |  4 +-
 .../feedback_messages/_abuse_reports.html.erb |  2 +-
 .../_feedback_message.html.erb                | 72 +++++++++----------
 app/views/admin/html_variants/edit.html.erb   |  2 +-
 app/views/admin/html_variants/new.html.erb    |  2 +-
 app/views/admin/invitations/new.html.erb      |  4 +-
 .../admin/listing_categories/edit.html.erb    |  2 +-
 .../admin/listing_categories/new.html.erb     |  2 +-
 app/views/admin/listings/edit.html.erb        |  2 +-
 app/views/admin/listings/index.html.erb       |  2 +-
 .../admin/navigation_links/index.html.erb     |  4 +-
 .../admin/organizations/_activity.html.erb    |  2 +-
 app/views/admin/organizations/show.html.erb   |  6 +-
 app/views/admin/overview/_analytics.html.erb  |  2 +-
 app/views/admin/pages/edit.html.erb           |  2 +-
 app/views/admin/pages/index.html.erb          |  4 +-
 app/views/admin/pages/new.html.erb            |  2 +-
 app/views/admin/permissions/index.html.erb    |  2 +-
 app/views/admin/podcasts/edit.html.erb        |  2 +-
 .../admin/response_templates/edit.html.erb    |  2 +-
 .../admin/response_templates/index.html.erb   |  2 +-
 .../admin/response_templates/new.html.erb     |  2 +-
 .../admin/shared/_image_uploader.html.erb     |  2 +-
 app/views/admin/spaces/index.html.erb         |  2 +-
 app/views/admin/tags/edit.html.erb            | 10 ++-
 .../admin/tools/feed_playground.html.erb      |  4 +-
 app/views/admin/tools/index.html.erb          |  4 +-
 .../admin/users/index/_filters_modal.html.erb |  2 +-
 app/views/admin/users/new/show.html.erb       |  2 +-
 .../admin/users/show/emails/_index.html.erb   |  2 +-
 .../users/show/emails/_verification.html.erb  |  2 +-
 .../admin/users/show/flags/_index.html.erb    |  4 +-
 .../admin/users/show/notes/_index.html.erb    |  2 +-
 .../users/show/overview/_credits.html.erb     |  2 +-
 .../show/overview/_organizations.html.erb     |  4 +-
 .../admin/users/show/overview/_roles.html.erb |  2 +-
 .../show/overview/_tag_moderation.html.erb    |  2 +-
 .../admin/users/show/reports/_index.html.erb  |  4 +-
 .../users/show/unpublish_logs/_index.html.erb |  2 +-
 app/views/admin/welcome/index.html.erb        |  2 +-
 .../adminFlows/broadcasts/broadcasts.spec.js  |  2 +-
 55 files changed, 115 insertions(+), 159 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 0203fdf4f..6fab2b382 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -11,46 +11,6 @@ label {
   margin-bottom: 0 !important;
 }
 
-h1 {
-  font-size: 2.5rem;
-  font-weight: 500;
-  line-height: 1.2;
-}
-
-h2 {
-  font-size: 2rem;
-  font-weight: 500;
-  line-height: 1.2;
-}
-
-h3 {
-  font-size: 1.75rem;
-  font-weight: 500;
-  line-height: 1.2;
-}
-
-h4 {
-  font-size: 1.5rem;
-  font-weight: 500;
-  line-height: 1.2;
-}
-
-h5 {
-  font-size: 1.25rem;
-  font-weight: 500;
-  line-height: 1.2;
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-}
-
-h6 {
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 1.2;
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-}
-
 hr {
   margin-top: 1rem;
   margin-bottom: 1rem;
diff --git a/app/views/admin/articles/_individual_article.html.erb b/app/views/admin/articles/_individual_article.html.erb
index 75c1497e4..e165cc131 100644
--- a/app/views/admin/articles/_individual_article.html.erb
+++ b/app/views/admin/articles/_individual_article.html.erb
@@ -100,7 +100,7 @@
     <% if article.user&.notes&.any? %>
       <div class="crayons-card crayons-card--secondary p-4 pt-3">
         <div class="flex gap-2 items-center">
-          <h3 class="crayons-subtitle-3"><%= article.user&.notes&.size %> user notes</h3>
+          <h3 class="crayons-subtitle-2"><%= article.user&.notes&.size %> user notes</h3>
           <a href="<%= admin_user_path(article.user_id) %>" class="c-link c-link--block c-link--branded">View all</a>
         </div>
         <% article.user&.notes&.last(3)&.each do |note| %>
diff --git a/app/views/admin/articles/index.html.erb b/app/views/admin/articles/index.html.erb
index a39788ed3..df4eaee72 100644
--- a/app/views/admin/articles/index.html.erb
+++ b/app/views/admin/articles/index.html.erb
@@ -33,14 +33,14 @@
 
   <% if @pinned_article.present? %>
     <div class="crayons-card crayons-card--elevated p-2">
-      <h2 class="crayons-subtitle-2 flex gap-2 items-center mb-2 p-2"><%= crayons_icon_tag("pin.svg") %> Pinned Article</h2>
+      <h2 class="crayons-subtitle-1 flex gap-2 items-center mb-2 p-2"><%= crayons_icon_tag("pin.svg") %> Pinned Article</h2>
       <%= render partial: "individual_article", locals: { article: @pinned_article } %>
     </div>
   <% end %>
 
   <% if @featured_articles.present? %>
     <div class="crayons-card p-3">
-      <h2 class="crayons-subtitle-2 flex gap-2 items-center mb-2">Manually Featured Articles</h2>
+      <h2 class="crayons-subtitle-1 flex gap-2 items-center mb-2">Manually Featured Articles</h2>
       <%= render partial: "individual_article", collection: @featured_articles, as: :article %>
     </div>
   <% end %>
diff --git a/app/views/admin/badge_achievements/award.html.erb b/app/views/admin/badge_achievements/award.html.erb
index 6f1874d63..6e5bb6796 100644
--- a/app/views/admin/badge_achievements/award.html.erb
+++ b/app/views/admin/badge_achievements/award.html.erb
@@ -1,5 +1,5 @@
 <header class="flex justify-between items-center mb-4">
-  <h2 class="crayons-title">Award Badges</h2>
+  <h1 class="crayons-title">Award Badges</h1>
   <%= link_to "Back to Badge Achievements", admin_badge_achievements_path, class: "c-link c-link--block" %>
 </header>
 <div class="crayons-card p-6">
diff --git a/app/views/admin/badge_achievements/index.html.erb b/app/views/admin/badge_achievements/index.html.erb
index 4d7012f02..2b9cc024a 100644
--- a/app/views/admin/badge_achievements/index.html.erb
+++ b/app/views/admin/badge_achievements/index.html.erb
@@ -23,7 +23,7 @@
     </div>
   </div>
 
-  <table class="crayons-table" width="100%">
+  <table class="crayons-table mt-2" width="100%">
     <thead>
       <tr>
         <th scope="col">User ID</th>
@@ -38,19 +38,17 @@
         <td class="whitespace-nowrap"><%= badge_achievement.user.id %></td>
         <td><%= badge_achievement.user.username %></td>
         <td><%= badge_achievement.badge.title %></td>
-        <h5>
-          <td class="justify-center">
-            <img class="mx-auto mt-3" width="40" height="40" src="<%= badge_achievement.badge.badge_image %>" alt="badge image" loading="lazy" />
-          </td>
-          <td>
-            <button
-              class="crayons-btn crayons-btn--danger"
-              data-item-id="<%= badge_achievement.id %>"
-              data-endpoint="/admin/content_manager/badge_achievements"
-              data-username="<%= current_user.username %>"
-              data-action="click->confirmation-modal#openModal">Remove</button>
-          </td>
-        </h5>
+        <td class="justify-center">
+          <img class="mx-auto mt-3" width="40" height="40" src="<%= badge_achievement.badge.badge_image %>" alt="badge image" loading="lazy" />
+        </td>
+        <td>
+          <button
+            class="crayons-btn crayons-btn--danger"
+            data-item-id="<%= badge_achievement.id %>"
+            data-endpoint="/admin/content_manager/badge_achievements"
+            data-username="<%= current_user.username %>"
+            data-action="click->confirmation-modal#openModal">Remove</button>
+        </td>
       </tr>
       <% end %>
     </tbody>
diff --git a/app/views/admin/broadcasts/edit.html.erb b/app/views/admin/broadcasts/edit.html.erb
index 5c38bd157..84f3038af 100644
--- a/app/views/admin/broadcasts/edit.html.erb
+++ b/app/views/admin/broadcasts/edit.html.erb
@@ -1,4 +1,4 @@
-<h2 class="crayons-title mb-6">Edit broadcast:</h2>
+<h1 class="crayons-title mb-6">Edit broadcast:</h1>
 <div class="crayons-card p-6">
   <%= form_for([:admin, @broadcast], method: :patch) do %>
     <%= render "form" %>
diff --git a/app/views/admin/broadcasts/index.html.erb b/app/views/admin/broadcasts/index.html.erb
index 3de10f081..ae8262486 100644
--- a/app/views/admin/broadcasts/index.html.erb
+++ b/app/views/admin/broadcasts/index.html.erb
@@ -1,5 +1,5 @@
 <header class="flex items-center mb-6">
-  <h2 class="crayons-title">Broadcasts</h2>
+  <h1 class="crayons-title">Broadcasts</h1>
   <a href="<%= new_admin_broadcast_path %>" class="crayons-btn ml-auto" role="button">Make a New Broadcast</a>
 </header>
 
diff --git a/app/views/admin/broadcasts/new.html.erb b/app/views/admin/broadcasts/new.html.erb
index 1965522b0..8da079a59 100644
--- a/app/views/admin/broadcasts/new.html.erb
+++ b/app/views/admin/broadcasts/new.html.erb
@@ -1,4 +1,4 @@
-<h2 class="crayons-title mb-6">Make a new broadcast:</h2>
+<h1 class="crayons-title mb-6">Make a new broadcast:</h1>
 <div class="crayons-card p-6">
   <%= form_for([:admin, @broadcast], method: :post) do %>
     <%= render "form" %>
diff --git a/app/views/admin/broadcasts/show.html.erb b/app/views/admin/broadcasts/show.html.erb
index 5900631c2..1b95f61ce 100644
--- a/app/views/admin/broadcasts/show.html.erb
+++ b/app/views/admin/broadcasts/show.html.erb
@@ -5,7 +5,7 @@
   data-confirmation-modal-title-value="Confirm changes"
   data-confirmation-modal-size-value="m">
   <header class="flex">
-    <h2 class="crayons-title mb-6"><%= @broadcast.title %></h2>
+    <h1 class="crayons-title mb-6"><%= @broadcast.title %></h1>
     <div class="ml-auto">
       <%= link_to "Edit", edit_admin_broadcast_path, class: "crayons-btn" %>
       <button
diff --git a/app/views/admin/consumer_apps/edit.html.erb b/app/views/admin/consumer_apps/edit.html.erb
index e88e72eb0..5122a52cf 100644
--- a/app/views/admin/consumer_apps/edit.html.erb
+++ b/app/views/admin/consumer_apps/edit.html.erb
@@ -1,4 +1,4 @@
-<h2 class="crayons-title mb-6">Edit Consumer App</h2>
+<h1 class="crayons-title mb-6">Edit Consumer App</h1>
 <div class="crayons-card p-6">
   <%= form_for([:admin, @app], method: :patch, data: { controller: "consumer-app" }) do %>
     <%= render "form" %>
diff --git a/app/views/admin/consumer_apps/index.html.erb b/app/views/admin/consumer_apps/index.html.erb
index 001290b34..784b7a90e 100644
--- a/app/views/admin/consumer_apps/index.html.erb
+++ b/app/views/admin/consumer_apps/index.html.erb
@@ -1,7 +1,7 @@
 <div class="crayons-card p-3 mb-5 mt-2">
 
   <header class="flex items-center mb-6">
-    <h2 class="crayons-title">Consumer Apps</h2>
+    <h1 class="crayons-title">Consumer Apps</h1>
     <a href="<%= new_admin_consumer_app_path %>" class="crayons-btn ml-auto" role="button">New Consumer App</a>
   </header>
 
diff --git a/app/views/admin/consumer_apps/new.html.erb b/app/views/admin/consumer_apps/new.html.erb
index ede414d97..ebaada97f 100644
--- a/app/views/admin/consumer_apps/new.html.erb
+++ b/app/views/admin/consumer_apps/new.html.erb
@@ -1,4 +1,4 @@
-<h2 class="crayons-title mb-6">New Consumer App</h2>
+<h1 class="crayons-title mb-6">New Consumer App</h1>
 <div class="crayons-card p-6">
   <%= form_for([:admin, @app], method: :post, data: { controller: "consumer-app" }) do %>
     <%= render "form" %>
diff --git a/app/views/admin/display_ads/edit.html.erb b/app/views/admin/display_ads/edit.html.erb
index c85ae56dc..3ae402398 100644
--- a/app/views/admin/display_ads/edit.html.erb
+++ b/app/views/admin/display_ads/edit.html.erb
@@ -1,5 +1,5 @@
 <%= stylesheet_link_tag "minimal", media: "all" %>
-<h2 class="crayons-title mb-6">Edit Display Ad:</h2>
+<h1 class="crayons-title mb-6">Edit Display Ad:</h1>
 <div class="crayons-card p-6">
   <%= form_for([:admin, @display_ad], method: :patch) do %>
     <%= render "form" %>
diff --git a/app/views/admin/display_ads/new.html.erb b/app/views/admin/display_ads/new.html.erb
index 7f7212630..acfc7564e 100644
--- a/app/views/admin/display_ads/new.html.erb
+++ b/app/views/admin/display_ads/new.html.erb
@@ -1,4 +1,4 @@
-<h2 class="crayons-title mb-4">Make a new Display Ad</h2>
+<h1 class="crayons-title mb-4">Make a new Display Ad</h1>
 <div class="crayons-card p-6">
   <%= form_for([:admin, @display_ad], method: :post) do %>
     <%= render "form" %>
diff --git a/app/views/admin/email_messages/show.html.erb b/app/views/admin/email_messages/show.html.erb
index 7caea1b7a..0d6744c2a 100644
--- a/app/views/admin/email_messages/show.html.erb
+++ b/app/views/admin/email_messages/show.html.erb
@@ -1,6 +1,6 @@
 <div class="grid gap-6">
   <div class="crayons-card p-6">
-    <h2>Email message</h2>
+    <h2 class="crayons-subtitle-1">Email message</h2>
 
     <table class="crayons-table mt-5" width="100%">
       <tbody>
@@ -37,7 +37,7 @@
   </div>
 
   <div class="crayons-card p-6">
-    <h2>Email content</h2>
+    <h2 class="crayons-subtitle-1">Email content</h2>
     <p><em>The content is previewed below without formatting</em></p>
     <div class="crayons-card my-5 p-5">
       <%= @email.html_content.html_safe %>
diff --git a/app/views/admin/feedback_messages/_abuse_reports.html.erb b/app/views/admin/feedback_messages/_abuse_reports.html.erb
index 074d7d34b..187d5b20d 100644
--- a/app/views/admin/feedback_messages/_abuse_reports.html.erb
+++ b/app/views/admin/feedback_messages/_abuse_reports.html.erb
@@ -1,5 +1,5 @@
 <div>
-  <h2 class="crayons-title mb-4">Abuse reports</h2>
+  <h2 class="crayons-subtitle-1 mb-4">Abuse reports</h2>
   <ul class="crayons-navigation crayons-navigation--horizontal mb-4">
     <li>
       <a href="<%= admin_reports_path(state: @feedback_type, status: "Open") %>" class="crayons-navigation__item <%= "crayons-navigation__item--current" if @status == "Open" %>">Open/Unresolved</a>
diff --git a/app/views/admin/feedback_messages/_feedback_message.html.erb b/app/views/admin/feedback_messages/_feedback_message.html.erb
index 1d67122f7..f0126ffb7 100644
--- a/app/views/admin/feedback_messages/_feedback_message.html.erb
+++ b/app/views/admin/feedback_messages/_feedback_message.html.erb
@@ -20,57 +20,57 @@
     <div class="crayons-card__body">
       <div class="flex flex-wrap -mx-4">
         <div class="w-75 max-w-75 px-4">
-          <h5 class="fw-bold">
+          <h3 class="crayons-subtitle-2">
           <% if feedback_message.offender %>
             Reporter and Affected:
           <% else %>
             Reporter:
           <% end %>
-          </h5>
-          <h5>
+          </h3>
+          <h3 class="crayons-subtitle-2 fw-normal">
             <% if feedback_message.reporter_id? %>
               <%= feedback_message.reporter.name %>
               <a href="<%= feedback_message.reporter.path %>">@<%= feedback_message.reporter.username %></a>
             <% else %>
               Anonymous
             <% end %>
-          </h5>
+          </h3>
 
           <% if feedback_message.offender %>
-            <h5 class="fw-bold">
+            <h3 class="crayons-subtitle-2">
               Offender:
-            </h5>
-            <h5>
+            </h3>
+            <h3 class="crayons-subtitle-2 fw-normal">
               <%= feedback_message.offender.name %>
               <a href="<%= feedback_message.offender.path %>">@<%= feedback_message.offender.username %></a>
-            </h5>
+            </h3>
           <% else %>
-            <h5 class="fw-bold">
+            <h3 class="crayons-subtitle-2">
               Reported URL (new tab):
-            </h5>
-            <h5>
+            </h3>
+            <h3 class="crayons-subtitle-2 fw-normal">
               <a href="<%= feedback_message.reported_url %>" target="_blank" rel="noopener"><%= feedback_message.reported_url %></a>
-            </h5>
+            </h3>
           <% end %>
         </div>
 
         <div class="w-25 max-w-25 px-4">
-          <h3 class="report__tags">
+          <h3 class="crayons-subtitle-2 report__tags">
             <span class="c-indicator c-indicator--warning float-right"><%= feedback_message.category.titleize %></span>
           </h3>
         </div>
         <div class="w-100 max-w-100 px-4">
           <% if feedback_message.offender %>
-            <h5 class="fw-bold">
+            <h3 class="crayons-subtitle-2">
               Message from Offender:
-            </h5>
+            </h3>
             <div class="reported__message">
               <%= raw(feedback_message.message) %>
             </div>
             <% else %>
-            <h5 class="fw-bold">
+            <h3 class="crayons-subtitle-2">
               Message:
-            </h5>
+            </h3>
             <p>
             <% if feedback_message.message.blank? %>
               <span class="fs-italic">No message was left.</span>
@@ -84,7 +84,7 @@
       <hr>
       <div class="flex flex-wrap -mx-4">
         <div class="w-100 max-w-100 px-4">
-          <h5 class="fw-bold">Previous Emails:</h5>
+          <h3 class="crayons-subtitle-2">Previous Emails:</h3>
           <div class="previous__emails__container">
             <% if feedback_message_emails.any? %>
               <% feedback_message_emails.each do |email| %>
@@ -96,7 +96,7 @@
                 </div>
               <% end %>
             <% else %>
-              <h5>No Email Records</h5>
+              <h3 class="crayons-subtitle-2 fw-normal">No Email Records</h3>
             <% end %>
           </div>
         </div>
@@ -104,7 +104,7 @@
       <hr>
       <div class="flex flex-wrap -mx-4">
         <div class="w-100 max-w-100 px-4">
-          <h4 class="fw-bold">Email Form:</h4>
+          <h3 class="crayons-subtitle-2">Email Form:</h3>
           <ul class="crayons-navigation crayons-navigation--horizontal" role="tablist">
             <li role="presentation" >
               <a id="tab-reporter-<%= feedback_message.id %>" class="crayons-navigation__item crayons-navigation__item--current" href="#reporter-<%= feedback_message.id %>" aria-controls="reporter-<%= feedback_message.id %>" role="tab">Reporter</a>
@@ -120,27 +120,27 @@
             <div role="tabcard" class="" data-id="<%= feedback_message.id %>" data-userType="reporter" id="reporter-<%= feedback_message.id %>">
               <div class="crayons-notice crayons-notice--info" aria-live="polite">Please note that all users who report abuse receive an automatic confirmation email. You can send an additional, follow-up email to this user by using the form below.</div>
               <br>
-              <h5 class="fw-bold">Send To:</h5>
+              <h3 class="crayons-subtitle-2">Send To:</h3>
               <%= email_field_tag :reporter_email_to, feedback_message.reporter&.email, class: "crayons-textfield my-1", id: "reporter__emailto__#{feedback_message.id}", required: true %>
-              <h5 class="fw-bold">Subject:</h5>
+              <h3 class="crayons-subtitle-2">Subject:</h3>
               <%= text_field_tag :reporter_email_subject, reporter_email_details[:subject], class: "crayons-textfield my-1", id: "reporter__subject__#{feedback_message.id}" %>
-              <h5 class="fw-bold">Body:</h5>
+              <h3 class="crayons-subtitle-2">Body:</h3>
               <%= text_area_tag :reporter_email_body, reporter_email_details[:body], class: "crayons-textfield my-1", style: "height: 300px;", id: "reporter__body__#{feedback_message.id}" %>
             </div>
             <div role="tabcard" class="hidden" data-id="<%= feedback_message.id %>" data-userType="offender" id="offender-<%= feedback_message.id %>">
-              <h5 class="fw-bold">Send To:</h5>
+              <h3 class="crayons-subtitle-2">Send To:</h3>
               <%= email_field_tag :offender_email_to, feedback_message.offender&.email, class: "crayons-textfield my-1", id: "offender__emailto__#{feedback_message.id}", required: true %>
-              <h5 class="fw-bold">Subject:</h5>
+              <h3 class="crayons-subtitle-2">Subject:</h3>
               <%= text_field_tag :offender_email_subject, offender_email_details[:subject], class: "crayons-textfield my-1", id: "offender__subject__#{feedback_message.id}" %>
-              <h5 class="fw-bold">Body:</h5>
+              <h3 class="crayons-subtitle-2">Body:</h3>
               <%= text_area_tag :offender_email_body, offender_email_details[:body], class: "crayons-textfield my-1", style: "height: 300px;", id: "offender__body__#{feedback_message.id}" %>
             </div>
             <div role="tabcard" class="hidden" data-id="<%= feedback_message.id %>" data-userType="affected" id="affected-<%= feedback_message.id %>">
-              <h5 class="fw-bold">Send To:</h5>
+              <h3 class="crayons-subtitle-2">Send To:</h3>
               <%= email_field_tag :affected_email_to, feedback_message.affected&.email, class: "crayons-textfield my-1", id: "affected__emailto__#{feedback_message.id}", required: true %>
-              <h5 class="fw-bold">Subject:</h5>
+              <h3 class="crayons-subtitle-2">Subject:</h3>
               <%= text_field_tag :affected_email_subject, affected_email_details[:subject], class: "crayons-textfield my-1", id: "affected__subject__#{feedback_message.id}" %>
-              <h5 class="fw-bold">Body:</h5>
+              <h3 class="crayons-subtitle-2">Body:</h3>
               <%= text_area_tag :affected_email_body, affected_email_details[:body], class: "crayons-textfield my-1", style: "height: 300px;", id: "affected__body__#{feedback_message.id}" %>
             </div>
           </div>
@@ -151,23 +151,23 @@
       </div>
       <div class="flex flex-wrap -mx-4 my-3">
         <div class="w-100 max-w-100 px-4">
-          <h3>Status:</h3>
+          <h3 class="crayons-subtitle-2">Status:</h3>
           <%= f.select :status, %w[Open Invalid Resolved], {}, id: "status__#{feedback_message.id}" %>
           <button class="c-btn c-btn--primary block mt-3" type="button" id="save__status__<%= feedback_message.id %>">Save Status</button>
         </div>
       </div>
       <div class="flex flex-wrap -mx-4 my-3">
         <div class="w-100 max-w-100 px-4">
-          <h3>Notes:</h3>
+          <h3 class="crayons-subtitle-2">Notes:</h3>
           <div id="notes__<%= feedback_message.id %>">
             <% feedback_message.notes&.order(:created_at)&.each do |note| %>
               <div class="notes__border my-2 p-2">
                 <span class="c-indicator c-indicator--info float-right">
                   <%= time_ago_in_words note.created_at %> ago
                 </span>
-                <h5 class="font-weight-bold">
+                <h3 class="crayons-subtitle-2">
                   <%= note.author.name %>:
-                </h5>
+                </h3>
                 <p>
                   <%= note.content %>
                 </p>
@@ -351,15 +351,15 @@
    var notesDiv = document.getElementById('notes__' + id);
 
    var singleNoteDiv = document.createElement('div');
-   singleNoteDiv.setAttribute('class', 'border-solid border-2 border-base-0');
+   singleNoteDiv.setAttribute('class', 'notes__border my-2 p-2');
 
    var timeBadge = document.createElement('span');
    timeBadge.setAttribute('class', 'c-indicator c-indicator--info float-right');
    timeBadge.innerText = "just now";
    singleNoteDiv.append(timeBadge);
 
-   var noteAuthor = document.createElement('H5');
-   noteAuthor.setAttribute('class', 'font-weight-bold');
+   var noteAuthor = document.createElement('H3');
+   noteAuthor.setAttribute('class', 'crayons-subtitle-2');
    var newNote = document.createElement('p');
 
    var authorContent = document.createTextNode(noteParams.author_name + ': ');
diff --git a/app/views/admin/html_variants/edit.html.erb b/app/views/admin/html_variants/edit.html.erb
index b5f4e691f..2e60fd93a 100644
--- a/app/views/admin/html_variants/edit.html.erb
+++ b/app/views/admin/html_variants/edit.html.erb
@@ -1,4 +1,4 @@
-<h2 class="crayons-title mb-4">Edit HTML Variant</h2>
+<h1 class="crayons-title mb-4">Edit HTML Variant</h1>
 <div class="crayons-card p-6">
   <%= form_for([:admin, @html_variant], method: :patch) do %>
     <%= render "form" %>
diff --git a/app/views/admin/html_variants/new.html.erb b/app/views/admin/html_variants/new.html.erb
index ac699aea6..9e7cc0d38 100644
--- a/app/views/admin/html_variants/new.html.erb
+++ b/app/views/admin/html_variants/new.html.erb
@@ -1,4 +1,4 @@
-<h2 class="crayons-title mb-4">Make a new HTML Variant</h2>
+<h1 class="crayons-title mb-4">Make a new HTML Variant</h1>
 <div class="crayons-card p-6">
   <%= form_for([:admin, @html_variant], method: :post) do %>
     <%= render "form" %>
diff --git a/app/views/admin/invitations/new.html.erb b/app/views/admin/invitations/new.html.erb
index 5558e9d0b..f83b4e987 100644
--- a/app/views/admin/invitations/new.html.erb
+++ b/app/views/admin/invitations/new.html.erb
@@ -3,7 +3,7 @@
 <% unless smtp_enabled %>
   <div class="crayons-card">
     <div class="crayons-card__body p-4">
-      <h1 class="fw-heavy fs-3xl">Setup SMTP to invite users</h1>
+      <h1 class="crayons-title">Setup SMTP to invite users</h1>
       <div class="my-4">
         SMTP settings are required so that your Forem can send emails.
         If you wish to send invites, email digests and activity notifications you will need to
@@ -21,7 +21,7 @@
 <% end %>
 
 <% if smtp_enabled %>
-  <h1 class="fw-heavy fs-3xl">Invite Users</h1>
+  <h1 class="crayons-title">Invite Users</h1>
   <%= form_for(User.new, url: admin_invitations_path) do |f| %>
     <div class="crayons-field mt-6">
       <%= f.label :email, class: "crayons-field__label" %>
diff --git a/app/views/admin/listing_categories/edit.html.erb b/app/views/admin/listing_categories/edit.html.erb
index b664a45b4..5c4e2b3f3 100644
--- a/app/views/admin/listing_categories/edit.html.erb
+++ b/app/views/admin/listing_categories/edit.html.erb
@@ -1,4 +1,4 @@
-<h2 class="fs-2xl s:fs-3xl mb-6">Edit Listing Category:</h2>
+<h1 class="crayons-title mb-6">Edit Listing Category:</h1>
 <div class="crayons-card p-6">
   <%= form_for([:admin, @listing_category], method: :patch) do %>
     <%= render "form" %>
diff --git a/app/views/admin/listing_categories/new.html.erb b/app/views/admin/listing_categories/new.html.erb
index 98d0b7f8d..f4e34a432 100644
--- a/app/views/admin/listing_categories/new.html.erb
+++ b/app/views/admin/listing_categories/new.html.erb
@@ -1,4 +1,4 @@
-<h2 class="fs-2xl s:fs-3xl mb-6">Make a new Listing Category:</h2>
+<h1 class="crayons-title mb-6">Make a new Listing Category:</h1>
 <div class="crayons-card p-6">
   <%= form_for([:admin, @listing_category], method: :post) do %>
     <%= render "form" %>
diff --git a/app/views/admin/listings/edit.html.erb b/app/views/admin/listings/edit.html.erb
index 8d877942f..0c0c1bfc6 100644
--- a/app/views/admin/listings/edit.html.erb
+++ b/app/views/admin/listings/edit.html.erb
@@ -1,5 +1,5 @@
 <header class="mb-6 flex items-center">
-  <h2 class="crayons-title mb-4">Edit</h2>
+  <h1 class="crayons-title mb-4">Edit</h1>
 
   <div class="ml-auto flex">
     <%= link_to "Remove", url_for(action: :destroy, id: @listing.id), method: :delete, data: { confirm: "Are you sure?" }, class: "crayons-btn crayons-btn--danger mr-2" %>
diff --git a/app/views/admin/listings/index.html.erb b/app/views/admin/listings/index.html.erb
index e8b7b6e29..39bc72ae4 100644
--- a/app/views/admin/listings/index.html.erb
+++ b/app/views/admin/listings/index.html.erb
@@ -1,6 +1,6 @@
 
 <header class="flex items-center mb-6">
-  <h2 class="crayons-title mb-4">Listings</h2>
+  <h1 class="crayons-title">Listings</h1>
 
   <a
     href="<%= admin_listing_categories_path %>"
diff --git a/app/views/admin/navigation_links/index.html.erb b/app/views/admin/navigation_links/index.html.erb
index cf4dfd6d0..fba2bc0c8 100644
--- a/app/views/admin/navigation_links/index.html.erb
+++ b/app/views/admin/navigation_links/index.html.erb
@@ -7,7 +7,7 @@
   <%= render "add_navigation_link_modal" %>
 
   <div>
-    <h2 class="crayons-subtitle-2">Main navigation</h2>
+    <h2 class="crayons-subtitle-1">Main navigation</h2>
     <ul class="ml-0">
       <% @default_nav_links.each_with_index do |link, index| %>
         <li class="flex pt-4 items-center">
@@ -35,7 +35,7 @@
   </div>
 
   <div>
-    <h2 class="crayons-subtitle-2">Other</h2>
+    <h2 class="crayons-subtitle-1">Other</h2>
     <ul class="ml-0">
       <% @other_nav_links.each_with_index do |link, index| %>
         <li class="flex pt-4 items-center">
diff --git a/app/views/admin/organizations/_activity.html.erb b/app/views/admin/organizations/_activity.html.erb
index 897f47dfc..5e8098f91 100644
--- a/app/views/admin/organizations/_activity.html.erb
+++ b/app/views/admin/organizations/_activity.html.erb
@@ -1,5 +1,5 @@
 <div class="crayons-card p-6">
-  <h3 class="mb-4">Activity</h2>
+  <h3 class="crayons-subtitle-2 mb-4">Activity</h2>
   <ul>
     <li><%= @organization.articles.size %> articles</li>
     <li><%= @organization.followers.size %> followers</li>
diff --git a/app/views/admin/organizations/show.html.erb b/app/views/admin/organizations/show.html.erb
index c229cb1ef..2e80af86e 100644
--- a/app/views/admin/organizations/show.html.erb
+++ b/app/views/admin/organizations/show.html.erb
@@ -1,6 +1,6 @@
 <header class="flex items-center mb-6">
   <div>
-    <h2 class="crayons-title"><%= @organization.name %></h2>
+    <h1 class="crayons-title"><%= @organization.name %></h1>
     <p class="color-base-60">Created <%= @organization.created_at.strftime("%b %e '%y") %></p>
   </div>
 
@@ -10,7 +10,7 @@
 </header>
 
 <div class="crayons-card p-6 mb-6">
-  <h3 class="mb-4">General Info</h3>
+  <h3 class="crayons-subtitle-2 mb-4">General Info</h3>
   <dl>
     <dt>ID:</dt>
     <dd><%= @organization.id %></dd>
@@ -37,7 +37,7 @@
 
 <div class="crayons-card p-6 mb-6">
   <% current_credits = @organization.unspent_credits_count %>
-  <h3 class="mb-4">Credits (current: <%= current_credits %>)</h3>
+  <h3 class="crayons-subtitle-2 mb-4">Credits (current: <%= current_credits %>)</h3>
   <%= form_tag update_org_credits_admin_organization_path(@organization), method: :patch, class: "flex justify-between mb-2" do %>
     <div>
       <%= hidden_field_tag :credit_action, :add %>
diff --git a/app/views/admin/overview/_analytics.html.erb b/app/views/admin/overview/_analytics.html.erb
index bc7e1090d..2ece1c878 100644
--- a/app/views/admin/overview/_analytics.html.erb
+++ b/app/views/admin/overview/_analytics.html.erb
@@ -31,7 +31,7 @@
     <% @analytics.each do |entity, current, previous, values| %>
       <div>
         <header class="color-secondary">
-          <h3 class="fs-l fw-normal"><span class="color-primary fw-bold"><%= current %></span> <%= entity.pluralize(current) %></h3>
+          <h3 class="crayons-subtitle-2 fw-normal"><span class="fw-bold"><%= current %></span> <%= entity.pluralize(current) %></h3>
           <p class="flex items-center fs-s mb-1">
             <% if previous != 0 %>
               <% change = (Float(previous - current) / previous * 100).ceil.abs %>
diff --git a/app/views/admin/pages/edit.html.erb b/app/views/admin/pages/edit.html.erb
index 7d0f1c5be..df5ad60c8 100644
--- a/app/views/admin/pages/edit.html.erb
+++ b/app/views/admin/pages/edit.html.erb
@@ -1,2 +1,2 @@
-<h2 class="crayons-title mb-6">Edit <%= @page.title %></h2>
+<h1 class="crayons-title mb-6">Edit <%= @page.title %></h1>
 <%= render "form" %>
diff --git a/app/views/admin/pages/index.html.erb b/app/views/admin/pages/index.html.erb
index 4b71bc029..aa10886cf 100644
--- a/app/views/admin/pages/index.html.erb
+++ b/app/views/admin/pages/index.html.erb
@@ -1,7 +1,7 @@
 <%= csrf_meta_tags %>
 
 <header class="flex items-center mb-6">
-  <h2 class="crayons-title">Pages</h2>
+  <h1 class="crayons-title">Pages</h1>
   <%= link_to "New page", new_admin_page_path, class: "ml-auto crayons-btn crayons-btn--s" %>
 </header>
 
@@ -20,7 +20,7 @@
 <div class="mt-8 pages__override_defaults">
   <div class="my-6">
     <% if !@code_of_conduct || !@privacy || !@terms %>
-      <h2 class="mb-4 crayons-title">Override defaults</h2>
+      <h2 class="crayons-subtitle-1 mb-4">Override defaults</h2>
       <div class="crayons-notice mb-4 crayons-notice--warning" aria-live="polite">
         <strong>Note: Proceed with caution. When you edit any of the following pages, it will diverge from the original Forem version and you will no longer receive updates. You will see your updated version in the section above.</strong>
       </div>
diff --git a/app/views/admin/pages/new.html.erb b/app/views/admin/pages/new.html.erb
index 85060daed..78d83ec92 100644
--- a/app/views/admin/pages/new.html.erb
+++ b/app/views/admin/pages/new.html.erb
@@ -1,2 +1,2 @@
-<h2 class="crayons-title mb-6">New page</h2>
+<h1 class="crayons-title mb-6">New page</h1>
 <%= render "form" %>
diff --git a/app/views/admin/permissions/index.html.erb b/app/views/admin/permissions/index.html.erb
index ba5764856..e74e3fc97 100644
--- a/app/views/admin/permissions/index.html.erb
+++ b/app/views/admin/permissions/index.html.erb
@@ -1,4 +1,4 @@
-<h2 class="crayons-title mb-6">Admin roles</h2>
+<h1 class="crayons-title mb-6">Admin roles</h1>
 
 <%= paginate @users %>
 
diff --git a/app/views/admin/podcasts/edit.html.erb b/app/views/admin/podcasts/edit.html.erb
index 1d608e403..0cbbf91d8 100644
--- a/app/views/admin/podcasts/edit.html.erb
+++ b/app/views/admin/podcasts/edit.html.erb
@@ -60,7 +60,7 @@
   <div class="crayons-card p-6">
     <%= form_for [:admin, @podcast] do |f| %>
       <div class="flex flex-col gap-4">
-        <h2 class="mb-4">Edit Podcast</h2>
+        <h2 class="crayons-subtitle-1 mb-4">Edit Podcast</h2>
         <div class="crayons-field">
           <%= f.label :title, for: "podcast_title", class: "crayons-field__label" %>
           <%= f.text_field :title, class: "crayons-textfield" %>
diff --git a/app/views/admin/response_templates/edit.html.erb b/app/views/admin/response_templates/edit.html.erb
index 76da3ce1d..1c78c7467 100644
--- a/app/views/admin/response_templates/edit.html.erb
+++ b/app/views/admin/response_templates/edit.html.erb
@@ -1,5 +1,5 @@
 <header class="flex items-center mb-6">
-  <h2 class="crayons-title">Edit: <%= @response_template.title %></h2>
+  <h1 class="crayons-title">Edit: <%= @response_template.title %></h1>
   <%= form_with(model: [:admin, @response_template], local: true, class: "ml-auto", method: :delete, html: { onsubmit: "return confirm('Are you sure you want to delete this response template?')" }) do |f| %>
     <%= f.submit "Delete", class: "crayons-btn crayons-btn--danger" %>
   <% end %>
diff --git a/app/views/admin/response_templates/index.html.erb b/app/views/admin/response_templates/index.html.erb
index 0d84d1d9d..577306f17 100644
--- a/app/views/admin/response_templates/index.html.erb
+++ b/app/views/admin/response_templates/index.html.erb
@@ -1,5 +1,5 @@
 <header class="flex items-center mb-6">
-  <h2 class="crayons-title">Response templates</h2>
+  <h1 class="crayons-title">Response templates</h1>
   <a href="<%= new_admin_response_template_path %>" class="crayons-btn ml-auto" role="button">Create new template</a>
 </header>
 
diff --git a/app/views/admin/response_templates/new.html.erb b/app/views/admin/response_templates/new.html.erb
index c9a58b428..fa4db9207 100644
--- a/app/views/admin/response_templates/new.html.erb
+++ b/app/views/admin/response_templates/new.html.erb
@@ -1,3 +1,3 @@
-<h2 class="crayons-title mb-6">Create template</h2>
+<h1 class="crayons-title mb-6">Create template</h1>
 
 <%= render "form", response_template: @response_template %>
diff --git a/app/views/admin/shared/_image_uploader.html.erb b/app/views/admin/shared/_image_uploader.html.erb
index 756da581f..146088cb2 100644
--- a/app/views/admin/shared/_image_uploader.html.erb
+++ b/app/views/admin/shared/_image_uploader.html.erb
@@ -1,5 +1,5 @@
 <div class="crayons-card p-6" data-controller="image-upload" data-image-upload-url-value="<%= image_uploads_path %>">
-  <h2 class="crayons-title mb-4">Upload an Image</h2>
+  <h2 class="crayons-subtitle-1 mb-4">Upload an Image</h2>
   <p class="mb-6">Quickly upload an image.</p>
 <%# Multipart, remote forms are tricky, the data is actually sent in the Stimulus controller. %>
   <%= form_with(url: image_uploads_path, multipart: true) do |f| %>
diff --git a/app/views/admin/spaces/index.html.erb b/app/views/admin/spaces/index.html.erb
index 22dafd6a8..755a375e0 100644
--- a/app/views/admin/spaces/index.html.erb
+++ b/app/views/admin/spaces/index.html.erb
@@ -19,7 +19,7 @@
         <%= crayons_icon_tag(:folder) %>
       </span>
       <div>
-        <h2 class="fs-l fw-bold lh-base">Uncategorized Posts</h2>
+        <h2 class="crayons-subtitle-1">Uncategorized Posts</h2>
         <p class="color-secondary lh-tight">All of your uncategorized posts will be in this space.</p>
       </div>
     </div>
diff --git a/app/views/admin/tags/edit.html.erb b/app/views/admin/tags/edit.html.erb
index b35d5cd38..286a604a2 100644
--- a/app/views/admin/tags/edit.html.erb
+++ b/app/views/admin/tags/edit.html.erb
@@ -11,10 +11,8 @@
 
 <div class="grid gap-6">
   <div class="crayons-card p-6">
-    <div class="crayons-card__header">
-      <h4 class="crayons-card__headline">Moderators</h4>
-    </div>
-    <div class="crayons-card__body flex flex-col gap-2">
+    <h2 class="crayons-subtitle-1">Moderators</h2>
+    <div class="flex flex-col gap-2">
       <% if @tag_moderators.exists? %>
         <ul class="list-none">
           <% @tag_moderators.each do |user| %>
@@ -28,7 +26,7 @@
           <% end %>
         </ul>
       <% else %>
-        <div class="crayons-notice mb-5" aria-live="polite">
+        <div class="crayons-notice p-0 mt-1 mb-5" aria-live="polite">
           This tag currently has no moderators.
         </div>
       <% end %>
@@ -43,7 +41,7 @@
   </div>
 
   <div class="crayons-card crayons-card--content-rows">
-    <h4>Edit details</h4>
+    <h2 class="crayons-subtitle-1">Edit details</h2>
     <%= render "form", tag: @tag, badges_for_options: @badges_for_options %>
   </div>
 </div>
diff --git a/app/views/admin/tools/feed_playground.html.erb b/app/views/admin/tools/feed_playground.html.erb
index 3ec7af774..726f3cdbb 100644
--- a/app/views/admin/tools/feed_playground.html.erb
+++ b/app/views/admin/tools/feed_playground.html.erb
@@ -1,5 +1,5 @@
 <header class="flex mb-6">
-  <h2 class="crayons-title">Feed Playground</h2>
+  <h1 class="crayons-title">Feed Playground</h1>
 </header>
 <div class="crayons-card p-6 mb-6">
   <%= form_tag feed_playground_admin_tools_path do %>
@@ -23,7 +23,7 @@
 
 <% if @user && @articles %>
   <header class="flex mb-6">
-    <h2 class="crayons-title">Feed Preview for <a href="/<%= @user.username %>">@<%= @user.username %></a></h2>
+    <h2 class="crayons-subtitle-1">Feed Preview for <a href="/<%= @user.username %>">@<%= @user.username %></a></h2>
   </header>
   <div>
     <% Follow.follower_tag(@user.id).includes(:followable).order("points DESC").each do |follow| %>
diff --git a/app/views/admin/tools/index.html.erb b/app/views/admin/tools/index.html.erb
index 7b0fb8563..11ce4f5ca 100644
--- a/app/views/admin/tools/index.html.erb
+++ b/app/views/admin/tools/index.html.erb
@@ -1,5 +1,5 @@
 <div class="crayons-card p-6 mb-6">
-  <h2 class="crayons-title mb-4">General Purpose URL Purge</h2>
+  <h2 class="crayons-subtitle-1 mb-4">General Purpose URL Purge</h2>
   <p class="mb-2">For a page that should 404. This will purge the page via Fastly.</p>
   <p class="mb-6">Use the full path (<%= app_url("xyz") %>) or the relative path: (/xyz)</p>
   <%= form_tag bust_cache_admin_tools_path do %>
@@ -12,7 +12,7 @@
 </div>
 
 <div class="crayons-card p-6 mb-6">
-  <h2 class="crayons-title mb-4">Bust Cache For Specific Content</h2>
+  <h2 class="crayons-subtitle-1 mb-4">Bust Cache For Specific Content</h2>
   <p class="mb-6">This clears both the Rails cache & the Fastly cache.</p>
   <%= form_tag bust_cache_admin_tools_path do %>
     <div class="crayons-field">
diff --git a/app/views/admin/users/index/_filters_modal.html.erb b/app/views/admin/users/index/_filters_modal.html.erb
index d28cfe8f3..4ba6234f7 100644
--- a/app/views/admin/users/index/_filters_modal.html.erb
+++ b/app/views/admin/users/index/_filters_modal.html.erb
@@ -1,7 +1,7 @@
 <div class="js-filters-modal hidden">
     <%= form_with url: admin_users_path, method: :get, local: true, class: "flex flex-col h-100" do |f| %>
         <div class="flex justify-between items-center border-0 border-b-1 border-base-10 border-solid -mx-7 px-7 pb-2">
-            <h2 class="crayons-subtitle-2"><%= t("views.admin.users.filters.heading") %></h2>
+            <h2 class="crayons-subtitle-1"><%= t("views.admin.users.filters.heading") %></h2>
             <button type="button" class="js-clear-all-filters-btn c-btn"><%= t("views.admin.users.filters.clear_filters") %></button>
         </div>
         <p id="filters-description" class="mt-4 crayons-field__description"><%= t("views.admin.users.filters.desc") %></p>
diff --git a/app/views/admin/users/new/show.html.erb b/app/views/admin/users/new/show.html.erb
index ef8ece193..ddfeabe5f 100644
--- a/app/views/admin/users/new/show.html.erb
+++ b/app/views/admin/users/new/show.html.erb
@@ -14,7 +14,7 @@ Users — <%= @user.name %>
 <% end %>
 
 <header>
-  <h2 class="crayons-title">Manage member <%= @user.name %></h2>
+  <h2 class="crayons-subtitle-1">Manage member <%= @user.name %></h2>
   <p><a href="<%= admin_users_path %>">← Go back to All members</a></p>
 </header>
 
diff --git a/app/views/admin/users/show/emails/_index.html.erb b/app/views/admin/users/show/emails/_index.html.erb
index f69c19ec0..ee7bee819 100644
--- a/app/views/admin/users/show/emails/_index.html.erb
+++ b/app/views/admin/users/show/emails/_index.html.erb
@@ -2,7 +2,7 @@
   <h2 class="crayons-subtitle-1"><%= t("views.admin.users.emails.previous", num: @user.email_messages.count) %></h2>
   <% if @user.email_messages.empty? %>
     <div class="align-center flex flex-col justify-center my-auto py-7">
-      <h3 class="fs-xl fw-normal mb-2"><%= t("views.admin.users.emails.empty1", user: @user.name) %></h3>
+      <h3 class="crayons-subtitle-2 mb-2"><%= t("views.admin.users.emails.empty1", user: @user.name) %></h3>
       <p class="color-secondary"><%= t("views.admin.users.emails.empty2", email: @user.email) %></p>
     </div>
   <% else %>
diff --git a/app/views/admin/users/show/emails/_verification.html.erb b/app/views/admin/users/show/emails/_verification.html.erb
index 91be4d15c..10019c0be 100644
--- a/app/views/admin/users/show/emails/_verification.html.erb
+++ b/app/views/admin/users/show/emails/_verification.html.erb
@@ -1,7 +1,7 @@
 <%= form_with url: verify_email_ownership_admin_user_path(@user), local: true, class: "crayons-card mb-4 p-3 m:p-4 s:pl-4 m:pl-7 pr-4 flex flex-col s:flex-row justify-between gap-4 s:items-center" do |f| %>
   <% unless @last_email_verification_date %>
     <div>
-      <h2 class="crayons-subtitle-2"><%= t("views.admin.users.emails.not_verified.subtitle") %></h2>
+      <h2 class="crayons-subtitle-1"><%= t("views.admin.users.emails.not_verified.subtitle") %></h2>
       <p class="color-secondary"><%= t("views.admin.users.emails.not_verified.desc", user: @user.name) %></p>
     </div>
     <%= f.button t("views.admin.users.emails.verify"), class: "c-btn c-btn--secondary whitespace-nowrap" %>
diff --git a/app/views/admin/users/show/flags/_index.html.erb b/app/views/admin/users/show/flags/_index.html.erb
index 903658f92..87ebd27e2 100644
--- a/app/views/admin/users/show/flags/_index.html.erb
+++ b/app/views/admin/users/show/flags/_index.html.erb
@@ -14,7 +14,7 @@
           <% end %>
         </span>
         <div class="flex-1">
-          <h3 class="crayons-subtitle-3 mb-1">
+          <h3 class="crayons-subtitle-2 mb-1">
             <%= link_to flag.reactable.path, class: "c-link" do %>
               <% if flag.reactable_type == "Article" %>
                 <%= t("views.admin.users.flags.type.article", title: flag.reactable.title) %>
@@ -37,7 +37,7 @@
   </div>
 <% else %>
   <div class="align-center flex flex-col justify-center my-auto py-8">
-    <h3 class="fs-xl fw-normal mb-2"><%= t("views.admin.users.flags.empty1", user: @user.name) %></h3>
+    <h3 class="crayons-subtitle-2 mb-2"><%= t("views.admin.users.flags.empty1", user: @user.name) %></h3>
     <p class="color-secondary"><%= t("views.admin.users.flags.empty2", user: @user.name) %></p>
   </div>
 <% end %>
diff --git a/app/views/admin/users/show/notes/_index.html.erb b/app/views/admin/users/show/notes/_index.html.erb
index 03467c01b..c9085b410 100644
--- a/app/views/admin/users/show/notes/_index.html.erb
+++ b/app/views/admin/users/show/notes/_index.html.erb
@@ -2,7 +2,7 @@
   <h2 class="crayons-subtitle-1"><%= t("views.admin.users.notes.previous", num: @notes.count) %></h2>
   <% if @notes.load.empty? %>
     <div class="align-center flex flex-col justify-center my-auto py-7">
-      <h3 class="fs-xl fw-normal mb-2"><%= t("views.admin.users.notes.empty1", user: @user.name) %></h3>
+      <h3 class="crayons-subtitle-2 mb-2"><%= t("views.admin.users.notes.empty1", user: @user.name) %></h3>
       <p class="color-secondary"><%= t("views.admin.users.notes.empty2", user: @user.name) %></p>
     </div>
   <% else %>
diff --git a/app/views/admin/users/show/overview/_credits.html.erb b/app/views/admin/users/show/overview/_credits.html.erb
index b16256eaa..792350527 100644
--- a/app/views/admin/users/show/overview/_credits.html.erb
+++ b/app/views/admin/users/show/overview/_credits.html.erb
@@ -1,5 +1,5 @@
 <header class="mb-4">
-  <h2 class="crayons-subtitle-2 mb-1 flex items-center">
+  <h2 class="crayons-subtitle-1 mb-1 flex items-center">
     <%= crayons_icon_tag(:wallet, title: t("views.admin.users.overview.credits.icon"), aria_hidden: true, class: "mr-2") %>
     <%= t("views.admin.users.overview.credits.subtitle") %>
   </h2>
diff --git a/app/views/admin/users/show/overview/_organizations.html.erb b/app/views/admin/users/show/overview/_organizations.html.erb
index 2b509ba59..759d1f5ca 100644
--- a/app/views/admin/users/show/overview/_organizations.html.erb
+++ b/app/views/admin/users/show/overview/_organizations.html.erb
@@ -1,5 +1,5 @@
 <header class="mb-4">
-  <h2 class="crayons-subtitle-2 mb-1 flex items-center">
+  <h2 class="crayons-subtitle-1 mb-1 flex items-center">
     <%= crayons_icon_tag(:team, title: t("views.admin.users.overview.orgs.icon"), aria_hidden: true, class: "mr-2") %>
     <%= t("views.admin.users.overview.orgs.subtitle") %>
   </h2>
@@ -24,7 +24,7 @@
         <a href="<%= org_membership.organization.path %>" target="_blank" rel="noopener" class="c-link crayons-logo crayons-logo--l">
           <img src="<%= org_membership.organization.profile_image_url_for(length: 64) %>" width="32" height="32" alt="<%= org_membership.organization.name %>" class="crayons-logo__image">
         </a>
-        <h3 class="crayons-subtitle-3">
+        <h3 class="crayons-subtitle-2">
           <a href="<%= org_membership.organization.path %>" target="_blank" rel="noopener" class="c-link">
             <%= org_membership.organization.name %>
           </a>
diff --git a/app/views/admin/users/show/overview/_roles.html.erb b/app/views/admin/users/show/overview/_roles.html.erb
index 5eb9f8234..a43a82a4f 100644
--- a/app/views/admin/users/show/overview/_roles.html.erb
+++ b/app/views/admin/users/show/overview/_roles.html.erb
@@ -1,5 +1,5 @@
 <header class="mb-4">
-  <h2 class="crayons-subtitle-2 mb-1 flex items-center">
+  <h2 class="crayons-subtitle-1 mb-1 flex items-center">
     <%= crayons_icon_tag(:badge, title: t("views.admin.users.overview.roles.icon"), aria_hidden: true, class: "mr-2") %>
     <%= t("views.admin.users.overview.roles.subtitle") %>
   </h2>
diff --git a/app/views/admin/users/show/overview/_tag_moderation.html.erb b/app/views/admin/users/show/overview/_tag_moderation.html.erb
index 4b97cdf41..0518d322b 100644
--- a/app/views/admin/users/show/overview/_tag_moderation.html.erb
+++ b/app/views/admin/users/show/overview/_tag_moderation.html.erb
@@ -1,5 +1,5 @@
 <header class="mb-4">
-  <h2 class="crayons-subtitle-2 mb-1 flex items-center">
+  <h2 class="crayons-subtitle-1 mb-1 flex items-center">
     <%= crayons_icon_tag("mod-filled", title: t("views.admin.users.overview.tag_mod.icon"), aria_hidden: true, class: "mr-2") %>
     <%= t("views.admin.users.overview.tag_mod.subtitle") %>
   </h2>
diff --git a/app/views/admin/users/show/reports/_index.html.erb b/app/views/admin/users/show/reports/_index.html.erb
index 071e8aee3..5d77da541 100644
--- a/app/views/admin/users/show/reports/_index.html.erb
+++ b/app/views/admin/users/show/reports/_index.html.erb
@@ -6,7 +6,7 @@
       <article class="c-list-item c-list-item--interactive flex justify-between gap-4">
         <div class="w-100">
           <header>
-            <h3 class="crayons-subtitle-3 w-100 flex items-center justify-between">
+            <h3 class="crayons-subtitle-2 w-100 flex items-center justify-between">
               <span class="flex gap-3">
                 <a href="<%= admin_report_path(report.id) %>" class="c-link">
                   <%= t("views.admin.users.reports.category.#{report.category}", default: report.category.capitalize) %>
@@ -28,7 +28,7 @@
   </div>
 <% else %>
   <div class="align-center flex flex-col justify-center my-auto py-8">
-    <h3 class="fs-xl fw-normal mb-2"><%= t("views.admin.users.reports.empty1") %></h3>
+    <h3 class="crayons-subtitle-2 mb-2"><%= t("views.admin.users.reports.empty1") %></h3>
     <p class="color-secondary"><%= t("views.admin.users.reports.empty2", user: @user.name) %></p>
   </div>
 <% end %>
diff --git a/app/views/admin/users/show/unpublish_logs/_index.html.erb b/app/views/admin/users/show/unpublish_logs/_index.html.erb
index 490b7e672..560466e8f 100644
--- a/app/views/admin/users/show/unpublish_logs/_index.html.erb
+++ b/app/views/admin/users/show/unpublish_logs/_index.html.erb
@@ -1,5 +1,5 @@
 <% if @unpublish_all_data.exists? %>
-  <h2 class="fs-xl fw-normal mb-5"><%= t("views.admin.users.unpublish_logs.subtitle_html", user: link_to(@unpublish_all_data.audit_log.user.username, @unpublish_all_data.audit_log.user.path), time: l(@unpublish_all_data.audit_log.created_at, format: :admin_user)) %></h3>
+  <h3 class="crayons-subtitle-2 mb-5"><%= t("views.admin.users.unpublish_logs.subtitle_html", user: link_to(@unpublish_all_data.audit_log.user.username, @unpublish_all_data.audit_log.user.path), time: l(@unpublish_all_data.audit_log.created_at, format: :admin_user)) %></h3>
   <div class="crayons-card p-6 mb-5">
     <h4 class="mb-2"><%= t("views.admin.users.unpublish_logs.posts") %></h4>
     <% @unpublish_all_data.target_articles.each do |article| %>
diff --git a/app/views/admin/welcome/index.html.erb b/app/views/admin/welcome/index.html.erb
index ad8b85300..dc42bdeb6 100644
--- a/app/views/admin/welcome/index.html.erb
+++ b/app/views/admin/welcome/index.html.erb
@@ -2,7 +2,7 @@
 <%= csrf_meta_tags %>
 
 <header class="flex items-center mb-6">
-  <h2 class="crayons-title">Welcome Threads</h2>
+  <h1 class="crayons-title">Welcome Threads</h1>
   <%= link_to "Create A New Welcome Thread", admin_welcome_index_path, method: :post, class: "crayons-btn ml-auto" %>
 </header>
 
diff --git a/cypress/e2e/seededFlows/adminFlows/broadcasts/broadcasts.spec.js b/cypress/e2e/seededFlows/adminFlows/broadcasts/broadcasts.spec.js
index 0ccb69c82..efc01e433 100644
--- a/cypress/e2e/seededFlows/adminFlows/broadcasts/broadcasts.spec.js
+++ b/cypress/e2e/seededFlows/adminFlows/broadcasts/broadcasts.spec.js
@@ -31,7 +31,7 @@ describe('Broadcasts', () => {
         cy.get('button[aria-label="Close"]').click();
       });
 
-      cy.findByRole('heading', { level: 2, name: 'Mock Broadcast' }).should(
+      cy.findByRole('heading', { level: 1, name: 'Mock Broadcast' }).should(
         'be.visible',
       );
     });