Merge branch 'new-font'

57 files changed, 292 insertions, 192 deletions

diff --git a/asset-sources/theme.scss b/asset-sources/theme.scss
index 35a3df1..bdc18f9 100644
--- a/asset-sources/theme.scss
+++ b/asset-sources/theme.scss
@@ -3,7 +3,7 @@ html {
 }
 
 body {
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", sans-serif;
   font-weight: 300;
   color: #101010;
   background: #efefef;
@@ -18,6 +18,7 @@ strong {
 
 #mainContent {
   flex: 1;
+  margin-top: 1em;
 }
 
 #siteFooter {
@@ -34,10 +35,28 @@ strong {
   }
 }
 
+.navbar {
+  font-family: "Inter", sans-serif;
+  font-weight: 400;
+}
+
+.alert {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.ui-element {
+  font-family: "Inter", sans-serif;
+}
+
 .brand-link {
   text-decoration: none;
 }
 
+#homeOverview {
+  margin-bottom: 1em;
+}
+
 .badge-container {
   width: 50px;
   height: 50px;
@@ -111,6 +130,11 @@ strong {
     max-width: 100%;
 }
 
+.track-badges {
+  justify-content: center;
+  margin-bottom: 1em;
+}
+
 .summary-toggler {
   cursor: pointer;
 }
@@ -156,6 +180,7 @@ strong {
   width: 50px;
   display: inline-block;
   text-align: right;
+  font-variant: lining-nums;
 }
 
 .calendar-title {
@@ -234,6 +259,10 @@ strong {
   }
 }
 
+.browse-summary {
+  font-variant: lining-nums;
+}
+
 /* Ensure a consistent width of the cells in the browse view. */
 .browse-summary th, .browse-summary td {
   width: 25%;
diff --git a/fietsboek/static/fonts.css b/fietsboek/static/fonts.css
deleted file mode 100644
index 7bedcda..0000000
--- a/fietsboek/static/fonts.css
+++ /dev/null
@@ -1,121 +0,0 @@
-/* Snippet generated by https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin */
-
-/* open-sans-300 - latin */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 300;
-  src: local(''),
-       url('fonts/open-sans-v29-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('fonts/open-sans-v29-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* open-sans-regular - latin */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: local(''),
-       url('fonts/open-sans-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('fonts/open-sans-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* open-sans-500 - latin */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 500;
-  src: local(''),
-       url('fonts/open-sans-v29-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('fonts/open-sans-v29-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* open-sans-600 - latin */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 600;
-  src: local(''),
-       url('fonts/open-sans-v29-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('fonts/open-sans-v29-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* open-sans-700 - latin */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 700;
-  src: local(''),
-       url('fonts/open-sans-v29-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('fonts/open-sans-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* open-sans-800 - latin */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 800;
-  src: local(''),
-       url('fonts/open-sans-v29-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('fonts/open-sans-v29-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* open-sans-300italic - latin */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 300;
-  src: local(''),
-       url('fonts/open-sans-v29-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('fonts/open-sans-v29-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* open-sans-italic - latin */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 400;
-  src: local(''),
-       url('fonts/open-sans-v29-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('fonts/open-sans-v29-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* open-sans-500italic - latin */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 500;
-  src: local(''),
-       url('fonts/open-sans-v29-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('fonts/open-sans-v29-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* open-sans-600italic - latin */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 600;
-  src: local(''),
-       url('fonts/open-sans-v29-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('fonts/open-sans-v29-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* open-sans-700italic - latin */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 700;
-  src: local(''),
-       url('fonts/open-sans-v29-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('fonts/open-sans-v29-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* open-sans-800italic - latin */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: italic;
-  font-weight: 800;
-  src: local(''),
-       url('fonts/open-sans-v29-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('fonts/open-sans-v29-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
diff --git a/fietsboek/static/fonts/inter-v18-latin-100.woff2 b/fietsboek/static/fonts/inter-v18-latin-100.woff2
new file mode 100644
index 0000000..6aa06cb
--- /dev/null
+++ b/fietsboek/static/fonts/inter-v18-latin-100.woff2
diff --git a/fietsboek/static/fonts/inter-v18-latin-100italic.woff2 b/fietsboek/static/fonts/inter-v18-latin-100italic.woff2
new file mode 100644
index 0000000..502fe89
--- /dev/null
+++ b/fietsboek/static/fonts/inter-v18-latin-100italic.woff2
diff --git a/fietsboek/static/fonts/inter-v18-latin-200.woff2 b/fietsboek/static/fonts/inter-v18-latin-200.woff2
new file mode 100644
index 0000000..ba5753e
--- /dev/null
+++ b/fietsboek/static/fonts/inter-v18-latin-200.woff2
diff --git a/fietsboek/static/fonts/inter-v18-latin-200italic.woff2 b/fietsboek/static/fonts/inter-v18-latin-200italic.woff2
new file mode 100644
index 0000000..3fb8a8e
--- /dev/null
+++ b/fietsboek/static/fonts/inter-v18-latin-200italic.woff2
diff --git a/fietsboek/static/fonts/inter-v18-latin-300.woff2 b/fietsboek/static/fonts/inter-v18-latin-300.woff2
new file mode 100644
index 0000000..794bde5
--- /dev/null
+++ b/fietsboek/static/fonts/inter-v18-latin-300.woff2
diff --git a/fietsboek/static/fonts/inter-v18-latin-300italic.woff2 b/fietsboek/static/fonts/inter-v18-latin-300italic.woff2
new file mode 100644
index 0000000..34af554
--- /dev/null
+++ b/fietsboek/static/fonts/inter-v18-latin-300italic.woff2
diff --git a/fietsboek/static/fonts/inter-v18-latin-500.woff2 b/fietsboek/static/fonts/inter-v18-latin-500.woff2
new file mode 100644
index 0000000..03aaea1
--- /dev/null
+++ b/fietsboek/static/fonts/inter-v18-latin-500.woff2
diff --git a/fietsboek/static/fonts/inter-v18-latin-500italic.woff2 b/fietsboek/static/fonts/inter-v18-latin-500italic.woff2
new file mode 100644
index 0000000..ef0937e
--- /dev/null
+++ b/fietsboek/static/fonts/inter-v18-latin-500italic.woff2
diff --git a/fietsboek/static/fonts/inter-v18-latin-600.woff2 b/fietsboek/static/fonts/inter-v18-latin-600.woff2
new file mode 100644
index 0000000..fb50a02
--- /dev/null
+++ b/fietsboek/static/fonts/inter-v18-latin-600.woff2
diff --git a/fietsboek/static/fonts/inter-v18-latin-600italic.woff2 b/fietsboek/static/fonts/inter-v18-latin-600italic.woff2
new file mode 100644
index 0000000..feee055
--- /dev/null
+++ b/fietsboek/static/fonts/inter-v18-latin-600italic.woff2
diff --git a/fietsboek/static/fonts/inter-v18-latin-700.woff2 b/fietsboek/static/fonts/inter-v18-latin-700.woff2
new file mode 100644
index 0000000..12b51d7
--- /dev/null
+++ b/fietsboek/static/fonts/inter-v18-latin-700.woff2
diff --git a/fietsboek/static/fonts/inter-v18-latin-700italic.woff2 b/fietsboek/static/fonts/inter-v18-latin-700italic.woff2
new file mode 100644
index 0000000..4617280
--- /dev/null
+++ b/fietsboek/static/fonts/inter-v18-latin-700italic.woff2
diff --git a/fietsboek/static/fonts/inter-v18-latin-800.woff2 b/fietsboek/static/fonts/inter-v18-latin-800.woff2
new file mode 100644
index 0000000..882bd18
--- /dev/null
+++ b/fietsboek/static/fonts/inter-v18-latin-800.woff2
diff --git a/fietsboek/static/fonts/inter-v18-latin-800italic.woff2 b/fietsboek/static/fonts/inter-v18-latin-800italic.woff2
new file mode 100644
index 0000000..f4f2106
--- /dev/null
+++ b/fietsboek/static/fonts/inter-v18-latin-800italic.woff2
diff --git a/fietsboek/static/fonts/inter-v18-latin-900.woff2 b/fietsboek/static/fonts/inter-v18-latin-900.woff2
new file mode 100644
index 0000000..ecc6f69
--- /dev/null
+++ b/fietsboek/static/fonts/inter-v18-latin-900.woff2
diff --git a/fietsboek/static/fonts/inter-v18-latin-900italic.woff2 b/fietsboek/static/fonts/inter-v18-latin-900italic.woff2
new file mode 100644
index 0000000..9c2eafa
--- /dev/null
+++ b/fietsboek/static/fonts/inter-v18-latin-900italic.woff2
diff --git a/fietsboek/static/fonts/inter-v18-latin-italic.woff2 b/fietsboek/static/fonts/inter-v18-latin-italic.woff2
new file mode 100644
index 0000000..ec07ef7
--- /dev/null
+++ b/fietsboek/static/fonts/inter-v18-latin-italic.woff2
diff --git a/fietsboek/static/fonts/inter-v18-latin-regular.woff2 b/fietsboek/static/fonts/inter-v18-latin-regular.woff2
new file mode 100644
index 0000000..33002f1
--- /dev/null
+++ b/fietsboek/static/fonts/inter-v18-latin-regular.woff2
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-300.woff b/fietsboek/static/fonts/open-sans-v29-latin-300.woff
deleted file mode 100644
index fd25416..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-300.woff
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-300.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-300.woff2
deleted file mode 100644
index e7341dc..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-300.woff2
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-300italic.woff b/fietsboek/static/fonts/open-sans-v29-latin-300italic.woff
deleted file mode 100644
index 8468acd..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-300italic.woff
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-300italic.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-300italic.woff2
deleted file mode 100644
index ad29be4..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-300italic.woff2
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-500.woff b/fietsboek/static/fonts/open-sans-v29-latin-500.woff
deleted file mode 100644
index ce838eb..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-500.woff
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-500.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-500.woff2
deleted file mode 100644
index b9bc72c..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-500.woff2
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-500italic.woff b/fietsboek/static/fonts/open-sans-v29-latin-500italic.woff
deleted file mode 100644
index ec9cddd..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-500italic.woff
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-500italic.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-500italic.woff2
deleted file mode 100644
index 761a848..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-500italic.woff2
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-600.woff b/fietsboek/static/fonts/open-sans-v29-latin-600.woff
deleted file mode 100644
index 9150b0c..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-600.woff
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-600.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-600.woff2
deleted file mode 100644
index 7015f7d..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-600.woff2
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-600italic.woff b/fietsboek/static/fonts/open-sans-v29-latin-600italic.woff
deleted file mode 100644
index 10e4924..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-600italic.woff
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-600italic.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-600italic.woff2
deleted file mode 100644
index 5e1476c..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-600italic.woff2
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-700.woff b/fietsboek/static/fonts/open-sans-v29-latin-700.woff
deleted file mode 100644
index 1b546f6..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-700.woff
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-700.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-700.woff2
deleted file mode 100644
index 00582c6..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-700.woff2
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-700italic.woff b/fietsboek/static/fonts/open-sans-v29-latin-700italic.woff
deleted file mode 100644
index 59eead9..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-700italic.woff
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-700italic.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-700italic.woff2
deleted file mode 100644
index 5657d9e..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-700italic.woff2
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-800.woff b/fietsboek/static/fonts/open-sans-v29-latin-800.woff
deleted file mode 100644
index a27ea13..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-800.woff
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-800.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-800.woff2
deleted file mode 100644
index 7fc8d86..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-800.woff2
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-800italic.woff b/fietsboek/static/fonts/open-sans-v29-latin-800italic.woff
deleted file mode 100644
index 44f9748..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-800italic.woff
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-800italic.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-800italic.woff2
deleted file mode 100644
index 27c37d5..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-800italic.woff2
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-italic.woff b/fietsboek/static/fonts/open-sans-v29-latin-italic.woff
deleted file mode 100644
index d354f13..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-italic.woff
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-italic.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-italic.woff2
deleted file mode 100644
index b323b27..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-italic.woff2
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-regular.woff b/fietsboek/static/fonts/open-sans-v29-latin-regular.woff
deleted file mode 100644
index b9f6e3e..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-regular.woff
+++ /dev/null
diff --git a/fietsboek/static/fonts/open-sans-v29-latin-regular.woff2 b/fietsboek/static/fonts/open-sans-v29-latin-regular.woff2
deleted file mode 100644
index f143cd4..0000000
--- a/fietsboek/static/fonts/open-sans-v29-latin-regular.woff2
+++ /dev/null
diff --git a/fietsboek/static/inter.css b/fietsboek/static/inter.css
new file mode 100644
index 0000000..5f2322f
--- /dev/null
+++ b/fietsboek/static/inter.css
@@ -0,0 +1,163 @@
+/* Snippet generated by Google Webfonts Helper at https://gwfh.mranftl.com */
+
+/* inter-100 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100;
+  src: url('fonts/inter-v18-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-100italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 100;
+  src: url('fonts/inter-v18-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-200 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 200;
+  src: url('fonts/inter-v18-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-200italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 200;
+  src: url('fonts/inter-v18-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-300 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: url('fonts/inter-v18-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-300italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 300;
+  src: url('fonts/inter-v18-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url('fonts/inter-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 400;
+  src: url('fonts/inter-v18-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-500 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url('fonts/inter-v18-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-500italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 500;
+  src: url('fonts/inter-v18-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  src: url('fonts/inter-v18-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-600italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 600;
+  src: url('fonts/inter-v18-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  src: url('fonts/inter-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-700italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 700;
+  src: url('fonts/inter-v18-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-800 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 800;
+  src: url('fonts/inter-v18-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-800italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 800;
+  src: url('fonts/inter-v18-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-900 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 900;
+  src: url('fonts/inter-v18-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* inter-900italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 900;
+  src: url('fonts/inter-v18-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
diff --git a/fietsboek/static/theme.css b/fietsboek/static/theme.css
index 755a986..5511337 100644
--- a/fietsboek/static/theme.css
+++ b/fietsboek/static/theme.css
@@ -3,7 +3,7 @@ html {
 }
 
 body {
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", sans-serif;
   font-weight: 300;
   color: #101010;
   background: #efefef;
@@ -18,6 +18,7 @@ strong {
 
 #mainContent {
   flex: 1;
+  margin-top: 1em;
 }
 
 #siteFooter {
@@ -33,10 +34,28 @@ strong {
   text-decoration: none;
 }
 
+.navbar {
+  font-family: "Inter", sans-serif;
+  font-weight: 400;
+}
+
+.alert {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.ui-element {
+  font-family: "Inter", sans-serif;
+}
+
 .brand-link {
   text-decoration: none;
 }
 
+#homeOverview {
+  margin-bottom: 1em;
+}
+
 .badge-container {
   width: 50px;
   height: 50px;
@@ -106,6 +125,11 @@ strong {
   max-width: 100%;
 }
 
+.track-badges {
+  justify-content: center;
+  margin-bottom: 1em;
+}
+
 .summary-toggler {
   cursor: pointer;
 }
@@ -149,6 +173,7 @@ strong {
   width: 50px;
   display: inline-block;
   text-align: right;
+  font-variant: lining-nums;
 }
 
 .calendar-title {
@@ -222,6 +247,10 @@ strong {
   color: inherit;
 }
 
+.browse-summary {
+  font-variant: lining-nums;
+}
+
 /* Ensure a consistent width of the cells in the browse view. */
 .browse-summary th, .browse-summary td {
   width: 25%;
diff --git a/fietsboek/static/theme.css.map b/fietsboek/static/theme.css.map
index 8593cd3..2d30ac9 100644
--- a/fietsboek/static/theme.css.map
+++ b/fietsboek/static/theme.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../asset-sources/theme.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EAqCE;EACA;EACA;EACA;EACA;EACA;;AAzCA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAWJ;EACI;;;AAGJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;;;AAIJ;AACA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"theme.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../asset-sources/theme.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EAqCE;EACA;EACA;EACA;EACA;EACA;;AAzCA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAWJ;EACI;;;AAGJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;;;AAIJ;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"theme.css"}
\ No newline at end of file
diff --git a/fietsboek/templates/browse.jinja2 b/fietsboek/templates/browse.jinja2
index 308e89d..8877229 100644
--- a/fietsboek/templates/browse.jinja2
+++ b/fietsboek/templates/browse.jinja2
@@ -8,7 +8,7 @@
         <div class="col-12">
           <div class="input-group">
             <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button>
-            <input name="search-terms" type="text" class="form-control" placeholder="{{ _("page.browse.filter.search_terms") }}" value="{{ request.params.get('search-terms', '') }}">
+            <input name="search-terms" type="text" class="form-control ui-element" placeholder="{{ _("page.browse.filter.search_terms") }}" value="{{ request.params.get('search-terms', '') }}">
           </div>
         </div>
       </div>
@@ -17,59 +17,59 @@
         <div class="col-md-6">
           <div class="input-group">
             <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button>
-            <input name="tags" type="text" class="form-control" placeholder="{{ _("page.browse.filter.tags") }}" value="{{ request.params.get('tags', '') }}">
+            <input name="tags" type="text" class="form-control ui-element" placeholder="{{ _("page.browse.filter.tags") }}" value="{{ request.params.get('tags', '') }}">
           </div>
         </div>
 
         <div class="col-md-6">
           <div class="input-group">
             <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button>
-            <input name="tagged-person" type="text" class="form-control" placeholder="{{ _("page.browse.filter.tagged_person") }}" value="{{ request.params.get('tagged-person', '') }}">
+            <input name="tagged-person" type="text" class="form-control ui-element" placeholder="{{ _("page.browse.filter.tagged_person") }}" value="{{ request.params.get('tagged-person', '') }}">
           </div>
         </div>
 
         <div class="col-md-4">
           <div class="input-group">
             <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button>
-            <input name="min-length" type="number" class="form-control" placeholder="{{ _("page.browse.filter.length_minimum") }}" value="{{ request.params.get('min-length', '') }}">
-            <span class="input-group-text">km</span>
+            <input name="min-length" type="number" class="form-control ui-element" placeholder="{{ _("page.browse.filter.length_minimum") }}" value="{{ request.params.get('min-length', '') }}">
+            <span class="input-group-text ui-element">km</span>
           </div>
         </div>
 
-        <div class="col-md-4 fs-5 d-flex align-items-center justify-content-center">
+        <div class="col-md-4 fs-5 d-flex align-items-center justify-content-center ui-element">
             {{ _("page.browse.filter.length_boundaries") }}
         </div>
 
         <div class="col-md-4">
           <div class="input-group">
             <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button>
-            <input name="max-length" type="number" class="form-control" placeholder="{{ _("page.browse.filter.length_maximum") }}" value="{{ request.params.get('max-length', '') }}">
-            <span class="input-group-text">km</span>
+            <input name="max-length" type="number" class="form-control ui-element" placeholder="{{ _("page.browse.filter.length_maximum") }}" value="{{ request.params.get('max-length', '') }}">
+            <span class="input-group-text ui-element">km</span>
           </div>
         </div>
 
         <div class="col-md-4">
           <div class="input-group">
             <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button>
-            <input name="min-date" type="date" class="form-control" value="{{ request.params.get('min-date', '') }}">
+            <input name="min-date" type="date" class="form-control ui-element" value="{{ request.params.get('min-date', '') }}">
           </div>
         </div>
 
-        <div class="col-md-4 fs-5 d-flex align-items-center justify-content-center">
+        <div class="col-md-4 fs-5 d-flex align-items-center justify-content-center ui-element">
           {{ _("page.browse.filter.date_boundaries") }}
         </div>
 
         <div class="col-md-4">
           <div class="input-group">
             <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button>
-            <input name="max-date" type="date" class="form-control" value="{{ request.params.get('max-date', '') }}">
+            <input name="max-date" type="date" class="form-control ui-element" value="{{ request.params.get('max-date', '') }}">
           </div>
         </div>
 
       <div class="col-md-6">
         <div class="input-group">
           <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button>
-          <select class="form-select" size="2" name="type[]" multiple>
+          <select class="form-select ui-element" size="2" name="type[]" multiple>
             <option value="ORGANIC"{% if "ORGANIC" in request.params.getall("type[]") %} selected{% endif %}>{{ _("page.browse.filter.type.organic") }}</option>
             <option value="SYNTHETIC"{% if "SYNTHETIC" in request.params.getall("type[]") %} selected{% endif %}>{{ _("page.browse.filter.type.synthetic") }}</option>
           </select>
@@ -77,7 +77,7 @@
 
         {% if request.identity %}
         <div class="input-group mt-2">
-          <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button>
+          <button type="button" class="btn btn-outline-secondary button-clear-input ui-element"><i class="bi bi-eraser-fill"></i></button>
           <select class="form-select" name="favourite">
             <option value="">{{ _("page.browse.filter.favourite.all") }}</option>
             <option value="true"{% if request.params.get("favourite") == "true" %} selected{% endif %}>{{ _("page.browse.filter.favourite.yes") }}</option>
@@ -89,7 +89,7 @@
       <div class="col-md-6">
         {% if request.identity %}
         {% macro render_switch(id, name, value, text) %}
-        <div class="form-check form-switch">
+        <div class="form-check form-switch ui-element">
           <input class="form-check-input" type="checkbox" role="switch" id="{{ id }}" name="{{ name }}" value="{{ value }}" {% if value in request.params.getall(name) %}checked{% endif %}>
           <label class="form-check-label" for="{{ id }}">{{ text }}</label>
         </div>
@@ -104,20 +104,20 @@
 
       <div class="row g-3 mb-3">
         <div class="col">
-          <button type="submit" class="btn btn-primary">
+          <button type="submit" class="btn btn-primary ui-element">
             <i class="bi bi-funnel-fill"></i>
             {{ _("page.browse.filters.apply") }}
           </button>
-          <a class="btn btn-info" href="{{ request.route_path('browse') }}">
+          <a class="btn btn-info ui-element" href="{{ request.route_path('browse') }}">
             <i class="bi bi-x-octagon"></i>
             {{ _("page.browse.filters.clear_all") }}
           </a>
-          <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#advancedSearch" aria-expanded="false" aria-controls="advancedSearch">
+          <button class="btn btn-secondary ui-element" type="button" data-bs-toggle="collapse" data-bs-target="#advancedSearch" aria-expanded="false" aria-controls="advancedSearch">
             {{ _("page.browse.filters.expand_advanced") }}
           </button>
         </div>
         <div class="col">
-          <select class="form-select" name="sort">
+          <select class="form-select ui-element" name="sort">
             <option value="DATE_DESC" {% if request.params.get("sort") == "DATE_DESC" %}selected{% endif %}>{{ _("page.browse.sort.date") }} &ShortDownArrow;</option>
             <option value="DATE_ASC" {% if request.params.get("sort") == "DATE_ASC" %}selected{% endif %}>{{ _("page.browse.sort.date") }} &ShortUpArrow;</option>
             <option value="LENGTH_DESC" {% if request.params.get("sort") == "LENGTH_DESC" %}selected{% endif %}>{{ _("page.browse.sort.length") }} &ShortDownArrow;</option>
@@ -208,7 +208,7 @@
     </div>
   </div>
   {% endfor %}
-  <button type="button" class="btn btn-primary" id="archiveDownloadButton" disabled><i class="bi bi-file-earmark-zip"></i> {{ _("page.browse.download_multiple") }}</button>
+  <button type="button" class="btn btn-primary ui-element" id="archiveDownloadButton" disabled><i class="bi bi-file-earmark-zip"></i> {{ _("page.browse.download_multiple") }}</button>
   {% elif used_filters %}
   <p>{{ _("page.browse.no_results") }}</p>
   {% else %}
diff --git a/fietsboek/templates/details.jinja2 b/fietsboek/templates/details.jinja2
index 7307270..d8c9250 100644
--- a/fietsboek/templates/details.jinja2
+++ b/fietsboek/templates/details.jinja2
@@ -17,9 +17,9 @@
   </h1>
   {% if show_edit_link %}
   <div class="btn-group" role="group">
-    <a class="btn btn-success" href="{{ request.route_path('edit', track_id=track.id) }}"><i class="bi-pencil-square"></i> {{ _("page.details.edit") }}</a>
-    <button type="button" class="btn btn-info" id="showShareLink" data-bs-toggle="modal" data-bs-target="#shareLinkModal"><i class="bi-share"></i> {{ _("page.details.share") }}</button>
-    <button type="button" class="btn btn-danger" id="deleteLink" data-bs-toggle="modal" data-bs-target="#deleteModal"><i class="bi bi-trash"></i> {{ _("page.details.delete") }}</button>
+    <a class="btn btn-success ui-element" href="{{ request.route_path('edit', track_id=track.id) }}"><i class="bi-pencil-square"></i> {{ _("page.details.edit") }}</a>
+    <button type="button" class="btn btn-info ui-element" id="showShareLink" data-bs-toggle="modal" data-bs-target="#shareLinkModal"><i class="bi-share"></i> {{ _("page.details.share") }}</button>
+    <button type="button" class="btn btn-danger ui-element" id="deleteLink" data-bs-toggle="modal" data-bs-target="#deleteModal"><i class="bi bi-trash"></i> {{ _("page.details.delete") }}</button>
   </div>
   <div class="modal fade" id="shareLinkModal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog">
@@ -36,9 +36,9 @@
         <div class="modal-footer">
           <form method="POST" action="{{ request.route_url('invalidate-share', track_id=track.id) }}">
             {{ util.hidden_csrf_input() }}
-            <button type="submit" class="btn btn-warning">{{ _("page.details.sharelink.invalidate") }}</button>
+            <button type="submit" class="btn btn-warning ui-element">{{ _("page.details.sharelink.invalidate") }}</button>
           </form>
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _("page.details.sharelink.close") }}</button>
+          <button type="button" class="btn btn-secondary ui-element" data-bs-dismiss="modal">{{ _("page.details.sharelink.close") }}</button>
         </div>
       </div>
     </div>
@@ -57,9 +57,9 @@
         <div class="modal-footer">
           <form method="POST" action="{{ request.route_url('delete-track', track_id=track.id) }}">
             {{ util.hidden_csrf_input() }}
-            <button type="submit" class="btn btn-danger">{{ _("page.details.delete.delete") }}</button>
+            <button type="submit" class="btn btn-danger ui-element">{{ _("page.details.delete.delete") }}</button>
           </form>
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _("page.details.delete.close") }}</button>
+          <button type="button" class="btn btn-secondary ui-element" data-bs-dismiss="modal">{{ _("page.details.delete.close") }}</button>
         </div>
       </div>
     </div>
@@ -94,7 +94,7 @@
   </div>
 
   <div class="mb-3">
-    <a class="btn btn-primary" href="{{ gpx_url }}"><i class="bi bi-download"></i> {{ _("page.details.download") }}</a>
+    <a class="btn btn-primary ui-element" href="{{ gpx_url }}"><i class="bi bi-download"></i> {{ _("page.details.download") }}</a>
   </div>
 
   <table class="table table-hover table-sm">
@@ -146,7 +146,7 @@
     </tbody>
   </table>
   {% if track.badges %}
-  <div class="d-flex">
+  <div class="d-flex track-badges">
     {% for badge in track.badges %}
     {{ util.render_badge(badge) }}
     {% endfor %}
@@ -212,7 +212,7 @@
               <textarea name="comment" class="form-control" rows="5" placeholder="{{ _('page.details.comments.new.input_comment') }}"></textarea>
           </div>
           <div class="card-footer text-muted">
-              <button type="submit" class="btn btn-success"><i class="bi bi-pen"></i> {{ _("page.details.comments.new.submit") }}</button>
+              <button type="submit" class="btn btn-success ui-element"><i class="bi bi-pen"></i> {{ _("page.details.comments.new.submit") }}</button>
           </div>
           {{ util.hidden_csrf_input() }}
       </form>
diff --git a/fietsboek/templates/edit.jinja2 b/fietsboek/templates/edit.jinja2
index a9a4221..6347ae6 100644
--- a/fietsboek/templates/edit.jinja2
+++ b/fietsboek/templates/edit.jinja2
@@ -13,8 +13,8 @@
     {{ edit_form.edit_track(track.title, track.date_raw, track.date_tz or 0, track.visibility, track.type, track.description, track.text_tags(), badges, track.tagged_people, images) }}
     {{ util.hidden_csrf_input() }}
     <div class="btn-group" role="group">
-        <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> {{ _("page.edit.form.submit") }}</button>
-        <a href="{{ request.route_url('details', track_id=track.id) }}" class="btn btn-secondary"><i class="bi bi-x-circle"></i> {{ _("page.edit.form.cancel") }}</a>
+        <button type="submit" class="btn btn-primary ui-element"><i class="bi bi-save"></i> {{ _("page.edit.form.submit") }}</button>
+        <a href="{{ request.route_url('details', track_id=track.id) }}" class="btn btn-secondary ui-element"><i class="bi bi-x-circle"></i> {{ _("page.edit.form.cancel") }}</a>
     </div>
   </form>
 </div>
diff --git a/fietsboek/templates/edit_form.jinja2 b/fietsboek/templates/edit_form.jinja2
index aa09c9e..e515c3b 100644
--- a/fietsboek/templates/edit_form.jinja2
+++ b/fietsboek/templates/edit_form.jinja2
@@ -1,16 +1,16 @@
 {% macro edit_track(title, date, date_tz, visibility, type, description, tags, badges, friends, images) %}
 <div class="mb-3">
   <label for="formTitle" class="form-label">{{ _("page.track.form.title") }}</label>
-  <input class="form-control" type="text" id="formTitle" name="title" value="{{ title | default("", true) }}">
+  <input class="form-control ui-element" type="text" id="formTitle" name="title" value="{{ title | default("", true) }}">
 </div>
 <div class="mb-3">
   <label for="formDate" class="form-label">{{ _("page.track.form.date") }}</label>
-  <input class="form-control" type="datetime-local" id="formDate" name="date" value="{{ date.strftime('%Y-%m-%dT%H:%M') }}">
+  <input class="form-control ui-element" type="datetime-local" id="formDate" name="date" value="{{ date.strftime('%Y-%m-%dT%H:%M') }}">
   <input type="hidden" name="date-tz" value="{{ date_tz }}">
 </div>
 <div class="mb-3">
   <label for="formVisibility" class="form-label">{{ _("page.track.form.visibility") }}</label>
-  <select class="form-select" id="formVisibility" name="visibility">
+  <select class="form-select ui-element" id="formVisibility" name="visibility">
       <option value="PRIVATE"{% if visibility.name == "PRIVATE" %} selected{% endif %}>{{ _("page.track.form.visibility.private") }}</option>
       <option value="FRIENDS"{% if visibility.name == "FRIENDS" %} selected{% endif %}>{{ _("page.track.form.visibility.friends") }}</option>
       <option value="FRIENDS_TAGGED"{% if visibility.name == "FRIENDS_TAGGED" %} selected{% endif %}>{{ _("page.track.form.visibility.friends_tagged") }}</option>
@@ -23,7 +23,7 @@
 </div>
 <div class="mb-3">
   <label for="formType" class="form-label">{{ _("page.track.form.type") }}</label>
-  <select class="form-select" id="formType" name="type">
+  <select class="form-select ui-element" id="formType" name="type">
     <option value="ORGANIC"{% if type.name == "ORGANIC" %} selected{% endif%}>{{ _("page.track.form.type.organic") }}</option>
     <option value="SYNTHETIC"{% if type.name == "SYNTHETIC" %} selected{% endif%}>{{ _("page.track.form.type.synthetic") }}</option>
   </select>
@@ -37,7 +37,7 @@
   </div>
   <div class="row">
     <div class="col-lg-3">
-      <input type="text" id="new-tag" class="form-control" list="user-tags">
+      <input type="text" id="new-tag" class="form-control ui-element" list="user-tags">
       <datalist id="user-tags">
         {% if request.identity %}
         {% for tag in request.identity.autocomplete_tags() | sort %}
@@ -47,7 +47,7 @@
       </datalist>
     </div>
     <div class="col-lg-3">
-      <button type="button" class="btn btn-primary" id="add-tag-btn">{{ _("page.track.form.add_tag") }}</buttton>
+      <button type="button" class="btn btn-primary ui-element" id="add-tag-btn">{{ _("page.track.form.add_tag") }}</buttton>
     </div>
   </div>
 </div>
@@ -64,10 +64,10 @@
   </ul>
   <div class="row my-2">
     <div class="col-lg-3">
-      <input type="text" id="friendSearchQuery" class="form-control">
+      <input type="text" id="friendSearchQuery" class="form-control ui-element">
     </div>
     <div class="col-lg-3">
-      <button type="button" class="btn btn-primary" id="add-friend-btn"><i class="bi bi-search"></i> {{ _("page.track.form.add_friend") }}</buttton>
+      <button type="button" class="btn btn-primary ui-element" id="add-friend-btn"><i class="bi bi-search"></i> {{ _("page.track.form.add_friend") }}</buttton>
     </div>
   </div>
   <!-- Hidden templates for Javascript to use -->
@@ -101,7 +101,7 @@
 </div>
 <div class="mb-3">
   <label for="formDesc" class="form-label">{{ _("page.track.form.description") }}</label>
-  <textarea class="form-control" id="formDesc" name="description" rows="5">{{ description | default("", true) }}</textarea>
+  <textarea class="form-control ui-element" id="formDesc" name="description" rows="5">{{ description | default("", true) }}</textarea>
 </div>
 <div class="mb-3">
   <div id="trackImageList">
@@ -115,8 +115,8 @@
     </div>
     {% endfor %}
   </div>
-  <input type="file" name="image[]" id="imageSelector" class="form-control" accept="image/*" style="display:none;" multiple>
-  <button type="button" onclick="document.querySelector('#imageSelector').click()" class="btn btn-primary" id="selectImagesButton" {% if not request.config.enable_image_uploads %}disabled{% endif %}>
+  <input type="file" name="image[]" id="imageSelector" class="form-control ui-element" accept="image/*" style="display:none;" multiple>
+  <button type="button" onclick="document.querySelector('#imageSelector').click()" class="btn btn-primary ui-element" id="selectImagesButton" {% if not request.config.enable_image_uploads %}disabled{% endif %}>
       <i class="bi bi-images"></i> {{ _("page.track.form.select_images") }}
   </button>
   {% if not request.config.enable_image_uploads %}
@@ -146,7 +146,7 @@
         <textarea class="form-control"></textarea>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-success">{{ _("page.track.form.image_description_modal.save") }}</button>
+        <button type="button" class="btn btn-success ui-element">{{ _("page.track.form.image_description_modal.save") }}</button>
       </div>
     </div>
   </div>
diff --git a/fietsboek/templates/finish_upload.jinja2 b/fietsboek/templates/finish_upload.jinja2
index 9ee4576..34d4aac 100644
--- a/fietsboek/templates/finish_upload.jinja2
+++ b/fietsboek/templates/finish_upload.jinja2
@@ -13,8 +13,8 @@
     {{ edit_form.edit_track(upload_title, upload_date, upload_date_tz, upload_visibility, upload_type, upload_description, upload_tags, badges, upload_tagged_people, []) }}
     {{ util.hidden_csrf_input() }}
     <div class="btn-group" role="group">
-      <button type="submit" class="btn btn-primary">{{ _("page.upload.form.submit") }}</button>
-      <button type="submit" class="btn btn-danger" form="cancelForm">{{ _("page.upload.form.cancel") }}</button>
+      <button type="submit" class="btn btn-primary ui-element">{{ _("page.upload.form.submit") }}</button>
+      <button type="submit" class="btn btn-danger ui-element" form="cancelForm">{{ _("page.upload.form.cancel") }}</button>
     </div>
   </form>
   <form id="cancelForm" method="POST" action="{{ request.route_url('cancel-upload', upload_id=preview_id) }}">
diff --git a/fietsboek/templates/home.jinja2 b/fietsboek/templates/home.jinja2
index 6092669..e9e1d42 100644
--- a/fietsboek/templates/home.jinja2
+++ b/fietsboek/templates/home.jinja2
@@ -23,7 +23,7 @@
   </div>
   {% endif %}
   {% if summary %}
-  <div class="list-group list-group-root">
+  <div class="list-group list-group-root" id="homeOverview">
     {% for year in summary %}
     <a class="list-group-item list-group-item-primary">
       <i class="bi bi-chevron-down summary-toggler"></i>
diff --git a/fietsboek/templates/layout.jinja2 b/fietsboek/templates/layout.jinja2
index eae8cb4..b61c359 100644
--- a/fietsboek/templates/layout.jinja2
+++ b/fietsboek/templates/layout.jinja2
@@ -15,7 +15,7 @@
     <link rel="stylesheet" href="{{request.static_url('fietsboek:static/bootstrap-icons.css')}}">
 
     <!-- Custom styles for this scaffold -->
-    <link href="{{request.static_url('fietsboek:static/fonts.css')}}" rel="stylesheet">
+    <link href="{{request.static_url('fietsboek:static/inter.css')}}" rel="stylesheet">
     <link href="{{request.static_url('fietsboek:static/theme.css')}}" rel="stylesheet">
     <!-- Pre-load leaflet CSS -->
     <link href="{{request.static_url('fietsboek:static/GM_Utils/leaflet/leaflet.css')}}" rel="stylesheet">
@@ -122,7 +122,7 @@ const Legende = false;
         <hr>
         <div id="languageChooser">
           {% for lang_code, display_name in list_languages(request) %}
-          <a href="#" class="language-choice" data-langcode="{{ lang_code }}">{{ display_name }}</a>
+          <a href="#" class="language-choice ui-element" data-langcode="{{ lang_code }}">{{ display_name }}</a>
           {% endfor %}
         </div>
       </div>
diff --git a/fietsboek/templates/login.jinja2 b/fietsboek/templates/login.jinja2
index bdf2c99..7a0f34b 100644
--- a/fietsboek/templates/login.jinja2
+++ b/fietsboek/templates/login.jinja2
@@ -9,16 +9,16 @@
     <div class="row justify-content-center">
       <div class="col-lg-5 mb-3">
         <div class="form-floating">
-          <input type="email" class="form-control" id="loginEmail" name="email" placeholder="x">
-          <label for="loginEmail" class="form-label">{{ _("page.login.email") }}</label>
+          <input type="email" class="form-control ui-element" id="loginEmail" name="email" placeholder="x">
+          <label for="loginEmail" class="form-label ui-element">{{ _("page.login.email") }}</label>
         </div>
       </div>
     </div>
     <div class="row justify-content-center">
       <div class="col-lg-5 mb-3">
         <div class="form-floating">
-          <input type="password" class="form-control" id="loginPassword" name="password" placeholder="x">
-          <label for="loginPassword" class="form-label">{{ _("page.login.password") }}</label>
+          <input type="password" class="form-control ui-element" id="loginPassword" name="password" placeholder="x">
+          <label for="loginPassword" class="form-label ui-element">{{ _("page.login.password") }}</label>
         </div>
       </div>
     </div>
@@ -26,7 +26,7 @@
       <div class="col-lg-5 mb-3">
         <div class="form-check">
           <input class="form-check-input" type="checkbox" name="remember-me" id="rememberMe" value="on">
-          <label class="form-check-label" for="rememberMe">
+          <label class="form-check-label ui-element" for="rememberMe">
             {{ _("page.login.remember-me") }}
           </label>
         </div>
@@ -35,14 +35,14 @@
     {{ util.hidden_csrf_input() }}
     <div class="row justify-content-center">
       <div class="col-auto mb-3">
-        <button type="submit" class="btn btn-primary"><i class="bi bi-door-open"></i> {{ _("page.login.submit") }}</button>
+        <button type="submit" class="btn btn-primary ui-element"><i class="bi bi-door-open"></i> {{ _("page.login.submit") }}</button>
       </div>
     </div>
     <div class="row justify-content-center">
       <div class="col-auto mb-3">
-        <a href="{{ request.route_url("password-reset") }}">{{ _("page.login.forgot_password") }}</a>
+        <a href="{{ request.route_url("password-reset") }}" class="ui-element">{{ _("page.login.forgot_password") }}</a>
         &bull;
-        <a href="{{ request.route_url("resend-verification") }}">{{ _("page.login.resend_verification") }}</a>
+        <a href="{{ request.route_url("resend-verification") }}" class="ui-element">{{ _("page.login.resend_verification") }}</a>
       </div>
     </div>
   </form>
diff --git a/fietsboek/templates/upload.jinja2 b/fietsboek/templates/upload.jinja2
index 6406e91..b065a96 100644
--- a/fietsboek/templates/upload.jinja2
+++ b/fietsboek/templates/upload.jinja2
@@ -6,11 +6,11 @@
   <h1>{{ _("page.upload.title") }}</h1>
   <form method="POST" enctype="multipart/form-data">
     <div class="mb-3">
-      <label for="uploadFile" class="form-label">{{ _("page.upload.form.gpx") }}</label>
-      <input class="form-control" type="file" id="uploadFile" name="gpx">
+      <label for="uploadFile" class="form-label ui-element">{{ _("page.upload.form.gpx") }}</label>
+      <input class="form-control ui-element" type="file" id="uploadFile" name="gpx">
     </div>
     {{ util.hidden_csrf_input() }}
-    <button type="submit" class="btn btn-primary"><i class="bi bi-upload"></i> {{ _("page.upload.form.submit") }}</button>
+    <button type="submit" class="btn btn-primary ui-element"><i class="bi bi-upload"></i> {{ _("page.upload.form.submit") }}</button>
   </form>
 </div>
 {% endblock %}
diff --git a/fietsboek/templates/user_data.jinja2 b/fietsboek/templates/user_data.jinja2
index 59124ea..eada958 100644
--- a/fietsboek/templates/user_data.jinja2
+++ b/fietsboek/templates/user_data.jinja2
@@ -12,25 +12,25 @@
 
   <form method="POST" action="{{ request.route_path('user-data') }}" class="needs-validation" novalidate>
     <div class="form-floating mb-3 col-lg-5">
-      <input type="text" class="form-control" id="inputName" name="name" value="{{ user.name }}" placeholder="x">
+      <input type="text" class="form-control ui-element" id="inputName" name="name" value="{{ user.name }}" placeholder="x">
       <label for="inputName">{{ _("page.my_profile.personal_data.name") }}</label>
     </div>
     <div class="form-floating mb-3 col-lg-5">
-      <input type="password" class="form-control" id="inputPassword" name="password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')" placeholder="x">
+      <input type="password" class="form-control ui-element" id="inputPassword" name="password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')" placeholder="x">
       <div class="invalid-feedback">
           {{ _("page.my_profile.personal_data.password_invalid") }}
       </div>
       <label for="inputPassword">{{ _("page.my_profile.personal_data.password") }}</label>
     </div>
     <div class="form-floating mb-3 col-lg-5">
-      <input type="password" class="form-control" id="repeatPassword" name="repeat-password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')" placeholder="x">
+      <input type="password" class="form-control ui-element" id="repeatPassword" name="repeat-password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')" placeholder="x">
       <div class="invalid-feedback">
           {{ _("page.my_profile.personal_data.password_must_match") }}
       </div>
       <label for="repeatPassword">{{ _("page.my_profile.personal_data.repeat_password") }}</label>
     </div>
     {{ util.hidden_csrf_input() }}
-    <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> {{ _("page.my_profile.personal_data.save") }}</button>
+    <button type="submit" class="btn btn-primary ui-element"><i class="bi bi-save"></i> {{ _("page.my_profile.personal_data.save") }}</button>
   </form>
 
   <hr>
@@ -41,7 +41,7 @@
 
   <form method="POST" action="{{ request.route_path('force-logout') }}">
     {{ util.hidden_csrf_input() }}
-    <button type="submit" class="btn btn-danger"><i class="bi bi-shield-lock-fill"></i> {{ _("page.my_profile.session_logout.button") }}</button>
+    <button type="submit" class="btn btn-danger ui-element"><i class="bi bi-shield-lock-fill"></i> {{ _("page.my_profile.session_logout.button") }}</button>
   </form>
 
   <hr>
@@ -54,7 +54,7 @@
       <form action="{{ request.route_url('delete-friend') }}" method="POST">
         <input type="hidden" name="friend-id" value="{{ friend.id }}">
         {{ util.hidden_csrf_input() }}
-        <button type="submit" class="btn btn-danger"><i class="bi bi-person-dash"></i> {{ _("page.my_profile.unfriend") }}</button>
+        <button type="submit" class="btn btn-danger ui-element"><i class="bi bi-person-dash"></i> {{ _("page.my_profile.unfriend") }}</button>
       </form>
       <span class="ms-3">{{ friend.name }} ({{ friend.email }})</span>
     </li>
@@ -64,7 +64,7 @@
       <form action="{{ request.route_url('accept-friend') }}" method="POST">
         <input type="hidden" name="request-id" value="{{ friend_request.id }}">
         {{ util.hidden_csrf_input() }}
-        <button type="submit" class="btn btn-success"><i class="bi bi-person-check"></i> {{ _("page.my_profile.accept_friend") }}</button>
+        <button type="submit" class="btn btn-success ui-element"><i class="bi bi-person-check"></i> {{ _("page.my_profile.accept_friend") }}</button>
       </form>
       <span class="ms-3">{{ friend_request.sender.name }} ({{ friend_request.sender.email }})</span>
     </li>
@@ -80,12 +80,12 @@
       <div class="row align-items-center">
         <div class="col-lg-5">
           <div class="form-floating">
-            <input type="email" id="friendRequestEmail" name="friend-email" class="form-control" placeholder="x">
+            <input type="email" id="friendRequestEmail" name="friend-email" class="form-control ui-element" placeholder="x">
             <label for="friendRequestEmail">{{ _("page.my_profile.friend_request_email") }}</label>
           </div>
         </div>
         <div class="col-lg-3">
-          <button class="btn btn-primary"><i class="bi bi-person-plus"></i> {{ _("page.my_profile.send_friend_request") }}</button>
+          <button class="btn btn-primary ui-element"><i class="bi bi-person-plus"></i> {{ _("page.my_profile.send_friend_request") }}</button>
         </div>
       </div>
     </form>