Use em for controls

sass/utilities/controls.sass

@@ -28,14 +28,15 @@ $control-icon-active: $grey-light !default
   background-color: $control-background
   border: 1px solid $control-border
   border-radius: $control-radius
+  box-shadow: none
   color: $control
   display: inline-flex
   font-size: $control-size
-  height: 32px
+  height: 2.5em
   justify-content: flex-start
-  line-height: 24px
-  padding-left: 8px
-  padding-right: 8px
+  line-height: 1.5
+  padding-left: 0.75em
+  padding-right: 0.75em
   position: relative
   vertical-align: top
   &:hover
@@ -56,20 +57,8 @@ $control-icon-active: $grey-light !default
 
 =control-small
   border-radius: $control-radius-small
-  font-size: 11px
-  height: 24px
-  line-height: 16px
-  padding-left: 6px
-  padding-right: 6px
+  font-size: $size-small
 =control-medium
-  font-size: 18px
-  height: 40px
-  line-height: 32px
-  padding-left: 10px
-  padding-right: 10px
+  font-size: $size-medium
 =control-large
-  font-size: 24px
-  height: 48px
-  line-height: 40px
-  padding-left: 12px
-  padding-right: 12px
+  font-size: $size-large

sass/utilities/mixins.sass

@@ -12,7 +12,7 @@
 
 =block
   &:not(:last-child)
-    margin-bottom: 20px
+    margin-bottom: 1.5rem
 
 =clearfix
   &:after

sass/utilities/variables.sass

@@ -29,14 +29,14 @@ $red:          hsl(348, 100%, 61%) !default
 $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
 $family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default
 
-$size-1: 48px !default
-$size-2: 40px !default
-$size-3: 28px !default
-$size-4: 24px !default
-$size-5: 18px !default
-$size-6: 14px !default
+$size-1: 3.5rem !default
+$size-2: 2.5rem !default
+$size-3: 1.75rem !default
+$size-4: 1.5rem !default
+$size-5: 1.25rem !default
+$size-6: 16px !default
 
-$size-7: 11px !default
+$size-7: 0.875rem !default
 
 $weight-normal: 400 !default
 $weight-bold: 700 !default
@@ -70,12 +70,10 @@ $dark: $grey-darker !default
 
 // Invert colors
 $primary-invert: findColorInvert($primary) !default
-
 $info-invert: findColorInvert($info) !default
 $success-invert: findColorInvert($success) !default
 $warning-invert: findColorInvert($warning) !default
 $danger-invert: findColorInvert($danger) !default
-
 $light-invert: $dark !default
 $dark-invert: $light !default
 
@@ -119,8 +117,7 @@ $family-code: $family-monospace !default
 $size-small: $size-7 !default
 $size-normal: $size-6 !default
 $size-medium: $size-5 !default
-$size-large: $size-3 !default
-$size-huge: $size-1 !default
+$size-large: $size-4 !default
 
 ////////////////////////////////////////////////
 ////////////////////////////////////////////////