diff --git a/background.html b/background.html
index a5a4e9918..20cc4d1ad 100644
--- a/background.html
+++ b/background.html
@@ -619,7 +619,7 @@
       <div class='clear-data-settings'>
         <h3>{{ clearDataHeader }}</h3>
         <div>
-          <button class='grey red clear-data'>{{ clearDataButton }}</button>
+          <button class='grey destructive clear-data'>{{ clearDataButton }}</button>
           <p>{{ clearDataExplanation }}</p>
         </div>
       </div>
@@ -650,8 +650,8 @@
         </div>
         <div class='nav'>
           <div>
-            <a class='button grey cancel'>{{ cancelButton }}</a>
-            <a class='button red delete-all-data'>{{ deleteButton }}</a>
+            <a class='button neutral cancel'>{{ cancelButton }}</a>
+            <a class='button destructive delete-all-data'>{{ deleteButton }}</a>
           </div>
         </div>
       </div>
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 613909908..c190c3bba 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -836,11 +836,11 @@ input[type=text], input[type=search], textarea {
 
     font-size: 12pt;
 
-    &.grey {
+    &.neutral {
       color: black;
       background: #DEDEDE;
     }
-    &.red {
+    &.destructive {
       background: red;
     }
 
diff --git a/stylesheets/_settings.scss b/stylesheets/_settings.scss
index 125f1cc52..63c2da076 100644
--- a/stylesheets/_settings.scss
+++ b/stylesheets/_settings.scss
@@ -39,7 +39,7 @@
       padding: 0 20px;
       margin: 0 0 20px 20px;
     }
-    .red {
+    .destructive {
       background-color: red;
       color: white;
     }