diff --git a/app/assets/stylesheets/app/_editor.scss b/app/assets/stylesheets/app/_editor.scss
index 0d4f3b225..5cf5f3d6f 100644
--- a/app/assets/stylesheets/app/_editor.scss
+++ b/app/assets/stylesheets/app/_editor.scss
@@ -4,7 +4,7 @@ $heading-height: 75px;
   display: flex;
   flex-direction: column;
   overflow-y: hidden;
-  background-color: white;
+  background-color: var(--sn-stylekit-background-color);
 }
 
 .locked {
@@ -19,7 +19,6 @@ $heading-height: 75px;
   padding-bottom: 10px;
   padding-right: 10px;
 
-  background-color: white;
   border-bottom: none;
   z-index: $z-index-editor-title-bar;
 
@@ -41,9 +40,10 @@ $heading-height: 75px;
       border: none;
       outline: none;
       background-color: transparent;
+      color: var(--sn-stylekit-foreground-color);
 
       &:disabled {
-        color: black;
+        color: var(--sn-stylekit-foreground-color);
       }
     }
 
@@ -60,17 +60,12 @@ $heading-height: 75px;
     font-weight: normal;
     margin-top: 4px;
     text-align: right;
-    color: rgba(black, 0.23);
-
-    &.error, .error {
-      color: #f6a200;
-    }
+    color: var(--sn-stylekit-contrast-background-color);
   }
 
   .editor-tags {
     clear: left;
     width: 100%;
-    // height: 25px;
     overflow: visible;
     position: relative;
 
@@ -88,6 +83,7 @@ $heading-height: 75px;
 
     .tags-input {
       background-color: transparent;
+      color: var(--sn-stylekit-foreground-color);
       width: 100%;
       border: none;
     }
@@ -100,7 +96,7 @@ $heading-height: 75px;
   overflow-y: hidden;
   height: 100%;
   display: flex;
-  background-color: white;
+  background-color: var(--sn-stylekit-background-color);
 
   position: relative;
 
@@ -113,12 +109,14 @@ $heading-height: 75px;
     font-family: monospace;
     overflow-y: scroll;
     width: 100%;
+    background-color: var(--sn-stylekit-background-color);
+    color: var(--sn-stylekit-foreground-color);
 
     border: none;
     outline: none;
     padding: 15px;
     padding-top: 11px;
-    font-size: 17px;
+    font-size: var(--sn-stylekit-font-size-editor);
     resize: none;
   }
 }
