diff --git a/install_files/ansible-base/roles/build-securedrop-app-code-deb-pkg/files/usr.sbin.apache2 b/install_files/ansible-base/roles/build-securedrop-app-code-deb-pkg/files/usr.sbin.apache2
index aa20d309d27..125892bb742 100644
--- a/install_files/ansible-base/roles/build-securedrop-app-code-deb-pkg/files/usr.sbin.apache2
+++ b/install_files/ansible-base/roles/build-securedrop-app-code-deb-pkg/files/usr.sbin.apache2
@@ -264,7 +264,6 @@
   /var/www/securedrop/static/i/font-awesome/refresh-blue.png r,
   /var/www/securedrop/static/i/font-awesome/refresh-white.png r,
   /var/www/securedrop/static/i/font-awesome/times-white.png r,
-  /var/www/securedrop/static/i/font-awesome/trash-black.png r,
   /var/www/securedrop/static/i/font-awesome/black/guard.svg r,
   /var/www/securedrop/static/i/font-awesome/white/guard.svg r,
   /var/www/securedrop/static/i/font-awesome/white/exclamation-circle.svg r,
@@ -277,6 +276,11 @@
   /var/www/securedrop/static/i/tipbox/tipbox-hed-j-single.png r,
   /var/www/securedrop/static/i/tipbox/tipbox-hed-submit3.png r,
   /var/www/securedrop/static/i/tipbox/tipbox-logo.png r,
+  /var/www/securedrop/static/i/trash-x-out.png r,
+  /var/www/securedrop/static/i/trash-x-solid.png r,
+  /var/www/securedrop/static/i/x_icon-button_blue.png r,
+  /var/www/securedrop/static/i/x_icon-grimace_blue.png r,
+  /var/www/securedrop/static/i/x_icon-sd_blue.png r,
   /var/www/securedrop/static/js/journalist.js r,
   /var/www/securedrop/static/js/source.js r,
   /var/www/securedrop/static/fonts/fa-brands-400.eot r,
diff --git a/securedrop/journalist_templates/_confirmation_modal.html b/securedrop/journalist_templates/_confirmation_modal.html
index 26662d56e3d..7ca3ace24ab 100644
--- a/securedrop/journalist_templates/_confirmation_modal.html
+++ b/securedrop/journalist_templates/_confirmation_modal.html
@@ -4,7 +4,7 @@
     <a href="#close" title="{{ gettext('Close') }}" class="close">X</a>
     <h2>{{ modal_data.modal_header }}</h2>
     <p>{{ modal_data.modal_body }}</p>
-    <a href="#close" id="{{ modal_data.cancel_id }}" title="{{ gettext('Cancel') }}" class="btn sd-button">{{ gettext('Cancel') }}</a>
-    <button type="submit" id="{{ modal_data.submit_id }}" name="action" value="delete" class="sd-button {{ modal_data.submit_btn_type }}">{{ modal_data.submit_btn_text }}</button>
+    <a href="#close" id="{{ modal_data.cancel_id }}" title="{{ gettext('Cancel') }}" class="btn">{{ gettext('CANCEL') }}</a>
+    <button type="submit" id="{{ modal_data.submit_id }}" name="action" value="delete" class="{{ modal_data.submit_btn_type }}">{% filter upper %}{{ modal_data.submit_btn_text }}{% endfilter %}</button>
   </div>
 </div>
diff --git a/securedrop/journalist_templates/account_edit_hotp_secret.html b/securedrop/journalist_templates/account_edit_hotp_secret.html
index cc4bc0bb954..131fc3a231f 100644
--- a/securedrop/journalist_templates/account_edit_hotp_secret.html
+++ b/securedrop/journalist_templates/account_edit_hotp_secret.html
@@ -6,6 +6,6 @@
     <label for="otp_secret">{{ gettext('Change Secret') }}</label>
     <input name="otp_secret" type="text" placeholder="{{ gettext('HOTP Secret') }}"><br>
   </p>
-  <button class="sd-button" type="submit">{{ gettext('CONTINUE') }}</button>
+  <button type="submit">{{ gettext('CONTINUE') }}</button>
 </form>
 {% endblock %}
diff --git a/securedrop/journalist_templates/account_new_two_factor.html b/securedrop/journalist_templates/account_new_two_factor.html
index c7ee696e8bb..60d0c05e090 100644
--- a/securedrop/journalist_templates/account_new_two_factor.html
+++ b/securedrop/journalist_templates/account_new_two_factor.html
@@ -21,6 +21,6 @@ <h1>{{ gettext('Enable YubiKey (OATH-HOTP)') }}</h1>
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
   <label for="token">{{ gettext('Verification code') }}</label>
   <input name="token" id="token" type="text" placeholder="123456">
-  <button type="submit" class="sd-button">{{ gettext('SUBMIT') }}</button>
+  <button type="submit">{{ gettext('SUBMIT') }}</button>
 </form>
 {% endblock %}
diff --git a/securedrop/journalist_templates/admin.html b/securedrop/journalist_templates/admin.html
index 2a54f19b49f..7a516c6129c 100644
--- a/securedrop/journalist_templates/admin.html
+++ b/securedrop/journalist_templates/admin.html
@@ -3,7 +3,7 @@
 <h1>{{ gettext('Admin Interface') }}</h1>
 
 <form action="{{ url_for('admin.add_user') }}">
-  <button class="sd-button" type="submit" class="btn" id="add-user"><i class="fa fa-plus"></i>{{ gettext('ADD USER') }}</button>
+  <button type="submit" id="add-user"><i class="fa fa-plus"></i>{{ gettext('ADD USER') }}</button>
 </form>
 
 <hr class="no-line">
@@ -22,9 +22,9 @@ <h1>{{ gettext('Admin Interface') }}</h1>
     {% for user in users %}
       <tr class="user">
         <td>{{ user.username }}</td>
-        <td><a href="/admin/edit/{{ user.id }}" class="plain" data-username="{{ user.username }}"><i class="fa fa-edit" title="{{ gettext('Edit user {username}').format(username=user.username) }}"></i></a></td>
+        <td><a href="/admin/edit/{{ user.id }}" class="plain edit-user-button" data-username="{{ user.username }}"><i class="fa fa-edit" title="{{ gettext('Edit user {username}').format(username=user.username) }}"></i></a></td>
 	{% if user.id == g.user.id %}
-        <td><i class="far fa-trash-alt"></i></button></td>
+        <td><i class="far fa-trash-alt disabled-delete-button"></i></td>
 	{% else %}
         <td><button type="submit" class="plain delete-user" formaction="/admin/delete/{{ user.id }}" data-username="{{ user.username}}"><i class="far fa-trash-alt" title="{{ gettext('Delete user {username}').format(username=user.username) }}"></i></button></td>
 	{% endif %}
@@ -44,8 +44,8 @@ <h1>{{ gettext('Admin Interface') }}</h1>
 
 <hr class="no-line">
 
-<a href="{{ url_for('admin.manage_config') }}" class="btn sd-button" id="update-instance-config">
-  <i class="fas fa-pencil-alt"></i>{{ gettext('INSTANCE CONFIG') }}
+<a href="{{ url_for('admin.manage_config') }}" class="btn" id="update-instance-config">
+  <i class="fas fa-pencil-alt"></i> {{ gettext('INSTANCE CONFIG') }}
 </a>
 
 <hr class="no-line">
