diff --git a/source/style/demo.scss b/source/style/demo.scss
index 24ae0f0..73e17c1 100644
--- a/source/style/demo.scss
+++ b/source/style/demo.scss
@@ -2,15 +2,15 @@
 // Then import your config and hippie
 // NOTE: No css rules allowed in here
 // ------------------------------------------------------------------------------
-@import "demo_config";
-@import "hippie-style/hippie";
+@use "demo_config";
+@use "hippie-style/hippie";
 
 // Additional Modules and variables
 // in dependency to other basic styles
 // could be defined here
 // -----------------------------------------------------------------------------
-@import "modules/card/card_module";
-@import "modules/portal/portal_module";
-@import "modules/songbook/songbook_module";
-@import "modules/demo/demo_module";
-// @import "modules/YOUR-MODULE/YOUR-FILES";
+@use "modules/card/card_module";
+@use "modules/portal/portal_module";
+@use "modules/songbook/songbook_module";
+@use "modules/demo/demo_module";
+// @use "modules/YOUR-MODULE/YOUR-FILES";
diff --git a/source/style/demo_basic.scss b/source/style/demo_basic.scss
index 3efdbf1..0cb7771 100644
--- a/source/style/demo_basic.scss
+++ b/source/style/demo_basic.scss
@@ -2,12 +2,12 @@
 // Then import your config and hippie
 // NOTE // No css rules allowed in here
 // ------------------------------------------------------------------------------
-@import "demo_config";
-@import "hippie-style/basic";
+@use "demo_config";
+@use "hippie-style/basic";
 
 
 // Additional Modules and variables
 // in dependency to other basic styles
 // could be defined here
 // -----------------------------------------------------------------------------
-// @import "modules/YOUR-MODULE/YOUR-FILES";
+// @use "modules/YOUR-MODULE/YOUR-FILES";
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 867e96e..4e4f881 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 867e96ea0a51054762ce615efa0224ccf1157ca2
+Subproject commit 4e4f8814d319c2f2a26a3ae5ab1c812e1aac8483
diff --git a/source/style/modules/card/_card_module.scss b/source/style/modules/card/_card_module.scss
index 36b7424..5244c7f 100644
--- a/source/style/modules/card/_card_module.scss
+++ b/source/style/modules/card/_card_module.scss
@@ -1,3 +1,5 @@
+@use "../../hippie-style/hippie";
+
 // Card module styles
 // ------------------------------------------------------------------------------
 
@@ -26,7 +28,7 @@
 			height: 100vh;
 
 			* {
-				font-family: $family_text_card;
+				font-family: hippie.$family_text_card;
 				// text-align: center;
 			}
 
@@ -58,10 +60,14 @@
 			// padding-left: 1em;
 			// text-indent: -1em;
 
-			&::before { content: "*\0000a0" }
+			&::before {
+				content: "*\0000a0"
+			}
 		}
 