@@ -129,7 +127,8 @@ $heading-height: 75px;
   .component-stack-item {
     width: 100%;
     position: relative;
-    border-top: 1px solid $bg-color;
+    border-top: 1px solid var(--sn-stylekit-border-color);
+
     iframe {
       width: 100%;
     }
diff --git a/app/assets/stylesheets/app/_lock-screen.scss b/app/assets/stylesheets/app/_lock-screen.scss
index 605ded806..4a7f57b66 100644
--- a/app/assets/stylesheets/app/_lock-screen.scss
+++ b/app/assets/stylesheets/app/_lock-screen.scss
@@ -12,8 +12,8 @@
   bottom: 0;
 
   z-index: $z-index-lock-screen;
-  background-color: rgba(white, 0.5);
-  color: black;
+  background-color: var(--sn-stylekit-background-color);
+  color: var(--sn-stylekit-foreground-color);
   font-size: 16px;
   display: flex;
   align-items: center;
diff --git a/app/assets/stylesheets/app/_main.scss b/app/assets/stylesheets/app/_main.scss
index c4f412b3b..329437ee2 100644
--- a/app/assets/stylesheets/app/_main.scss
+++ b/app/assets/stylesheets/app/_main.scss
@@ -1,11 +1,3 @@
-$main-text-color: black;
-$secondary-text-color: rgba($main-text-color, 0.8);
-$bg-color: #e3e3e3;
-$light-bg-color: #e9e9e9;
-$selection-color: $bg-color;
-$selected-text-color: black;
-$blue-color: #086dd6;
-
 $z-index-editor-content: 10;
 
 $z-index-editor-title-bar: 100;
@@ -27,13 +19,13 @@ body {
     "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans",
     "Droid Sans", "Helvetica Neue", sans-serif;
-  color: $main-text-color;
   -webkit-font-smoothing: antialiased;
   min-height: 100%;
   height: 100%;
   font-size: 14px;
   margin: 0;
-  background-color: $bg-color;
+  color: var(--sn-stylekit-foreground-color);
+  background-color: var(--sn-stylekit-background-color);
 }
 
 * {
@@ -41,11 +33,11 @@ body {
 }
 
 .tinted {
-  color: $blue-color;
+  color: var(--sn-stylekit-info-color);
 }
 
 .tinted-selected {
-  color: white;
+  color: var(--sn-stylekit-info-contrast-color);
 }
 
 *:focus {outline:0;}
@@ -61,7 +53,7 @@ input, button, select, textarea {
 }
 
 a {
-  color: $blue-color;
+  color: var(--sn-stylekit-info-color);
   text-decoration: none;
 
   &.no-decoration {
@@ -77,6 +69,16 @@ a {
   }
 }
 
+::selection {
+  background: var(--sn-stylekit-info-color) !important; /* WebKit/Blink Browsers */
+  color: var(--sn-stylekit-info-contrast-color);
+}
+
+::-moz-selection {
+  background: var(--sn-stylekit-text-selection-color) !important; /* WebKit/Blink Browsers */
+  color: white;
+}
+
 p {
   overflow: auto;
 }
@@ -85,7 +87,7 @@ p {
   min-height: 100vh;
   height: 100vh;
   overflow: auto;
-  background-color: $bg-color;
+  background-color: var(--sn-stylekit-background-color);
 }
 
 $footer-height: 32px;
@@ -115,7 +117,8 @@ $footer-height: 32px;
     height: 100%;
     position: absolute;
     cursor: col-resize;
-    background-color: rgba(black, 0.1);
+    // needs to be a color that works on main bg and contrast bg
+    background-color: var(--sn-stylekit-on-contrast-background-color);
     opacity: 0;
     border-top: none;
     border-bottom: none;
@@ -181,7 +184,7 @@ $footer-height: 32px;
     > .content {
       height: 100%;
       max-height: 100%;
-      background-color: white;
+      background-color: var(--sn-stylekit-background-color);
       position: relative;
     }
 
@@ -205,24 +208,6 @@ $footer-height: 32px;
          width: 80%;
          overflow: hidden;
        }
-
-       > .add-button {
-         $button-bg: #e9e9e9;
-         color: lighten($main-text-color, 40%);
-         font-size: 18px;
-         width: 45px;
-         height: 24px;
-         cursor: pointer;
-         background-color: $button-bg;
-         border-radius: 4px;
-         font-weight: normal;
-         text-align: center;
-
-         &:hover {
-           background-color: darken($button-bg, 5%);
-           color: lighten($main-text-color, 40%);
-         }
-       }
      }
    }
   }
diff --git a/app/assets/stylesheets/app/_modals.scss b/app/assets/stylesheets/app/_modals.scss
index 411bf237c..3623f719d 100644
--- a/app/assets/stylesheets/app/_modals.scss
+++ b/app/assets/stylesheets/app/_modals.scss
@@ -2,7 +2,6 @@
   width: 350px;
   .sk-panel {
     border-radius: 0;
-    background-color: white;
   }
   .sk-panel-content {
     padding-top: 1.1rem;
@@ -17,7 +16,7 @@
 }
 
 #item-preview-modal {
-  > .content {
+  > .sk-modal-content {
     width: 800px;
     height: 500px;
   }
@@ -37,21 +36,17 @@
 
   .border {
     height: 100%;
-    background-color: rgba(black, 0.1);
+    background-color: var(--sn-stylekit-border-color);
     width: 1px;
     margin: 0 15px;
   }
 }
 
-// .sk-panel {
-//   background-color: white;
-// }
-
 .header .subtitle {
   font-size: 1.1rem;
 }
 
