diff --git a/dev/scss/header/datepicker.scss b/dev/scss/header/datepicker.scss
index ecc509d..bb34823 100644
--- a/dev/scss/header/datepicker.scss
+++ b/dev/scss/header/datepicker.scss
@@ -1,5 +1,10 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
 
 /**
  * Rules for the datepicker widget
@@ -8,18 +13,18 @@
  */
 
 div.datepicker {
-  @include choose-item;
+  @include choose.choose-item;
   position:   absolute;
   display:    inline-block;
   z-index:    90;
   font-size:  80%;
   padding:    4pt;
-  box-shadow: $choose-box-shadow;
+  box-shadow: choose.$choose-box-shadow;
 
   border: {
-    width:  $border-size;
+    width:  lengths.$border-size;
     style:  solid;
-    radius: $standard-border-radius;
+    radius: lengths.$standard-border-radius;
   }
 
   > div {
@@ -39,7 +44,7 @@
       &:last-child {
 	      width: 15%;
 	      &::before {
-          @include icon-font;
+          @include mixins.icon-font;
 	        display:    inline-block;
 	        text-align: center;
 	        cursor:     pointer;
@@ -48,11 +53,11 @@
       }
 
       &:first-child::before {
-	      content: $fa-previous;
+	      content: icons.$fa-previous;
       }
 
       &:last-child::before {
-	      content: $fa-next;
+	      content: icons.$fa-next;
       }
 
       &:nth-child(2) {
@@ -63,18 +68,18 @@
 	      text-overflow: ellipsis;
 
 	      border: {
-	        radius: $standard-border-radius;
+	        radius: lengths.$standard-border-radius;
 	        style:  solid;
-	        width:  $border-size;
+	        width:  lengths.$border-size;
 	        color:  transparent;
 	      }
 
 	      &:hover {
-	        @include choose-hover;
+	        @include choose.choose-hover;
 	      }
 
 	      &.selected {
-	        @include choose-active;
+	        @include choose.choose-active;
 	      }
       }
     }
@@ -86,9 +91,9 @@
   }
 
   input {
-    @include choose-item;
-    @include standard-text-padding;
-    background-color: $nearly-white;
+    @include choose.choose-item;
+    @include mixins.standard-text-padding;
+    background-color: colors.$nearly-white;
     width:            100%;
 
     border: {
@@ -98,7 +103,7 @@
   }
 
   td {
-    @include standard-text-padding;
+    @include mixins.standard-text-padding;
     text-align: center;
 
     border: {
@@ -107,22 +112,22 @@
     }
 
     &:not(.out) {
-      @include choose-item;
+      @include choose.choose-item;
       cursor: pointer;
-      background-color: $nearly-white;
+      background-color: colors.$nearly-white;
 
       &.today {
-	      background-color: $light-blue;
-	      color: $dark-blue;
+	      background-color: colors.$light-blue;
+	      color: colors.$dark-blue;
 	      text-shadow: none;
       }
 
       &.selected {
-	      @include choose-active;
+	      @include choose.choose-active;
       }
 
       &:hover {
-	      @include choose-hover;
+	      @include choose.choose-hover;
       }
     }
 
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index 6e18f93..d84ea71 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -1,21 +1,25 @@
 @charset "utf-8";
 @use 'sass:math';
-@import "../util";
-@import "hint";          // Hint specific menu list
-@import "containermenu"; // Container menu specific
-@import "searchbar";     // The search bar
-@import "vc";            // Virtual corpus builder
-@import "statistics";    // Statistics for VCs
-@import "datepicker";    // Datepicker
-@import "querylanguage"; // Query language
-@import "pipe";          // Pipe
-@import "state";         // State
-@import "panel";         // Panel
+@use "../util";
+@use "hint";          // Hint specific menu list
+@use "containermenu"; // Container menu specific
+@use "searchbar";     // The search bar
+@use "vc";            // Virtual corpus builder
+@use "statistics";    // Statistics for VCs
+@use "datepicker";    // Datepicker
+@use "querylanguage"; // Query language
+@use "pipe";          // Pipe
+@use "state";         // State
+@use "panel";         // Panel
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
 
 .navbar {
   width: 100%;
-  height: $standard-size-and-spacing;
-  background-color: $dark-green;
+  height: lengths.$standard-size-and-spacing;
+  background-color: colors.$dark-green;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -35,7 +39,7 @@
     align-items: center;
 
     h3.nav-link {
-      height: $standard-size-and-spacing;
+      height: lengths.$standard-size-and-spacing;
       font-size: 1rem;
       transition:  all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
@@ -44,13 +48,13 @@
       cursor: pointer;
 
       &:hover {
-        background-color: $middle-green;
+        background-color: colors.$middle-green;
       }
 
       a {
         display: block;
         padding: 1.5rem 1rem;
-        color: $nearly-white;
+        color: colors.$nearly-white;
         cursor: pointer;
       }
     }
@@ -59,7 +63,7 @@
   .dropdown {
     display: flex;
     align-items: center;
-    margin-right: $standard-size-and-spacing;
+    margin-right: lengths.$standard-size-and-spacing;
     position: relative;
 
     &:hover .dropdown-content,
@@ -69,17 +73,17 @@
 
     &:hover .dropdown-btn,
     &:focus-within .dropdown-btn {
-      color: $nearly-white;
-      background-color: $middle-green;
+      color: colors.$nearly-white;
+      background-color: colors.$middle-green;
     }
 
     &-btn {
       display: flex;
       align-items: center;
-      column-gap: $base-padding;
-      height: $standard-size-and-spacing;
+      column-gap: lengths.$base-padding;
+      height: lengths.$standard-size-and-spacing;
       padding: 1.25rem 1rem;
-      color: $nearly-white;
+      color: colors.$nearly-white;
       transition:  all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
@@ -87,14 +91,14 @@
       cursor: pointer;
 
       &.login::before {
-        @include icon-font;
-        content: $fa-login;
+        @include mixins.icon-font;
+        content: icons.$fa-login;
         font-size: 150%;
       }
       
       &.profile::before {
-        @include icon-font;
-        content: $fa-user;
+        @include mixins.icon-font;
+        content: icons.$fa-user;
         font-size: 150%;
       }
 
@@ -112,9 +116,9 @@
     &-content {
       display: none;
       width: fit-content;
-      margin-top: $standard-size-and-spacing;
+      margin-top: lengths.$standard-size-and-spacing;
       padding: 0;
-      background-color: $middle-green;
+      background-color: colors.$middle-green;
       position: absolute;
       top: 0;
       z-index: 999;
@@ -134,13 +138,13 @@
         align-items: center;
 
         legend {
-          padding-bottom: $base-padding;
-          color: $nearly-white;
+          padding-bottom: lengths.$base-padding;
+          color: colors.$nearly-white;
         }
         
         input[type=text],
         input[type=password] {
-          @include input-field;
+          @include mixins.input-field;
           margin-bottom: 8px;
           height: 2rem;
         }
@@ -149,8 +153,8 @@
           width: 100%;
           height: 2rem;
           margin-bottom: 1rem;
-          background-color: $dark-green;
-          color: $nearly-white;
+          background-color: colors.$dark-green;
+          color: colors.$nearly-white;
           font-size: 120%;
           border: none;
           border-color: unset;
@@ -164,12 +168,12 @@
           -webkit-transition: all .2s ease-in-out;
   
           &::after {
-            content: $fa-login;
+            content: icons.$fa-login;
           }
 
           &:hover {
             // color: $dark-orange;
-            background-color: $dark-orange;
+            background-color: colors.$dark-orange;
           }
         }
       }
@@ -177,13 +181,13 @@
       p {
         margin: 0;
         font-size: .7rem;
-        color: $nearly-white;
+        color: colors.$nearly-white;
 
         a {
-          color: $dark-orange;
+          color: colors.$dark-orange;
 
           &:hover {
-            color: $middle-orange;
+            color: colors.$middle-orange;
           }
         }
       }
@@ -195,7 +199,7 @@
       gap: 5px;
       padding: .75rem;
       font-size: 1rem;
-      color: $nearly-white;
+      color: colors.$nearly-white;
       transition:  all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
@@ -203,13 +207,13 @@
       cursor: pointer;
 
       &:hover {
-        color: $nearly-white;
-        background-color: $light-green;
+        color: colors.$nearly-white;
+        background-color: colors.$light-green;
       }
 
       &.logout::before {
-        @include icon-font;
-        content: $fa-logout;
+        @include mixins.icon-font;
+        content: icons.$fa-logout;
         font-size: 1rem;
       }
 
@@ -223,23 +227,23 @@
     display: none;
 
     &::after {
-      @include icon-font;
-      content: $fa-bars;
+      @include mixins.icon-font;
+      content: icons.$fa-bars;
     }
   }
 }
 
 header {
-  @include box-sizing-box();
+  @include mixins.box-sizing-box();
   position:         relative;
-  background-color: $light-green;
+  background-color: colors.$light-green;
   // padding:          $base-padding 0 0 $base-padding;
-  padding-top:      $standard-size-and-spacing;
+  padding-top:      lengths.$standard-size-and-spacing;
   font-size:        10pt;
-  color:            $nearly-white;
+  color:            colors.$nearly-white;
 
   &.shifted {
-    padding-left: $logo-left-distance;
+    padding-left: lengths.$logo-left-distance;
   }
 
   span.select {
@@ -259,15 +263,15 @@
     }
 
     &:hover {
-      color:        $dark-green;
-      border-color: $dark-green;
+      color:        colors.$dark-green;
+      border-color: colors.$dark-green;
     }
 
     &::after {
-      @include icon-font;
+      @include mixins.icon-font;
       pointer-events: none;
       text-align:     center;
-      content:        $fa-down;
+      content:        icons.$fa-down;
 
       padding: {
 	      left:  4pt;
@@ -276,9 +280,9 @@
     }
 
     &.active {
-      border-color: $dark-orange;
+      border-color: colors.$dark-orange;
       &::after {
-        content: $fa-up;
+        content: icons.$fa-up;
       }
     }
   }
@@ -290,18 +294,18 @@
     min-height:   2.7em;
 
     &#searchform {
-      margin: 0 $standard-size-and-spacing;
+      margin: 0 lengths.$standard-size-and-spacing;
     }
   }
 
   input {
-    @include input-field;
+    @include mixins.input-field;
   }
 
   .button {
-    color:        $nearly-white;
+    color:        colors.$nearly-white;
     line-height:  2em;
-    margin-right: $right-distance;
+    margin-right: lengths.$right-distance;
 
     &.right {
       float:   right;
@@ -319,29 +323,29 @@
       margin-right:     0;
       width:            20px;
       // width:            math.div($standard-margin,2);
-      background-color: $dark-green;
+      background-color: colors.$dark-green;
       text-align:       center;
       height:           100%;
       z-index:          20;
 
       > a:hover {
-	      color: $nearly-white
+	      color: colors.$nearly-white
       }
     }
 
     > a {
-      color:     $nearly-white;
+      color:     colors.$nearly-white;
       cursor:    pointer;
       position:  relative;
       font-size: 120%;
 
       > span {
-	      @include blind;
+	      @include mixins.blind;
       }
     }
 
     > a::after {
-      @include icon-font;
+      @include mixins.icon-font;
     }
 
     // > a.tutorial::after {
@@ -349,15 +353,15 @@
     // }
 
     > a.question::after {
-      content: $fa-question;
+      content: icons.$fa-question;
     }
 
     > a.login::after {
-      content: $fa-login;
+      content: icons.$fa-login;
     }
 
     > a.logout::after {
-      content: $fa-logout;
+      content: icons.$fa-logout;
     }
   }
 }
diff --git a/dev/scss/header/hint.scss b/dev/scss/header/hint.scss
index 6184dc1..8716258 100644
--- a/dev/scss/header/hint.scss
+++ b/dev/scss/header/hint.scss
@@ -1,5 +1,8 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/colors";
+@use "../base/lengths";
 
 /**
  * Rules for the Kalamar hint helper.
@@ -24,18 +27,18 @@
 // Alert bubble
 div.alert.hint {
   position:         absolute;
-  background-color: $alert-red;
-  color:            $nearly-white;
-  padding:          $item-padding;
+  background-color: colors.$alert-red;
+  color:            colors.$nearly-white;
+  padding:          lengths.$item-padding;
   margin-top:       8px;
-  box-shadow:       $choose-box-shadow;
+  box-shadow:       choose.$choose-box-shadow;
   width:            auto;
   min-width:        20em;
   max-width:        23em !important;
   transition:       opacity 0.2s ease 0s;
 
   border: {
-    radius:          $standard-border-radius;
+    radius:          lengths.$standard-border-radius;
     top-left-radius: 0;
   }
 
@@ -50,7 +53,7 @@
     border: {
       width: 0 8px 12px 0;
       style: solid;
-      color: $alert-red transparent;
+      color: colors.$alert-red transparent;
     }
   }
 }
@@ -83,12 +86,12 @@
     left:       0;
     text-align: left;
     padding:    0;
-    border-top: 5px solid $dark-orange;
+    border-top: 5px solid colors.$dark-orange;
     height:     10px;
     width:      1.2em;
 
     &:hover:not(.active) {
-      border-top: 10px solid $dark-orange;
+      border-top: 10px solid colors.$dark-orange;
     }
 
     &.active {
diff --git a/dev/scss/header/panel.scss b/dev/scss/header/panel.scss
index 459ab2b..e0fe6c6 100644
--- a/dev/scss/header/panel.scss
+++ b/dev/scss/header/panel.scss
@@ -1,11 +1,13 @@
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/lengths";
 
 // In addition to main/panel.scss
 
 div.panel.query div.view {
-  background-color: $dark-green;
-  border-left: $border-size solid $dark-green;
+  background-color: colors.$dark-green;
+  border-left: lengths.$border-size solid colors.$dark-green;
   iframe {
-    background-color: $nearly-white;
+    background-color: colors.$nearly-white;
   }
 }
diff --git a/dev/scss/header/querylanguage.scss b/dev/scss/header/querylanguage.scss
index 44978bb..2904883 100644
--- a/dev/scss/header/querylanguage.scss
+++ b/dev/scss/header/querylanguage.scss
@@ -1,4 +1,5 @@
-@import "../util";
+@use "../util";
+@use "../base/colors";
 
 /**
  * Temporary hack for language chooser
@@ -8,7 +9,7 @@
  */
 #ql-field {
   position:         relative;
-  background-color: $light-green;
+  background-color: colors.$light-green;
   cursor:           pointer;
   margin:           0;
   outline:          none;
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index 4ccb254..19fcaf8 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -1,5 +1,8 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
 
 
 /**
@@ -18,7 +21,7 @@
 
   &.loading {
     background: {
-      color: $light-orange;
+      color: colors.$light-orange;
       image: none;
     }
   }
@@ -39,13 +42,13 @@
     right: 0;
 
     &:not(.loading)::after {
-      content: $fa-search;
+      content: icons.$fa-search;
     }
   }
 }
 
 .query.panel {
-  padding-right: $button-width;
+  padding-right: lengths.$button-width;
 }
 
 // Specify result button group layout
diff --git a/dev/scss/header/statistics.scss b/dev/scss/header/statistics.scss
index 500fc70..0776b13 100644
--- a/dev/scss/header/statistics.scss
+++ b/dev/scss/header/statistics.scss
@@ -1,5 +1,8 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
 
 
 /**
@@ -9,7 +12,7 @@
 div.stattable {
   display: flex;
   flex-direction: row;
-  margin-right: $right-view-distance;
+  margin-right: lengths.$right-view-distance;
 }
 
 div.stattable {
@@ -17,10 +20,10 @@
     margin-bottom:4px;
 
     > div {
-      border-color: $dark-green;
+      border-color: colors.$dark-green;
 
       > dt {
-        background-color: $middle-green;
+        background-color: colors.$middle-green;
         width:            15em;
         margin:           0;
 
@@ -29,8 +32,8 @@
         }
       }   
       > dd {
-        background-color: $lightest-green;
-        color:            $dark-grey;
+        background-color: colors.$lightest-green;
+        color:            colors.$dark-grey;
       }
     }
   }
@@ -38,8 +41,8 @@
   &.stdisabled {
     dt,
     dd {
-      background-color: $grey-green;
-      color:            $dark-green;
+      background-color: colors.$grey-green;
+      color:            colors.$dark-green;
       text-shadow:      none;
     }
   }
@@ -53,7 +56,7 @@
 
 span.refresh::after{
   vertical-align: sub;
-  content :       $fa-redo;
+  content :       icons.$fa-redo;
 }
 
 // Default value 20% doesn't work with < 5 items,
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index 5ba1b51..a8acb09 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -1,5 +1,10 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
 
 /**
  * Virtual Collection Builder
@@ -17,7 +22,7 @@
 
     + .action {
       .minimize::after {
-        color: $dark-grey !important;
+        color: colors.$dark-grey !important;
       }
     }
   }
@@ -29,7 +34,7 @@
     padding:     4pt 2pt 4pt 0pt;
 
     border: {
-      radius: $standard-border-radius * 2;
+      radius: lengths.$standard-border-radius * 2;
       style:  solid;
       width:  0 $bracket-size;
     }
@@ -53,7 +58,7 @@
         width:       $left-padding;
         margin-left: -1 * ($left-padding + .5em);
         line-height: 1.5em;
-        border-top:  $border-size solid transparent;
+        border-top:  lengths.$border-size solid transparent;
       }
 
       > .docGroup::before {
@@ -140,7 +145,7 @@
         }
 
         &.fixed {
-          color: $light-green;
+          color: colors.$light-green;
         }
       }
     }
@@ -148,14 +153,14 @@
     // Unspecified value
     &.unspecified > span,
     span.unspecified {
-      @include choose-item;
+      @include choose.choose-item;
       padding:    0 4px;
-      box-shadow: $choose-box-shadow;
+      box-shadow: choose.$choose-box-shadow;
 
       border: {
         style:  solid;
-        width:  $border-size;
-        radius: $standard-border-radius;
+        width:  lengths.$border-size;
+        radius: lengths.$standard-border-radius;
       }
     }
 
@@ -169,12 +174,12 @@
   .rewritten .rewrite {
     display:     inline-block;
     margin-left: 4pt;
-    color:       $dark-orange;
+    color:       colors.$dark-orange;
     &::after {
-      @include icon-font;
+      @include mixins.icon-font;
       font-style:      normal;
       font-weight:     normal;
-      content:         $fa-rewrite;
+      content:         icons.$fa-rewrite;
       text-decoration: underline;
     }
 
@@ -206,8 +211,8 @@
   // referTo entries
   .menu li[data-type=ref]::before,
   span.key.ref::before {
-    @include icon-font;
-    content:       $fa-referto;
+    @include mixins.icon-font;
+    content:       icons.$fa-referto;
     padding-right: 4pt;
     font: {
       style:  normal;
@@ -224,8 +229,8 @@
     margin-top: -6pt;
 
     border: {
-      radius: $standard-border-radius;
-      width:  $border-size;
+      radius: lengths.$standard-border-radius;
+      width:  lengths.$border-size;
       style:  solid;
     }
 
@@ -235,7 +240,7 @@
     }
 
     > div {
-      @include choose-item;
+      @include choose.choose-item;
       display: inline-block;
       padding: 0 4pt;
       margin-left: 4pt;
@@ -246,9 +251,9 @@
       }
 
       border: {
-        width:  $border-size;
+        width:  lengths.$border-size;
         style:  solid;
-        radius: $standard-border-radius;
+        radius: lengths.$standard-border-radius;
       }
     }
 
@@ -258,7 +263,7 @@
       }
 
       > div {
-        @include choose-active;
+        @include choose.choose-active;
       }
     }
   }
@@ -271,7 +276,7 @@
 
   .docGroup,
   .doc {
-    color: $dark-grey;
+    color: colors.$dark-grey;
   }
   
   /**
@@ -285,7 +290,7 @@
   .doc > span:not(.fixed) {
     cursor: pointer;
     &:hover {
-      color: $dark-orange;
+      color: colors.$dark-orange;
     }
   }
 
@@ -293,7 +298,7 @@
   .doc.unspecified > span,
   span.unspecified {
     &:hover {
-	    @include choose-hover;
+	    @include choose.choose-hover;
     }
   }
   
@@ -307,22 +312,22 @@
     &[data-operation] {
       > .doc::before,
       > .docGroup::before {
-        color: $dark-orange;
+        color: colors.$dark-orange;
       }
     }
     &[data-operation=or] {
-      border-color: $dark-orange;
+      border-color: colors.$dark-orange;
     }
   }
 
   div.value {
-    @include choose-item;
-    box-shadow: $choose-box-shadow;
+    @include choose.choose-item;
+    box-shadow: choose.$choose-box-shadow;
 
     > div {
       cursor:  pointer;
       &:hover {
-        @include choose-hover;
+        @include choose.choose-hover;
       }
     }
   }
@@ -380,15 +385,15 @@
 
 #collection {
   line-height: 1em;
-  border-radius: $standard-border-radius;
+  border-radius: lengths.$standard-border-radius;
 }
 
 #vc-choose > span.rewritten::after {
-  @include icon-font;
-  color:           $dark-orange;
+  @include mixins.icon-font;
+  color:           colors.$dark-orange;
   padding:         0;
   padding-left:    4px;
-  content:         $fa-rewrite;
+  content:         icons.$fa-rewrite;
   text-decoration: underline;
   font-style:      normal;
   font-weight:     normal;
@@ -400,8 +405,8 @@
   > div.vc {
     display:          none;
     margin:           1.3em 0 .5em 0;
-    border:           2px solid $dark-green;
-    background-color: $nearly-white;
+    border:           2px solid colors.$dark-green;
+    background-color: colors.$nearly-white;
 
     &.active {
       display: block;
@@ -415,7 +420,7 @@
 
 div.panel.vcinfo {
   padding:          3pt 0pt 3pt 3pt;
-  background-color: $dark-green;
+  background-color: colors.$dark-green;
 
   div.button-group > span {
     box-shadow: none;