diff --git a/plinth/modules/backups/templates/backups.html b/plinth/modules/backups/templates/backups.html
index b519e79b6..1550fca73 100644
--- a/plinth/modules/backups/templates/backups.html
+++ b/plinth/modules/backups/templates/backups.html
@@ -8,7 +8,7 @@
 {% block page_head %}
   <style type="text/css">
     .mount-error, .mount-success, .encrypted {
-      padding: 0px 5px;
+      padding: 0 0.3125rem;
     }
     .mount-error {
       color: orange;
diff --git a/plinth/modules/calibre/templates/calibre.html b/plinth/modules/calibre/templates/calibre.html
index 5c695d4b3..f3f0ba1b3 100644
--- a/plinth/modules/calibre/templates/calibre.html
+++ b/plinth/modules/calibre/templates/calibre.html
@@ -12,7 +12,7 @@
         width: 40%;
     }
     .list-group-item .btn {
-        margin: -5px 2px;
+        margin: -0.3125rem 0.125rem;
     }
   </style>
 {% endblock %}
diff --git a/plinth/modules/gitweb/templates/gitweb_configure.html b/plinth/modules/gitweb/templates/gitweb_configure.html
index 0401afc17..4e4b23313 100644
--- a/plinth/modules/gitweb/templates/gitweb_configure.html
+++ b/plinth/modules/gitweb/templates/gitweb_configure.html
@@ -14,13 +14,13 @@
         width: 40%;
     }
     .repo-private-icon {
-        margin: 4px 10px;
+        margin: 0.25rem 0.625rem;
     }
     .list-group-item .btn {
-        margin: -5px 2px;
+        margin: -0.3125rem 0.125rem;
     }
     .repo-cloning {
-        margin: 0px 10px;
+        margin: 0 0.625rem;
     }
   </style>
 {% endblock %}
diff --git a/plinth/modules/help/templates/help_about.html b/plinth/modules/help/templates/help_about.html
index ae749c681..1ce193457 100644
--- a/plinth/modules/help/templates/help_about.html
+++ b/plinth/modules/help/templates/help_about.html
@@ -59,7 +59,7 @@
         href="https://wiki.debian.org/FreedomBox"
         target="_blank">{% trans "Learn more &raquo;" %}</a></p>
 
-  <p style='margin-top:30px'>
+  <p style='margin-top:1.875rem'>
     {% blocktrans trimmed %}
       You are running {{ os_release }} and {{ box_name }} version {{ version }}.
     {% endblocktrans %}