-.modal {
+.sk-modal {
   position: fixed;
   margin-left: auto;
   margin-right: auto;
@@ -62,8 +57,9 @@
   z-index: $z-index-modal;
   width: 100vw;
   height: 100vh;
-  background-color: rgba(gray, 0.3);
-  color: black;
+
+  background-color: transparent;
+  color: var(--sn-stylekit-contrast-foreground-color);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -76,40 +72,42 @@
   }
 
   &.auto-height {
-    > .content {
+    > .sk-modal-content {
       height: auto !important;
     }
   }
 
   &.large {
-    > .content {
+    > .sk-modal-content {
       width: 900px;
       height: 600px;
     }
   }
 
   &.medium {
-    > .content {
+    > .sk-modal-content {
       width: 700px;
       height: 500px;
     }
   }
 
   &.small {
-    > .content {
+    > .sk-modal-content {
       width: 700px;
       height: 344px;
     }
   }
 
-  .background {
+  .sk-modal-background {
     position: absolute;
     z-index: -1;
     width: 100%;
     height: 100%;
+    background-color: var(--sn-stylekit-contrast-background-color);
+    opacity: 0.7;
   }
 
-  > .content {
+  > .sk-modal-content {
     overflow-y: auto;
     width: auto;
     padding: 0;
diff --git a/app/assets/stylesheets/app/_notes.scss b/app/assets/stylesheets/app/_notes.scss
index e3c4a4647..c880e1057 100644
--- a/app/assets/stylesheets/app/_notes.scss
+++ b/app/assets/stylesheets/app/_notes.scss
@@ -1,6 +1,6 @@
 #notes-column, .notes {
-  border-left: 1px solid #dddddd;
-  border-right: 1px solid #dddddd;
+  border-left: 1px solid var(--sn-stylekit-border-color);
+  border-right: 1px solid var(--sn-stylekit-border-color);
 
   width: 350px;
   flex-grow: 0;
@@ -21,15 +21,11 @@
     font-size: 18px;
 
     .section-title-bar-header .title {
-      color: rgba(black, 0.40);
+      color: var(--sn-stylekit-neutral-color);
       width: calc(90% - 45px);
     }
   }
 
-  #notes-add-button {
-
-  }
-
   #notes-menu-bar {
     position: relative;
     margin-top: 14px;
@@ -42,7 +38,7 @@
     position: relative;
 
     .filter-bar {
-      background-color: $light-bg-color;
+      background-color: var(--sn-stylekit-contrast-background-color);
       border-radius: 4px;
       height: 100%;
       color: #909090;
@@ -60,9 +56,9 @@
       border-radius: 50%;
       width: 17px;
       height: 17px;
-      color: white;
       cursor: default;
-      background-color: gray;
+      background-color: var(--sn-stylekit-neutral-color);
+      color: var(--sn-stylekit-neutral-contrast-color);
       font-size: 10px;
       line-height: 17px;
       text-align: center;
@@ -73,7 +69,7 @@
       transition: background-color 0.15s linear;
 
       &:hover {
-        background-color: $blue-color;
+        background-color: var(--sn-stylekit-info-color);
       }
     }
   }
@@ -102,9 +98,8 @@
   .note {
     width: 100%;
     padding: 15px;
-    border-bottom: 1px solid $bg-color;
+    border-bottom: 1px solid var(--sn-stylekit-border-color);
     cursor: pointer;
-    background-color: white;
 
     > .name {
       font-weight: 600;
@@ -137,11 +132,11 @@
       overflow: hidden;
       text-overflow: ellipsis;
 
-      $line-height: 18px;
       .default-preview, .plain-preview {
         display: -webkit-box;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 1; /* number of lines to show */
+        $line-height: 18px;
         line-height: $line-height;        /* fallback */
         max-height: calc(#{$line-height} * 1);       /* fallback */
       }
@@ -159,11 +154,11 @@
     }
 
     &.selected {
-      background-color: $blue-color;
-      color: white;
+      background-color: var(--sn-stylekit-info-color);
+      color: var(--sn-stylekit-info-contrast-color);
 
       .pinned {
-        color: white;
+        color: var(--sn-stylekit-info-contrast-color);
       }
     }
 
diff --git a/app/assets/stylesheets/app/_stylekit-sub.scss b/app/assets/stylesheets/app/_stylekit-sub.scss
index 307b2beaa..77a666bc0 100644
--- a/app/assets/stylesheets/app/_stylekit-sub.scss
+++ b/app/assets/stylesheets/app/_stylekit-sub.scss
@@ -12,8 +12,8 @@
     }
 
     .bordered-row {
-      border-bottom: 1px solid rgba(black, 0.1);
-      border-top: 1px solid rgba(black, 0.1);
+      border-bottom: 1px solid var(--sn-stylekit-border-color);
+      border-top: 1px solid var(--sn-stylekit-border-color);
     }
   }
 
diff --git a/app/assets/stylesheets/app/_tags.scss b/app/assets/stylesheets/app/_tags.scss
index 45a849be6..c23d15108 100644
--- a/app/assets/stylesheets/app/_tags.scss
+++ b/app/assets/stylesheets/app/_tags.scss
@@ -6,27 +6,18 @@
   -webkit-user-select: none;
 
   &, #tags-content {
-    background-color: #f6f6f6;
+    background-color: var(--sn-stylekit-secondary-background-color);
     display: flex;
     flex-direction: column;
   }
 
   #tags-title-bar {
-    color: black;
+    color: var(--sn-stylekit-secondary-foreground-color);
     padding-top: 14px;
     padding-bottom: 16px;
     padding-left: 12px;
     padding-right: 12px;
     font-size: 12px;
-    color: rgba(black, 0.8);
-  }
-
-  #tag-add-button {
-    background-color: #d7d7d7;
-
-    &:hover {
-      background-color: rgba(#d7d7d7, 0.8);
-    }
   }
 
   .scrollable {
@@ -62,7 +53,7 @@
         background-color: transparent;
         font-weight: 600;
         float: left;
-        color: $main-text-color;
+        color: var(--sn-stylekit-secondary-foreground-color);
         border: none;
         cursor: pointer;
         text-overflow: ellipsis;
@@ -76,6 +67,7 @@
         right: 17px;
         padding-top: 1px;
         font-weight: bold;
+        color: var(--sn-stylekit-neutral-color);
       }
     }
 
@@ -97,32 +89,17 @@
       }
     }
 
