Use em for controls

sass/elements/box.sass

@@ -4,7 +4,7 @@
   border-radius: $radius-large
   box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
   display: block
-  padding: 20px
+  padding: 1.25rem
 
 a.box
   &:hover,

sass/elements/button.sass

@@ -1,37 +1,22 @@
 =button-small
   border-radius: $radius-small
-  font-size: 11px
-  height: 24px
-  line-height: 16px
-  padding-left: 6px
-  padding-right: 6px
+  font-size: $size-small
 =button-medium
-  font-size: 18px
-  height: 40px
-  padding-left: 14px
-  padding-right: 14px
+  font-size: $size-medium
 =button-large
-  font-size: 22px
-  height: 48px
-  padding-left: 20px
-  padding-right: 20px
+  font-size: $size-large
 
 .button
   +control
   +unselectable
   cursor: pointer
   justify-content: center
-  padding-left: 10px
-  padding-right: 10px
+  padding-left: 1em
+  padding-right: 1em
   text-align: center
   white-space: nowrap
   strong
     color: inherit
-  small
-    display: block
-    font-size: $size-small
-    line-height: 1
-    margin-top: 5px
   .icon,
   .tag
     &:first-child

sass/elements/content.sass

@@ -24,30 +24,36 @@
   h5,
   h6
     color: $text-strong
-    font-weight: 300
+    font-weight: $weight-title-normal
     line-height: 1.125
-    margin-bottom: 20px
-  h1,
-  h2,
-  h3
+  h1
+    font-size: 2em
+    margin-bottom: 0.5em
     &:not(:first-child)
-      margin-top: 40px
+      margin-top: 1em
+  h2
+    font-size: 1.75em
+    margin-bottom: 0.5714em
+    &:not(:first-child)
+      margin-top: 1.1428em
+  h3
+    font-size: 1.5em
+    margin-bottom: 0.6666em
+    &:not(:first-child)
+      margin-top: 1.3333em
+  h4
+    font-size: 1.25em
+    margin-bottom: 0.8em
+  h5
+    font-size: 1.125em
+    margin-bottom: 0.8888em
+  h6
+    font-size: 1em
+    margin-bottom: 1em
   blockquote
     background-color: $background
     border-left: 5px solid $border
-    padding: 1.5em
-  h1
-    font-size: 2em
-  h2
-    font-size: 1.75em
-  h3
-    font-size: 1.5em
-  h4
-    font-size: 1.25em
-  h5
-    font-size: 1.125em
-  h6
-    font-size: 1em
+    padding: 1.25em 1.5em
   ol
     list-style: decimal outside
     margin-left: 2em
@@ -64,11 +70,9 @@
       ul
         list-style-type: square
   // Sizes
+  &.is-small
+    font-size: $size-small
   &.is-medium
-    font-size: $size-5
-    code
-      font-size: $size-6
+    font-size: $size-medium
   &.is-large
-    font-size: $size-4
-    code
-      font-size: $size-5
+    font-size: $size-large

sass/elements/form.sass

@@ -42,7 +42,7 @@
 .radio
   cursor: pointer
   display: inline-block
-  line-height: 16px
+  line-height: 1em
   position: relative
   vertical-align: top
   input
@@ -57,11 +57,11 @@
 
 .radio
   & + .radio
-    margin-left: 10px
+    margin-left: 0.5em
 
 .select
   display: inline-block
-  height: 32px
+  height: 2.5em
   position: relative
   vertical-align: top
   select
@@ -69,7 +69,7 @@
     cursor: pointer
     display: block
     outline: none
-    padding-right: 36px
+    padding-right: 2.5em
     &:hover
       border-color: $control-hover-border
     &::ms-expand
@@ -80,34 +80,19 @@
       width: 100%
   &:after
     +arrow($control-active)
-    margin-top: -6px
+    margin-top: -4px
     right: 16px
     top: 50%
   &:hover
     &:after
       border-color: $control-hover
-  &.is-small
-    height: 24px
-    select
-      +control-small
-      padding-right: 28px
-  &.is-medium
-    height: 40px
-    select
-      +control-medium
-      padding-right: 44px
-  &.is-large
-    height: 48px
-    select
-      +control-large
-      padding-right: 52px
 
 .label
   color: $control
   display: block
   font-weight: bold
   &:not(:last-child)
-    margin-bottom: 5px
+    margin-bottom: 0.5em
 
 .help
   display: block
@@ -122,13 +107,13 @@
 
 .control-label
   +mobile
-    margin-bottom: 5px
+    margin-bottom: 0.5em
   +tablet
     flex-basis: 0
     flex-grow: 1
     flex-shrink: 0
-    margin-right: 20px
-    padding-top: 7px
+    margin-right: 1.5em
+    padding-top: 0.5em
     text-align: right
 
 .control

sass/elements/other.sass

@@ -43,8 +43,7 @@
 
 .highlight
   +block
-  font-size: 12px
-  font-weight: normal
+  font-weight: $weight-normal
   max-width: 100%
   overflow: hidden
   padding: 0

sass/elements/title.sass

@@ -17,56 +17,39 @@
 .title
   color: $text-strong
   font-size: $size-large
-  line-height: 1
-  code
-    display: inline-block
-    font-size: $size-large
+  line-height: 1.125
   strong
     color: inherit
   & + .highlight
-    margin-top: -10px
+    margin-top: -0.75rem
   & + .subtitle
-    margin-top: -10px
+    margin-top: -1.25rem
   // Colors
   @each $size in $sizes
     $i: index($sizes, $size)
     &.is-#{$i}
       font-size: $size
-      code
-        font-size: nth($sizes, min($i + 1, 6))
   // Modifiers
   &.is-normal
-    font-weight: 400
+    font-weight: $weight-normal
     strong
-      font-weight: 700
-  // Responsiveness
-  +tablet
-    & + .subtitle
-      margin-top: -15px
+      font-weight: $weight-bold
 
 .subtitle
   color: $text
   font-size: $size-medium
-  line-height: 1.125
-  code
-    border-radius: $radius
-    display: inline-block
-    font-size: $size-normal
-    padding: 2px 3px
-    vertical-align: top
+  line-height: 1.25
   strong
     color: $text-strong
   & + .title
-    margin-top: -20px
+    margin-top: -1.4rem
   // Colors
   @each $size in $sizes
     $i: index($sizes, $size)
     &.is-#{$i}
       font-size: $size
-      code
-        font-size: nth($sizes, min($i + 1, 6))
   // Modifiers
   &.is-normal
-    font-weight: 400
+    font-weight: $weight-normal
     strong
-      font-weight: 700
+      font-weight: $weight-bold