diff --git a/securedrop/journalist_templates/admin_add_user.html b/securedrop/journalist_templates/admin_add_user.html
index da5e1aa88df..0423e5fc0d3 100644
--- a/securedrop/journalist_templates/admin_add_user.html
+++ b/securedrop/journalist_templates/admin_add_user.html
@@ -71,6 +71,6 @@
       <span class="form-validation-error">{{ error }}</span><br>
     {% endfor %}
   </p>
-  <button type="submit" class="sd-button"><i class="fa fa-plus"></i>{{ gettext('ADD USER') }}</button>
+  <button type="submit"><i class="fa fa-plus"></i>{{ gettext('ADD USER') }}</button>
 </form>
 {% endblock %}
diff --git a/securedrop/journalist_templates/admin_edit_hotp_secret.html b/securedrop/journalist_templates/admin_edit_hotp_secret.html
index 7a33f3abe45..397df7c7d9c 100644
--- a/securedrop/journalist_templates/admin_edit_hotp_secret.html
+++ b/securedrop/journalist_templates/admin_edit_hotp_secret.html
@@ -7,6 +7,6 @@
     <label for="otp_secret">{{ gettext('Change Secret') }}</label>
     <input name="otp_secret" type="text" placeholder="{{ gettext('HOTP Secret') }}"><br>
   </p>
-  <button class="sd-button" type="submit">{{ gettext('CONTINUE') }}</button>
+  <button type="submit">{{ gettext('CONTINUE') }}</button>
 </form>
 {% endblock %}
diff --git a/securedrop/journalist_templates/admin_new_user_two_factor.html b/securedrop/journalist_templates/admin_new_user_two_factor.html
index fa8abd38a22..52938994d15 100644
--- a/securedrop/journalist_templates/admin_new_user_two_factor.html
+++ b/securedrop/journalist_templates/admin_new_user_two_factor.html
@@ -24,6 +24,6 @@ <h1>{{ gettext('Enable YubiKey (OATH-HOTP)') }}</h1>
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
   <label for="token">{{ gettext('Verification code') }}</label>
   <input name="token" id="token" type="text" placeholder="123456">
-  <button type="submit" class="sd-button">{{ gettext('SUBMIT') }}</button>
+  <button type="submit">{{ gettext('SUBMIT') }}</button>
 </form>
 {% endblock %}
diff --git a/securedrop/journalist_templates/base.html b/securedrop/journalist_templates/base.html
index a18021178fb..cb020c79130 100644
--- a/securedrop/journalist_templates/base.html
+++ b/securedrop/journalist_templates/base.html
@@ -33,7 +33,7 @@
       <div class="container">
         {% block header %}
         <div id="header">
-          <a href="{{ url_for('main.index') }}"><img src="{{ url_for('main.select_logo') }}" class="logo small" alt="SecureDrop" width="250"></a>
+          <a href="{{ url_for('main.index') }}" class="no-bottom-border"><img src="{{ url_for('main.select_logo') }}" class="logo small" alt="SecureDrop" width="250"></a>
           {% include 'locales.html' %}
           {% if use_custom_header_image %}
           <div class="powered">
diff --git a/securedrop/journalist_templates/col.html b/securedrop/journalist_templates/col.html
index 0e40b9d7060..ac91df65186 100644
--- a/securedrop/journalist_templates/col.html
+++ b/securedrop/journalist_templates/col.html
@@ -13,7 +13,7 @@
       <a href="#change-codename-{{ source.journalist_designation }}" title="{{ gettext('Generate a new random codename for this source. We recommend doing this if the first random codename is difficult to say or remember. You can generate new random codenames as many times as you like.') }}" class="plain" id="regenerate-codename-btn"><span id="regenerate-codename-btn-label">{{ gettext('Change codename') }}</span></a>
       <div id="change-codename-{{ source.journalist_designation }}" class="confirm-prompt">{{ gettext('Are you sure you want to generate a new codename?') }}
         <a href="#regenerate-code">{{ gettext('Cancel') }}</a>
-        <button class="sd-button" type="submit">{{ gettext('CONFIRM') }}</button>
+        <button class="button small" type="submit">{{ gettext('CONFIRM') }}</button>
       </div>
     </p>
   </form>
@@ -48,7 +48,7 @@
               <span title="{{ gettext('Read') }}" class="icon"><i class="fa fa-envelope-open"></i></span>
             {% endif %}
             <a class="file {% if not doc.downloaded and not doc.filename.endswith('reply.gpg') %}unread{% else %}read{% endif %}" href="{{ url_for('col.download_single_file', filesystem_id=filesystem_id, fn=doc.filename) }}">
-              <i class="fa fa-download"></i> <span class="filename">{{ doc.filename }}</span>
+              <span class="filename">{{ doc.filename }}</span>
             </a>
             <span class="info"><span title="{{ doc.size }} bytes">{{ doc.size|filesizeformat() }}</span></span>
 
@@ -88,15 +88,15 @@
 
   <hr class="cut-out">
   <hr class="no-line">
-  <h3><i class="fa fa-reply"></i> {{ gettext('Reply') }}</h3>
+  <h3>{{ gettext('Reply') }}</h3>
   {% if source.has_key %}
     <p>{{ gettext('You can write a secure reply to the person who submitted these documents:') }}</p>
     <form action="{{ url_for('main.reply') }}" method="post" autocomplete="off">
       <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
       <input type="hidden" name="filesystem_id" value="{{ filesystem_id }}">
-      {{ form.message(id="reply-text-field", rows='10', cols='72', class="journalist-reply__input") }}
+      {{ form.message(id="reply-text-field", rows='10', class="journalist-reply__input") }}
       <hr class="no-line">
-      <button id="reply-button" class="sd-button" type="submit">{{ gettext('SUBMIT') }}</button>
+      <button id="reply-button" class="button pull-right" type="submit">{{ gettext('SUBMIT') }}</button>
     </form>
   {% elif source.flagged %}
     <p class="notification">{{ gettext("You've flagged this source for reply.") }}</p>
@@ -106,7 +106,7 @@ <h3><i class="fa fa-reply"></i> {{ gettext('Reply') }}</h3>
     <form action="{{ url_for('main.flag') }}" method="post">
       <input type="hidden" name="filesystem_id" value="{{ filesystem_id }}">
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-      <button id="flag-button" class="sd-button" type="submit">{{ gettext('FLAG THIS SOURCE FOR REPLY') }}</button>
+      <button id="flag-button" type="submit">{{ gettext('FLAG THIS SOURCE FOR REPLY') }}</button>
     </form>
   {% endif %}
   <hr class="no-line">
@@ -117,9 +117,11 @@ <h3><i class="fa fa-reply"></i> {{ gettext('Reply') }}</h3>
     <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
     <input type="hidden" name="filesystem_id" value="{{ filesystem_id }}">
     <input type="hidden" name="col_name" value="{{ source.journalist_designation }}">
-    <a href="#delete-collection-confirmation-modal" id="delete-collection-link">
-      <button type="button" class="sd-button danger"><i class="far fa-trash-alt"></i> {{ gettext('DELETE SOURCE AND SUBMISSIONS') }}</button>
-    </a>
+    <div class="center">
+      <a href="#delete-collection-confirmation-modal" id="delete-collection-link">
+        <button type="button" class="button danger"><i class="far fa-trash-alt"></i> {{ gettext('DELETE SOURCE AND SUBMISSIONS') }}</button>
+      </a>
+    </div>
 
     <!-- Confirmation modal for entire collection deletion -->
     {% with %}