-    $tags-selected-color: #dbdbdb;
-
     &.selected {
-      background-color: $tags-selected-color;
-      color: $selected-text-color;
       > .title {
-        color: $selected-text-color;
         cursor: text;
       }
     }
 
-    /* When a note is dragged over tag */
-    &.over {
-      background-color: $tags-selected-color;
-      color: $selected-text-color;
-      border: 2px dashed white;
+    &:hover:not(.selected), &.selected  {
+      background-color: var(--sn-stylekit-secondary-contrast-background-color);
+      color: var(--sn-stylekit-secondary-contrast-foreground-color);
       > .title {
-        color: $selected-text-color;
-      }
-    }
-
-    &:hover:not(.selected) {
-      background-color: $tags-selected-color;
-      color: $selected-text-color;
-      > .title {
-        color: $selected-text-color;
+        color: var(--sn-stylekit-secondary-contrast-foreground-color);
       }
     }
   }
diff --git a/app/assets/templates/directives/conflict-resolution-modal.html.haml b/app/assets/templates/directives/conflict-resolution-modal.html.haml
index 032f0eca9..c59b7ea03 100644
--- a/app/assets/templates/directives/conflict-resolution-modal.html.haml
+++ b/app/assets/templates/directives/conflict-resolution-modal.html.haml
@@ -1,6 +1,7 @@
-.modal.large#conflict-resolution-modal
-  .content
-    .sn-component
+.sn-component
+  .sk-modal.large#conflict-resolution-modal
+    .sk-modal-background
+    .sk-modal-content
       .sk-panel
         .sk-panel-header
           %h1.sk-panel-header-title Conflicted items — choose which version to keep
@@ -17,7 +18,7 @@
               {{contentType}}
             %p You may wish to look at the "created_at" and "updated_at" fields of the items to gain better context in deciding which to keep.
           #items
-            .sk-panel.static#item1.item.border-color
+            .sk-panel.static#item1.item
               %p.normal{"style" => "white-space: pre-wrap; font-size: 16px;"} {{item1Content}}
 
             .border
diff --git a/app/assets/templates/directives/input-modal.html.haml b/app/assets/templates/directives/input-modal.html.haml
index 3fa0cf810..716e7a4eb 100644
--- a/app/assets/templates/directives/input-modal.html.haml
+++ b/app/assets/templates/directives/input-modal.html.haml
@@ -1,18 +1,20 @@
-.modal.small.auto-height
-  .content
-    .sn-component
-      .sk-panel
-        .sk-panel-header
-          %h1.sk-panel-header-title {{title}}
-          %a.sk-a.info.close-button{"ng-click" => "dismiss()"} Close
-        .sk-panel-content
-          .sk-panel-section
-            %p.sk-panel-row {{message}}
-            .sk-panel-row
-              .sk-panel-column.stretch
-                %form{"ng-submit" => "submit()"}
-                  %input.sk-input{:type => '{{type}}', "ng-model" => "formData.input", "placeholder" => "{{placeholder}}", "sn-autofocus" => "true", "should-focus" => "true"}
+.sn-component
+  .sk-modal.small.auto-height
+    .sk-modal-background
+    .sk-modal-content
+      .sn-component
+        .sk-panel
+          .sk-panel-header
+            %h1.sk-panel-header-title {{title}}
+            %a.sk-a.info.close-button{"ng-click" => "dismiss()"} Close
+          .sk-panel-content
+            .sk-panel-section
+              %p.sk-panel-row {{message}}
+              .sk-panel-row
+                .sk-panel-column.stretch
+                  %form{"ng-submit" => "submit()"}
+                    %input.sk-input{:type => '{{type}}', "ng-model" => "formData.input", "placeholder" => "{{placeholder}}", "sn-autofocus" => "true", "should-focus" => "true"}
 
