diff --git a/docs/pages/styling/index.vue b/docs/pages/styling/index.vue
index 919d5ad54..6f36797aa 100644
--- a/docs/pages/styling/index.vue
+++ b/docs/pages/styling/index.vue
@@ -38,7 +38,7 @@
         @import '~kolibri-design-system/lib/styles/definitions'
 
         .box {
-          @extend %dropshadow-4dp;
+          @extend %dropshadow-2dp;
 
           border-radius: $radius;
           text-align: center;
@@ -105,7 +105,7 @@
         @import '~kolibri-design-system/lib/styles/definitions'
 
         .more-shadow {
-          @extend %dropshadow-12dp;
+          @extend %dropshadow-6dp;
         }
       </DocsShowCode>
       <!-- eslint-enable -->
@@ -155,7 +155,7 @@
         @import '~kolibri-design-system/lib/styles/definitions'
 
         .ease:hover {
-          @extend %dropshadow-8dp;
+          @extend %dropshadow-6dp;
           @extend %md-standard-func;
 
           cursor: pointer;
@@ -181,9 +181,10 @@
 <style lang="scss" scoped>
 
   @import '~~/lib/styles/definitions';
+  
 
   .box {
-    @extend %dropshadow-4dp;
+    @extend %dropshadow-2dp;
 
     display: inline-block;
     min-width: 150px;
@@ -195,17 +196,17 @@
   }
 
   .more-shadow {
-    @extend %dropshadow-12dp;
+    @extend %dropshadow-6dp;
   }
 
   .immediate:hover {
-    @extend %dropshadow-8dp;
+    @extend %dropshadow-6dp;
 
     cursor: pointer;
   }
 
   .ease:hover {
-    @extend %dropshadow-8dp;
+    @extend %dropshadow-6dp;
     @extend %md-standard-func;
 
     cursor: pointer;
diff --git a/lib/KBreadcrumbs.vue b/lib/KBreadcrumbs.vue
index 72c746152..161b690fa 100644
--- a/lib/KBreadcrumbs.vue
+++ b/lib/KBreadcrumbs.vue
@@ -283,7 +283,7 @@
 
 
 <style lang="scss" scoped>
-
+  
   @import './styles/definitions';
   $crumb-max-width: 300px;
 
@@ -318,7 +318,7 @@
   }
 
   .breadcrumbs-dropdown {
-    @extend %dropshadow-8dp;
+    @extend %dropshadow-2dp;
 
     position: absolute;
     z-index: 8;
diff --git a/lib/KCard/BaseCard.vue b/lib/KCard/BaseCard.vue
index 15b6a86bc..517ddf3d4 100644
--- a/lib/KCard/BaseCard.vue
+++ b/lib/KCard/BaseCard.vue
@@ -176,7 +176,7 @@
 
 
 <style lang="scss" scoped>
-
+  
   @import '../styles/definitions';
 
   .base-card {
diff --git a/lib/KModal.vue b/lib/KModal.vue
index 1112d86e7..3ac85f79c 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -374,7 +374,7 @@
 
 
 <style lang="scss" scoped>
-
+  
   @import './styles/definitions';
 
   .modal-overlay {
@@ -391,7 +391,7 @@
 
   // TODO: margins for stacked buttons.
   .modal {
-    @extend %dropshadow-16dp;
+    @extend %dropshadow-6dp;
 
     position: absolute;
     top: 50%;
diff --git a/lib/KPageContainer.vue b/lib/KPageContainer.vue
index ffb396515..525f7d0f8 100644
--- a/lib/KPageContainer.vue
+++ b/lib/KPageContainer.vue
@@ -55,7 +55,7 @@
 
 
 <style lang="scss" scoped>
-
+  
   @import './styles/definitions';
 
   .page-container {
diff --git a/lib/KSelect/index.vue b/lib/KSelect/index.vue
index c2263f4e7..433fcde3f 100644
--- a/lib/KSelect/index.vue
+++ b/lib/KSelect/index.vue
@@ -1065,6 +1065,7 @@
   }
 
   .ui-select-dropdown {
+    @extend %dropshadow-2dp;
     position: absolute;
     z-index: $z-index-dropdown;
     display: block;
@@ -1075,7 +1076,7 @@
     margin-bottom: rem-calc(8px);
     list-style-type: none;
     outline: none;
-    box-shadow: 1px 2px 8px $md-grey-600;
+    //box-shadow: 1px 2px 8px $md-grey-600;
   }
 
   .ui-select-options {
diff --git a/lib/KSwitch.vue b/lib/KSwitch.vue
index b26052fba..7099e26ed 100644
--- a/lib/KSwitch.vue
+++ b/lib/KSwitch.vue
@@ -185,7 +185,7 @@
 
 
 <style lang="scss">
-
+   @import './styles/definitions';
   $k-switch-height: 32px !default;
   $k-switch-thumb-size: 20px !default;
   $k-switch-thumb-color: #f5f5f5 !default;
@@ -254,13 +254,14 @@
   }
 
   .k-switch-thumb {
+    @extend %dropshadow-1dp;
     position: absolute;
     z-index: 1;
     width: $k-switch-thumb-size;
     height: $k-switch-thumb-size;
     background-color: $k-switch-thumb-color;
     border-radius: 50%;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+    //box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
     transition-timing-function: ease;
     transition-duration: 0.2s;
     transition-property: background-color, transform;
diff --git a/lib/keen/UiAutocomplete.vue b/lib/keen/UiAutocomplete.vue
index 8dc23eab9..34ba923ad 100644
--- a/lib/keen/UiAutocomplete.vue
+++ b/lib/keen/UiAutocomplete.vue
@@ -438,7 +438,7 @@
 </script>
 
 <style lang="scss">
-
+  @import '../styles/definitions';
   @import './styles/imports';
 
   .ui-autocomplete {
@@ -600,6 +600,7 @@
   }
 
   .ui-autocomplete__suggestions {
+    @extend %dropshadow-1dp;
     position: absolute;
     z-index: $z-index-dropdown;
     display: block;
@@ -610,7 +611,7 @@
     color: $primary-text-color;
     list-style-type: none;
     background-color: white;
-    box-shadow: 1px 2px 8px $md-grey-600;
+    //box-shadow: 1px 2px 8px $md-grey-600;
   }
 
   .ui-autocomplete__feedback {
diff --git a/lib/keen/UiButton.vue b/lib/keen/UiButton.vue
index 394ae3348..8abc1a7ab 100644
--- a/lib/keen/UiButton.vue
+++ b/lib/keen/UiButton.vue
@@ -211,7 +211,7 @@
 </script>
 
 <style lang="scss">
-
+  @import '../styles/definitions';
   @import './styles/imports';
 
   .ui-button {
@@ -261,12 +261,14 @@
     }
 
     &.is-raised {
-      box-shadow: 0 0 2px rgba(black, 0.12), 0 2px 2px rgba(black, 0.2);
+      @extend %dropshadow-2dp;
+      //box-shadow: 0 0 2px rgba(black, 0.12), 0 2px 2px rgba(black, 0.2);
       transition: box-shadow 0.3s ease;
 
       &.has-focus-ring:focus,
       body[modality='keyboard'] &:focus {
-        box-shadow: 0 0 5px rgba(black, 0.22), 0 3px 6px rgba(black, 0.3);
+        @extend %dropshadow-2dp;
+        //box-shadow: 0 0 5px rgba(black, 0.22), 0 3px 6px rgba(black, 0.3);
       }
     }
 
diff --git a/lib/keen/UiMenu.vue b/lib/keen/UiMenu.vue
index 7da1beb51..7789af816 100644
--- a/lib/keen/UiMenu.vue
+++ b/lib/keen/UiMenu.vue
@@ -127,7 +127,7 @@
 <style lang="scss">
 
   /* stylelint-disable */
-
+  @import '../styles/definitions';
   @import './styles/imports';
 
   .ui-menu {
@@ -145,9 +145,11 @@
     outline: none;
 
     &.is-raised {
+      @extend %dropshadow-2dp;
       border: none;
-      box-shadow: 0 2px 4px -1px rgba(black, 0.2), 0 4px 5px 0 rgba(black, 0.14),
-        0 1px 10px 0 rgba(black, 0.12);
+
+     // box-shadow: 0 2px 4px -1px rgba(black, 0.2), 0 4px 5px 0 rgba(black, 0.14),
+       // 0 1px 10px 0 rgba(black, 0.12);
     }
 
     &.has-secondary-text {
diff --git a/lib/keen/UiPopover.vue b/lib/keen/UiPopover.vue
index da78e6a98..d837a54b9 100644
--- a/lib/keen/UiPopover.vue
+++ b/lib/keen/UiPopover.vue
@@ -350,14 +350,15 @@
 <style lang="scss">
 
   /* stylelint-disable */
-
+  @import '../styles/definitions';
   @import './styles/imports';
   //@import './styles/tippy/tippy';
 
   .ui-popover {
     &.is-raised {
-      box-shadow: 0 2px 4px -1px rgba(black, 0.2), 0 4px 5px 0 rgba(black, 0.14),
-        0 1px 10px 0 rgba(black, 0.12);
+      @extend %dropshadow-2dp;
+      //box-shadow: 0 2px 4px -1px rgba(black, 0.2), 0 4px 5px 0 rgba(black, 0.14),
+        //0 1px 10px 0 rgba(black, 0.12);
     }
 
     .ui-menu {
diff --git a/lib/keen/UiSnackbar.vue b/lib/keen/UiSnackbar.vue
index 535b1354a..b48594fce 100644
--- a/lib/keen/UiSnackbar.vue
+++ b/lib/keen/UiSnackbar.vue
@@ -84,7 +84,7 @@
 <style lang="scss" scoped>
 
   /* stylelint-disable */
-
+  
   @import '../styles/definitions';
   @import './styles/imports';
 
@@ -92,6 +92,7 @@
   $ui-snackbar-font-size: rem(14px) !default;
 
   .ui-snackbar {
+    @extend  %dropshadow-2dp;
     @include font-family-noto;
 
     display: inline-flex;
@@ -102,7 +103,7 @@
     padding: rem(14px 24px);
     background-color: $ui-snackbar-background-color;
     border-radius: $ui-default-border-radius;
-    box-shadow: 0 1px 3px rgba(black, 0.12), 0 1px 2px rgba(black, 0.24);
+    //box-shadow: 0 1px 3px rgba(black, 0.12), 0 1px 2px rgba(black, 0.24);
   }
 
   .ui-snackbar-message {
diff --git a/lib/keen/UiToolbar.vue b/lib/keen/UiToolbar.vue
index 7b2d5cd0f..5d6a94679 100644
--- a/lib/keen/UiToolbar.vue
+++ b/lib/keen/UiToolbar.vue
@@ -125,7 +125,7 @@
 </script>
 
 <style lang="scss">
-
+  @import '../styles/definitions';
   @import './styles/imports';
 
   $ui-toolbar-font-size: rem(18px) !default;
@@ -144,7 +144,8 @@
     font-size: $ui-toolbar-font-size;
 
     &.is-raised {
-      box-shadow: 0 0 2px rgba(black, 0.12), 0 2px 2px rgba(black, 0.2);
+      @extend %dropshadow-2dp;
+      // box-shadow: 0 0 2px rgba(black, 0.12), 0 2px 2px rgba(black, 0.2);
     }
 
     &:not(.is-raised).ui-toolbar--type-default {