-		.decent { color: #666 }
+		.decent {
+			color: #666
+		}
 
 		a {
 			color: #000;
diff --git a/source/style/modules/demo/_demo_module.scss b/source/style/modules/demo/_demo_module.scss
index 342b2c6..f7ab191 100644
--- a/source/style/modules/demo/_demo_module.scss
+++ b/source/style/modules/demo/_demo_module.scss
@@ -1,5 +1,7 @@
 @use "sass:color";
 
+@use "../../hippie-style/hippie";
+
 .demo__intro {
 	@extend .sec_main_center;
 	@extend .sec_main_status;
@@ -9,7 +11,7 @@
 	@extend .sec_main_status;
 	position: relative;
 	min-height: 50vh;
-	border-color: $foxtrot_color;
+	border-color: hippie.basic_color(foxtrot);
 
 	h1:first-of-type {
 		margin-top: 0;
@@ -24,7 +26,7 @@
 }
 
 .demo__header {
-	padding: $space_double;
+	padding: hippie.$space_double;
 
 	nav {
 
@@ -35,19 +37,19 @@
 }
 
 .header_fancy {
-	background-color: color.adjust($bravo_color, $alpha: -0.4);
+	background-color: color.adjust(hippie.basic_color(bravo), $alpha: -0.4);
 
 	nav {
 
 		a {
-			background-color: color.adjust($alpha_color, $alpha: -0.4);
-			color: $alpha_color;
+			background-color: color.adjust(hippie.basic_color(alpha), $alpha: -0.4);
+			color: hippie.basic_color(alpha);
 
 			&:active,
 			&:focus,
 			&:hover {
-				background-color: rgba($color_brightest, 0.2);
-				color: $color_brightest;
+				background-color: rgba(hippie.$color_brightest, 0.2);
+				color: hippie.$color_brightest;
 			}
 		}
 	}
@@ -58,7 +60,7 @@
 	top: 0;
 	left: 0;
 	width: 100%;
-	background-color: color.adjust($charlie_color, $alpha: -0.4);
+	background-color: color.adjust(hippie.basic_color(charlie), $alpha: -0.4);
 
 	nav {
 
@@ -67,8 +69,8 @@
 			&:active,
 			&:focus,
 			&:hover {
-				background-color: rgba($color_brightest, 0.2);
-				color: $color_brightest;
+				background-color: rgba(hippie.$color_brightest, 0.2);
+				color: hippie.$color_brightest;
 			}
 		}
 	}
@@ -77,20 +79,20 @@
 .demo__footer {
 	width: 100%;
 	// height: 128px;
-	padding: $space_double 0;
-	background-color: $color_dark;
-	color: $color_bright;
+	padding: hippie.$space_double 0;
+	background-color: hippie.$color_dark;
+	color: hippie.$color_bright;
 
 	nav {
 
 		a {
-			color: $color_brightest;
+			color: hippie.$color_brightest;
 		}
 	}
 }
 
 .demo__sprite_down {
-	@include sprite($down);
+	@include hippie.sprite(hippie.$down);
 	// width: 32px;
 	// height: 32px;
 	// background-image: url(../art/sprites.png);
@@ -98,7 +100,7 @@
 }
 
 .demo__sprite_up {
-	@include sprite($up);
+	@include hippie.sprite(hippie.$up);
 	// width: 32px;
 	// height: 64px;
 	// background-image: url(../art/sprites.png);
@@ -106,7 +108,7 @@
 }
 
 .demo__sprite_meta {
-	@include sprite($meta);
+	@include hippie.sprite(hippie.$meta);
 	// width: 32px;
 	// height: 32px;
 	// background-image: url(../art/sprites.png);
@@ -122,7 +124,7 @@
 		min-width: 128px;
 		min-height: 128px;
 		border-radius: 50%;
-		background-color: $delta_color;
+		background-color: hippie.basic_color(delta);
 	}
 }
 
@@ -131,123 +133,123 @@
 }
 
 .demo__credits {
-	margin: $space_small 0 $space_basic 0;
+	margin: hippie.$space_small 0 hippie.$space_basic 0;
 }
 
 .demo__queries > p {
-	padding: $padding_basic;
+	padding: hippie.$padding_basic;
 }
 
 .query_phoneUp {
-	@include forPhoneUp {
-		background-color: rgba($color_text_basic, 0.2)
+	@include hippie.forPhoneUp {
+		background-color: rgba(hippie.$color_text_basic, 0.2)
 	}
 ;
 }
 
 .query_phoneOnly {
-	@include forPhoneOnly {
-		background-color: rgba($color_text_basic, 0.2);
+	@include hippie.forPhoneOnly {
+		background-color: rgba(hippie.$color_text_basic, 0.2);
 	}
 }
 
-.query_tabletPortaitOnly {
-	@include forTabletPortraitOnly {
-		background-color: rgba($color_text_basic, 0.2);
+.query_tabletPortraitOnly {
+	@include hippie.forTabletPortraitOnly {
+		background-color: rgba(hippie.$color_text_basic, 0.2);
 	}
 }
 
 .query_tabletPortraitUp {
-	@include forTabletPortraitUp {
-		background-color: rgba($color_text_basic, 0.2);
+	@include hippie.forTabletPortraitUp {
+		background-color: rgba(hippie.$color_text_basic, 0.2);
 	}
 }
 
 .query_tabletLandscapeOnly {
-	@include forTabletLandscapeOnly {
-		background-color: rgba($color_text_basic, 0.2);
+	@include hippie.forTabletLandscapeOnly {
+		background-color: rgba(hippie.$color_text_basic, 0.2);
 	}
 }
 
 .query_tabletLandscapeUp {
-	@include forTabletLandscapeUp {
-		background-color: rgba($color_text_basic, 0.2);
+	@include hippie.forTabletLandscapeUp {
+		background-color: rgba(hippie.$color_text_basic, 0.2);
 	}
 }
 
 .query_desktopOnly {
-	@include forDesktopOnly {
-		background-color: rgba($color_text_basic, 0.2);
+	@include hippie.forDesktopOnly {
+		background-color: rgba(hippie.$color_text_basic, 0.2);
 	}
 }
 
 .query_desktopUp {
-	@include forDesktopUp {
-		background-color: rgba($color_text_basic, 0.2);
+	@include hippie.forDesktopUp {
+		background-color: rgba(hippie.$color_text_basic, 0.2);
 	}
 }
 
 .query_bigDesktopUp {
-	@include forBigDesktopUp {
-		background-color: rgba($color_text_basic, 0.2);
+	@include hippie.forBigDesktopUp {
+		background-color: rgba(hippie.$color_text_basic, 0.2);
 	}
 }
 
 .demo__query_example {
-	@include goingLarge($screen_tiny) {
-		background-color: $alpha_color;
+	@include hippie.goingLarge(hippie.$screen_tiny) {
+		background-color: hippie.basic_color(alpha);
 	}
-	@include goingLarge($screen_small) {
-		background-color: $bravo_color;
+	@include hippie.goingLarge(hippie.$screen_small) {
+		background-color: hippie.basic_color(bravo);
 	}
-	@include goingLarge($screen_medium) {
-		background-color: $charlie_color;
+	@include hippie.goingLarge(hippie.$screen_medium) {
+		background-color: hippie.basic_color(charlie);
 	}
-	@include goingLarge($screen_large) {
-		background-color: $delta_color;
+	@include hippie.goingLarge(hippie.$screen_large) {
+		background-color: hippie.basic_color(delta);
 	}
-	@include goingLarge($screen_huge) {
-		background-color: $echo_color;
+	@include hippie.goingLarge(hippie.$screen_huge) {
+		background-color: hippie.basic_color(echo);
 	}
-	@include goingLarge($screen_gigantic) {
-		background-color: $foxtrot_color;
+	@include hippie.goingLarge(hippie.$screen_gigantic) {
+		background-color: hippie.basic_color(foxtrot);
 	}
-	margin-bottom: $space_small;
-	padding: $space_small;
+	margin-bottom: hippie.$space_small;
+	padding: hippie.$space_small;
 	text-align: center;
 
 	&:after {
 		@extend code;
-		@include goingLarge($screen_tiny) {
+		@include hippie.goingLarge(hippie.$screen_tiny) {
 			& {
 				content: '768px';
 			}
 		}
-		@include goingLarge($screen_small) {
+		@include hippie.goingLarge(hippie.$screen_small) {
 			& {
 				content: '1024px';
 			}
 		}
-		@include goingLarge($screen_medium) {
+		@include hippie.goingLarge(hippie.$screen_medium) {
 			& {
 				content: '1280px';
 			}
 		}
-		@include goingLarge($screen_huge) {
+		@include hippie.goingLarge(hippie.$screen_huge) {
 			& {
 				content: '1680px';
 			}
 		}
-		@include goingLarge($screen_gigantic) {
+		@include hippie.goingLarge(hippie.$screen_gigantic) {
 			& {
 				content: '1920px';
 			}
 		}
 		content: '< 768px';
-		padding: $padding_basic;
-		border-radius: $radius_basic;
-		color: $color_brightest;
-		background-color: rgba($color_front_basic, 0.2);
+		padding: hippie.$padding_basic;
+		border-radius: hippie.$radius_basic;
+		color: hippie.$color_brightest;
+		background-color: rgba(hippie.$color_front_basic, 0.2);
 	}
 }
 
@@ -261,11 +263,11 @@
 }
 
 .demo__td_pr {
-	padding-right: $space_double;
+	padding-right: hippie.$space_double;
 }
 
 .demo__td_pl {
-	padding-left: $space_double;
+	padding-left: hippie.$space_double;
 }
 
 // Index
@@ -283,6 +285,6 @@
 
 	ul {
 		padding: 1em 5em;
-		background-color: $color_darker;
+		background-color: hippie.$color_darker;
 	}
 }
diff --git a/source/style/modules/portal/_portal_module.scss b/source/style/modules/portal/_portal_module.scss
index 786bf0e..6c5fb52 100644
--- a/source/style/modules/portal/_portal_module.scss
+++ b/source/style/modules/portal/_portal_module.scss
@@ -1,7 +1,9 @@
 @use "sass:color";
 
-$portal_highlight: $color_highlight_basic;
-$portal_margin: $space_double;
+@use "../../hippie-style/hippie";
+
+$portal_highlight: hippie.$color_highlight_basic;
+$portal_margin: hippie.$space_double;
 $portal_link_size: 128px;
 $portal_icon_size: 64px;
 
@@ -23,7 +25,7 @@ $portal_icon_size: 64px;
   padding-left: $portal_margin;
   overflow-x: hidden;
   overflow-y: auto;
-  transition: $transition_best;
+  transition: hippie.$transition_best;
 
   &:hover {
     flex: 3;
diff --git a/source/style/modules/songbook/_songbook_module.scss b/source/style/modules/songbook/_songbook_module.scss
index 321f8bd..46d6bbe 100755
--- a/source/style/modules/songbook/_songbook_module.scss
+++ b/source/style/modules/songbook/_songbook_module.scss
@@ -1,3 +1,5 @@
+@use "../../hippie-style/hippie";
+
 .songbook_song {
 	pre {
 		@extend .pre_code
@@ -5,16 +7,16 @@
 
 	header {
 		h2 {
-			margin-bottom: $space_basic;
+			margin-bottom: hippie.$space_basic;
 		}
 
 		h6 {
-			color: $color_brightest;
+			color: hippie.$color_brightest;
 		}
 
 		h2+h6 {
 			margin-top: 0;
-			margin-bottom: $space_small;
+			margin-bottom: hippie.$space_small;
 		}
 	}
 }
\ No newline at end of file
diff --git a/source/style/modules/ui/_form_module.scss b/source/style/modules/ui/_form_module.scss
index dac2760..a826693 100644
--- a/source/style/modules/ui/_form_module.scss
+++ b/source/style/modules/ui/_form_module.scss
@@ -1,9 +1,11 @@
+@use "../../hippie-style/hippie";
+
 #grid {
 	display: grid;
 	gap: 8px;
 	grid-template-columns: repeat(4, 1fr);
 	grid-auto-rows: minmax(64px, auto);
-	margin-inline: $space_small;
+	margin-inline: hippie.$space_small;
 }
 
 #grid>div {
diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss
index dc339c2..91182ad 100755
--- a/source/style/modules/ui/_frame_module.scss
+++ b/source/style/modules/ui/_frame_module.scss
@@ -1,5 +1,7 @@
 @use "sass:color";
 
+@use "../../hippie-style/hippie";
+
 @mixin nav-spacer($name, $size, $orientation) {
 	.spacer.#{$name} {
 		width: $size;
@@ -9,7 +11,7 @@
 .body_frame {
 	@extend %flex-column;
 
-	background-color: $color_back_basic;
+	background-color: hippie.$color_back_basic;
 
 	position: relative;
 	height: 100%;
@@ -20,7 +22,7 @@
 		border: 1px solid transparent;
 	}
 
-	&>header {
+	& > header {
 		background-color: rgba(0, 0, 0, .1);
 	}
 
@@ -35,18 +37,18 @@
 
 		section {
 
-			&>header,
-			&>footer {
-				background-color: color.adjust($color_back_io, $alpha: -.5);
+			& > header,
+			& > footer {
+				background-color: color.adjust(hippie.$color_back_io, $alpha: -.5);
 
 				&:hover {
-					background-color: $color_back_io;
+					background-color: hippie.$color_back_io;
 				}
 			}
 		}
 
 		section,
-		section>div {
+		section > div {
 			flex: 1;
 		}
 
@@ -84,53 +86,51 @@
 	textarea {
 		resize: none;
 		max-height: 128px;
-		margin: $margin_io;
+		margin: hippie.$margin_io;
 		border: 0;
-		padding: $space_half;
-		// color: $color_text_io;
+		padding: hippie.$space_half;
+		// color: hippie.$color_text_io;
 		color: white;
-		// background-color: $color_back_io;
+		// background-color: hippie.$color_back_io;
 		background-color: transparent;
 		line-height: 1.2;
 	}
 }
 
 
-
 #content {
-	background-color: $color_back_io;
+	background-color: hippie.$color_back_io;
 
-	&>table {
+	& > table {
 		width: 100%;
 		margin: 0;
 		border: 0;
 
 		tr:hover td {
-			background-color: $color_highlight_basic;
+			background-color: hippie.$color_highlight_basic;
 		}
 
 		th {
-			border: 1px solid $color_border_io;
+			border: 1px solid hippie.$color_border_io;
 		}
 
 		td {
 			border-width: 0 1px;
 			border-style: solid;
-			border-color: $color_border_io;
+			border-color: hippie.$color_border_io;
 		}
 	}
 }
 
 
-
 .io {
 	.spacer {
 		margin: 0;
-		border: $border_dotted;
+		border: hippie.$border_dotted;
 		padding: 0;
 		opacity: .25;
 	}
 
-	@include nav-spacer('a', $space_double, false);
-	@include nav-spacer('b', $space_small, false);
+	@include nav-spacer('a', hippie.$space_double, false);
+	@include nav-spacer('b', hippie.$space_small, false);
 }
\ No newline at end of file
diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss
index e7279ce..4e36346 100755
--- a/source/style/modules/ui/_new_module.scss
+++ b/source/style/modules/ui/_new_module.scss
@@ -1,15 +1,17 @@
 @use "sass:color";
 
+@use "../../hippie-style/hippie";
+
 $module_top_height: 32px;
-$body_top_space: $module_top_height + $space_basic;
+$body_top_space: $module_top_height + hippie.$space_basic;
 
 .body_new {
 	@extend %flex-column;
-	padding: $body_top_space $space_basic $space_basic;
+	padding: $body_top_space hippie.$space_basic hippie.$space_basic;
 }
 
 .area {
-	transition: $transition_best;
+	transition: hippie.$transition_best;
 
 	&:hover {
 		background-color: #999;
@@ -28,13 +30,13 @@ $body_top_space: $module_top_height + $space_basic;
 
 .item {
 	// height: unset;
-	border-color: color.scale($color_back_basic, $lightness: -$color_diff_tiny);
+	border-color: color.scale(hippie.$color_back_basic, $lightness: -4%);
 	border-style: dotted;
-	border-width: $width_border_8;
-	border-radius: $width_border_8;
-	padding: $space_basic;
-	background-color: rgb($color_back_basic, .5);
-	// background-color: lighten($color_back_basic, $color_diff_tiny);
+	border-width: hippie.$width_border_8;
+	border-radius: hippie.$width_border_8;
+	padding: hippie.$space_basic;
+	background-color: rgb(hippie.$color_back_basic, .5);
+	// background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny);
 	// background-color: gold;
 }
 
@@ -50,7 +52,7 @@ $body_top_space: $module_top_height + $space_basic;
 	width: 100%;
 	height: $module_top_height;
 	background-color: rgb(0, 0, 0, .8);
-	z-index: $z_top;
+	z-index: hippie.$z_top;
 
 	div:last-child {
 		flex: 1;
diff --git a/source/style/ui.scss b/source/style/ui.scss
index f5a80c4..4a1e6c8 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -1,16 +1,24 @@
 @use "sass:map";
 
-@import "demo_config";
-@import "hippie-style/hippie";
+@use "demo_config";
+@use "hippie-style/hippie";
 
-$color_gui_back: $color_dark;
+@use "modules/ui/frame_module";
+@use "modules/ui/new_module";
+@use "modules/ui/drag_module";
+@use "modules/ui/form_module";
+@use "modules/ui/game_module";
+@use "modules/ui/gallery_module";
+
+$color_gui_back: hippie.$color_dark;
+$space_gui_half: hippie.$space_half;
 
 .op_show {
-	transition: $transition_show;
+	transition: hippie.$transition_show;
 }
 
 .op_hide {
-	transition: $transition_hide;
+	transition: hippie.$transition_hide;
 }
 
 .html_ui {
@@ -46,7 +54,7 @@ $color_gui_back: $color_dark;
 
 #wrap {
 	flex: 1;
-	background-color: $color_back_basic;
+	background-color: hippie.$color_back_basic;
 }
 
 #progress {
@@ -64,9 +72,9 @@ $color_gui_back: $color_dark;
 	flex-shrink: 0;
 	justify-content: center;
 	align-items: center;
-	margin-inline: $space_half;
-	padding-block: calc($space_half - 1px) $space_half;
-	line-height: $line_basic;
+	margin-inline: $space_gui_half;
+	padding-block: calc($space_gui_half - 1px) $space_gui_half;
+	line-height: hippie.$line_basic;
 	text-align: center;
 }
 
@@ -78,7 +86,7 @@ $color_gui_back: $color_dark;
 
 #spinner {
 	width: 2.5em;
-	background-color: $color_back_basic;
+	background-color: hippie.$color_back_basic;
 	color: black;
 
 	span {
@@ -97,7 +105,7 @@ $color_gui_back: $color_dark;
 }
 
 #intro {
-	z-index: map.get($z-indexes, "content-top");
+	z-index: map.get(hippie.$z-indexes, "content-top");
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -123,8 +131,8 @@ $color_gui_back: $color_dark;
 	}
 
 	*+h1 {
-		margin-top: $space_small;
-		margin-bottom: $space_large;
+		margin-top: hippie.$space_small;
+		margin-bottom: hippie.$space_large;
 	}
 }
 
@@ -134,7 +142,7 @@ $color_gui_back: $color_dark;
 
 	li {
 		list-style: none;
-		padding-inline: $space_double;
+		padding-inline: hippie.$space_double;
 	}
 }
 
@@ -148,49 +156,44 @@ $color_gui_back: $color_dark;
 
 #agreement {
 	flex-direction: column;
-	background-color: $bravo_color;
+	background-color: map.get(hippie.$color_palette, bravo);
 	user-select: none;
 
 	h1 {
 		margin-top: 0;
-		color: $color_brightest;
+		color: hippie.$color_brightest;
 	}
 }
 
 #idle {
-	background-color: $color_back_basic;
+	background-color: hippie.$color_back_basic;
 	transition: background-color 4s;
 
 	&:hover>.mouse-overlay {
 		background-color: transparent !important;
-		transition: background-color $duration_basic $timing_basic 0s !important;
+		transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
 	}
 }
 
 .toast {
-	z-index: map.get($z-indexes, "toast");
+	z-index: map.get(hippie.$z-indexes, "toast");
 	position: fixed;
-	right: $space_half;
-	bottom: $space_double;
+	right: $space_gui_half;
+	bottom: hippie.$space_double;
 
 	p {
 		color: white;
 	}
 
 	kbd {
-		border-color: $color_brighter;
-		color: $color_back_io;
+		border-color: hippie.$color_brighter;
+		color: hippie.$color_back_io;
 	}
 }
 
 .hello {
 	flex: 0 1 auto;
 	padding: 1em 2em;
-	background-color: rgba($color_bright, .5);
-	font-family: $family_text_mono;
+	background-color: rgba(hippie.$color_bright, .5);
+	font-family: hippie.$family_text_mono;
 }
-
-@import "modules/ui/frame_module";
-@import "modules/ui/new_module";
-@import "modules/ui/drag_module";
-@import "modules/ui/form_module";
\ No newline at end of file