-        .sk-panel-footer
-          %a.sk-a.info.right{"ng-click" => "submit()"}
-            Submit
+          .sk-panel-footer
+            %a.sk-a.info.right{"ng-click" => "submit()"}
+              Submit
diff --git a/app/assets/templates/directives/password-wizard.html.haml b/app/assets/templates/directives/password-wizard.html.haml
index 7922211af..70a856aa2 100644
--- a/app/assets/templates/directives/password-wizard.html.haml
+++ b/app/assets/templates/directives/password-wizard.html.haml
@@ -1,103 +1,105 @@
-#password-wizard.modal.small.auto-height
-  .content
-    .sn-component
-      .sk-panel
-        .sk-panel-header
-          .sk-panel-header-title {{title}}
-          %a.sk-a.info.close-button{"ng-click" => "dismiss()"} Close
-        .sk-panel-content
+.sn-component
+  #password-wizard.sk-modal.small.auto-height
+    .sk-modal-background
+    .sk-modal-content
+      .sn-component
+        .sk-panel
+          .sk-panel-header
+            .sk-panel-header-title {{title}}
+            %a.sk-a.info.close-button{"ng-click" => "dismiss()"} Close
+          .sk-panel-content
 
-          %div{"ng-if" => "step == 0"}
-            %div{"ng-if" => "changePassword"}
-              %p.sk-p
-                Changing your password involves changing your encryption key, which requires your data to be re-encrypted and synced.
-                If you have many items, syncing your data can take several minutes.
-              %p.sk-p
-                %strong You must keep the application window open during this process.
-            %div{"ng-if" => "securityUpdate"}
-              %p.sk-p
-                A new update is available for your account. Updates address improvements and enhancements to our security specification.
-                This process will guide you through the update, and perform the steps necessary with your supervision.
-              %p.sk-p
-                For more information about security updates, please visit
-                %a.sk-a.info{"href" => "https://standardnotes.org/help/security", "target" => "_blank"} standardnotes.org/help/security.
+            %div{"ng-if" => "step == 0"}
+              %div{"ng-if" => "changePassword"}
+                %p.sk-p
+                  Changing your password involves changing your encryption key, which requires your data to be re-encrypted and synced.
+                  If you have many items, syncing your data can take several minutes.
+                %p.sk-p
+                  %strong You must keep the application window open during this process.
+              %div{"ng-if" => "securityUpdate"}
+                %p.sk-p
+                  A new update is available for your account. Updates address improvements and enhancements to our security specification.
+                  This process will guide you through the update, and perform the steps necessary with your supervision.
+                %p.sk-p
+                  For more information about security updates, please visit
+                  %a.sk-a.info{"href" => "https://standardnotes.org/help/security", "target" => "_blank"} standardnotes.org/help/security.
 
-            %p.sk-panel-row.sk-p
-              .info Press Continue to proceed.
-
-          .sk-panel-section{"ng-if" => "step > 0"}
-
-            .sk-panel-section-title Step {{step}} — {{titleForStep(step)}}
-
-            %div{"ng-if" => "step == 1"}
               %p.sk-panel-row.sk-p
-                As a result of this process, the entirety of your data will be re-encrypted and synced to your account. This is a generally safe process,
-                but unforeseen factors like poor network connectivity or a sudden shutdown of your computer may cause this process to fail.
-                It's best to be on the safe side before large operations such as this one.
-              .sk-panel-row
-              .sk-panel-row
-                .sk-button-group
-                  .sk-button.info{"ng-click" => "downloadBackup(true)"}
-                    .sk-label Download Encrypted Backup
-                  .sk-button.info{"ng-click" => "downloadBackup(false)"}
-                    .sk-label Download Decrypted Backup
+                .info Press Continue to proceed.
 
