diff --git a/scss/_modal.scss b/scss/_modal.scss
index c61fb56d..efff1238 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -1,47 +1,27 @@
-//
 // Modals
-// Material Design element Dialogs
-// --------------------------------------------------
+// https://www.google.com/design/spec/components/dialogs.html#dialogs-specs
+
 .modal-content {
   @include shadow-z-5();
   border: 0;
   border-radius: $border-radius;
-  // Modal header
-  // Top section of the modal w/ title and dismiss
+
   .modal-header {
     padding: 24px 24px 0;
     border-bottom: 0;
   }
-  // Modal body
-  // Where all modal content resides (sibling of .modal-header and .modal-footer)
   .modal-body {
-    padding: 24px 24px 16px;
+    padding: 20px 24px 24px;
   }
-  // Footer (for actions)
   .modal-footer {
-    padding: 7px;
+    padding: 8px 8px 8px 24px;
     border-top: 0;
-    button {
-      width: auto;
-      padding-right: 16px;
-      padding-left: 16px;
+    .btn {
       margin: 0;
-      &.pull-left {
-        position: relative;
-        left: -5px;
-        padding-right: 5px;
-        padding-left: 5px;
-      }
     }
-    button + button {
-      margin-bottom: 16px;
-    }
-  }
-  .modal-body + .modal-footer {
-    padding-top: 0;
-  }
-}
 
-.modal-backdrop {
-  background: rgba($black, 0.3);
+    .btn + .btn {
+      margin-left: 8px;
+    }
+  }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 10031e02..4e7d1fe2 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -28,6 +28,7 @@ $enable-flex: true;
 @import "variables/bootstrap/nav";
 @import "variables/bootstrap/state";
 @import "variables/bootstrap/type";
+@import "variables/bootstrap/modals";
 
 
 // import their vars after customization for use below
diff --git a/scss/variables/bootstrap/_modals.scss b/scss/variables/bootstrap/_modals.scss
new file mode 100644
index 00000000..fb2bf5bb
--- /dev/null
+++ b/scss/variables/bootstrap/_modals.scss
@@ -0,0 +1,19 @@
+// Modals
+
+// Padding applied to the modal body
+//$modal-inner-padding:         15px !default;
+//
+//$modal-title-padding:         15px !default;
+//$modal-title-line-height:     $line-height !default;
+//
+//$modal-content-bg:                             #fff !default;
+//$modal-content-border-color:                   rgba(0,0,0,.2) !default;
+//
+//$modal-backdrop-bg:           #000 !default;
+$modal-backdrop-opacity:      .26 !default; // .5
+//$modal-header-border-color:   #e5e5e5 !default;
+//$modal-footer-border-color:   $modal-header-border-color !default;
+//
+//$modal-lg:                    900px !default;
+//$modal-md:                    600px !default;
+//$modal-sm:                    300px !default;