diff --git a/plinth/modules/help/templates/help_manual.html b/plinth/modules/help/templates/help_manual.html
index 18113cd90..26d8c6999 100644
--- a/plinth/modules/help/templates/help_manual.html
+++ b/plinth/modules/help/templates/help_manual.html
@@ -9,7 +9,7 @@
 {% block page_head %}
   <style type="text/css">
     dd {
-        margin-left: 30px;
+        margin-left: 1.875rem;
     }
     .pdf {
         float: right;
diff --git a/plinth/modules/jsxc/static/jsxc-plinth.css b/plinth/modules/jsxc/static/jsxc-plinth.css
index c46324b25..9fb6cd8dd 100644
--- a/plinth/modules/jsxc/static/jsxc-plinth.css
+++ b/plinth/modules/jsxc/static/jsxc-plinth.css
@@ -43,14 +43,14 @@ h1 {
 /* Server connection status message */
 #server-flash {
    margin: 0;
-   margin-top: 10px;
+   margin-top: 0.625rem;
 }
 
 #server-flash:before {
    content: "\e031";
    position: relative;
-   top: 1px;
-   padding-right: 5px;
+   top: 0.0625rem;
+   padding-right: 0.3125rem;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
diff --git a/plinth/modules/letsencrypt/templates/letsencrypt.html b/plinth/modules/letsencrypt/templates/letsencrypt.html
index 399c53a7c..1df3ef282 100644
--- a/plinth/modules/letsencrypt/templates/letsencrypt.html
+++ b/plinth/modules/letsencrypt/templates/letsencrypt.html
@@ -9,7 +9,7 @@
 {% block page_head %}
 <style type="text/css">
  .table .form .btn {
-     width: 7em;
+     width: 6.125rem;
  }
 
  .form-inline {
diff --git a/plinth/modules/monkeysphere/templates/monkeysphere.html b/plinth/modules/monkeysphere/templates/monkeysphere.html
index d32356ec2..5ae81ff13 100644
--- a/plinth/modules/monkeysphere/templates/monkeysphere.html
+++ b/plinth/modules/monkeysphere/templates/monkeysphere.html
@@ -12,7 +12,7 @@
   <style type="text/css">
     td li {
         list-style: none;
-        line-height: 2em;
+        line-height: 2rem;
     }
 
     td ul {
@@ -20,11 +20,11 @@
     }
 
     .form-action.pull-right {
-        margin-right: 10px;
+        margin-right: 0.625rem;
     }
 
     .form-action button {
-        width: 9em;
+        width: 7.875rem;
     }
   </style>
 
diff --git a/plinth/modules/networks/templates/connection_show.html b/plinth/modules/networks/templates/connection_show.html
index c1ce90b0a..e1508b114 100644
--- a/plinth/modules/networks/templates/connection_show.html
+++ b/plinth/modules/networks/templates/connection_show.html
@@ -10,7 +10,7 @@
 {% block page_head %}
   <style type="text/css">
     .list-group-item .btn {
-      margin: -5px 0;
+      margin: -0.3125rem 0;
     }
     .form-inline {
       display: inline;
diff --git a/plinth/modules/networks/templates/connections_diagram.html b/plinth/modules/networks/templates/connections_diagram.html
index c5be8ebf3..3f0e3f375 100644
--- a/plinth/modules/networks/templates/connections_diagram.html
+++ b/plinth/modules/networks/templates/connections_diagram.html
@@ -7,8 +7,8 @@
 
 <style type="text/css">
   .connection-diagram {
-      margin-top: 32px;
-      margin-bottom: 32px;
+      margin-top: 2rem;
+      margin-bottom: 2rem;
   }
 
   .col-image {
@@ -17,26 +17,26 @@
   }
 
   .network-entity {
-      max-width: 128px;
+      max-width: 8rem;
   }
 
   .network-type-icon {
-      width: 24px;
-      height: 24px;
+      width: 1.5rem;
+      height: 1.5rem;
   }
 
   .network-connection {
-      height: 8px;
-      margin-bottom: 12px;
+      height: 0.5rem;
+      margin-bottom: 0.75rem;
   }
 
   .network-connection-vertical {
-      width: 8px;
-      margin-left: 60px;
+      width: 0.5rem;
+      margin-left: 3.75rem;
   }
 
   .connection-list {
-      margin-left: 24px;
+      margin-left: 1.5rem;
   }
 
   .connection-list-heading {
diff --git a/plinth/modules/networks/templates/networks_configuration.html b/plinth/modules/networks/templates/networks_configuration.html
index 4cb2b9b96..577c87fdc 100644
--- a/plinth/modules/networks/templates/networks_configuration.html
+++ b/plinth/modules/networks/templates/networks_configuration.html
@@ -10,10 +10,10 @@
   <style type="text/css">
     .connection-status-label {
         display: inline-block;
-        width: 5.5em;
-        padding: 5px 0px;
+        width: 4.125rem;
+        padding: 0.3125rem 0;
         text-align: center;
-        margin-right: 10px;
+        margin-right: 0.625rem;
     }
 
     .connection-show-label {
@@ -26,15 +26,15 @@
     }
 
     .list-group-item .btn {
-        margin: -2px 0;
+        margin: -0.125rem 0;
     }
 
     .form-action.pull-right {
-        margin-right: 20px;
+        margin-right: 1.25rem;
     }
 
     .form-action button {
-        min-width: 7em;
+        min-width: 6.125rem;
     }
   </style>
 {% endblock %}
diff --git a/plinth/modules/pagekite/templates/pagekite_configure.html b/plinth/modules/pagekite/templates/pagekite_configure.html
index ad686a95c..9cc3e8b01 100644
--- a/plinth/modules/pagekite/templates/pagekite_configure.html
+++ b/plinth/modules/pagekite/templates/pagekite_configure.html
@@ -11,10 +11,10 @@
   <style type="text/css">
     div.custom-services span.service {
         display: inline-block;
-        padding-top: 6px;
+        padding-top: 0.375rem;
     }
     form.pull-right button {
-        margin: 10px 5px;
+        margin: 0.625rem 0.3125rem;
     }
   </style>
 {% endblock %}
diff --git a/plinth/modules/samba/templates/samba.html b/plinth/modules/samba/templates/samba.html
index d796d8e5e..380d47f9b 100644
--- a/plinth/modules/samba/templates/samba.html
+++ b/plinth/modules/samba/templates/samba.html
@@ -12,15 +12,15 @@
   <style type="text/css">
     .progress {
         margin-bottom: 0;
-        width: 180px;
+        width: 11.25rem;
     }
     .samba-disk-name {
-        font-size: 1.3em;
+        font-size: 1.3rem;
         float: left;
     }
     .samba-disk-shares {
-        padding-top: 10px;
-        margin-bottom: 20px;
+        padding-top: 0.625rem;
+        margin-bottom: 1.25rem;
     }
   </style>
 {% endblock %}
diff --git a/plinth/modules/users/templates/users_list.html b/plinth/modules/users/templates/users_list.html
index ed5966b52..9f3e54335 100644
--- a/plinth/modules/users/templates/users_list.html
+++ b/plinth/modules/users/templates/users_list.html
@@ -13,7 +13,7 @@
       width: 75%;
     }
     .list-group-item .btn {
-      margin: -5px 0;
+      margin: -0.3125rem 0;
     }
   </style>
 {% endblock %}
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index 6d896c488..223c3dcf2 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -126,8 +126,8 @@ h1, h2, h3, h4, h5, h6 {
 /* Help block removed from bootstrap 4, needs updated django-bootstrap-from */
 .help-block {
     display: block;
-    margin-top: 5px;
-    margin-bottom: 10px;
+    margin-top: 0.3125rem;
+    margin-bottom: 0.625rem;
     color: #737373;
 }
 
@@ -135,8 +135,8 @@ h1, h2, h3, h4, h5, h6 {
 .form-horizontal > .form-group {
     display: flex;
     flex-wrap: wrap;
-    margin-right: -15px;
-    margin-left: -15px;
+    margin-right: -0.9375rem;
+    margin-left: -0.9375rem;
 }
 
 .radio .help-block {
@@ -151,7 +151,7 @@ h1, h2, h3, h4, h5, h6 {
  * Basic styling
  */
 body {
-    padding-top: 6em;
+    padding-top: 6rem;
     position: relative;
     font-family: Lato, sans-serif;
     background: url('../img/noise.png') var(--background-color);
@@ -174,18 +174,18 @@ body {
 }
 
 .navbar .fa:not(.fa-bars) {
-    margin-right: 4px;
+    margin-right: 0.25rem;
 }
 
 .navbar-brand .fa {
     float: left;
-    margin-top: -7px;
-    padding: 8px;
+    margin-top: -0.4375rem;
+    padding: 0.5rem;
 }
 
 .navbar-brand {
-    height: 53px;
-    margin-right: -20px;
+    height: 3.3125rem;
+    margin-right: -1.25rem;
 }
 
 @media (max-width: 767px) {
@@ -195,7 +195,7 @@ body {
 }
 
 .nav-tabs {
-    margin-bottom: 20px;
+    margin-bottom: 1.25rem;
 }
 
 .dropdown-toggle::after {
@@ -209,17 +209,17 @@ body {
 .running-status {
     border-radius: 50%;
     border: 1px solid black;
-    width: 8px;
-    height: 8px;
+    width: 0.5rem;
+    height: 0.5rem;
     display: inline-block;
 }
 
 .running-status.loading {
-    border: 4px solid var(--neutral-light-color);
-    border-top: 4px solid var(--progress-color);
+    border: 0.25rem solid var(--neutral-light-color);
+    border-top: 0.25rem solid var(--progress-color);
     border-radius: 50%;
-    width: 16px;
-    height: 16px;
+    width: 1rem;
+    height: 1rem;
     display: inline-block;
     animation: spin 1s linear infinite;
 }
@@ -248,7 +248,7 @@ body {
 }
 
 .diagnostics-results .diagnostics-result {
-    width: 60px;
+    width: 3.75rem;
     text-align: center;
 }
 
@@ -259,7 +259,7 @@ body {
 /* Sticky footer styles
 -------------------------------------------------- */
 .footer-logo {
-    width: 140px;
+    width: 8.75rem;
 }
 
 html {
@@ -281,15 +281,15 @@ html {
 }
 
 .content-container {
-    margin-bottom: 20px;
+    margin-bottom: 1.25rem;
 }
 
 @media (min-width: 768px) {
     .content-container {
-        padding: 25px 50px 50px;
+        padding: 1.5rem 3rem 3rem;
         background-color: white;
         border: 1px solid #ddd;
-        border-radius: 4px;
+        border-radius: 0.25rem;
     }
 }
 
@@ -298,12 +298,8 @@ footer {
     position: relative;
     bottom: 0;
     width: 100%;
-    height: 150px;
-    padding-top: 150px;
-}
-
-.shortcut-label {
-    min-height: 50px;
+    height: 9.375rem;
+    padding-top: 9.375rem;
 }
 
 /*
@@ -313,23 +309,23 @@ footer {
     display: inline-block;
     width: 100%;
     height: auto;
-    max-height: 20px;
-    max-width: 20px;
+    max-height: 1.25rem;
+    max-width: 1.25rem;
     margin: auto;
 }
 
 #clients .btn {
-    width: 9em;
-    margin-right: 1em;
+    width: 9rem;
+    margin-right: 1rem;
 }
 
 #clients th, #clients td {
-    line-height: 3.1em;
+    line-height: 3rem;
 }
 
 /* Icon when collapsible content is shown */
 .collapsible-button .fa {
-    margin-left: 5px;
+    margin-left: 0.3125rem;
 }
 
 .collapsible-button .fa-chevron-right:before,
@@ -355,7 +351,7 @@ footer {
  */
 .main-header {
     background: var(--freedombox-blue-color);
-    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.25);
+    box-shadow: 0 0.25rem 0.375rem 0 rgba(0, 0, 0, 0.25);
     border: none;
 }
 
@@ -369,8 +365,8 @@ footer {
 }
 
 .main-header .nav-item .nav-link {
-    padding: 15px !important;
-    height: 52px;
+    padding: 0.9375rem !important;
+    height: 3.25rem;
 }
 
 .main-header .navbar-toggler {
@@ -403,7 +399,7 @@ footer {
     display: flex;
     font-style: italic;
     font-weight: 800;
-    font-size: 20px;
+    font-size: 1.25rem;
     padding: 0 2.875rem;
     margin: 1.25rem 0;
 }
@@ -432,59 +428,45 @@ a.menu_link_active {
     display: block;
     line-height: 1.42857143;
     text-align: center;
-    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.12);
+    box-shadow: 0 0.1875rem 0.3125rem 0 rgba(0,0,0,0.12);
     width: 10rem;
     padding: 0;
-    margin: 0 10px 20px;
+    margin: 0 0.625rem 1.25rem;
     border: none;
-    border-radius: 8px;
+    border-radius: 0.5rem;
     transition: border .2s ease-in-out;
 }
 
 .card:hover {
-    box-shadow: 0 5px 15px 2px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0.3125rem 0.9375rem 0.125rem rgba(0, 0, 0, 0.2);
 }
 
 .card .nav-link {
     display: block;
-    padding: 4px;
+    padding: 0.25rem;
     color: #646464;
 }
 
 .card-title {
     font-style: italic;
     font-weight: 800;
-    font-size: 20px;
-    padding: 12px 0;
+    font-size: 1.25rem;
+    padding: 0.75rem 0;
     margin-bottom: 0;
 }
 
 .card-description {
-   font-size: 18px;
-   font-weight: 400;
-   padding: 12px 0;
-}
-
-.card-description {
+    font-weight: 400;
+    padding: 0.75rem 0;
     color: #646464;
-    font-size: 12px;
+    font-size: 0.75rem;
 }
 
+.card-icon span,
 .card-icon img {
-    width: 128px;
-    height: 128px;
-}
-
-.card-icon span {
-    width: 100px;
-    height: 100px;
-    font-size: 80px;
-}
-
-.card-icon img {
-    width: 100px;
-    height: 100px;
-    font-size: 80px;
+    width: 6.25rem;
+    height: 6.25rem;
+    font-size: 5rem;
 }
 
 /* System page - special card styling */
@@ -495,13 +477,13 @@ a.menu_link_active {
 
 .system-page .card .nav-link {
     display: grid;
-    grid-template-columns: 35px auto;
-    grid-column-gap: 10px;
-    padding: 13px;
+    grid-template-columns: 2.1875rem auto;
+    grid-column-gap: 0.625rem;
+    padding: 0.8125rem;
 }
 
 .system-page .card-title {
-    font-size: 18px;
+    font-size: 1.125rem;
     font-style: normal;
     font-weight: bold;
     overflow: hidden;
@@ -519,7 +501,7 @@ a.menu_link_active {
 
 .system-page .card-icon span {
     height: auto;
-    font-size: 35px;
+    font-size: 2.1875rem;
 }
 
 .system-page .card-description {
@@ -531,7 +513,7 @@ a.menu_link_active {
 
 /* Button table - Tables with a list of actions as buttons on top */
 .button-table > .button-row + .table-responsive {
-    margin-top: 10px;
+    margin-top: 0.625rem;
 }
 
 .index-page .card-list:before,
@@ -575,9 +557,9 @@ a.menu_link_active {
  * Toggle button
  */
 .toggle-button {
-    border-radius: 13px;
-    width: 50px;
-    height: 26px;
+    border-radius: 0.8125rem;
+    width: 3.125rem;
+    height: 1.625rem;
     background: #ccc;
     position: relative;
 }
@@ -585,8 +567,8 @@ a.menu_link_active {
 .toggle-button::before {
     content: '';
     display: block;
-    height: 24px;
-    width: 24px;
+    height: 1.5rem;
+    width: 1.5rem;
     border-radius: 100%;
     background: #fff;
     position: absolute;
@@ -606,13 +588,13 @@ a.menu_link_active {
 
 .toggle-button.running-status-button::before {
     top: 0;
-    border: 4px solid var(--neutral-light-color);
-    border-top: 4px solid var(--progress-color);
+    border: 0.25rem solid var(--neutral-light-color);
+    border-top: 0.25rem solid var(--progress-color);
     animation: spin 1s linear infinite;
 }
 
 .toggle-button.toggle-button--toggled.running-status-button::before {
-    margin-left: -24px;
+    margin-left: -1.5rem;
 }
 
 /*
@@ -620,15 +602,15 @@ a.menu_link_active {
  */
 .running-status-button-before {
     display: inline-block;
-    border: 4px solid var(--neutral-light-color);
-    border-top: 4px solid var(--progress-color);
+    border: 0.25rem solid var(--neutral-light-color);
+    border-top: 0.25rem solid var(--progress-color);
     border-radius: 50%;
-    width: 16px;
-    height: 16px;
+    width: 1rem;
+    height: 1rem;
     animation: spin 1s linear infinite;
-    margin-left: 10px;
-    margin-bottom: -4px;
-    margin-right: -26px;
+    margin-left: 0.625rem;
+    margin-bottom: -0.25rem;
+    margin-right: -1.625rem;
 }
 
 .running-status-button:disabled {
@@ -636,15 +618,15 @@ a.menu_link_active {
 }
 
 input[type='submit'].running-status-button {
-    padding-left: 32px;
+    padding-left: 2rem;
 }
 
 /*
  * Button toolbar
  */
 .btn-toolbar {
-    margin-top: 10px;
-    margin-bottom: 10px;
+    margin-top: 0.625rem;
+    margin-bottom: 0.625rem;
 }
 
 .btn-toolbar > :not(:last-child):not(.running-status-button-before) {
@@ -668,12 +650,12 @@ input[type='submit'].running-status-button {
 .app-header {
     display: grid;
     grid-template-columns: 0.2fr 1fr;
-    column-gap: 20px;
-    margin-bottom: 20px;
+    column-gap: 1.25rem;
+    margin-bottom: 1.25rem;
 }
 
 .app-header > img {
-    margin: 25px auto 0;
+    margin: 1.5625rem auto 0;
     width: 100%;
 }
 
@@ -713,8 +695,8 @@ input[type='submit'].running-status-button {
     }
 
     .app-header img {
-        width: 150px;
-        height: 150px;
+        width: 9.375rem;
+        height: 9.375rem;
         margin-top: 0;
     }
 
@@ -726,11 +708,11 @@ input[type='submit'].running-status-button {
     }
 
     .app-titles h2 {
-        margin: 0 0 15px 0;
+        margin: 0 0 0.9375rem 0;
     }
 
     .app-titles .form-app-enable-disable {
-        margin: 30px auto;
+        margin: 1.875rem auto;
     }
 
     .app-titles .toggle-button {
@@ -742,8 +724,8 @@ input[type='submit'].running-status-button {
 *[id^='idm']:before {
     display: block;
     content: " ";
-    margin-top: -60px;
-    height: 60px;
+    margin-top: -3.75rem;
+    height: 3.75rem;
     visibility: hidden;
 }
 
@@ -751,8 +733,8 @@ input[type='submit'].running-status-button {
  * Notifications
  */
 .notifications {
-    margin-left: -15px;
-    margin-right: -15px;
+    margin-left: -0.9375rem;
+    margin-right: -0.9375rem;
 }
 
 .notifications .dropdown-menu {
@@ -768,7 +750,7 @@ input[type='submit'].running-status-button {
 /* Style for individual notification */
 .notification {
     padding: 0.625rem 0.9375rem;
-    border-left: 5px solid;
+    border-left: 0.3125rem solid;
 }
 
 .notification:not(:first-child) {
@@ -788,8 +770,8 @@ img.notification-icon {
 
 /* Show badge with various colors and overlap it onto icon */
 .notifications-dropdown .badge {
-    padding: 2px 5px;
-    margin-left: -12px;
+    padding: 0.125rem 0.3125rem;
+    margin-left: -0.75rem;
     color: #fff;
 }