-            %div{"ng-if" => "step == 2"}
-              %p.sk-p.sk-panel-row
-                As a result of this process, your encryption keys will change.
-                Any device on which you use Standard Notes will need to end its session. After this process completes, you will be asked to sign back in.
+            .sk-panel-section{"ng-if" => "step > 0"}
 
-              %p.sk-p.bold.sk-panel-row.info-i Please sign out of all applications (excluding this one), including:
-              %ul
-                %li Desktop
-                %li Web (Chrome, Firefox, Safari)
-                %li Mobile (iOS and Android)
-              %p.sk-p.sk-panel-row
-                If you do not currently have access to a device you're signed in on, you may proceed,
-                but must make signing out and back in the first step upon gaining access to that device.
-              %p.sk-p.sk-panel-row Press Continue only when you have completed signing out of all your devices.
+              .sk-panel-section-title Step {{step}} — {{titleForStep(step)}}
+
+              %div{"ng-if" => "step == 1"}
+                %p.sk-panel-row.sk-p
+                  As a result of this process, the entirety of your data will be re-encrypted and synced to your account. This is a generally safe process,
+                  but unforeseen factors like poor network connectivity or a sudden shutdown of your computer may cause this process to fail.
+                  It's best to be on the safe side before large operations such as this one.
+                .sk-panel-row
+                .sk-panel-row
+                  .sk-button-group
+                    .sk-button.info{"ng-click" => "downloadBackup(true)"}
+                      .sk-label Download Encrypted Backup
+                    .sk-button.info{"ng-click" => "downloadBackup(false)"}
+                      .sk-label Download Decrypted Backup
+
+              %div{"ng-if" => "step == 2"}
+                %p.sk-p.sk-panel-row
+                  As a result of this process, your encryption keys will change.
+                  Any device on which you use Standard Notes will need to end its session. After this process completes, you will be asked to sign back in.
+
+                %p.sk-p.bold.sk-panel-row.info-i Please sign out of all applications (excluding this one), including:
+                %ul
+                  %li Desktop
+                  %li Web (Chrome, Firefox, Safari)
+                  %li Mobile (iOS and Android)
+                %p.sk-p.sk-panel-row
+                  If you do not currently have access to a device you're signed in on, you may proceed,
+                  but must make signing out and back in the first step upon gaining access to that device.
+                %p.sk-p.sk-panel-row Press Continue only when you have completed signing out of all your devices.
 
 
-            %div{"ng-if" => "step == 3"}
-              %div{"ng-if" => "changePassword"}
-              %div{"ng-if" => "securityUpdate"}
-                %p.sk-panel-row Enter your current password. We'll run this through our encryption scheme to generate strong new encryption keys.
-              .sk-panel-row
-              .sk-panel-row
-                .sk-panel-column.stretch
-                  %form.sk-panel-form
-                    %input.sk-input{:type => 'password', "ng-model" => "formData.currentPassword", "placeholder" => "Current Password", "sn-autofocus" => "true", "should-focus" => "true"}
-                    %input.sk-input{"ng-if" => "changePassword", :type => 'password', "ng-model" => "formData.newPassword", "placeholder" => "New Password"}
-                    %input.sk-input{"ng-if" => "changePassword", :type => 'password', "ng-model" => "formData.newPasswordConfirmation", "placeholder" => "Confirm New Password"}
+              %div{"ng-if" => "step == 3"}
+                %div{"ng-if" => "changePassword"}
+                %div{"ng-if" => "securityUpdate"}
+                  %p.sk-panel-row Enter your current password. We'll run this through our encryption scheme to generate strong new encryption keys.
+                .sk-panel-row
+                .sk-panel-row
+                  .sk-panel-column.stretch
+                    %form.sk-panel-form
+                      %input.sk-input{:type => 'password', "ng-model" => "formData.currentPassword", "placeholder" => "Current Password", "sn-autofocus" => "true", "should-focus" => "true"}
+                      %input.sk-input{"ng-if" => "changePassword", :type => 'password', "ng-model" => "formData.newPassword", "placeholder" => "New Password"}
+                      %input.sk-input{"ng-if" => "changePassword", :type => 'password', "ng-model" => "formData.newPasswordConfirmation", "placeholder" => "Confirm New Password"}
 
