Removed govuk padding util

2026-08-03 05:11:03 -04:00 · 2025-08-06 21:13:26 -04:00
parent 45b0d3a576
commit 1515229de7
62 changed files with 113 additions and 114 deletions
--- a/app/main/views/pricing.py
+++ b/app/main/views/pricing.py
@@ -1,5 +1,4 @@
-from flask import current_app, render_template
-from flask_login import current_user
+from flask import render_template

 from app.main import main
 from app.main.forms import SearchByNameForm
--- a/app/templates/components/flash_messages.html
+++ b/app/templates/components/flash_messages.html
@@ -9,7 +9,7 @@
      {% else %}
        {% set delete_button_text = None %}
      {% endif %}
-      <div class="bottom-gutter">
+      <div class="margin-bottom-3">
        {{ banner(
          message if message is string else message[0],
          'default' if ((category == 'default') or (category == 'default_with_tick')) else 'dangerous',
--- a/app/templates/components/folder-path.html
+++ b/app/templates/components/folder-path.html
@@ -41,7 +41,7 @@
  current_user
 ) %}
  {% if folder_path %}
-    <h2 class="heading-medium folder-heading">
+    <h2 class="font-heading-lg folder-heading">
      {% if folder_path|length == 1 %}
        <a class="usa-link" href="{{ url_for('.choose_template_to_copy', service_id=current_service_id) }}">Services</a>
        {{ folder_path_separator() }}
--- a/app/templates/error/403.html
+++ b/app/templates/error/403.html
@@ -3,7 +3,7 @@
 {% block maincolumn_content %}
    <div class="grid-row">
      <div class="grid-col-8">
-        <h1 class="heading-large">
+        <h1 class="font-heading-xl">
          You’re not allowed to see this page
        </h1>
        <p class="usa-body">
--- a/app/templates/error/404.html
+++ b/app/templates/error/404.html
@@ -3,7 +3,7 @@
 {% block maincolumn_content %}
    <div class="grid-row">
      <div class="grid-col-8">
-        <h1 class="heading-large">
+        <h1 class="font-heading-xl">
          Page not found
        </h1>
        <p class="usa-body">
--- a/app/templates/error/410.html
+++ b/app/templates/error/410.html
@@ -3,7 +3,7 @@
 {% block maincolumn_content %}
    <div class="grid-row">
      <div class="grid-col-8">
-        <h1 class="heading-large">
+        <h1 class="font-heading-xl">
          Page not found
        </h1>
        <p class="usa-body">
--- a/app/templates/error/500.html
+++ b/app/templates/error/500.html
@@ -3,7 +3,7 @@
 {% block maincolumn_content %}
  <div class="grid-row">
    <div class="grid-col-8">
-      <h1 class="heading-large">
+      <h1 class="font-heading-xl">
        Sorry, we can't deliver what you asked for right now.
      </h1>
      <p class="usa-body">
--- a/app/templates/partials/jobs/notifications.html
+++ b/app/templates/partials/jobs/notifications.html
@@ -25,12 +25,12 @@
      <div class="dashboard-table job-status-table table-overflow-x-auto">
    {% endif %}
      {% if job.still_processing %}
-        <p class="bottom-gutter hint">
+        <p class="margin-bottom-3 hint">
          Report is {{ "{:.0f}%".format(job.percentage_complete * 0.99) }} complete…
        </p>
      {% elif notifications  and time_left != "Data no longer available" %}
-        <p class="bottom-gutter">
-          <a href="{{ download_link }}" download class="usa-link heading-small">Download this report (<abbr title="Comma separated values">CSV</abbr>)</a>
+        <p class="margin-bottom-3">
+          <a href="{{ download_link }}" download class="usa-link font-heading-md">Download this report (<abbr title="Comma separated values">CSV</abbr>)</a>
          &emsp;
          <span id="time-left">{{ time_left }}</span>
        </p>
--- a/app/templates/partials/jobs/status.html
+++ b/app/templates/partials/jobs/status.html
@@ -20,7 +20,7 @@
 {% endset %}

 <div class="ajax-block-container">
-  <p class='bottom-gutter'>
+  <p class='margin-bottom-3'>
    {% if not job.finished_processing %}
      {% if job.scheduled_for %}
        <div class="usa-alert usa-alert--info">
--- a/app/templates/partials/templates/guidance-formatting-letters.html
+++ b/app/templates/partials/templates/guidance-formatting-letters.html
@@ -1,6 +1,6 @@
 {% from "components/components/inset-text/macro.njk" import usaInsetText %}

-<h2 class="heading-medium">Formatting</h2>
+<h2 class="font-heading-lg">Formatting</h2>
 <p class="usa-body">
  To put a heading in your template, use a hash:
 </p>
--- a/app/templates/partials/templates/guidance-formatting.html
+++ b/app/templates/partials/templates/guidance-formatting.html
@@ -1,13 +1,13 @@
 {% from "components/components/inset-text/macro.njk" import usaInsetText %}

-<h2 class="heading-medium">Formatting</h2>
-<p class="bottom-gutter-1-3">
+<h2 class="font-heading-lg">Formatting</h2>
+<p class="margin-bottom-1">
  To put a title in your template, use a hash:
 </p>
 <div>
  {{ usaInsetText({"text": "# This is a title", "classes": ""})}}
 </div>
-<p class="bottom-gutter-1-3">
+<p class="margin-bottom-1">
  To make bullet points, use asterisks:
 </p>
 <div>
@@ -18,13 +18,13 @@
    "classes": ""})
  }}
 </div>