diff --git a/securedrop/journalist_templates/config.html b/securedrop/journalist_templates/config.html
index d8f93bea8aa..e9424cdb63a 100644
--- a/securedrop/journalist_templates/config.html
+++ b/securedrop/journalist_templates/config.html
@@ -11,8 +11,8 @@ <h2>{{ gettext('Alerts') }}</h2>
 <p>{{ gettext('Send an encrypted email to verify if OSSEC alerts work correctly:') }}</p>
 
 <p>
-  <a class="btn sd-button" href="{{ url_for('admin.ossec_test') }}" id="test-ossec-alert">
-    <i class="fa fa-bell"></i>{{ gettext('SEND TEST OSSEC ALERT') }}
+  <a class="btn" href="{{ url_for('admin.ossec_test') }}" id="test-ossec-alert">
+    <i class="fa fa-bell"></i> {{ gettext('SEND TEST OSSEC ALERT') }}
   </a>
 </p>
 
@@ -35,8 +35,8 @@ <h2>{{ gettext('Logo Image') }}</h2>
   <h5>
     {{ gettext('Recommended size: 500px * 450px') }}
   </h5>
-  <button type="submit" class="sd-button" id="submit-logo-update">
-    <i class="fas fa-pencil-alt"></i>{{ gettext('UPDATE LOGO') }}
+  <button type="submit" id="submit-logo-update">
+    <i class="fas fa-pencil-alt"></i> {{ gettext('UPDATE LOGO') }}
   </button>
   {% include 'logo_upload_flashed.html' %}
 </form>
diff --git a/securedrop/journalist_templates/delete.html b/securedrop/journalist_templates/delete.html
index f5fc11882e2..9cb5e72854e 100644
--- a/securedrop/journalist_templates/delete.html
+++ b/securedrop/journalist_templates/delete.html
@@ -17,7 +17,7 @@
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
   <input type="hidden" name="filesystem_id" value="{{ filesystem_id }}" autocomplete="off">
   <input type="hidden" name="confirm_delete" value="true">
-  <p><button class="sd-button" type="submit" name="action" value="delete" id="confirm-delete">{{ gettext('PERMANENTLY DELETE FILES') }}</button></p>
+  <p><button type="submit" name="action" value="delete" id="confirm-delete">{{ gettext('PERMANENTLY DELETE FILES') }}</button></p>
 </form>
 
 <p><a href="/col/{{ filesystem_id }}">{{ gettext('Return to the list of documents for {source_name}…').format(source_name=source.journalist_designation) }}</a></p>
diff --git a/securedrop/journalist_templates/edit_account.html b/securedrop/journalist_templates/edit_account.html
index 58b3d89d8e0..2670d212759 100644
--- a/securedrop/journalist_templates/edit_account.html
+++ b/securedrop/journalist_templates/edit_account.html
@@ -24,7 +24,7 @@ <h2>{{ gettext('Change Name &amp; Admin Status') }}</h2>
       <input name="is_admin" id="is-admin" type="checkbox" {% if user.is_admin %}checked{% endif %}>
       <label for="is_admin">{{ gettext('Is Admin') }}</label>
     </p>
-    <button class="sd-button" type="submit" id="update">{{ gettext('UPDATE') }}</button>
+    <button type="submit" id="update">{{ gettext('UPDATE') }}</button>
   </form>
 {% else %}
   <h1>{{ gettext('Edit your account') }}</h1>
@@ -40,7 +40,7 @@ <h2>{{ gettext('Change Name') }}</h2>
       {% set last_name = g.user.last_name or '' %}
       <input name="last_name" id="last_name" value = "{{ last_name }}"">
     </p>
-    <button class="sd-button" type="submit" id="change-name">{{ gettext('UPDATE') }}</button>
+    <button type="submit" id="change-name">{{ gettext('UPDATE') }}</button>
   </form>
 {% endif %}
 
@@ -72,7 +72,7 @@ <h2>{{ gettext('Reset Password') }}</h2>
     <br>
     <span id="password" class="password">{{ password }}</span>
   </p>
-  <button class="sd-button btn" type="submit" id="reset-password"><i class="fas fa-sync"></i> {{ gettext('Reset Password') }}</button>
+  <button type="submit" id="reset-password"><i class="fas fa-sync"></i> {% filter upper %}{{ gettext('Reset Password') }}{% endfilter %}</button>
 </form>
 
 <hr class="no-line">
@@ -105,7 +105,7 @@ <h2>{{ gettext('Reset Two-Factor Authentication') }}</h2>
   <input name="uid" type="hidden" value="{{ user.id }}">
   {% endif %}
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-  <button class="sd-button" id="button-reset-two-factor-{{ type }}" tooltip="{{ tooltip_text }}" type="submit" class="pull-right"><i class="fas fa-sync"></i> {{ button_text }}<span class="tooltip">{{ tooltip_text }}</span></button>
+  <button id="button-reset-two-factor-{{ type }}" tooltip="{{ tooltip_text }}" type="submit" class="pull-right"><i class="fas fa-sync"></i> {{ button_text }}<span class="tooltip">{{ tooltip_text }}</span></button>
 </form>
 {%- endmacro %}
 
diff --git a/securedrop/journalist_templates/locales.html b/securedrop/journalist_templates/locales.html
index ff7e1c479d3..b72d2d0147e 100644
--- a/securedrop/journalist_templates/locales.html
+++ b/securedrop/journalist_templates/locales.html
@@ -19,7 +19,7 @@
         {% else %}
           {% set url = '' %}
         {% endif %}
-        <a href="{{ url }}" rel="nofollow">
+        <a href="{{ url }}" rel="nofollow" class="no-bottom-border">
           <span>{{ g.locales[locale] }}</span>
         </a>
       </li>
diff --git a/securedrop/journalist_templates/login.html b/securedrop/journalist_templates/login.html
index ca19d23f796..8156d1b6588 100644
--- a/securedrop/journalist_templates/login.html
+++ b/securedrop/journalist_templates/login.html
@@ -9,7 +9,7 @@ <h1>{{ gettext('Login to access the journalist interface') }}</h1>
   <p><input class="login-password" id="login-form-password" type="password" name="password" placeholder="{{ gettext('Password') }}"></p>
   <p class="show-password-checkbox-container"><label><input id="show-password-check" type="checkbox">Show password</label></p>
   <p><input class="login-token" name="token" id="token" type="text" placeholder="{{ gettext('Two-factor Code') }}"></p>
-  <button class="sd-button" type="submit"><i class="far fa-arrow-alt-circle-right"></i> {{ gettext('LOG IN') }}</button>
+  <button type="submit">{{ gettext('LOG IN') }}</button>
 </form>
 
 {% endblock %}
diff --git a/securedrop/sass/_base.sass b/securedrop/sass/_base.sass
index 5a0a554f237..b1a1e8e5eb6 100644
--- a/securedrop/sass/_base.sass
+++ b/securedrop/sass/_base.sass
@@ -24,8 +24,6 @@
 @import modules/doc-check
 // Text link - make links purple in running text, possibly unnecessary.
 @import modules/text-link
-// Some kind of button possibly sd=standard button. Belongs in button module?
-@import modules/sd-button
 // Tooltips for showing informations
 @import modules/tooltip
 //variation on button for select all / none. In journalist interface only?
@@ -68,8 +66,6 @@
 @import "modules/document-actions-button"
 // Grid item - part of the grid. Doesnt seem to be used very much though.
 @import "modules/grid-item"
-// Option - might be unused. Delete?
-@import "modules/option"
 // Flexbox - support for flexbox layouts
 @import "modules/flexbox"
 // Logo - Small and large versions of the branding; can also be the journalist org brand (not SD).