-            %div{"ng-if" => "step == 4"}
-              %p.sk-panel-row
-                Your data is being re-encrypted with your new keys and synced to your account.
-              %p.sk-panel-row.danger
-                Do not close this window until this process completes.
-
-              .sk-panel-row
-                .sk-panel-column
-                  .sk-spinner.small.inline.info.mr-5{"ng-if" => "formData.processing"}
-                  .inline.bold{"ng-class" => "{'info' : !formData.statusError, 'error' : formData.statusError}"}
-                    {{formData.status}}
-                .sk-panel-column{"delay-hide" => "true", "show" => "syncStatus.syncOpInProgress || syncStatus.needsMoreSync", "delay" => "1000"}
-                  %p.info
-                    Syncing {{syncStatus.current}}/{{syncStatus.total}}
-
-            %div{"ng-if" => "step == 5"}
-              %div{"ng-if" => "changePassword"}
-                %p.sk-panel-row Your password has been successfully changed.
-              %div{"ng-if" => "securityUpdate"}
+              %div{"ng-if" => "step == 4"}
                 %p.sk-panel-row
-                  The security update has been successfully applied to your account.
-              %p.sk-panel-row
-                %strong Please ensure you are running the latest version of Standard Notes on all platforms to ensure maximum compatibility.
+                  Your data is being re-encrypted with your new keys and synced to your account.
+                %p.sk-panel-row.danger
+                  Do not close this window until this process completes.
 
-              %p.sk-panel-row You may now sign back in on all your devices and close this window.
+                .sk-panel-row
+                  .sk-panel-column
+                    .sk-spinner.small.inline.info.mr-5{"ng-if" => "formData.processing"}
+                    .inline.bold{"ng-class" => "{'info' : !formData.statusError, 'error' : formData.statusError}"}
+                      {{formData.status}}
+                  .sk-panel-column{"delay-hide" => "true", "show" => "syncStatus.syncOpInProgress || syncStatus.needsMoreSync", "delay" => "1000"}
+                    %p.info
+                      Syncing {{syncStatus.current}}/{{syncStatus.total}}
 
-        .sk-panel-footer
-          .empty
-          %a.sk-a.info.right{"ng-click" => "continue()", "ng-disabled" => "lockContinue", "ng-class" => "{'disabled' : lockContinue}"}
-            .sk-spinner.small.inline.info.mr-5{"ng-if" => "showSpinner"}
-            {{continueTitle}}
+              %div{"ng-if" => "step == 5"}
+                %div{"ng-if" => "changePassword"}
+                  %p.sk-panel-row Your password has been successfully changed.
+                %div{"ng-if" => "securityUpdate"}
+                  %p.sk-panel-row
+                    The security update has been successfully applied to your account.
+                %p.sk-panel-row
+                  %strong Please ensure you are running the latest version of Standard Notes on all platforms to ensure maximum compatibility.
+
+                %p.sk-panel-row You may now sign back in on all your devices and close this window.
+
+          .sk-panel-footer
+            .empty
+            %a.sk-a.info.right{"ng-click" => "continue()", "ng-disabled" => "lockContinue", "ng-class" => "{'disabled' : lockContinue}"}
+              .sk-spinner.small.inline.info.mr-5{"ng-if" => "showSpinner"}
+              {{continueTitle}}
diff --git a/app/assets/templates/directives/revision-preview-modal.html.haml b/app/assets/templates/directives/revision-preview-modal.html.haml
index 4d144d6bd..d9b8e3b87 100644
--- a/app/assets/templates/directives/revision-preview-modal.html.haml
+++ b/app/assets/templates/directives/revision-preview-modal.html.haml
@@ -1,13 +1,15 @@
-.modal.medium#item-preview-modal
-  .content
-    .sn-component
-      .sk-panel
-        .sk-panel-header
-          .sk-panel-header-title Preview
-          .sk-horizontal-group
-            %a.sk-a.info.close-button{"ng-click" => "restore(false)"} Restore
-            %a.sk-a.info.close-button{"ng-click" => "restore(true)"} Restore as copy
-            %a.sk-a.info.close-button{"ng-click" => "dismiss(); $event.stopPropagation()"} Close
-        .sk-panel-content.selectable
-          .sk-h2 {{content.title}}
-          %p.normal.sk-p{"style" => "white-space: pre-wrap; font-size: 16px;"} {{content.text}}
+.sn-component
+  .sk-modal.medium#item-preview-modal
+    .sk-modal-background
+    .sk-modal-content
+      .sn-component
+        .sk-panel
+          .sk-panel-header
+            .sk-panel-header-title Preview
+            .sk-horizontal-group
+              %a.sk-a.info.close-button{"ng-click" => "restore(false)"} Restore
+              %a.sk-a.info.close-button{"ng-click" => "restore(true)"} Restore as copy
+              %a.sk-a.info.close-button{"ng-click" => "dismiss(); $event.stopPropagation()"} Close
+          .sk-panel-content.selectable
+            .sk-h2 {{content.title}}
+            %p.normal.sk-p{"style" => "white-space: pre-wrap; font-size: 16px;"} {{content.text}}
diff --git a/app/assets/templates/editor.html.haml b/app/assets/templates/editor.html.haml
index c0b323b67..d33f6f985 100644
--- a/app/assets/templates/editor.html.haml
+++ b/app/assets/templates/editor.html.haml
@@ -13,7 +13,7 @@
                 "ng-change" => "ctrl.nameChanged()", "ng-focus" => "ctrl.onNameFocus()", "ng-blur" => "ctrl.onNameBlur()",
                 "select-on-click" => "true", "ng-disabled" => "ctrl.note.locked"}
 
