Titles & subtitles cleanup (#10508)

* . * . * .
2020-10-02 12:37:39 +02:00 · 2020-10-02 12:37:39 +02:00 · bf8e2e53f1
commit bf8e2e53f1
parent 87590e77d3
62 changed files with 115 additions and 139 deletions
--- a/app/assets/stylesheets/components/cards.scss
+++ b/app/assets/stylesheets/components/cards.scss
@ -1,7 +1,5 @@
@import '../config/import';

-$card-divider: 1px solid var(--body-bg);
-
 .crayons-card {
  border-radius: var(--radius);
  background: var(--card-bg);
@ -16,55 +14,13 @@ $card-divider: 1px solid var(--body-bg);

  &__header {
    padding: var(--su-3) var(--su-4);
-    border-bottom: $card-divider;
+    border-bottom: 1px solid var(--body-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
-
-    &__headline {
-      font-size: var(--fs-l);
-      font-weight: var(--fw-bold);
-      color: var(--base-100);
-
-      a {
-        color: inherit;
-        &:hover {
-          color: var(--link-color-hover);
-        }
-      }
-    }
-  }
-
-  &__subheader {
-    padding: var(--su-2) 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    &__title {
-      color: var(--base-80);
-      font-weight: var(--fw-bold);
-    }
-  }
-
-  &__title {
-    color: var(--card-headline);
-    font-weight: var(--fw-bold);
  }

  &__body {
    padding: var(--su-4);
  }
-
-  &__inner-section {
-    margin-bottom: var(--su-4);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    .crayons-card__section-header {
-      padding-top: 0;
-    }
-  }
 }
--- a/app/assets/stylesheets/components/headers.scss
+++ b/app/assets/stylesheets/components/headers.scss
@ -1,7 +1,39 @@
-.crayons-subheader {
-  color: var(--base-90);
-  font-size: var(--fs-base);
+@import '../config/import';
+
+.crayons-title,
+.crayons-subtitle-1,
+.crayons-subtitle-2,
+.crayons-subtitle-3 {
  font-weight: var(--fw-bold);
-  padding-left: var(--su-2);
-  margin-bottom: var(--su-2);
+  color: var(--base-90);
+}
+
+.crayons-title {
+  color: var(--base-100);
+  font-size: var(--fs-2xl);
+
+  @media (min-width: $breakpoint-s) {
+    font-size: var(--fs-3xl);
+  }
+}
+
+.crayons-subtitle-1 {
+  font-size: var(--fs-xl);
+  @media (min-width: $breakpoint-s) {
+    font-size: var(--fs-2xl);
+  }
+}
+
+.crayons-subtitle-2 {
+  font-size: var(--fs-l);
+  @media (min-width: $breakpoint-s) {
+    font-size: var(--fs-xl);
+  }
+}
+
+.crayons-subtitle-3 {
+  font-size: var(--fs-base);
+  @media (min-width: $breakpoint-s) {
+    font-size: var(--fs-l);
+  }
 }
--- a/app/assets/stylesheets/moderators.scss
+++ b/app/assets/stylesheets/moderators.scss
@ -14,10 +14,6 @@
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 2px solid var(--base-10);
  padding: var(--su-6) var(--su-4);
-
-  .tag-view {
-    color: var(--base-90);
-  }
 }

 .mod-index-list-header {
--- a/app/javascript/readingList/readingList.jsx
+++ b/app/javascript/readingList/readingList.jsx
@ -182,7 +182,7 @@ export class ReadingList extends Component {
    return (
      <div>
        <header className="crayons-layout flex justify-between items-center pb-0">
-          <h1 class="fs-2xl s:fs-3xl">
+          <h1 class="crayons-title">
            {isStatusViewValid ? 'Reading list' : 'Archive'}
            {` (${totalCount > 0 ? totalCount : '0'})`}
          </h1>
--- a/app/views/admin/badge_achievements/award.html.erb
+++ b/app/views/admin/badge_achievements/award.html.erb
@ -1,4 +1,4 @@
-<h2 class="fs-2xl s:fs-3xl mb-6">Award Badges</h2>
+<h2 class="crayons-title mb-6">Award Badges</h2>
 <div class="crayons-card p-6">
  <div class="crayons-notice crayons-notice--warning mb-6">Warning: Usernames are case-sensitive and must be all lowercase! This task will fail silently when supplied with incorrect usernames.</div>

--- a/app/views/admin/badges/edit.html.erb
+++ b/app/views/admin/badges/edit.html.erb
@ -1,5 +1,5 @@
 <header class="flex mb-6">
-  <h2 class="fs-2xl s:fs-3xl"><%= "Edit Badge #{@badge.id}" %></h2>
+  <h2 class="crayons-title"><%= "Edit Badge #{@badge.id}" %></h2>

  <div class="ml-auto">
    <%= link_to "Back to All Badges", admin_badges_path, class: "btn btn-primary " %>
--- a/app/views/admin/badges/index.html.erb
+++ b/app/views/admin/badges/index.html.erb
@ -1,5 +1,5 @@
 <header class="flex mb-6">
-  <h2 class="fs-2xl s:fs-3xl">Badges</h2>
+  <h2 class="crayons-title">Badges</h2>

  <div class="ml-auto">
    <%= link_to "Create Badge", new_admin_badge_path, class: "btn btn-primary" %>
--- a/app/views/admin/badges/new.html.erb
+++ b/app/views/admin/badges/new.html.erb
@ -1,4 +1,4 @@
-<h2 class="fs-2xl s:fs-3xl mb-6">Create badge</h2>
+<h2 class="crayons-title mb-6">Create badge</h2>

 <div class="crayons-card p-6">
  <%= form_for [:admin, @badge], method: :post do |form| %>
--- a/app/views/admin/broadcasts/edit.html.erb
+++ b/app/views/admin/broadcasts/edit.html.erb
@ -1,4 +1,4 @@
-<h2 class="fs-2xl s:fs-3xl mb-6">Edit broadcast:</h2>
+<h2 class="crayons-title mb-6">Edit broadcast:</h2>
 <div class="crayons-card p-6">
  <%= form_for([:admin, @broadcast], method: :patch) do %>
    <%= render "form" %>
--- a/app/views/admin/broadcasts/new.html.erb
+++ b/app/views/admin/broadcasts/new.html.erb
@ -1,4 +1,4 @@
-<h2 class="fs-2xl s:fs-3xl mb-6">Make a new broadcast:</h2>
+<h2 class="crayons-title mb-6">Make a new broadcast:</h2>
 <div class="crayons-card p-6">
  <%= form_for([:admin, @broadcast], method: :post) do %>
    <%= render "form" %>
--- a/app/views/admin/broadcasts/show.html.erb
+++ b/app/views/admin/broadcasts/show.html.erb
@ -1,5 +1,5 @@
 <header class="flex">
-  <h2 class="fs-2xl s:fs-3xl mb-6"><%= @broadcast.title %></h2>
+  <h2 class="crayons-title mb-6"><%= @broadcast.title %></h2>
  <div class="ml-auto">
    <%= link_to "Destroy", url_for(action: :destroy, id: @broadcast.id), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-danger" %>
    <%= link_to "Edit", edit_admin_broadcast_path, class: "btn btn-primary" %>
--- a/app/views/admin/chat_channels/index.html.erb
+++ b/app/views/admin/chat_channels/index.html.erb
@ -1,5 +1,5 @@
 <div class="crayons-card p-6 mb-6">
-  <h2 class="fs-2xl s:fs-3xl mb-6">Create Channel</h2>
+  <h2 class="crayons-title mb-6">Create Channel</h2>
  <%= form_for [:admin, ChatChannel.new], html: { class: "inline-form" } do |f| %>
    <div class="form-row">
      <div class="form-group">
@ -15,7 +15,7 @@

 <div class="crayons-card p-6">
  <header class="flex mb-6">
-    <h2 class="fs-2xl s:fs-3xl mb-6">Channels</h2>
+    <h2 class="crayons-title mb-6">Channels</h2>
    <%= search_form_for @q, url: admin_chat_channels_path, class: "form-inline ml-auto" do |f| %>
      <%= f.label :channel_name_cont, "Channel Name", class: "sr-only" %>
      <%= f.search_field :channel_name_cont, placeholder: "Channel Name", class: "form-control mx-3" %>
--- a/app/views/admin/display_ads/edit.html.erb
+++ b/app/views/admin/display_ads/edit.html.erb
@ -1,4 +1,4 @@
-<h2 class="fs-2xl s:fs-3xl mb-6">Edit Display Ad:</h2>
+<h2 class="crayons-title mb-6">Edit Display Ad:</h2>
 <div class="crayons-card p-6">
  <%= form_for([:admin, @display_ad], method: :patch) do %>
    <%= render "form" %>
--- a/app/views/admin/display_ads/new.html.erb
+++ b/app/views/admin/display_ads/new.html.erb
@ -1,4 +1,4 @@
-<h2 class="fs-2xl s:fs-3xl mb-6">Make a new Display Ad:</h2>
+<h2 class="crayons-title mb-6">Make a new Display Ad:</h2>
 <div class="crayons-card p-6">
  <%= form_for([:admin, @display_ad], method: :post) do %>
    <%= render "form" %>
--- a/app/views/admin/events/index.html.erb
+++ b/app/views/admin/events/index.html.erb
@ -1,5 +1,5 @@
 <div class="crayons-card p-6 mb-6">
-  <h2 class="fs-2xl s:fs-3xl mb-6">Create New Event</h2>
+  <h2 class="crayons-title mb-6">Create New Event</h2>

  <%= form_for @event, url: { controller: "events", action: "create" } do |f| %>
    <%= render "event_form", f: f, event: @event %>
@ -7,7 +7,7 @@
 </div>

 <div class="crayons-card p-6 mb-6">
-  <h2 class="fs-2xl s:fs-3xl mb-6">Upcoming Events</h2>
+  <h2 class="crayons-title mb-6">Upcoming Events</h2>
  <% @events.each do |event| %>
    <% if event.starts_at.future? %>
      <img src="<%= event.cover_image_url %>" alt="event cover image">
@ -19,7 +19,7 @@
 </div>

 <div class="crayons-card p-6 mb-6">
-  <h2 class="fs-2xl s:fs-3xl mb-6">Past Events</h2>
+  <h2 class="crayons-title mb-6">Past Events</h2>
  <% @events.each do |event| %>
    <% if !event.starts_at.future? %>
      <img src="<%= event.cover_image_url %>" alt="event cover image">
--- 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="fs-2xl s:fs-3xl mb-4">Abuse reports</h2>
+  <h2 class="crayons-title mb-4">Abuse reports</h2>
  <ul class="nav nav-pills mb-4">
    <li class="nav-item">
      <a href="<%= admin_reports_path(state: @feedback_type, status: "Open") %>" class="nav-link <%= "active" if @status == "Open" %>">Open/Unresolved</a>
--- a/app/views/admin/feedback_messages/index.html.erb
+++ b/app/views/admin/feedback_messages/index.html.erb
@ -1,6 +1,6 @@
 <%= render "style" %>

-<h2 class="fs-2xl s:fs-3xl mb-6">Suspicious activity</h2>
+<h2 class="crayons-title mb-6">Suspicious activity</h2>

 <div class="grid gap-6">
  <%= render "latest_articles" %>
--- a/app/views/admin/growth/index.html.erb
+++ b/app/views/admin/growth/index.html.erb
@ -1,4 +1,4 @@
-<h2 class="fs-2xl s:fs-3xl mb-6">Onboarding</h2>
+<h2 class="crayons-title mb-6">Onboarding</h2>

 <%= render "results", num_days: 7 %>

--- a/app/views/admin/html_variants/edit.html.erb
+++ b/app/views/admin/html_variants/edit.html.erb
@ -1,4 +1,4 @@
-<h2 class="fs-2xl s:fs-3xl mb-6">Edit HTML Variant:</h2>
+<h2 class="crayons-title mb-6">Edit HTML Variant:</h2>
 <div class="crayons-card p-6">
  <%= form_for([:admin, @html_variant], method: :patch) do %>
    <%= render "form" %>
--- a/app/views/admin/html_variants/new.html.erb
+++ b/app/views/admin/html_variants/new.html.erb
@ -1,4 +1,4 @@
-<h2 class="fs-2xl s:fs-3xl mb-6">Make a new HTML Variant:</h2>
+<h2 class="crayons-title mb-6">Make a new HTML Variant:</h2>
 <div class="crayons-card p-6">
  <%= form_for([:admin, @html_variant], method: :post) do %>
    <%= render "form" %>
--- 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="fs-2xl s:fs-3xl mb-4">Edit</h2>
+  <h2 class="crayons-title mb-4">Edit</h2>

  <div class="ml-auto flex">
    <%= link_to "Remove", url_for(action: :destroy, id: @listing.id), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-danger mr-2" %>
--- a/app/views/admin/listings/index.html.erb
+++ b/app/views/admin/listings/index.html.erb
@ -1,5 +1,5 @@
 <header class="mb-6">
-  <h2 class="fs-2xl s:fs-3xl mb-4">Listings</h2>
+  <h2 class="crayons-title mb-4">Listings</h2>
 </header>

 <%= form_tag(admin_listings_path, method: "get", role: "search", class: "crayons-card crayons-card--secondary p-4 flex items-center") do %>
--- 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="fs-2xl s:fs-3xl"><%= @organization.name %></h2>
+    <h2 class="crayons-title"><%= @organization.name %></h2>
    <p class="color-base-60">Created <%= @organization.created_at.strftime("%b %e '%y") %></p>
  </div>

--- a/app/views/admin/pages/edit.html.erb
+++ b/app/views/admin/pages/edit.html.erb
@ -1,2 +1,2 @@
-<h2 class="fs-2xl s:fs-3xl mb-6">Edit <%= @page.title %></h2>
+<h2 class="crayons-title mb-6">Edit <%= @page.title %></h2>
 <%= render "form" %>
--- 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="fs-2xl s:fs-3xl">Pages</h2>
+  <h2 class="crayons-title">Pages</h2>
  <%= link_to "New page", new_admin_page_path, class: "btn btn-primary ml-auto" %>
 </header>

--- a/app/views/admin/pages/new.html.erb
+++ b/app/views/admin/pages/new.html.erb
@ -1,2 +1,2 @@
-<h2 class="fs-2xl s:fs-3xl mb-6">New page</h2>
+<h2 class="crayons-title mb-6">New page</h2>
 <%= render "form" %>
--- a/app/views/admin/permissions/index.html.erb
+++ b/app/views/admin/permissions/index.html.erb
@ -1,4 +1,4 @@
-<h2 class="fs-2xl s:fs-3xl mb-6">Admin roles</h2>
+<h2 class="crayons-title mb-6">Admin roles</h2>

 <%= paginate @users %>

--- a/app/views/admin/podcasts/edit.html.erb
+++ b/app/views/admin/podcasts/edit.html.erb
@ -1,5 +1,5 @@
 <header class="flex items-center mb-6">
-  <h2 class="fs-2xl s:fs-3xl mb-6"><%= @podcast.title %></h2>
+  <h2 class="crayons-title mb-6"><%= @podcast.title %></h2>
  <div class="ml-auto">
    <%= link_to "View", "/#{@podcast.slug}", class: "btn btn-primary" %>
  </div>
--- 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="fs-2xl s:fs-3xl">Edit: <%= @response_template.title %></h2>
+  <h2 class="crayons-title">Edit: <%= @response_template.title %></h2>
  <%= 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: "btn btn-danger" %>
  <% end %>
--- 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="fs-2xl s:fs-3xl">Response templates</h2>
+  <h2 class="crayons-title">Response templates</h2>
  <a href="<%= new_admin_response_template_path %>" class="btn btn-primary ml-auto" role="button">Create new template</a>
 </header>

--- a/app/views/admin/response_templates/new.html.erb
+++ b/app/views/admin/response_templates/new.html.erb
@ -1,4 +1,4 @@

-<h2 class="fs-2xl s:fs-3xl mb-6">Create template</h2>
+<h2 class="crayons-title mb-6">Create template</h2>

 <%= render "form", response_template: @response_template %>
--- a/app/views/admin/sponsorships/edit.html.erb
+++ b/app/views/admin/sponsorships/edit.html.erb
@ -1,4 +1,4 @@
-<h2 class="fs-2xl s:fs-3xl mb-6"><%= "Edit Sponsorship ##{@sponsorship.id}" %></h2>
+<h2 class="crayons-title mb-6"><%= "Edit Sponsorship ##{@sponsorship.id}" %></h2>

 <div class="crayons-card p-6">
  <%= form_for [:admin, @sponsorship] do |f| %>
--- a/app/views/admin/sponsorships/new.html.erb
+++ b/app/views/admin/sponsorships/new.html.erb
@ -1,4 +1,4 @@
-<h2 class="fs-2xl s:fs-3xl mb-6">Make a new Sponsorship:</h2>
+<h2 class="crayons-title mb-6">Make a new Sponsorship:</h2>
 <div class="crayons-card p-6">
  <%= form_for([:admin, @sponsorship], method: :post) do |f| %>
    <div class="form-group">
--- a/app/views/admin/tags/show.html.erb
+++ b/app/views/admin/tags/show.html.erb
@ -1,6 +1,6 @@
 <header class="flex mb-6 items-center">
  <div>
-    <h2 class="fs-2xl s:fs-3xl"><span class="crayons-tag crayons-tag--2xl" style="background:<%= @tag.bg_color_hex %>;color:<%= @tag.text_color_hex %>;">#<%= @tag.name %></span></h2>
+    <h2 class="crayons-title"><span class="crayons-tag crayons-tag--2xl" style="background:<%= @tag.bg_color_hex %>;color:<%= @tag.text_color_hex %>;">#<%= @tag.name %></span></h2>
    <p>Tagged <%= @tag.taggings_count %> times</p>
  </div>

--- 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="fs-2xl s:fs-3xl mb-4">General Purpose URL Purge</h2>
+  <h2 class="crayons-title 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">
-  <h2 class="fs-2xl s:fs-3xl mb-4">Bust Cache For Specific Content</h2>
+  <h2 class="crayons-title 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="form-group">
--- 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="fs-2xl s:fs-3xl">Welcome Threads</h2>
+  <h2 class="crayons-title">Welcome Threads</h2>
  <%= link_to "Create A New Welcome Thread", admin_welcome_index_path, method: :post, class: "btn btn-primary ml-auto" %>
 </header>

--- a/app/views/articles/_bottom_content.html.erb
+++ b/app/views/articles/_bottom_content.html.erb
@ -1,6 +1,6 @@
 <% if articles %>
 <div class="crayons-card crayons-card--secondary text-padding mb-4">
-  <h2 class="fs-2xl m:fs-3xl fw-bold">Read next</h2>
+  <h2 class="crayons-title">Read next</h2>

  <% articles.each do |article| %>
    <a href="<%= article.path %>" data-preload-image="<%= cloud_cover_url(article.main_image) %>" class="crayons-link mt-6 block">
--- a/app/views/articles/_collection.html.erb
+++ b/app/views/articles/_collection.html.erb
@ -4,7 +4,7 @@
 <% if collection && collection_size > 1 %>
  <nav class="series-switcher crayons-card crayons-card--secondary">
    <header class="crayons-card__header">
-      <h3 class="crayons-card__header__headline">
+      <h3 class="crayons-subtitle-2">
        <%= collection_link(collection) %>
      </h3>
    </header>
--- a/app/views/articles/_full_comment_area.html.erb
+++ b/app/views/articles/_full_comment_area.html.erb
@ -2,7 +2,7 @@
  <section id="comments" data-updated-at="<%= Time.current %>" class="crayons-card text-padding mb-4">
    <% if @article.show_comments %>
      <header class="relative flex justify-between items-center">
-        <h3 class="fs-2xl m:fs-3xl fw-bold">Discussion</h3>
+        <h3 class="crayons-title">Discussion</h3>
        <div id="comment-subscription">
          <div role="presentation" class="crayons-btn-group">
            <span class="crayons-btn crayons-btn--outlined">Subscribe</span>
--- a/app/views/articles/_sidebar_additional.html.erb
+++ b/app/views/articles/_sidebar_additional.html.erb
@ -44,7 +44,7 @@
      <% if params[:timeframe].blank? && @listings.any? %>
        <section class="crayons-card crayons-card--secondary">
          <header class="crayons-card__header">
-            <h3 class="crayons-card__header__headline">Listings</h3>
+            <h3 class="crayons-subtitle-2">Listings</h3>
            <div class="crayons-card__actions">
              <a href="/listings" class="crayons-link--branded fw-medium fs-s">See all</a>
            </div>
@ -65,7 +65,7 @@
      <% SiteConfig.sidebar_tags.each do |tag| %>
        <section class="crayons-card crayons-card--secondary">
          <header class="crayons-card__header">
-            <h3 class="crayons-card__header__headline"><a href="/t/<%= tag %>">#<%= tag %></a></h3>
+            <h3 class="crayons-subtitle-2"><a href="/t/<%= tag %>" class="crayons-link">#<%= tag %></a></h3>
          </header>

          <div>
--- a/app/views/articles/_sidebar_campaign.html.erb
+++ b/app/views/articles/_sidebar_campaign.html.erb
@ -2,7 +2,7 @@
 <section class="crayons-card crayons-card--secondary">
  <%= campaign.sidebar_image(class: "block w-100 h-auto radius-default", width: 1000, height: 420) %>
  <header class="crayons-card__header">
-    <h3 class="crayons-card__header__headline"><%= link_to "Stories (#{@campaign_articles_count})", "/t/#{campaign.main_tag}" %></h3>
+    <h3 class="crayons-subtitle-2"><%= link_to "Stories (#{@campaign_articles_count})", "/t/#{campaign.main_tag}", class: "crayons-link" %></h3>
  </header>
  <div>
    <% @latest_campaign_articles.each do |plucked_article| %>
--- a/app/views/articles/_sticky_nav.html.erb
+++ b/app/views/articles/_sticky_nav.html.erb
@ -6,7 +6,7 @@
        <span class="<% if @actor.class.name == "User" %>crayons-avatar crayons-avatar--xl<% elsif @actor.class.name == "Organization" %>crayons-logo crayons-logo--xl<% end %>  mr-2 shrink-0">
          <img src="<%= Images::Profile.call(@actor.profile_image_url, length: 90) %>" class="<% if @actor.class.name == "User" %>crayons-avatar__image<% elsif @actor.class.name == "Organization" %>crayons-logo__image<% end %>" alt="<%= @actor.name %> profile image">
        </span>
-        <span class="crayons-link fs-l fw-bold mt-5"><%= @actor.name %></span>
+        <span class="crayons-link crayons-subtitle-2 mt-5"><%= @actor.name %></span>
      </a>
    </div>
    <% if @actor.tag_line.present? %>
@ -43,7 +43,7 @@
    <% if @user_stickies.present? %>
      <div class="crayons-card crayons-card--secondary">
        <header class="crayons-card__header">
-          <h3 class="crayons-card__header__headline">
+          <h3 class="crayons-subtitle-2">
            More from <a href="<%= @actor.path %>"><%= @actor.name %></a>
          </h3>
        </header>
@ -63,7 +63,7 @@
    <% elsif @sticky_articles.present? %>
      <div class="crayons-card crayons-card--secondary">
        <header class="crayons-card__header">
-          <h3 class="crayons-card__header__headline">
+          <h3 class="crayons-subtitle-2">
            Trending on <a href="<%= app_url %>"><%= community_name %></a>
            <%= inline_svg_tag("twemoji/fire.svg", aria: true, class: "crayons-icon crayons-icon--default", title: "Hot") %>
          </h3>
--- a/app/views/articles/index.html.erb
+++ b/app/views/articles/index.html.erb
@ -47,7 +47,7 @@
          </div>
        </button>
        <div class="flex-1 flex items-center justify-between">
-          <h2 class="fs-l fw-heavy">Posts</h2>
+          <h2 class="crayons-subtitle-2">Posts</h2>
          <nav class="crayons-tabs hidden s:flex">
            <a href="<%= list_path %>/" class="crayons-tabs__item <%= "crayons-tabs__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>">Feed</a>

--- a/app/views/articles/search.html.erb
+++ b/app/views/articles/search.html.erb
@ -3,7 +3,7 @@
 <% end %>
 <div id="query-wrapper"></div>
 <header class="crayons-layout crayons-layout--limited crayons-layout--1-col p-4 block s:flex items-center space-between">
-  <h1 class="fs-2xl s:fs-3xl">Search results</h1>
+  <h1 class="crayons-title">Search results</h1>

  <nav id="sorting-option-tabs" class="crayons-tabs ml-auto">
    <a href="javascript:;" class="crayons-tabs__item <%= "crayons-tabs__item--current" if @current_ordering == :relevance %>">Most Relevant</a>
--- a/app/views/articles/tag_index.html.erb
+++ b/app/views/articles/tag_index.html.erb
@ -45,7 +45,7 @@
        </button>
        <% if user_signed_in? %>
          <div class="flex-1 flex items-center justify-between">
-            <h2 class="fs-l fw-heavy">Posts</h2>
+            <h2 class="crayons-subtitle-2">Posts</h2>
            <nav class="crayons-tabs hidden s:flex">
              <a href="<%= list_path %>/" class="crayons-tabs__item <%= "crayons-tabs__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>">Feed</a>

--- a/app/views/dashboards/followers.html.erb
+++ b/app/views/dashboards/followers.html.erb
@ -4,7 +4,7 @@
    data-params="<%= params.to_json(only: %i[which per_page]) %>"
    data-which="followers">
  <header class="crayons-layout">
-    <h1 class="p-2 pb-0 m:p-0">Dashboard &raquo; Followers</h1>
+    <h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard &raquo; Followers</h1>
    <%= render "actions_mobile" %>
  </header>

--- a/app/views/dashboards/following_organizations.html.erb
+++ b/app/views/dashboards/following_organizations.html.erb
@ -4,7 +4,7 @@
    data-params="<%= params.to_json(only: %i[action per_page]) %>"
    data-which="following">
  <header class="crayons-layout">
-    <h1 class="p-2 pb-0 m:p-0">Dashboard &raquo; Following organizations</h1>
+    <h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard &raquo; Following organizations</h1>
    <%= render "actions_mobile" %>
  </header>

--- a/app/views/dashboards/following_podcasts.html.erb
+++ b/app/views/dashboards/following_podcasts.html.erb
@ -4,7 +4,7 @@
    data-params="<%= params.to_json(only: %i[action per_page]) %>"
    data-which="following">
  <header class="crayons-layout">
-    <h1 class="p-2 pb-0 m:p-0">Dashboard &raquo; Following podcasts</h1>
+    <h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard &raquo; Following podcasts</h1>
    <%= render "actions_mobile" %>
  </header>

--- a/app/views/dashboards/following_tags.html.erb
+++ b/app/views/dashboards/following_tags.html.erb
@ -4,7 +4,7 @@
    data-params="<%= params.to_json(only: %i[action per_page]) %>"
    data-which="following">
  <header class="crayons-layout">
-    <h1 class="p-2 pb-0 m:p-0">Dashboard &raquo; Following tags</h1>
+    <h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard &raquo; Following tags</h1>
    <%= render "actions_mobile" %>
  </header>

--- a/app/views/dashboards/following_users.html.erb
+++ b/app/views/dashboards/following_users.html.erb
@ -4,7 +4,7 @@
    data-params="<%= params.to_json(only: %i[action per_page]) %>"
    data-which="following">
  <header class="crayons-layout">
-    <h1 class="p-2 pb-0 m:p-0">Dashboard &raquo; Following users</h1>
+    <h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard &raquo; Following users</h1>
    <%= render "actions_mobile" %>
  </header>

--- a/app/views/dashboards/show.html.erb
+++ b/app/views/dashboards/show.html.erb
@ -2,7 +2,7 @@

 <main>
  <header class="crayons-layout">
-    <h1 class="p-2 pb-0 m:p-0">Dashboard</h1>
+    <h1 class="p-2 pb-0 m:p-0 crayons-title">Dashboard</h1>
    <%= render "actions_mobile" %>
    <%= render "analytics" %>
  </header>
@ -14,7 +14,7 @@

    <div class="crayons-layout__content flex flex-col">
      <div class="flex items-center justify-between mb-3">
-        <h2 class="hidden m:block fs-l fw-heavy">Posts</h2>
+        <h2 class="hidden m:block crayons-subtitle-2">Posts</h2>

        <div class="flex flex-wrap">
          <% if params[:which] != "organization" %>
--- a/app/views/dashboards/subscriptions.html.erb
+++ b/app/views/dashboards/subscriptions.html.erb
@ -3,7 +3,7 @@
 <div class="crayons-layout crayons-layout--1-col">
  <header class="flex items-center justify-between p-2 m:p-0">
    <div>
-      <h1 class="fs-2xl s:fs-3xl">Subscriptions</h1>
+      <h1 class="crayons-title">Subscriptions</h1>
      <h2 class="fs-base s:fs-xl fw-medium">
        <em class="fs-italic fw-normal color-base-60">for</em>
        <a href=<%= @source.path %>><%= @source.title %></a>
--- a/app/views/listings/edit.html.erb
+++ b/app/views/listings/edit.html.erb
@ -1,7 +1,7 @@
 <% title "Edit Listing" %>

 <header class="crayons-layout crayons-layout--limited flex items-center justify-between p-2 l:p-4 l:pb-0">
-  <h1 class="fs-2xl s:fs-3xl">Edit Listing</h1>
+  <h1 class="crayons-title">Edit Listing</h1>
 </header>

 <main class="crayons-layout crayons-layout--2-cols crayons-layout--2-cols--inverted crayons-layout--limited">
--- a/app/views/listings/index.html.erb
+++ b/app/views/listings/index.html.erb
@ -27,7 +27,7 @@
 <% end %>

 <header class="crayons-layout flex items-center justify-between p-2 l:p-4 l:pb-0">
-  <h1 class="fs-2xl s:fs-3xl">Listings</h1>
+  <h1 class="crayons-title">Listings</h1>

  <div class="flex items-center">
    <a href="<%= new_listing_path %>" class="crayons-btn crayons-btn--secondary">Create</a>
--- a/app/views/listings/new.html.erb
+++ b/app/views/listings/new.html.erb
@ -1,7 +1,7 @@
 <% title "New Listing" %>

 <header class="crayons-layout crayons-layout--limited flex items-center justify-between p-2 l:p-4 l:pb-0">
-  <h1 class="fs-2xl s:fs-3xl">Create a Community Listing</h1>
+  <h1 class="crayons-title">Create a Community Listing</h1>
 </header>

 <main class="crayons-layout crayons-layout--2-cols crayons-layout--2-cols--inverted crayons-layout--limited">
--- a/app/views/moderations/_mod_sidebar_left.html.erb
+++ b/app/views/moderations/_mod_sidebar_left.html.erb
@ -1,9 +1,9 @@
 <aside class="crayons-layout__sidebar-left">
-  <h1 class="fw-heavy fs-3xl mod-center-heading">
+  <h1 class="crayons-title mb-6 pl-2">
    Mod Center
  </h1>
  <nav class="mod-center--nav" aria-label="Mod center inbox navigation">
-    <h3 class="crayons-subheader">
+    <h3 class="crayons-subtitle-3 mb-4 pl-2">
      Inbox
    </h3>
    <div id="mod-center-inbox" class="mod-center-inbox">
@ -24,7 +24,7 @@
    </div>
  </nav>
  <nav class="mod-center--nav" aria-label="Mod center resources navigation">
-    <h3 class="crayons-subheader">
+    <h3 class="crayons-subtitle-3 mb-4 pl-2">
      Resources
    </h3>
    <div id="mod-center-other-options">
--- a/app/views/moderations/index.html.erb
+++ b/app/views/moderations/index.html.erb
@ -9,7 +9,7 @@
    <%= render "moderations/mod_sidebar_left" %>
    <main class="mod-index-container articles-list crayons-layout__content">
      <div class="mod-index-header">
-        <h2 class="tag-view fs-3xl fw-bold lh-base">
+        <h2 class="crayons-subtitle-1">
          <%= @tag ? "##{@tag.name}" : "All topics" %>
        </h2>
      </div>
--- a/app/views/notifications/_nav_menu.html.erb
+++ b/app/views/notifications/_nav_menu.html.erb
@ -1,10 +1,6 @@
-<nav class="notification-nav">
+<nav class="notification-nav pt-4">
  <% if @organizations.present? %>
-    <header>
-      <h3 class="crayons-subheader">
-        <%= @user.name %>
-      </h3>
-    </header>
+    <h3 class="crayons-subtitle-3 mb-4 pl-2"><%= @user.name %></h3>
  <% end %>
  <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:filter].blank? %>" href="/notifications">
    All
@ -16,14 +12,10 @@
    Posts
  </a>
 </nav>
-<nav class="notification-nav">
-  <% if @organizations.present? %>
+<% if @organizations.present? %>
+  <nav class="notification-nav pt-6">
    <% @organizations.each do |org| %>
-      <header>
-        <h3 class="crayons-subheader">
-          <%= org.name %>
-        </h3>
-      </header>
+      <h3 class="crayons-subtitle-3 mb-4 pl-2"><%= org.name %></h3>
      <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">
        All
      </a>
@ -31,5 +23,5 @@
        Comments
      </a>
    <% end %>
-  <% end %>
-</nav>
+  </nav>
+<% end %>
--- a/app/views/pages/sponsors.html.erb
+++ b/app/views/pages/sponsors.html.erb
@ -9,7 +9,7 @@
 <div class="crayons-layout crayons-layout--limited">
  <div class="crayons-card text-styles text-padding">
    <h1 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-0 mt-0">Thank you! ♥️</h1>
-    <h2 h2 class="fs-2xl s:fs-3xl l:fs-4xl fw-medium s:fw-bold lh-tight mb-4 mt-0">for supporting our community</h2>
+    <h2 class="fs-2xl s:fs-3xl l:fs-4xl fw-medium s:fw-bold lh-tight mb-4 mt-0">for supporting our community</h2>

    <div class="sponsors">
      <div class="sponsors__label">
--- a/app/views/users/_profile_header.html.erb
+++ b/app/views/users/_profile_header.html.erb
@ -22,7 +22,7 @@
      </div>

      <div class="profile-header__details">
-        <h1 class="fs-2xl m:fs-3xl fw-heavy mb-2"><%= sanitize @user.name %></h1>
+        <h1 class="crayons-title fw-heavy mb-2"><%= sanitize @user.name %></h1>
        <% if @user.tag_line.present? %>
          <p class="fs-l m:fs-xl color-base-70 mb-4 mx-auto max-w-100 m:max-w-75"><%= sanitize @user.tag_line %></p>
        <% end %>
--- a/app/views/users/edit.html.erb
+++ b/app/views/users/edit.html.erb
@ -21,7 +21,7 @@

 <header class="crayons-layout crayons-layout--limited crayons-layout--1-col p-4">
  <% if @tab == "organization" && @organizations.present? %>
-    <h1 class="fs-2xl s:fs-3xl">Settings for
+    <h1 class="crayons-title">Settings for
      <span class="organization-dropdown">
        <select id="organization-dropdown-select" onchange="window.location.href=this.value">
          <% options = @organizations.pluck(:slug, :id).each do |arr| %>
@ -36,7 +36,7 @@
      </span>
    </h1>
  <% else %>
-    <h1 class="fs-2xl s:fs-3xl">
+    <h1 class="crayons-title">
      Settings for <a href="<%= user_url(@user) || "#" %>">@<%= @user.username.truncate(User::USERNAME_MAX_LENGTH) %></a>
    </h1>
  <% end %>
@ -92,6 +92,6 @@
      <%= render partial: "users/errors", locals: { errors: @organization.errors, title_suffix: "prohibited your organization profile from being saved" } %>
    <% end %>

-    <%= render "users/" + @tab.tr("-", "_"), tab: @tab %>
+    <%= render "users/#{@tab.tr('-', '_')}", tab: @tab %>
  </div>
 </main>
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@ -49,7 +49,7 @@
        </div>

        <div class="profile-header__details">
-          <h1 class="fs-2xl m:fs-3xl fw-heavy mb-2"><%= @user.name %></h1>
+          <h1 class="crayons-title fw-heavy mb-2"><%= @user.name %></h1>
          <p class="fs-base m:fs-l color-base-90 mb-4 mx-auto max-w-100 m:max-w-75"><%= @user.summary.presence || ["404 bio not found"].sample %></p>

          <div class="profile-header__meta">