@@ -116,7 +112,6 @@
   +document-actions
   +doc-check
   +text-link
-  +sd-button
   +tooltip
   +select
   +pull
@@ -138,7 +133,6 @@
   +select-container
   +document-actions-button
   +grid-item
-  +option
   +flexbox
   +logo
   +submissions
diff --git a/securedrop/sass/_source_index.sass b/securedrop/sass/_source_index.sass
index d99602bbc5c..1313f5a64a1 100644
--- a/securedrop/sass/_source_index.sass
+++ b/securedrop/sass/_source_index.sass
@@ -1,4 +1,9 @@
 =source_index_rules
+
+  #recommend-tor, #disable-js
+    text-decoration: underline
+    border: 0
+
   .index-wrap
     display: block
     text-align: center
@@ -13,7 +18,7 @@
       height: 100%
       align-self: center
 
-      img
+      img.logo-image
         width: 80%
 
     p
@@ -31,22 +36,60 @@
 
     .index-column
       padding: 1em
-      display: block
+      display: flex
+      flex-direction: column
+      justify-content: space-between
       width: 48%
-      border: 1px solid $color_purple_medium
       border-top-width: 0
       border-bottom-width: 0
 
     .index-left
-      background: $color_purple_medium
+      background-image: linear-gradient(140deg, #0096dc, #005db7)
       color: white
       border-style: none
 
-    .index-top
-      border-top-width: 1px
+    div.index-right
+      background: white
+      border-width: 1px
+      border-style: solid
+      border-image-source: linear-gradient(145deg, #0096dc, #005db7)
+      border-image-slice: 1
+      color: #0A7CDC
+
+    .left-cut-out
+      border-color: white
+
+    .right-cut-out
+      border-color: #0A7CDC
+
+    .index-column-bottom-container
+      margin-top: 3em
+
+    #submit-documents-button, #login-button
+      padding: 10px 20px 10px 20px
+
+    #submit-documents-button
+      font-weight: bold
+      letter-spacing: 0
+      font-size: 90%
+      background: transparent
+      border: 1px solid white
+
+    #login-button
+      font-weight: bold
+      letter-spacing: 0
+      font-size: 90%
+      background-image: linear-gradient(111deg, #0082d9, #126ec8)
+
+    #login-button:hover
+      background-image: linear-gradient(72deg, $color_grimace_blue, #2d3273)
+      border-color: rgba(0, 0, 0, 0)
+      color: white
 
-    .index-bottom
-      border-bottom-width: 1px
+    #submit-documents-button:hover
+      color: white
+      background-image: linear-gradient(72deg, $color_grimace_blue, #2d3273)
+      border-color: rgba(0, 0, 0, 0)
 
     // This query is to reorder the flex box elements so that they correctly form the
     // two boxes (submit/returning) when the screen is sized down
@@ -73,14 +116,8 @@
       .index-column.index-top
         order: 4
 
-      .index-column.index-bottom
-        order: 6
-
       .index-column.index-left
         order: 2
 
       .index-column.index-left.index-top
         order: 1
-
-      .index-column.index-left.index-bottom
-        order: 3
diff --git a/securedrop/sass/_variables.sass b/securedrop/sass/_variables.sass
index 2e217548106..cc32d2d51da 100644
--- a/securedrop/sass/_variables.sass
+++ b/securedrop/sass/_variables.sass
@@ -1,17 +1,19 @@
 $color_warning_red: #ae3840
-$color_warning_red_pale: #d55c5c
+$color_urgent_coral: #f36
+$color_urgent_coral_hover: #950FA6
 
 $color_warning_purple: #813a81
 
-$color_purple_medium: #7985aa
-$color_purple_medium_darker: #727c9b
-
 $color_error_border: #F68E8E
-$color_error_background: #FCE3E3
+$color_error_background: #fce3e3
 
 $color_grey_dark: #626161
 $color_grey_medium: #9e9e9e
 $color_grey_light:  #f0f0f0
-$color_grey_xlight: #f3f3f3
+$color_grey_xlight: #f8f8f8
+
+$color_grimace_blue: #2a319d
+$color_securedrop_blue: #0065db
+$color_button_blue: #045fb4
 
 $spacing-unit: 8px
diff --git a/securedrop/sass/global/_body-tag.sass b/securedrop/sass/global/_body-tag.sass
index 7fdf94d46fd..335047b2d03 100644
--- a/securedrop/sass/global/_body-tag.sass
+++ b/securedrop/sass/global/_body-tag.sass
@@ -1,6 +1,5 @@
 =body-tag
   body
     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif
-    font-weight: 300
     padding: 0
     margin: 0
diff --git a/securedrop/sass/journalist.sass b/securedrop/sass/journalist.sass
index dcb6cc0b157..d81c8c11816 100644
--- a/securedrop/sass/journalist.sass
+++ b/securedrop/sass/journalist.sass
@@ -32,7 +32,7 @@
       float: right
       padding: 5px
       background-color: inherit
-      color: $color_warning_red_pale
+      color: $color_urgent_coral
       font-size: 14px
       border: 0
       clear: right
@@ -54,6 +54,7 @@ p#no-replies
 p.breadcrumbs
   text-align: left
   position: relative
+  color: #000c6c
 
   &:dir(rtl)
     text-align: right
@@ -80,14 +81,17 @@ p#max-file-size
   margin-bottom: 0
 
 button.small-danger, a.btn.small-danger, .btn.small-danger
-  background-color: $color_warning_red_pale
+  background-color: $color_urgent_coral
   font-size: small
   padding: 3px 10px
 
+#delete-collections
+  border-width: 2px
+
 .submission .icon
   display: inline-block
   width: 3.5%
-  color: $color_purple_medium
+  color: #3d3d3d
 
 #cols li.source
   .button-star
@@ -101,7 +105,7 @@ button.small-danger, a.btn.small-danger, .btn.small-danger
     width: 100%
 
 .journalist-reply__input
-  max-width: 700px
+  width: 100%
 
 .journalist-username__notes
   font: 12px Sans-Serif
@@ -123,3 +127,19 @@ button.small-danger, a.btn.small-danger, .btn.small-danger
 
 .reset-two-factor
   display: inline-block
+
+#select_all, #select_unread, #select_none
+  background: #034482
+
+  &:hover
+    background: $color_grimace_blue
+
+#select_none
+  margin-right: 15px
+
+#delete-selected-link, #delete-collections-link
+  & button
+    border-color: rgba(255, 51, 102, 0.6)
+
+    &:hover
+      border-color: $color_urgent_coral
diff --git a/securedrop/sass/modules/_button.sass b/securedrop/sass/modules/_button.sass
index 2cb9a54573b..e0cf1fe10af 100644
--- a/securedrop/sass/modules/_button.sass
+++ b/securedrop/sass/modules/_button.sass
@@ -1,16 +1,22 @@
 =button
   button, a.btn, .btn
-    background: $color_purple_medium
+    background: $color_button_blue
     box-sizing: border-box
     -moz-box-sizing: border-box
-    padding: 10px 15px
+    padding: 10px 25px
     margin: 2px auto
     border: 1px solid transparent
     color: white
-    font-size: medium
+    font-size: .8em
     cursor: pointer
     text-align: center
     text-decoration: none
+    font-weight: bold
+    font-size: .8em
+    &:not([lang=ar])
+      letter-spacing: 0.2em
+    &:lang(ar)
+      letter-spacing: 0em
 
   button
     &.starred
@@ -19,7 +25,6 @@
       &:hover
         color: #FFC5AD
         border: none
-        background-color: $color_purple_medium
 
     &.un-starred
       color: lightgray
@@ -27,7 +32,6 @@
       &:hover
         color: lightsalmon
         border: none
-        background-color: $color_purple_medium
 
     &.button-star:focus
       outline: 0
@@ -35,34 +39,41 @@
   button
     &.plain
       background: none
-      color: #333
+      color: $color_button_blue
 
       &:hover
         background: none
-        color: #333
+        color: $color_grimace_blue
         border: 1px solid transparent
 
     &:hover
-      background: white
-      color: $color_purple_medium
-      border: 1px solid $color_purple_medium
+      background: $color_grimace_blue
+      color: white
+      border: 1px solid  $color_grimace_blue
+
+    &.delete-user
+      color: $color_urgent_coral
+
+      &:hover
+        color: #ce0083
+
 
   .btn
     &.small
       font-size: small
       padding: 3px 10px
 
-    &.primary
-      display: block
-      margin-top: 0
-      margin-right: auto
-      display: inline-block
-
     &.secondary
-      @extend .primary
       background: white
-      color: $color_purple_medium_darker
-      border: 1px solid $color_purple_medium_darker
+      color: $color_button_blue
+      border: 2px solid $color_button_blue
+      margin-left: 10px
+      padding: 10px 20px
+
+    &.secondary:hover
+      background: white
+      color: $color_grimace_blue
+      border: 2px solid $color_grimace_blue
 
     &.index
       display: block
@@ -79,27 +90,22 @@
   button.small, a.btn.small
     font-size: small
     padding: 3px 10px
+    font-weight: normal
+    letter-spacing: 0
 
   a.btn:hover, .btn:hover
-    background: white
-    color: $color_purple_medium
-    border: 1px solid $color_purple_medium
-
-  button.alt, a.btn.alt, .btn.alt
-    background: transparent
-    border: 1px solid white
-
-  button.alt:hover, a.btn.alt:hover, .btn.alt:hover
-    background: white
-    color: $color_purple_medium
+    background: $color_grimace_blue
+    color: white
 
   button.danger, a.danger, .btn.danger
-    background-color: $color_warning_red_pale
+    color: $color_urgent_coral
+    background: white
+    border: 1px solid $color_urgent_coral
 
   button.danger:hover, a.btn.danger:hover, .btn.danger:hover
-    background: white
-    border-color: $color_warning_red_pale
-    color: $color_warning_red_pale
+    background: $color_urgent_coral
+    border: 1px solid $color_urgent_coral
+    color: white
 
   .option a.btn.block
     margin-bottom: 0px
@@ -118,15 +124,26 @@
   a:hover > img.on-hover, button:hover > img.on-hover
     display: inline
 
-  a > img.icon, button > img.icon
+  a > img.icon, button > img.icon, button > i.fa, button > i.fas, a > i.fa, a >i.fas
     vertical-align: middle
+    margin-right: 3px
+    margin-bottom: 2px
+    opacity: .9
 
   .button-star
     padding: 0
-    background-color: $color_purple_medium
     color: orange
     border: none
 
   .btn--space
     margin-bottom: 5px
     margin-left: 5px
+
+  // Icons used as buttons in the Journalist UI
+  .disabled-delete-button
+    color: #c0c0c0
+    font-size: 0.8em
+    letter-spacing: 0.2em
+
+  .edit-user-button
+    font-size: 0.8em
diff --git a/securedrop/sass/modules/_cols.sass b/securedrop/sass/modules/_cols.sass
index cde741098d6..b92f5da3c62 100644
--- a/securedrop/sass/modules/_cols.sass
+++ b/securedrop/sass/modules/_cols.sass
@@ -6,10 +6,10 @@
       border-bottom: 1px solid #ddd
       padding: 6px
       text-align: left
-      
+
       &.unread
         background: white
-      
+
       &.read
         background: $color_grey_xlight
 
@@ -23,8 +23,7 @@
         float: right
         &:dir(rtl)
           float: left
-        background-color: $color_grey_medium
-        color: #ffffff
+        color: #7d7d7d
         font-size: 10px
         font-weight: bold
         padding: 5px
@@ -42,20 +41,26 @@
 
       .code-name
         text-decoration: none
+        border: 0
+
         &.read
           font-weight: normal
-          color: #444
+          color: $color_grimace_blue
         &.unread
           font-weight: bold
+          color: $color_button_blue
+
+        &:hover
+          color: $color_securedrop_blue
 
       .submission-count
         display: inline-block
 
         span
-          border: 1px solid #dedede
           padding: 3px
           margin-right: 5px
           font-size: 12px
+          color: #3d3d3d
 
           &.unread
             border: 0
diff --git a/securedrop/sass/modules/_confirm-modal.sass b/securedrop/sass/modules/_confirm-modal.sass
index 654b3b90a20..30b312b741b 100644
--- a/securedrop/sass/modules/_confirm-modal.sass
+++ b/securedrop/sass/modules/_confirm-modal.sass
@@ -45,6 +45,3 @@
     border-radius: 12px
     -moz-box-shadow: 1px 1px 3px #000
     box-shadow: 1px 1px 3px #000
-
-    &:hover
-      background: $color_purple_medium
diff --git a/securedrop/sass/modules/_headline.sass b/securedrop/sass/modules/_headline.sass
index 5b6ed5d9510..6cb6408349f 100644
--- a/securedrop/sass/modules/_headline.sass
+++ b/securedrop/sass/modules/_headline.sass
@@ -1,9 +1,7 @@
 =headline
   h1, h2, h3
     font-weight: bold
-
-  h1, h2
-    color: #7985aa
+    color: #000c6c
 
   h1
     text-align: left
@@ -18,6 +16,3 @@
     &.welcome-text
       color: inherit
       text-align: center
-
-  h3
-    text-align: center
diff --git a/securedrop/sass/modules/_hr-horizontal-rule-line.sass b/securedrop/sass/modules/_hr-horizontal-rule-line.sass
index b9b8ee00683..d3e25824b9f 100644
--- a/securedrop/sass/modules/_hr-horizontal-rule-line.sass
+++ b/securedrop/sass/modules/_hr-horizontal-rule-line.sass
@@ -1,10 +1,15 @@
 =hr-horizontal-rule-line
   hr
     &.cut-out
-      border-style: dashed
+      border-style: dotted
       border-bottom: none
       border-color: #c3c3c3
 
+    &.box-separator
+      width: 100%
+      margin-top: 1.5em
+      margin-bottom: 1.5em
+
     &.no-line
       clear: both
       border: none
diff --git a/securedrop/sass/modules/_link.sass b/securedrop/sass/modules/_link.sass
index cd6bb3ea504..eeffdc59dbd 100644
--- a/securedrop/sass/modules/_link.sass
+++ b/securedrop/sass/modules/_link.sass
@@ -1,9 +1,21 @@
 =link
+
+
   a
-    color: $color_purple_medium
+    text-decoration: none
+    color: $color_securedrop_blue
+    border-bottom: 1px solid rgba(0, 117, 247, 0.4)
+
+    &:hover
+      color: $color_grimace_blue
+      border-bottom: 1px solid rgba(42, 49, 157, 1)
 
     &.plain
-      color: #333
+      color: $color_button_blue
+      border: 0
 
       &:hover
-        color: $color_purple_medium
+        color: $color_grimace_blue
+
+    &.no-bottom-border
+      border: 0
diff --git a/securedrop/sass/modules/_option.sass b/securedrop/sass/modules/_option.sass
deleted file mode 100644
index 6753f960da2..00000000000
--- a/securedrop/sass/modules/_option.sass
+++ /dev/null
@@ -1,19 +0,0 @@
-=option
-  .option
-    display: inline-block
-    width: 30%
-    min-width: 300px
-    min-height: 310px
-    margin: 1%
-    padding: 25px
-    border: 1px solid #c3c3c3
-    vertical-align: top
-    position: relative
-
-    &.alt
-      background-color: $color_purple_medium
-      color: white
-
-    &.selected
-      width: 500px
-      height: auto
diff --git a/securedrop/sass/modules/_panel.sass b/securedrop/sass/modules/_panel.sass
index b2492cd744d..0f9486f249b 100644
--- a/securedrop/sass/modules/_panel.sass
+++ b/securedrop/sass/modules/_panel.sass
@@ -4,5 +4,5 @@
     width: 100%
     margin: 0 auto
     padding: 16px 30px
-    border: 1px solid #c3c3c3
+    border: 1px solid #e1e1e1
     float: right
diff --git a/securedrop/sass/modules/_sd-button.sass b/securedrop/sass/modules/_sd-button.sass
deleted file mode 100644
index cbd2f975223..00000000000
--- a/securedrop/sass/modules/_sd-button.sass
+++ /dev/null
@@ -1,7 +0,0 @@
-=sd-button
-  .sd-button
-    font-weight: normal
-    &:not([lang=ar])
-      letter-spacing: 0.15em
-    &:lang(ar)
-      letter-spacing: 0em
diff --git a/securedrop/sass/modules/_snippet.sass b/securedrop/sass/modules/_snippet.sass
index a1e2a43c24b..03abdbe3ef0 100644
--- a/securedrop/sass/modules/_snippet.sass
+++ b/securedrop/sass/modules/_snippet.sass
@@ -4,7 +4,7 @@
     background: $color_grey_xlight
 
     .attachment
-      background-color: $color_grey_xlight
+      background-image: linear-gradient(115deg, #fbfcff, #f3f7fb)
       padding: 12px
       width: 45%
       @media only screen and (max-width: 815px)
diff --git a/securedrop/sass/modules/_submission.sass b/securedrop/sass/modules/_submission.sass
index 042c9aeaab0..e40b3668fb4 100644
--- a/securedrop/sass/modules/_submission.sass
+++ b/securedrop/sass/modules/_submission.sass
@@ -14,14 +14,18 @@
     .file
       min-width: 300px
       display: inline-block
-      color: inherit
       text-decoration: none
-      
+      border: 0
+
       &.unread
         font-weight: bold
-      
+        color: $color_button_blue
+
       &.read
-        color: #444
+        color: $color_grimace_blue
+
+      &:hover
+        color: $color_securedrop_blue
 
       &.reply
         font-size: small
@@ -29,6 +33,6 @@
     .info
       font-size: 12px
       color: #666666
-    
+
     &.unread
       background: white
diff --git a/securedrop/sass/modules/_text-link.sass b/securedrop/sass/modules/_text-link.sass
index 160f83bd3a7..c58f1c49295 100644
--- a/securedrop/sass/modules/_text-link.sass
+++ b/securedrop/sass/modules/_text-link.sass
@@ -1,3 +1,9 @@
 =text-link
   a.text-link
-    color: $color_purple_medium
+    text-decoration: none
+    color: $color_securedrop_blue
+    border-bottom: 1px solid rgba(0, 117, 247, 0.4)
+
+    &:hover
+      color: $color_grimace_blue
+      border-bottom: 1px solid rgba(42, 49, 157, 1)
diff --git a/securedrop/sass/source.sass b/securedrop/sass/source.sass
index 6a5480b56f8..188ea7d3e30 100644
--- a/securedrop/sass/source.sass
+++ b/securedrop/sass/source.sass
@@ -44,6 +44,7 @@
       padding: 0
       height: 0
       overflow: hidden
+      border: 0
 
     .hidden-codename
       margin: auto
@@ -144,10 +145,11 @@ p#codename
       float: right
       padding: 5px
       background-color: inherit
-      color: $color_warning_red_pale
+      color: $color_urgent_coral
       font-size: 14px
       clear: right
       text-decoration: none
+      border: 0
 
       &:hover
         color: #FA6E6E
@@ -184,6 +186,11 @@ p.explanation
   &:dir(rtl)
     text-align: right
 
+  &.extended-explanation
+    font-style: italic
+    font-size: small
+    line-height: 1.4
+
 #replies blockquote
   margin: 1em 1em
 
diff --git a/securedrop/source_templates/base.html b/securedrop/source_templates/base.html
index f6d4b87d32c..bff2c60a82c 100644
--- a/securedrop/source_templates/base.html
+++ b/securedrop/source_templates/base.html
@@ -16,7 +16,7 @@
       <div class="container">
         {% block header %}
         <div id="header">
-          <a href="{% if 'logged_in' in session %}{{ url_for('main.lookup') }}{% else %}{{ url_for('main.index') }}{% endif %}">
+          <a href="{% if 'logged_in' in session %}{{ url_for('main.lookup') }}{% else %}{{ url_for('main.index') }}{% endif %}" class="no-bottom-border">
             <img src="{{ url_for('main.select_logo') }}" class="logo small" alt="SecureDrop" width="250">
           </a>
           {% include 'locales.html' %}
@@ -31,7 +31,7 @@
 
         <div class="panel selected">
         {% if 'logged_in' in session %}
-          <a href="{{ url_for('main.logout') }}" class="sd-button btn pull-right" id="logout">{{ gettext('LOG OUT') }}</a>
+          <a href="{{ url_for('main.logout') }}" class="btn pull-right" id="logout">{{ gettext('LOG OUT') }}</a>
         {% endif %}
           <hr class="no-line">
 
diff --git a/securedrop/source_templates/generate.html b/securedrop/source_templates/generate.html
index f67a1b7b0d4..51136ad8b60 100644
--- a/securedrop/source_templates/generate.html
+++ b/securedrop/source_templates/generate.html
@@ -20,7 +20,7 @@ <h1>{{ gettext('Welcome') }}</h1>
       <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
       <button type="submit" id="regenerate-submit" class="small">
         <img class="icon pull-left off-hover" src="{{ url_for('static', filename='i/font-awesome/refresh-white.png') }}" width="20" height="20">
-        <img class="icon pull-left on-hover" src="{{ url_for('static', filename='i/font-awesome/refresh-blue.png') }}"  width="20" height="20">
+        <img class="icon pull-left on-hover" src="{{ url_for('static', filename='i/font-awesome/refresh-white.png') }}"  width="20" height="20">
       </button>
     </form>
   </div>
@@ -38,9 +38,7 @@ <h1>{{ gettext('Welcome') }}</h1>
 
 <form id="create-form" method="post" action="/create" autocomplete="off">
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-  <button type="submit" class="sd-button btn btn--space primary pull-right" id="continue-button">
-    <img class="icon off-hover" src="{{ url_for('static', filename='i/font-awesome/fa-arrow-circle-o-right-white.png') }}" width="17" height="17">
-    <img class="icon on-hover" src="{{ url_for('static', filename='i/font-awesome/fa-arrow-circle-o-right-blue.png') }}" width="17" height="17">
+  <button type="submit" class="btn--space pull-right" id="continue-button">
      {{ gettext('SUBMIT DOCUMENTS') }}
   </button>
 </form>
diff --git a/securedrop/source_templates/index.html b/securedrop/source_templates/index.html
index 5dea70817f3..bd084652659 100644
--- a/securedrop/source_templates/index.html
+++ b/securedrop/source_templates/index.html
@@ -26,60 +26,53 @@
            See _source_index.sass for a more full understanding. #}
         <div class="index-wrap">
           <div class="header">
-            <img src="{{ url_for('main.select_logo') }}" alt="SecureDrop">
+            <img src="{{ url_for('main.select_logo') }}" alt="SecureDrop" class="logo-image">
             {% if use_custom_header_image %}
             <div class="powered">
               {{ gettext('Powered by') }}<br>
               <img src="/static/i/securedrop_small.png" alt="SecureDrop">
             </div>
             {% endif %}
+            <div id="index-locales">
+              {% include 'locales.html' %}
+            </div>
           </div>
 
           <div class="index-row">
-            <div class="index-column index-left index-top">
+            <div class="index-column index-left">
+              <div class="index-column-top-container">
               <h2 class="welcome-text">
                 {{ gettext('Submit for the first time') }}
               </h2>
-              <hr class="cut-out">
+              <hr class="cut-out box-separator left-cut-out">
+              <p>{{ gettext('If this is your first time submitting to journalists, start here.') }}</p>
+              </div>
+              <div class="index-column-bottom-container">
+                <a href="{{ url_for('main.generate') }}" id="submit-documents-button" class="btn alt">
+                  <img class="icon" src="{{ url_for('static', filename='i/arrow-upload-white.png') }}" width="20" height="14">
+                  {{ gettext('SUBMIT DOCUMENTS') }}
+                </a>
+              </div>
             </div>
 
-            <div class="index-column index-top">
+            <div class="index-column index-right">
+              <div class="index-column-top-container">
               <h2 class="welcome-text">
                 {{ gettext('Already submitted something?') }}
               </h2>
-              <hr class="cut-out">
-            </div>
-
-            <div class="index-column index-left">
-              <p>{{ gettext('If this is your first time submitting to journalists, start here.') }}</p>
-            </div>
-
-            <div class="index-column">
+              <hr class="cut-out box-separator right-cut-out">
               <p>{{ gettext('If you have already submitted to journalists, log in here to check for responses.') }}</p>
+              </div>
+              <div class="index-column-bottom-container">
+                <a href="{{ url_for('main.login') }}" id="login-button" class="btn">
+                  <img class="icon" src="{{ url_for('static', filename='i/font-awesome/comments-white.png') }}" width="20" height="16">
+                  {{ gettext('CHECK FOR A RESPONSE') }}
+                </a>
+              </div>
             </div>
-
-            <div class="index-column index-left index-bottom">
-              <a href="{{ url_for('main.generate') }}" id="submit-documents-button" class="sd-button btn alt">
-                <img class="icon off-hover" src="{{ url_for('static', filename='i/arrow-upload-white.png') }}" width="20" height="14">
-                <img class="icon on-hover" src="{{ url_for('static', filename='i/arrow-upload-blue.png') }}" width="20" height="14">
-                {{ gettext('SUBMIT DOCUMENTS') }}
-              </a>
-            </div>
-
-            <div class="index-column index-bottom">
-              <a href="{{ url_for('main.login') }}" id="login-button" class="sd-button btn primary">
-                <img class="icon off-hover" src="{{ url_for('static', filename='i/font-awesome/comments-white.png') }}" width="20" height="16">
-                <img class="icon on-hover" src="{{ url_for('static', filename='i/font-awesome/comments-blue.png') }}" width="20" height="16">
-                {{ gettext('CHECK FOR A RESPONSE') }}
-              </a>
-            </div>
-          </div>
         </div>
       </div>
 
-      <div id="index-locales" class="center">
-        {% include 'locales.html' %}
-      </div>
       <footer>
         {{ gettext('Like all software, SecureDrop may contain security bugs. Use at your own risk.') }}<br>{{ gettext('Powered by') }} SecureDrop {{ version }}.
       </footer>
diff --git a/securedrop/source_templates/locales.html b/securedrop/source_templates/locales.html
index ff7e1c479d3..b72d2d0147e 100644
--- a/securedrop/source_templates/locales.html
+++ b/securedrop/source_templates/locales.html
@@ -19,7 +19,7 @@
         {% else %}
           {% set url = '' %}
         {% endif %}
-        <a href="{{ url }}" rel="nofollow">
+        <a href="{{ url }}" rel="nofollow" class="no-bottom-border">
           <span>{{ g.locales[locale] }}</span>
         </a>
       </li>
diff --git a/securedrop/source_templates/login.html b/securedrop/source_templates/login.html
index 4e9a0f3e81f..ebb17d8284c 100644
--- a/securedrop/source_templates/login.html
+++ b/securedrop/source_templates/login.html
@@ -17,12 +17,13 @@ <h1>{{ gettext('Enter Codename') }}</h1>
 </p>
 
 <div class="pull-right">
-  <button type="submit" class="sd-button btn primary" id="login">
-    <img class="icon off-hover" src="{{ url_for('static', filename='i/font-awesome/fa-arrow-circle-o-right-white.png') }}" width="18" height="18">
-    <img class="icon on-hover" src="{{ url_for('static', filename='i/font-awesome/fa-arrow-circle-o-right-blue.png') }}" width="18" height="18">
+  <button type="submit" id="login">
     {{ gettext('CONTINUE') }}
   </button>
-  <a href="{{ url_for('main.index') }}" class="sd-button btn secondary" id="cancel">{{ gettext('CANCEL') }}</a>
+  <a href="{{ url_for('main.index') }}" class="btn secondary" id="cancel">
+    <img class="icon off-hover" src="{{ url_for('static', filename='i/x_icon-button_blue.png') }}" width="9" height="11">
+    <img class="icon on-hover" src="{{ url_for('static', filename='i/x_icon-grimace_blue.png') }}" width="9" height="11">
+    {{ gettext('CANCEL') }}</a>
 </div>
 
 </form>
diff --git a/securedrop/source_templates/lookup.html b/securedrop/source_templates/lookup.html
index 5c5ff2b31af..e0793d3a49d 100644
--- a/securedrop/source_templates/lookup.html
+++ b/securedrop/source_templates/lookup.html
@@ -15,11 +15,12 @@
   {% endif %}
 </div>
 
-<h1 class="headline">{{ gettext('Submit Files or Messages') }}</h1>
-<p class="explanation">{{ gettext('If you are already familiar with GPG, you can optionally encrypt your files and messages with our <a href="{url}" class="text-link">public key</a> before submission. Files are encrypted as they are received by SecureDrop.').format(url=url_for('info.download_journalist_pubkey')) }}
+<h2 class="headline">{{ gettext('Submit Files or Messages') }}</h2>
+<p class="explanation">{{ gettext('You can submit any kind of file, a message, or both.') }}</p>
+
+<p class="explanation extended-explanation">{{ gettext('If you are already familiar with GPG, you can optionally encrypt your files and messages with our <a href="{url}" class="text-link">public key</a> before submission. Files are encrypted as they are received by SecureDrop.').format(url=url_for('info.download_journalist_pubkey')) }}
 {{ gettext('<a href="{url}" class="text-link">Learn more</a>.').format(url=url_for('info.why_download_journalist_pubkey')) }}</p>
 
-<p class="explanation">{{ gettext('You can submit any kind of file, a message, or both.') }}</p>
 <hr class="no-line">
 
 <form id="upload" method="post" action="{{ url_for('main.submit') }}" enctype="multipart/form-data" autocomplete="off">
@@ -37,16 +38,16 @@ <h1 class="headline">{{ gettext('Submit Files or Messages') }}</h1>
 
   <hr class="no-line">
   <div class="pull-right">
-    <button type="submit" class="sd-button btn primary" id="submit-doc-button">
-      <img class="icon off-hover" src="{{ url_for('static', filename='i/font-awesome/checkmark-white.png') }}" width="20" height="20">
-      <img class="icon on-hover" src="{{ url_for('static', filename='i/font-awesome/checkmark-blue.png') }}" width="20" height="20">
+    <button type="submit" id="submit-doc-button">
       {{ gettext('SUBMIT') }}
     </button>
 
 
 
     <a href="{{ url_for('main.lookup') }}" class="btn secondary" id="cancel">
-      <img class="icon" src="{{ url_for('static', filename='i/font-awesome/cancel-blue.png') }}" width="20" height="20"> {{ gettext('CANCEL') }}
+      <img class="icon off-hover" src="{{ url_for('static', filename='i/x_icon-button_blue.png') }}" width="9" height="11">
+      <img class="icon on-hover" src="{{ url_for('static', filename='i/x_icon-grimace_blue.png') }}" width="9" height="11">
+      {{ gettext('CANCEL') }}
     </a>
   </div>
 </form>
@@ -68,12 +69,13 @@ <h2 class="headline">{{ gettext('Read Replies') }}</h2>
           <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
           <input type="hidden" name="reply_filename" value="{{ reply.filename }}" autocomplete="off">
           <a href="#confirm-delete-{{ reply.filename }}" class="delete">
-            <img id="delete-reply-{{ reply.filename }}" src="{{ url_for('static', filename='i/font-awesome/trash-black.png') }}" width="20" height="20">
+            <img class="icon off-hover" id="delete-reply-{{ reply.filename }}" src="{{ url_for('static', filename='i/trash-x-out.png') }}" width="16" height="20">
+            <img class="icon on-hover" id="delete-reply-{{ reply.filename }}" src="{{ url_for('static', filename='i/trash-x-solid.png') }}" width="16" height="20">
           </a>
           <div id="confirm-delete-{{ reply.filename }}" class="confirm-prompt">
             <p>{{ gettext('Delete this reply?') }}
               <a href="#delete">{{ gettext('Cancel') }}</a>
-              <button type="submit" class="sd-button btn danger" id="confirm-delete-reply-button-{{ reply.filename }}">{{ gettext('DELETE') }}</button>
+              <button type="submit" class="danger" id="confirm-delete-reply-button-{{ reply.filename }}">{{ gettext('DELETE') }}</button>
             </p>
           </div>
         </form>
@@ -82,12 +84,12 @@ <h2 class="headline">{{ gettext('Read Replies') }}</h2>
       </div>
     {% endfor %}
     <form id="delete-all" method="post" action="{{ url_for('main.batch_delete') }}">
-      <a class="sd-button btn" href="#delete-all-confirm">{{ gettext('DELETE ALL REPLIES') }}</a>
+      <a class="btn danger" href="#delete-all-confirm">{{ gettext('DELETE ALL REPLIES') }}</a>
       <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
       <div id="delete-all-confirm" class="hidden-prompt">
         <p><strong>{{ gettext('Are you finished with the replies?') }}</strong></p>
-        <button class="sd-button danger" type="submit">{{ gettext('YES, DELETE ALL REPLIES') }}</button>
-        <a class="sd-button btn cancel" href="#delete-all">{{ gettext('NO, NOT YET') }}</a>
+        <button class="danger" type="submit">{{ gettext('YES, DELETE ALL REPLIES') }}</button>
+        <a class="btn" href="#delete-all">{{ gettext('NO, NOT YET') }}</a>
       </div>
     </form>
   {% else %}
diff --git a/securedrop/static/i/favicon.png b/securedrop/static/i/favicon.png
index e699a60934f..213b58ffc32 100644
Binary files a/securedrop/static/i/favicon.png and b/securedrop/static/i/favicon.png differ
diff --git a/securedrop/static/i/font-awesome/trash-black.png b/securedrop/static/i/font-awesome/trash-black.png
deleted file mode 100644
index 92b8280f6f1..00000000000
Binary files a/securedrop/static/i/font-awesome/trash-black.png and /dev/null differ
diff --git a/securedrop/static/i/logo.png b/securedrop/static/i/logo.png
index 1ac48650292..c0345781aea 100644
Binary files a/securedrop/static/i/logo.png and b/securedrop/static/i/logo.png differ
diff --git a/securedrop/static/i/trash-x-out.png b/securedrop/static/i/trash-x-out.png
new file mode 100644
index 00000000000..9eac9439ee0
Binary files /dev/null and b/securedrop/static/i/trash-x-out.png differ
diff --git a/securedrop/static/i/trash-x-solid.png b/securedrop/static/i/trash-x-solid.png
new file mode 100644
index 00000000000..72053413850
Binary files /dev/null and b/securedrop/static/i/trash-x-solid.png differ
diff --git a/securedrop/static/i/x_icon-button_blue.png b/securedrop/static/i/x_icon-button_blue.png
new file mode 100644
index 00000000000..908f6ea3377
Binary files /dev/null and b/securedrop/static/i/x_icon-button_blue.png differ
diff --git a/securedrop/static/i/x_icon-grimace_blue.png b/securedrop/static/i/x_icon-grimace_blue.png
new file mode 100644
index 00000000000..14743843b8a
Binary files /dev/null and b/securedrop/static/i/x_icon-grimace_blue.png differ
diff --git a/securedrop/static/i/x_icon-sd_blue.png b/securedrop/static/i/x_icon-sd_blue.png
new file mode 100644
index 00000000000..d0e635d1187
Binary files /dev/null and b/securedrop/static/i/x_icon-sd_blue.png differ
diff --git a/securedrop/static/js/journalist.js b/securedrop/static/js/journalist.js
index 3a288a2ba12..d3b2aa74197 100644
--- a/securedrop/static/js/journalist.js
+++ b/securedrop/static/js/journalist.js
@@ -44,24 +44,24 @@ function enhance_ui() {
   let indexSelectContainer = document.getElementById("index-select-container");
   if (indexSelectContainer) {
     indexSelectContainer.outerHTML =
-      '<span id="select_all" class="select"><i class="far fa-check-square"></i> ' +
+      '<button id="select_all" type="button" class="small"> ' +
       get_string("select-all-string") +
-      '</span> <span id="select_none" class="select"><i class="far fa-square"></i> ' +
+      '</button> <button id="select_none" type="button" class="small"> ' +
       get_string("select-none-string") +
-      '</span>';
+      '</button>';
   }
 
   // Add the "select {all,unread,none}" buttons for the source collection
   let selectContainer = document.getElementById("select-container");
   if (selectContainer) {
     selectContainer.innerHTML =
-      '<span id="select_all" class="select"><i class="far fa-check-square"></i> ' +
+      '<button id="select_all" type="button" class="small"> ' +
       get_string("select-all-string") +
-      '</span> <span id="select_unread" class="select"><i class="far fa-check-square"></i> ' +
+      '</button> <button id="select_unread" type="button" class="small"> ' +
       get_string("select-unread-string") +
-      '</span> <span id="select_none" class="select"><i class="far fa-square"></i> ' +
+      '</button> <button id="select_none" type="button" class="small"> ' +
       get_string("select-none-string") +
-      '</span>';
+      '</button>';
   }
 
 }