-    #save-status{"ng-class" => "{'error bold': ctrl.syncTakingTooLong}", "ng-bind-html" => "ctrl.noteStatus"}
+    #save-status{"ng-class" => "{'warning bold': ctrl.syncTakingTooLong}", "ng-bind-html" => "ctrl.noteStatus"}
 
     .editor-tags
       #note-tags-component-container{"ng-if" => "ctrl.tagsComponent"}
@@ -80,5 +80,5 @@
 
   #editor-pane-component-stack
     .sn-component
-      %component-view.component-view.component-stack-item.border-color{"ng-repeat" => "component in ctrl.componentStack",
+      %component-view.component-view.component-stack-item{"ng-repeat" => "component in ctrl.componentStack",
        "ng-if" => "component.active", "ng-show" => "!component.hidden", "manual-dealloc" => "true", "component" => "component"}
diff --git a/app/assets/templates/notes.html.haml b/app/assets/templates/notes.html.haml
index 14766fe20..e566e45ea 100644
--- a/app/assets/templates/notes.html.haml
+++ b/app/assets/templates/notes.html.haml
@@ -1,10 +1,11 @@
-.section.notes#notes-column{"aria-label" => "Notes"}
+.sn-component.section.notes#notes-column{"aria-label" => "Notes"}
   .content
     .section-title-bar#notes-title-bar
       .padded
         .section-title-bar-header
           .title {{ctrl.panelTitle()}}
-          .add-button#notes-add-button{"ng-click" => "ctrl.createNewNote()", "title" => "Create a new note in the selected tag"} +
+          .sk-button.contrast.wide{"ng-click" => "ctrl.createNewNote()", "title" => "Create a new note in the selected tag"}
+            .sk-label +
         .filter-section{"role" => "search"}
           %input.filter-bar#search-bar.mousetrap{"select-on-click" => "true", "ng-model" => "ctrl.noteFilter.text", "placeholder" => "Search",
           "ng-change" => "ctrl.filterTextChanged()", "lowercase" => "true", "ng-blur" => "ctrl.onFilterEnter()", "ng-keyup" => "$event.keyCode == 13 && ctrl.onFilterEnter();",
diff --git a/app/assets/templates/tags.html.haml b/app/assets/templates/tags.html.haml
index 66c401a33..1df7a327f 100644
--- a/app/assets/templates/tags.html.haml
+++ b/app/assets/templates/tags.html.haml
@@ -1,4 +1,4 @@
-.section.tags#tags-column{"aria-label" => "Tags"}
+.sn-component.section.tags#tags-column{"aria-label" => "Tags"}
 
   .component-view-container{"ng-if" => "ctrl.component.active"}
     %component-view.component-view{"component" => "ctrl.component"}
@@ -7,7 +7,8 @@
     #tags-title-bar.section-title-bar
       .section-title-bar-header
         .title Tags
-        .add-button#tag-add-button{"ng-click" => "ctrl.clickedAddNewTag()", "title" => "Create a new tag"} +
+        .sk-button.sk-secondary-contrast.wide{"ng-click" => "ctrl.clickedAddNewTag()", "title" => "Create a new tag"}
+          .sk-label +
 
     .scrollable
       .infinite-scroll