-<p class="bottom-gutter-1-3">
+<p class="margin-bottom-1">
  To add inset text, use a caret:
 </p>
 <div>
  {{ usaInsetText({"text": "^ You must tell us if your circumstances change", "classes": ""})}}
 </div>
-<p class="bottom-gutter-1-3">
+<p class="margin-bottom-1">
  To add a horizontal line, use three dashes:
 </p>
 {{ usaInsetText({
--- a/app/templates/partials/templates/guidance-optional-content.html
+++ b/app/templates/partials/templates/guidance-optional-content.html
@@ -9,7 +9,7 @@
  <p class="usa-body">
    Use double parenthesis and ‘??’ to define optional content.
  </p>
-  <p class="bottom-gutter-1-3">
+  <p class="margin-bottom-1">
    For example if you only want to show something to people who are under
    18:
  </p>
--- a/app/templates/partials/templates/guidance-personalization.html
+++ b/app/templates/partials/templates/guidance-personalization.html
@@ -6,7 +6,7 @@
  </button>
 </h3>
 <div id="personalization" class="usa-accordion__content usa-prose">
-  <p class="bottom-gutter-1-3">
+  <p class="margin-bottom-1">
    Use double parenthesis to personalize your message:
  </p>
  {{ usaInsetText({
--- a/app/templates/partials/templates/guidance-send-a-document.html
+++ b/app/templates/partials/templates/guidance-send-a-document.html
@@ -1,6 +1,6 @@
 {% from "components/components/inset-text/macro.njk" import usaInsetText %}

-<h2 class="heading-medium">
+<h2 class="font-heading-lg">
  Send a document by email
 </h2>
 <p class="usa-body">
--- a/app/templates/partials/tour.html
+++ b/app/templates/partials/tour.html
@@ -1,10 +1,10 @@
 {% from "components/banner.html" import banner_wrapper %}

 {% call banner_wrapper(type='tour') %}
-    <p class="heading-medium">Try sending yourself this example</p>
-    <div class="grid-row bottom-gutter {% if help != '1' %}greyed-out-step{% endif %}">
+    <p class="font-heading-lg">Try sending yourself this example</p>
+    <div class="grid-row margin-bottom-3 {% if help != '1' %}greyed-out-step{% endif %}">
      <div class="grid-col-2">
-        <p class="heading-large">1.</p>
+        <p class="font-heading-xl">1.</p>
      </div>
      <div class="grid-col-10">
        <p class="usa-body">
@@ -12,9 +12,9 @@
        </p>
      </div>
    </div>
-    <div class="grid-row bottom-gutter {% if help != '2' %}greyed-out-step{% endif %}">
+    <div class="grid-row margin-bottom-3 {% if help != '2' %}greyed-out-step{% endif %}">
      <div class="grid-col-2">
-        <p class="heading-large">2.</p>
+        <p class="font-heading-xl">2.</p>
      </div>
      <div class="grid-col-10">
        <p class="usa-body">
@@ -22,9 +22,9 @@
        </p>
      </div>
    </div>
-    <div class="grid-row bottom-gutter {% if help != '3' %}greyed-out-step{% endif %}">
+    <div class="grid-row margin-bottom-3 {% if help != '3' %}greyed-out-step{% endif %}">
      <div class="grid-col-2">
-        <p class="heading-large">3.</p>
+        <p class="font-heading-xl">3.</p>
      </div>
      <div class="grid-col-10">
        <p class="usa-body">
--- a/app/templates/views/api/callbacks.html
+++ b/app/templates/views/api/callbacks.html
@@ -15,7 +15,7 @@
 {% block maincolumn_content %}
  {{ page_header('Callbacks') }}
 	<div class="table-overflow-x-auto">
-		<div class="bottom-gutter-3-2 dashboard-table body-copy-table table-overflow-x-auto">
+		<div class="margin-bottom-3 dashboard-table body-copy-table table-overflow-x-auto">
 				{% call mapping_table(
 				caption='General',
 				field_headings=['Label', 'Value', 'Action'],
--- a/app/templates/views/api/index.html
+++ b/app/templates/views/api/index.html
@@ -8,7 +8,7 @@

 {% block maincolumn_content %}

-  <h1 class="heading-medium bottom-gutter-3-2">
+  <h1 class="font-heading-lg margin-bottom-3">
    API integration
  </h1>

@@ -26,7 +26,7 @@

  <div class="grid-row">
    <div class="grid-col-6">
-      <h2 class="heading-small">
+      <h2 class="font-heading-md">
        Message log
      </h2>
    </div>
--- a/app/templates/views/api/keys/show.html
+++ b/app/templates/views/api/keys/show.html
@@ -20,7 +20,7 @@
      You will not be able to see it again once you leave this page.
    </p>

-    <div class="bottom-gutter-2">
+    <div class="margin-bottom-3">

      {{ copy_to_clipboard(
        '{}-{}-{}'.format(key_name, service_id, secret),
--- a/app/templates/views/check/ok.html
+++ b/app/templates/views/check/ok.html
@@ -20,7 +20,7 @@
  {{ page_header('Select delivery time') }}

  {{ template|string }}
-  <div class="bottom-gutter-3-2">
+  <div class="margin-bottom-3">
    {# Alert for users of AT #}
    <span id="upload-success" class="usa-sr-only">File uploaded successfully</span>
    <form method="post" enctype="multipart/form-data" action="{{url_for('main.preview_job', service_id=current_service.id, template_id=template_id, upload_id=upload_id)}}" class='page-footer'>
--- a/app/templates/views/check/preview.html
+++ b/app/templates/views/check/preview.html
@@ -92,7 +92,7 @@
    </table>
  </div>
  {% endif %}
-  <!-- <div class="bottom-gutter-3-2">
+  <!-- <div class="margin-bottom-3">
    <p>This is a placeholder: This message will be delivered to <b>400 phone numbers</b> and will use a total of <b>800 message parts</b>, leaving Washington DSHS with <b>249,200 message parts remaining</b>.</p>
  </div> -->
  <form method="post" enctype="multipart/form-data" action="{{url_for('main.start_job', service_id=current_service.id, upload_id=upload_id)}}" class='page-footer'>
--- a/app/templates/views/choose-account.html
+++ b/app/templates/views/choose-account.html
@@ -49,7 +49,7 @@

 {% block maincolumn_content %}

-  <h1 class="heading-large {% if current_user.has_access_to_live_and_trial_mode_services %}usa-sr-only{% endif %}">
+  <h1 class="font-heading-xl {% if current_user.has_access_to_live_and_trial_mode_services %}usa-sr-only{% endif %}">
    Choose service
  </h1>

--- a/app/templates/views/conversations/conversation.html
+++ b/app/templates/views/conversations/conversation.html
@@ -15,8 +15,8 @@

  <div class="dashboard">

-    <div class="bottom-gutter js-stick-at-top-when-scrolling">
-      <h1 class="heading-large">
+    <div class="margin-bottom-3 js-stick-at-top-when-scrolling">
+      <h1 class="font-heading-xl">
        {{ user_number }}
      </h1>
    </div>
--- a/app/templates/views/dashboard/all-template-statistics.html
+++ b/app/templates/views/dashboard/all-template-statistics.html
@@ -12,7 +12,7 @@

  {{ page_header("Templates used") }}

-  <div class="bottom-gutter-3-2">
+  <div class="margin-bottom-3">
    {{ pill(
      items=years,
      current_value=selected_year,
--- a/app/templates/views/dashboard/monthly.html
+++ b/app/templates/views/dashboard/monthly.html
@@ -12,7 +12,7 @@
 {% block maincolumn_content %}

  {{ page_header('Messages sent') }}
-  <div class="bottom-gutter">
+  <div class="margin-bottom-3">
    {{ pill(
      items=years,
      current_value=selected_year,
--- a/app/templates/views/features.html
+++ b/app/templates/views/features.html
@@ -18,30 +18,30 @@
  <p class="usa-body"><a class="usa-link" href="{{ url_for('main.register') }}">Create an account</a> for free and try it yourself.</p>
 {% endif %}

-<h2 class="heading-medium" id="templates">Reusable message templates</h2>
+<h2 class="font-heading-lg" id="templates">Reusable message templates</h2>
 <p class="usa-body">To send a text with Notify, you need to create a reusable message template first.</p>
 <p class="usa-body">Templates let you send the same thing to lots of people, as often as you need to, without writing a new message each time.</p>

-<h2 class="heading-medium" id="organizing-content">Organizing your content</h2>
+<h2 class="font-heading-lg" id="organizing-content">Organizing your content</h2>
 <p class="usa-body">You can organize your content by grouping templates, and putting them into folders.</p>
 <p class="usa-body">Set up folders within the Send message section of Notify, where you find templates. You can choose to create a Folder before or after a template is made. If you want to change a user’s ability to view or edit folders, you may control this through their individual team member permissions.</p>

-<h2 class="heading-medium" id="personalised-messages">Personalized content</h2>
+<h2 class="font-heading-lg" id="personalised-messages">Personalized content</h2>
 <p class="usa-body">Notify makes it easy to send personalized messages from a single template.</p>
 <p class="usa-body">See <a class="usa-link" href="{{ url_for('.how_to', _anchor='personalized-content') }}">how to personalize your content</a>.</p>

-<h2 class="heading-medium" id="bulk-sending">Bulk sending</h2>
+<h2 class="font-heading-lg" id="bulk-sending">Bulk sending</h2>
 <p class="usa-body">To send a batch of messages at once, upload a list of contact details to Notify. You can also schedule the date and time you want them to be sent.</p>

-<!-- <h2 class="heading-medium" id="api">API integration</h2>
+<!-- <h2 class="font-heading-lg" id="api">API integration</h2>
 <p class="usa-body">You can integrate the Notify API with your web application or back-office system to send messages automatically.</p>
 <p class="usa-body">Read our <a class="usa-link" href="{{ url_for('.documentation') }}">API documentation</a> for more information.</p> -->

-<h2 class="heading-medium" id="reporting">Reporting</h2>
+<h2 class="font-heading-lg" id="reporting">Reporting</h2>
 <p class="usa-body">Notify’s real-time dashboard lets you see the number of messages sent. You can also check the current status of any message to see when it was delivered.</p>
 <p class="usa-body">Read more about the <a class="usa-link" href="{{ url_for('main.message_status') }}">delivery status</a> of your messages.</p>

-<h2 class="heading-medium" id="permissions">Permissions</h2>
+<h2 class="font-heading-lg" id="permissions">Permissions</h2>
 <p class="usa-body">Control which members of your team can see, create, edit, and send messages.</p>
 <p class="usa-body">Notify lets you:</p>
 <ul class="list list-bullet">
@@ -49,7 +49,7 @@
  <li>choose who else can manage team members</li>
 </ul>

-<h2 class="heading-medium" id="performance">Performance</h2>
+<h2 class="font-heading-lg" id="performance">Performance</h2>
 <p class="usa-body">Notify commits to sending 95% of text messages within 10 seconds.</p>
 <!-- <ul class="list list-bullet">
  <li>sending 95% of text messages within 10 seconds</li>
@@ -59,17 +59,17 @@

 <!-- <p class="usa-body">Visit our <a class="usa-link" href="{{ url_for('main.performance') }}">performance data</a> page to see how Notify is performing.</p> -->

-<h2 class="heading-medium" id="security">Security</h2>
+<h2 class="font-heading-lg" id="security">Security</h2>
 <p class="usa-body">Notify protects and manages data to meet the needs of government services.</p>

-<h3 class="heading-small">Hide sensitive information</h3>
+<h3 class="font-heading-md">Hide sensitive information</h3>
 <p class="usa-body">Notify lets you redact personal information from your messages after they have been sent. This means that only the recipient can see that information.</p>

-<h3 class="heading-small">Two-factor authentication</h3>
+<h3 class="font-heading-md">Two-factor authentication</h3>
 <p class="usa-body">Notify uses two-factor authentication (2FA) to keep your account secure. When you sign in, we’ll send a unique one-time code to your phone and ask you to enter it before we let you use your account.</p>
 <p class="usa-body">Read more about <a class="usa-link" href="{{ url_for('main.security') }}">security</a>.

-<!-- <h2 class="heading-medium" id="support">Support</h2>
+<!-- <h2 class="font-heading-lg" id="support">Support</h2>
 <p class="usa-body">Notify provides 24-hour online support. If you have an emergency outside office hours, we’ll reply within 30 minutes.</p>
 <p class="usa-body">Find out more about <a class="usa-link" href="{{ url_for('.support') }}">support</a>.</p> -->

--- a/app/templates/views/features/text-messages.html
+++ b/app/templates/views/features/text-messages.html
@@ -14,7 +14,7 @@
  <p><a class="usa-link" href="{{ url_for('main.register') }}">Create an account</a> and try Notify for yourself.</p>
  {% endif %}

-  <h2 class="heading heading-medium">Features</h2>
+  <h2 class="heading font-heading-lg">Features</h2>
  <p>Notify makes it easy to:</p>
  <ul class="list list-bullet">
    <li>create reusable text message templates</li>
@@ -38,7 +38,7 @@
    <li>Select <b class="bold">Change</b> or <b class="bold">Add text message sender</b>.</li>
 </ol>

-  <h2 class="heading heading-medium">Pricing<h2>
+  <h2 class="heading font-heading-lg">Pricing</h2>
    <p>Each service you add has an annual allowance of free text messages.</p>
    <p><a class="usa-link" href="{{ url_for('.pricing', _anchor='text-messages') }}">See pricing</a> for more details.</p>

--- a/app/templates/views/find-users/user-information.html
+++ b/app/templates/views/find-users/user-information.html
@@ -6,7 +6,7 @@
 {% endblock %}

 {% block platform_admin_content %}
-  <div class="grid-row bottom-gutter">
+  <div class="grid-row margin-bottom-3">
    <div class="grid-col-12">
      <h1 class="font-body-2xl margin-bottom-3">
        {{ user.name }}
--- a/app/templates/views/how-to/edit-and-format-messages.html
+++ b/app/templates/views/how-to/edit-and-format-messages.html
@@ -7,7 +7,7 @@

 {% block content_column_content %}

-  <h1 class="heading-large">Edit and format messages</h1>
+  <h1 class="font-heading-xl">Edit and format messages</h1>

  <p class="usa-body">This page explains how to:</p>
  <ul class="list list-bullet">
@@ -17,7 +17,7 @@
    <li><a class="usa-link" href="#optional-content">add optional content</a></li>
  </ul>

-  <h2 class="heading-medium" id="formatting">Format your content</h2>
+  <h2 class="font-heading-lg" id="formatting">Format your content</h2>

  <p class="usa-body">You can see a list of formatting instructions on the edit template page:</p>

@@ -36,7 +36,7 @@

  <p class="usa-body">Notify does not allow bold, italics, subheadings, underlined text or different fonts. This is because they can make it harder for users to read what you’ve written.</p> -->

-  <h2 class="heading-medium" id="links">Add links</h2>
+  <h2 class="font-heading-lg" id="links">Add links</h2>

  <p class="usa-body">When composing a text message, write URLs in full and Notify will convert them into links for you.</p>

@@ -50,7 +50,7 @@
    <li>you can no longer control where the redirect goes</li>
  </ul>

-  <h2 class="heading-medium" id="personalized-content">Personalize your content</h2>
+  <h2 class="font-heading-lg" id="personalized-content">Personalize your content</h2>

  <p class="usa-body">To personalize the content of your messages, add a placeholder to the template.</p>

@@ -74,7 +74,7 @@

  <p class="usa-body">If you upload a list, the column names need to match the placeholders in your template.</p>

-  <h2 class="heading-medium" id="optional-content">Add optional content</h2>
+  <h2 class="font-heading-lg" id="optional-content">Add optional content</h2>

  <p class="usa-body">To add optional content to your messages:</p>

--- a/app/templates/views/manage-users.html
+++ b/app/templates/views/manage-users.html
@@ -44,9 +44,9 @@
        <div class="user-list-item width-full">
          <h2 class="user-list-item-heading font-body-lg margin-y-0" title="{{ user.email_address }}">
            {%- if user.name -%}
-              <span class="heading-small live-search-relevant">{{ user.name }}</span>
+              <span class="font-heading-md live-search-relevant">{{ user.name }}</span>
            {%- else -%}
-              <span class="heading-small live-search-relevant">{{ user.email_address }}</span>
+              <span class="font-heading-md live-search-relevant">{{ user.email_address }}</span>
            {%- endif -%}
          </h2>
          <p class="margin-top-0">
--- a/app/templates/views/manage-users/confirm-edit-user-email.html
+++ b/app/templates/views/manage-users/confirm-edit-user-email.html
@@ -21,7 +21,7 @@
  <div class="grid-col-12">
  {% call form_wrapper() %}
    <p>New email address:</p>
-    <div class="panel panel-border-wide bottom-gutter">
+    <div class="panel panel-border-wide margin-bottom-3">
      <p>{{ new_email }}</p>
    </div>
    <p>We will send {{ user.name }} an email to tell them about the change.</p>
--- a/app/templates/views/manage-users/confirm-edit-user-mobile-number.html
+++ b/app/templates/views/manage-users/confirm-edit-user-mobile-number.html
@@ -20,7 +20,7 @@
  <div class="grid-col-12">
  {% call form_wrapper() %}
    <p>New mobile number:</p>
-    <div class="panel panel-border-wide bottom-gutter">
+    <div class="panel panel-border-wide margin-bottom-3">
      <p>{{ new_mobile_number }}</p>
    </div>
    <p>We will send {{ user.name }} a text message to tell them about the change.</p>
--- a/app/templates/views/manage-users/permissions.html
+++ b/app/templates/views/manage-users/permissions.html
@@ -5,7 +5,7 @@
 {% if form.folder_permissions.all_template_folders %}
  {{ form.folder_permissions }}
 {% elif user and user.platform_admin %}
-  <p class="bottom-gutter usa-body">
+  <p class="margin-bottom-3 usa-body">
    Platform admin users can access all template folders.
  </p>
 {% endif %}
--- a/app/templates/views/message-status.html
+++ b/app/templates/views/message-status.html
@@ -19,8 +19,8 @@

  <!-- <p>If you’re using the Notify API, read our <a class="usa-link" href="{{ url_for('.documentation') }}">documentation</a> for a list of API statuses.<p>

-  <h2 id="email-statuses" class="heading-medium">Emails</h2>
-  <div class="bottom-gutter-3-2">
+  <h2 id="email-statuses" class="font-heading-lg">Emails</h2>
+  <div class="margin-bottom-3">
    {% call mapping_table(
      caption='Message statuses – emails',
      field_headings=['Status', 'Description'],
@@ -42,13 +42,13 @@
    {% endcall %}
  </div>

-  <h3 id="spam" class="heading-small">Spam</h3>
+  <h3 id="spam" class="font-heading-md">Spam</h3>
  <p>If an email is marked as spam, Notify receives a ‘complaint’ from the email provider. We’ll contact you if we receive a complaint about any of your emails. When this happens you should remove the recipient’s email address from your list.</p>

-  <h3 id="open-rates" class="heading-small">Open rates and click-throughs</h3>
+  <h3 id="open-rates" class="font-heading-md">Open rates and click-throughs</h3>
  <p>Notify cannot tell you if your users open an email or click on the links in an email. We do not track open rates and click-throughs because there are privacy issues. Tracking emails without asking permission from users could breach General Data Protection Regulations (GDPR).</p> -->

-  <h2 id="text-message-statuses" class="heading-medium">Text messages</h2>
+  <h2 id="text-message-statuses" class="font-heading-lg">Text messages</h2>
  <div class="margin-bottom-8 table-overflow-x-auto">
    {% call mapping_table(
      caption='Message statuses – text messages',
@@ -73,14 +73,14 @@
      {% endfor %}
    {% endcall %}
  </div>
-  <h2 class="heading-medium">About carrier statuses</h2>
+  <h2 class="font-heading-lg">About carrier statuses</h2>
  <p>Sometimes Notify receives more detailed information from the carriers on the status of messages, and these can be found
  in the downloadable reports. Not all carriers provide the same level of detail regarding delivery and some delivery
  statutes have a slight variation in word choice. Notify includes this information in the reports to provide you as much
  detail as possible. Remember, for security purposes, detailed information is only available for seven days after a
  message has been sent.</p>

-  <h2 class="heading-medium">Opting out</h2>
+  <h2 class="font-heading-lg">Opting out</h2>
  <p>A text recipient can opt out of receiving text messages from your phone number at any time by responding “STOP” or
  “QUIT” or <a class="usa-link" href="https://docs.aws.amazon.com/pinpoint/latest/userguide/channels-sms-limitations-opt-out.html#settings-sms-self-opt-out-terms">one of several other keywords</a>. If they opt out,</p>
  <ul>
--- a/app/templates/views/notifications/check.html
+++ b/app/templates/views/notifications/check.html
@@ -14,7 +14,7 @@

 {% block maincolumn_content %}
  {% if error == 'not-allowed-to-send-to' %}
-    <div class="bottom-gutter">
+    <div class="margin-bottom-3">
      {% call banner_wrapper(type='dangerous') %}
        {% with
          count_of_recipients=1,
@@ -27,14 +27,14 @@
      {% endcall %}
    </div>
  {% elif error == 'too-many-messages' %}
-    <div class="bottom-gutter">
+    <div class="margin-bottom-3">
      {% call banner_wrapper(type='dangerous') %}
        {% include "partials/check/too-many-messages.html" %}
      {% endcall %}
    </div>
  {% elif error == 'message-too-long' %}
    {# the only row_errors we can get when sending one off messages is that the message is too long #}
-    <div class="bottom-gutter">
+    <div class="margin-bottom-3">
      {% call banner_wrapper(type='dangerous') %}
        {% include "partials/check/message-too-long.html" %}
      {% endcall %}
--- a/app/templates/views/notifications/preview.html
+++ b/app/templates/views/notifications/preview.html
@@ -24,7 +24,7 @@

 {% block maincolumn_content %}
  {% if error == 'not-allowed-to-send-to' %}
-    <div class="bottom-gutter">
+    <div class="margin-bottom-3">
      {% call banner_wrapper(type='dangerous') %}
        {% with
          count_of_recipients=1,
@@ -37,13 +37,13 @@
      {% endcall %}
    </div>
  {% elif error == 'too-many-messages' %}
-    <div class="bottom-gutter">
+    <div class="margin-bottom-3">
      {% call banner_wrapper(type='dangerous') %}
        {% include "partials/check/too-many-messages.html" %}
      {% endcall %}
    </div>
  {% elif error == 'message-too-long' %}
-    <div class="bottom-gutter">
+    <div class="margin-bottom-3">
      {% call banner_wrapper(type='dangerous') %}
        {% include "partials/check/message-too-long.html" %}
      {% endcall %}
--- a/app/templates/views/organizations/index.html
+++ b/app/templates/views/organizations/index.html
@@ -18,7 +18,7 @@
        <li class="browse-list-item">
          <a href="{{ url_for('main.organization_dashboard', org_id=org.id) }}" class="usa-link">{{ org.name }}</a>
          {% if not org.active %}
-            <span class="table-field-status-default heading-medium">- archived</span>
+            <span class="table-field-status-default font-heading-lg">- archived</span>
          {% endif %}
          <p class="browse-list-hint">
            {{ org.count_of_live_services }}
--- a/app/templates/views/organizations/organization/index.html
+++ b/app/templates/views/organizations/organization/index.html
@@ -12,13 +12,13 @@

  {{ page_header('Usage', size='medium') }}

-  <div class="bottom-gutter">
+  <div class="margin-bottom-3">
    {{ pill(years, selected_year, big_number_args={'smallest': True}) }}
  </div>

-  <div class="grid-row bottom-gutter">
+  <div class="grid-row margin-bottom-3">
    <div class="grid-col-6">
-      <h2 class="heading-small">Emails</h2>
+      <h2 class="font-heading-md">Emails</h2>
      <div class="keyline-block">
        {{ big_number(
          total_emails_sent,
@@ -28,7 +28,7 @@
      </div>
    </div>
    <div class="grid-col-6">
-      <h2 class="heading-small">Text messages</h2>
+      <h2 class="font-heading-md">Text messages</h2>
      <div class="keyline-block">
        {{ big_number(
          total_sms_cost,
@@ -51,7 +51,7 @@
    </div>
  {% endif %}

-  <h2 class="heading-small {% if search_form %}visually-hidden{% endif %}">By service</h2>
+  <h2 class="font-heading-md {% if search_form %}visually-hidden{% endif %}">By service</h2>

  {% for service in services %}
    <div class="keyline-block organization-service">
--- a/app/templates/views/organizations/organization/settings/index.html
+++ b/app/templates/views/organizations/organization/settings/index.html
@@ -7,7 +7,7 @@

 {% block maincolumn_content %}
  <h1 class="font-body-2xl">Settings</h1>
-  <div class="bottom-gutter-3-2 settings-table body-copy-table">
+  <div class="margin-bottom-3 settings-table body-copy-table">
    {% call mapping_table(
      caption='General',
      field_headings=['Label', 'Value', 'Action'],
--- a/app/templates/views/organizations/organization/users/index.html
+++ b/app/templates/views/organizations/organization/users/index.html
@@ -36,7 +36,7 @@
          <div class="grid-col-9">
            <h2 class="user-list-item-heading">
              {%- if user.name -%}
-                <span class="heading-small">{{ user.name }}</span>&ensp;
+                <span class="font-heading-md">{{ user.name }}</span>&ensp;
              {%- endif -%}
              <span class="hint">
                {%- if user.status == 'pending' -%}
--- a/app/templates/views/organizations/organization/users/invite-org-user.html
+++ b/app/templates/views/organizations/organization/users/invite-org-user.html
@@ -24,7 +24,7 @@
      error_message_with_html=True
    ) }}

-    <div class="bottom-gutter">
+    <div class="margin-bottom-3">
 		  <p class="form-label">
 		    {{ current_org.name }} team members can:
 		  </p>
--- a/app/templates/views/performance.html
+++ b/app/templates/views/performance.html
@@ -109,7 +109,7 @@
  <h2 class="font-body-lg">
    Organizations using Notify
  </h2>
-  <div class="grid-row bottom-gutter">
+  <div class="grid-row margin-bottom-3">
    <div class="grid-col-6">
      <span class="usa-sr-only">There are</span>
      <div class="product-page-big-number">{{ count_of_live_services_and_organizations.organizations|format_thousands }}</div>
--- a/app/templates/views/platform-admin/_global_stats.html
+++ b/app/templates/views/platform-admin/_global_stats.html
@@ -1,4 +1,4 @@
-<div class="grid-row bottom-gutter">
+<div class="grid-row margin-bottom-3">
  <div class="grid-col-6">
    <span class="big-number-with-status">
      {% if link %}
--- a/app/templates/views/platform-admin/daily-sms-provider-volumes-report.html
+++ b/app/templates/views/platform-admin/daily-sms-provider-volumes-report.html
@@ -21,7 +21,7 @@
  <h2 class="font-body-lg">
    Data included in the report
  </h2>
-<div class="bottom-gutter-3-2">
+<div class="margin-bottom-3">
    {% call mapping_table(
      caption='Descriptions of daily SMS provider volumes data',
      field_headings=['Name', 'Description'],
--- a/app/templates/views/platform-admin/daily-volumes-report.html
+++ b/app/templates/views/platform-admin/daily-volumes-report.html
@@ -21,7 +21,7 @@
  <h2 class="font-body-lg">
    Data included in the report
  </h2>
-<div class="bottom-gutter-3-2">
+<div class="margin-bottom-3">
    {% call mapping_table(
      caption='Descriptions of daily volumes data',
      field_headings=['Name', 'Description'],
--- a/app/templates/views/platform-admin/get-billing-report.html
+++ b/app/templates/views/platform-admin/get-billing-report.html
@@ -21,7 +21,7 @@
  <h2 class="font-body-lg">
    Data included in the report
  </h2>
-<div class="bottom-gutter-3-2">
+<div class="margin-bottom-3">
    {% call mapping_table(
      caption='Descriptions of billing report data',
      field_headings=['Name', 'Description'],
--- a/app/templates/views/platform-admin/get-users-report.html
+++ b/app/templates/views/platform-admin/get-users-report.html
@@ -21,7 +21,7 @@
  <h2 class="font-body-lg">
    Data included in the report
  </h2>
-<div class="bottom-gutter-3-2">
+<div class="margin-bottom-3">
    {% call mapping_table(
      caption='Descriptions of billing report data',
      field_headings=['Name', 'Description'],
--- a/app/templates/views/platform-admin/index.html
+++ b/app/templates/views/platform-admin/index.html
@@ -29,7 +29,7 @@
    "open": form.errors | convert_to_boolean
  }) }}

-  <div class="grid-row bottom-gutter">
+  <div class="grid-row margin-bottom-3">
    {% for noti_type in global_stats %}
      <div class="grid-col-6">
        <span class="big-number-dark">
@@ -54,7 +54,7 @@
    {% endfor %}
  </div>

-  <div class="grid-row bottom-gutter">
+  <div class="grid-row margin-bottom-3">
    {% for noti_type in global_stats %}
      <div class="grid-col-6">
        <div class="bordered-text-box">
--- a/app/templates/views/platform-admin/services.html
+++ b/app/templates/views/platform-admin/services.html
@@ -26,7 +26,7 @@
          {% call field(border=False, colspan=3) %}
            <a href="{{ url_for('main.service_dashboard', service_id=service['id']) }}" class="file-list-filename-large usa-link">{{ service['name'] }}</a>
            {% if not service['active'] %}
-              <span class="heading-medium hint">&ensp;Archived</span>
+              <span class="font-heading-lg hint">&ensp;Archived</span>
            {% endif %}
            {% if service['name'] == 'Test service' %}
              <a class="usa-link" href="{{ url_for('main.load_test') }}">Load Test</a>
--- a/app/templates/views/platform-admin/volumes-by-service-report.html
+++ b/app/templates/views/platform-admin/volumes-by-service-report.html
@@ -21,7 +21,7 @@
  <h2 class="font-body-lg">
    Data included in the report
  </h2>
-<div class="bottom-gutter-3-2">
+<div class="margin-bottom-3">
    {% call mapping_table(
      caption='Descriptions of volumes by service data',
      field_headings=['Name', 'Description'],
--- a/app/templates/views/send.html
+++ b/app/templates/views/send.html
@@ -63,7 +63,7 @@
  {{ page_header('Upload your bulk-sending spreadsheet')}}
  <p class="font-sans-lg text-base">Organize phone numbers and information in a single spreadsheet and upload when you have multiple messages to send. Column headers in the spreadsheet will place the data in the right spots within the template that's selected.</p>

-  <div class="page-footer bottom-gutter margin-top-3">
+  <div class="page-footer margin-bottom-3 margin-top-3">
    {{file_upload(
      form.file,
      allowed_file_extensions=allowed_file_extensions,
--- a/app/templates/views/service-settings.html
+++ b/app/templates/views/service-settings.html
@@ -16,7 +16,7 @@

    <h1 class="font-body-lg">Settings</h1>

-    <div class="bottom-gutter-3-2 settings-table body-copy-table table-overflow-x-auto">
+    <div class="margin-bottom-3 settings-table body-copy-table table-overflow-x-auto">

      {% call mapping_table(
        caption='General',
@@ -187,7 +187,7 @@
      </p>

    {% else %}
-      <h2 class="heading-medium top-gutter-0">Your service is live</h2>
+      <h2 class="font-heading-lg top-gutter-0">Your service is live</h2>

      <p>
        You can send up to
--- a/app/templates/views/service-settings/data-retention.html
+++ b/app/templates/views/service-settings/data-retention.html
@@ -8,7 +8,7 @@

 {% block maincolumn_content %}

-  <div class="grid-row bottom-gutter">
+  <div class="grid-row margin-bottom-3">
    <div class="grid-col-8">
      <h1 class="font-body-2xl margin-bottom-3">
        Data retention
@@ -23,7 +23,7 @@
    }) }}
  </div>
  </div>
-  <div class="grid-row bottom-gutter">
+  <div class="grid-row margin-bottom-3">
      <div class="grid-col-12">
          By default data is kept for 7 days
      </div>
--- a/app/templates/views/service-settings/email-reply-to/_verify-updates.html
+++ b/app/templates/views/service-settings/email-reply-to/_verify-updates.html
@@ -25,7 +25,7 @@
      }) }}
    </div>
  {% elif verification_status == "failure" %}
-    <div class="bottom-gutter">
+    <div class="margin-bottom-3">
      {% call banner_wrapper(type='dangerous') %}
        <h2 class='banner-title' data-module="track-error" data-error-type="reply-to-email-not-working" data-error-label="{{ upload_id }}">
          There’s a problem with your reply-to address
--- a/app/templates/views/service-settings/email_reply_to.html
+++ b/app/templates/views/service-settings/email_reply_to.html
@@ -28,7 +28,7 @@
        <div class="grid-row">
          <div class="grid-col-9">
            <h2 class="user-list-item-heading">
-              <span class="heading-small">{{ item.email_address }}</span>&ensp;<span class="hint">
+              <span class="font-heading-md">{{ item.email_address }}</span>&ensp;<span class="hint">
                {%- if item.is_default -%}
                  (default)
                {% endif %}
--- a/app/templates/views/service-settings/sms-sender/edit.html
+++ b/app/templates/views/service-settings/sms-sender/edit.html
@@ -21,7 +21,7 @@
  {% call form_wrapper(data_force_focus=True) %}
    {% if inbound_number %}
      <p>
-        <span class="bottom-gutter-1-3"> {{ sms_sender.sms_sender }} </span>
+        <span class="margin-bottom-1"> {{ sms_sender.sms_sender }} </span>
        <span class="hint"> This phone number receives replies and cannot be changed </span>
      </p>
    {% else %}
--- a/app/templates/views/service-settings/sms-senders.html
+++ b/app/templates/views/service-settings/sms-senders.html
@@ -53,7 +53,7 @@
  </div>

  {% if current_user.has_permissions(ServicePermission.MANAGE_SERVICE) %}
-    <div class="grid-row bottom-gutter">
+    <div class="grid-row margin-bottom-3">
      <div class="grid-col-12">
        {{ usaButton({
          "element": "a",
--- a/app/templates/views/temp-history.html
+++ b/app/templates/views/temp-history.html
@@ -12,7 +12,7 @@
  {{ page_header("Audit events") }}

  {% if show_navigation %}
-    <div class="bottom-gutter">
+    <div class="margin-bottom-3">
      {{ pill(
        [
          ('All', None, url_for('main.history', service_id=current_service.id), None),
@@ -26,10 +26,10 @@
  {% endif %}

  {% for day, events in days %}
-    <h2 class="heading-small top-gutter">
+    <h2 class="font-heading-md top-gutter">
      {{ events[0].time|format_date_human|title }}
    </h2>
-    <ul class="bottom-gutter">
+    <ul class="margin-bottom-3">
      {% for event in events %}
        <li class="history-list-item">
          <div class="grid-row">
--- a/app/templates/views/templates/_template.html
+++ b/app/templates/views/templates/_template.html
@@ -9,7 +9,7 @@
      This template was deleted {{ template._template.updated_at|format_datetime_relative }}.
    </p>
  {% elif not current_user.has_permissions(ServicePermission.SEND_MESSAGES, 'manage_api_keys', ServicePermission.MANAGE_TEMPLATES, ServicePermission.MANAGE_SERVICE) or not user_has_template_permission %}
-    <p class="top-gutter-1-3 {% if template.template_type != 'sms' %}bottom-gutter{% endif %}">
+    <p class="top-gutter-1-3 {% if template.template_type != 'sms' %}margin-bottom-3{% endif %}">
      If you need to send this
      {{ 1|message_count_label(template.template_type, suffix='') }}
      or edit this template, contact your manager.
--- a/app/templates/views/templates/choose-reply.html
+++ b/app/templates/views/templates/choose-reply.html
@@ -18,7 +18,7 @@
  {% if not templates_and_folders.templates_to_show %}

    {% if current_user.has_permissions(ServicePermission.MANAGE_TEMPLATES) %}
-       <p class="bottom-gutter">
+       <p class="margin-bottom-3">
         You need a template before you can send text messages.
       </p>
       {{ usaButton({
--- a/app/templates/views/templates/template.html
+++ b/app/templates/views/templates/template.html
@@ -13,7 +13,7 @@

  {% if show_redaction_message %}

-    <div class="bottom-gutter">
+    <div class="margin-bottom-3">
      {% call banner_wrapper(type='dangerous', subhead='Are you sure you want to hide all personalized and conditional content after sending for increased privacy protection?') %}
        <ul class="list list-bullet">
          <li>
--- a/app/templates/views/usage.html
+++ b/app/templates/views/usage.html
@@ -21,7 +21,7 @@
      <div class='grid-row'>

        <div class='grid-col-12'>
-          <h2 class='heading-small margin-bottom-1'>Text message parts</h2>
+          <h2 class='font-heading-md margin-bottom-1'>Text message parts</h2>
          <div class="keyline-block">
            You have sent
            {{ big_number(sms_sent, 'text message parts of your', smaller=True) }}
@@ -43,7 +43,7 @@
          </div>
        </div>
        {# <div class='grid-col-6'>
-          <h2 class='heading-small'>Emails</h2>
+          <h2 class='font-heading-md'>Emails</h2>
          <div class="keyline-block">
            {{ big_number(emails_sent, 'email disabled during SMS pilot', smaller=True) }}
            {{ big_number("", '', smaller=True) }}
--- a/backstop.config.js
+++ b/backstop.config.js
@@ -28,7 +28,7 @@ module.exports = {
    {
      label: 'Choose Service - Accounts',
      url: `${baseUrl}/accounts`,
-      selectors: ['h1.heading-large', 'a.usa-button[href="/add-service"]'],
+      selectors: ['h1.font-heading-xl', 'a.usa-button[href="/add-service"]'],
      misMatchThreshold: MISMATCH_THRESHOLD,
      requireSameDimensions: true,
      delay: SCREENSHOT_DELAY,