diff --git a/.gitignore b/.gitignore
index a2e78499..7bbcb06e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,5 @@ dist
 *.vim*
 *.custom
 www/public
+.vscode
+.DS_Store
diff --git a/code/layout-analyzer.js b/code/layout-analyzer.js
index 3782a687..f9dce775 100644
--- a/code/layout-analyzer.js
+++ b/code/layout-analyzer.js
@@ -507,7 +507,7 @@ window.addEventListener('DOMContentLoaded', () => {
       const lvl = (contrast * count) / total;
       colormap[key] = impreciseData
         ? headingColor + `, ${lvl})` // gray scale
-        : `rgb(127, 127, 255, ${lvl})`; // blue scale
+        : `rgb(153, 19, 10, ${lvl})`; // scale with shades of --color-palette-e-dark = #99130A
     });
     keyboard.setCustomColors(colormap);
 
diff --git a/code/x-keyboard.js b/code/x-keyboard.js
index ee1e009c..5b3b9ea2 100644
--- a/code/x-keyboard.js
+++ b/code/x-keyboard.js
@@ -207,9 +207,9 @@ function newKeyboardLayout(keyMap = {}, deadKeys = {}, geometry = '') {
 const KEY_BG = '#f8f8f8';
 const SPECIAL_KEY_BG = '#e4e4e4';
 const KEY_COLOR = '#333';
-const KEY_COLOR_L3 = 'blue';
-const KEY_COLOR_L5 = 'green';
-const DEAD_KEY_COLOR = 'red';
+const KEY_COLOR_L3 = '#0E9595'; // --color-palette-a-dark
+const KEY_COLOR_L5 = '#CB8215'; // --color-palette-b-dark
+const DEAD_KEY_COLOR = '#77372C'; // --color-palette-d-dark
 
 const KEY_WIDTH = 60; // 1U = 0.75" = 19.05mm = 60px
 const KEY_PADDING = 4; // 8px between two key edges
@@ -912,26 +912,50 @@ const modifiers = `
 
 // color themes
 const themes = `
+  /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+  :root {
+    --color-palette-a: #9CF6F6;
+    --color-palette-b: #F3C98B;
+    --color-palette-c: #DAA588;
+    --color-palette-d: #C46D5E;
+    --color-palette-e: #F56960;
+  }
+
+  /* Derived color palette -- when lighter or darker shades are required */
+  :root {
+    --color-palette-a-light: #DAFCFC;
+    --color-palette-b-light: #FBEEDA;
+    --color-palette-c-light: #F5E7E0;
+    --color-palette-d-light: #EED7D2;
+    --color-palette-e-light: #FBC9C5;
+    
+    --color-palette-a-dark: #0E9595;
+    --color-palette-b-dark: #CB8215;
+    --color-palette-c-dark: #9C5630;
+    --color-palette-d-dark: #77372C;
+    --color-palette-e-dark: #99130A;
+  }
+
   g:target rect, .press rect,
   g:target path, .press path {
-    fill: #aad;
+    fill: var(--color-palette-c);
   }
 
   [theme="reach"] .pinkyKey  rect { fill: hsl(  0, 100%, 90%); }
-  [theme="reach"] .numberKey rect { fill: hsl( 42, 100%, 90%); }
-  [theme="reach"] .letterKey rect { fill: hsl(122, 100%, 90%); }
-  [theme="reach"] .homeKey   rect { fill: hsl(122, 100%, 75%); }
-  [theme="reach"] .press     rect { fill: #aaf; }
-
-  [theme="hints"] [finger="m1"] rect { fill: hsl(  0, 100%, 95%); }
-  [theme="hints"] [finger="l2"] rect { fill: hsl( 42, 100%, 85%); }
-  [theme="hints"] [finger="r2"] rect { fill: hsl( 61, 100%, 85%); }
+  [theme="reach"] .numberKey rect { fill: var(--color-palette-a-light); }
+  [theme="reach"] .letterKey rect { fill: var(--color-palette-b-light); }
+  [theme="reach"] .homeKey   rect { fill: var(--color-palette-d-light); }
+  [theme="reach"] .press     rect { fill: var(--color-palette-c-light); }
+
+  [theme="hints"] [finger="m1"] rect { fill: var(--color-palette-a); }
+  [theme="hints"] [finger="l2"] rect { fill: var(--color-palette-a); }
+  [theme="hints"] [finger="r2"] rect { var(--color-palette-b); }
   [theme="hints"] [finger="l3"] rect,
-  [theme="hints"] [finger="r3"] rect { fill: hsl(136, 100%, 85%); }
+  [theme="hints"] [finger="r3"] rect { fill: var(--color-palette-c); }
   [theme="hints"] [finger="l4"] rect,
-  [theme="hints"] [finger="r4"] rect { fill: hsl(200, 100%, 85%); }
+  [theme="hints"] [finger="r4"] rect { fill: var(--color-palette-d); }
   [theme="hints"] [finger="l5"] rect,
-  [theme="hints"] [finger="r5"] rect { fill: hsl(230, 100%, 85%); }
+  [theme="hints"] [finger="r5"] rect { fill: var(--color-palette-e); }
   [theme="hints"] .specialKey   rect,
   [theme="hints"] .specialKey   path { fill: ${SPECIAL_KEY_BG}; }
   [theme="hints"] .hint         rect { fill: #a33; }
diff --git a/www/assets/css/icons.css b/www/assets/css/icons.css
new file mode 100644
index 00000000..75ff4b15
--- /dev/null
+++ b/www/assets/css/icons.css
@@ -0,0 +1,131 @@
+/* Pure CSS-shapes icons taken from https://css.gg/icons */
+
+.gg-software-download {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  transform: scale(var(--ggs, 1));
+  width: 16px;
+  height: 6px;
+  border: 2px solid;
+  border-top: 0;
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  margin-top: 8px;
+}
+.gg-software-download::after {
+  content: "";
+  display: inline-block;
+  box-sizing: border-box;
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-left: 2px solid;
+  border-bottom: 2px solid;
+  transform: rotate(-45deg);
+  left: 2px;
+  bottom: 4px;
+}
+.gg-software-download::before {
+  content: "";
+  display: inline-block;
+  box-sizing: border-box;
+  position: absolute;
+  border-radius: 3px;
+  width: 2px;
+  height: 10px;
+  background: currentColor;
+  left: 5px;
+  bottom: 5px;
+}
+
+.gg-play-button-o {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  transform: scale(var(--ggs, 1));
+  width: 22px;
+  height: 22px;
+  border: 2px solid;
+  border-radius: 20px;
+}
+.gg-play-button-o::before {
+  content: "";
+  display: inline-block;
+  box-sizing: border-box;
+  position: absolute;
+  width: 0;
+  height: 10px;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 6px solid;
+  top: 4px;
+  left: 7px;
+}
+
+.gg-align-bottom {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  border-bottom: 2px solid;
+  transform: scale(var(--ggs, 1));
+  margin-top: 4px;
+}
+.gg-align-bottom::after,
+.gg-align-bottom::before {
+  content: "";
+  display: inline-block;
+  box-sizing: border-box;
+  position: absolute;
+  width: 4px;
+  background: currentColor;
+  bottom: 2px;
+}
+.gg-align-bottom::before {
+  left: 1px;
+  height: 12px;
+}
+.gg-align-bottom::after {
+  height: 6px;
+  right: 1px;
+  opacity: 0.5;
+}
+
+.gg-keyboard {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  transform: scale(var(--ggs, 1));
+  width: 18px;
+  height: 18px;
+  border: 2px solid;
+  border-radius: 3px;
+}
+.gg-keyboard::after,
+.gg-keyboard::before {
+  content: "";
+  display: inline-block;
+  box-sizing: border-box;
+  position: absolute;
+  height: 2px;
+  border-radius: 4px;
+  background: currentColor;
+}
+.gg-keyboard::before {
+  top: 2px;
+  box-shadow:
+    4px 0 0,
+    8px 0 0,
+    0 4px 0,
+    4px 4px 0,
+    8px 4px 0;
+  width: 2px;
+  left: 2px;
+}
+.gg-keyboard::after {
+  width: 8px;
+  bottom: 2px;
+  left: 3px;
+}
\ No newline at end of file
diff --git a/www/assets/css/keebs.css b/www/assets/css/keebs.css
index dffba461..c774a6aa 100644
--- a/www/assets/css/keebs.css
+++ b/www/assets/css/keebs.css
@@ -4,18 +4,42 @@
  * ╰───────────────────────────────────────────────────────────────╯
 **/
 
+/* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+:root {
+  --color-palette-a: #9CF6F6;
+  --color-palette-b: #F3C98B;
+  --color-palette-c: #DAA588;
+  --color-palette-d: #C46D5E;
+  --color-palette-e: #F56960;
+}
+
+/* Derived color palette -- when lighter or darker shades are required */
+:root {
+  --color-palette-a-light: #DAFCFC;
+  --color-palette-b-light: #FBEEDA;
+  --color-palette-c-light: #F5E7E0;
+  --color-palette-d-light: #EED7D2;
+  --color-palette-e-light: #FBC9C5;
+  
+  --color-palette-a-dark: #0E9595;
+  --color-palette-b-dark: #CB8215;
+  --color-palette-c-dark: #9C5630;
+  --color-palette-d-dark: #77372C;
+  --color-palette-e-dark: #99130A;
+}
+
 :root {
   --fg-normal-shadow: #8bb8;
   --fg-normal-border: #666;
-  --fg-normal:        #333;
+  --fg-normal:        #aaa;
   --bg-normal:        #fff;
   /* special keys */
   --fg-special:       #555;
   --bg-special:       #e4e4e4;
   /* 'reach' theme */
-  --bg-number:        hsl(295, 100%, 95%);
-  --bg-letter:        hsl(222, 100%, 95%);
-  --bg-home:          hsl(222, 100%, 90%);
+  --bg-number:        var(--color-palette-a-light);
+  --bg-letter:        var(--color-palette-b-light);
+  --bg-home:          var(--color-palette-d-light);
 }
 
 @media (prefers-color-scheme: dark) { :root {
@@ -27,9 +51,9 @@
   --fg-special:       #888;
   --bg-special:       #333;
   /* 'reach' theme */
-  --bg-number:        hsl(280, 10%, 34%);
-  --bg-letter:        hsl(220, 15%, 35%);
-  --bg-home:          hsl(225, 30%, 30%);
+  --bg-number:        var(--color-palette-a-dark);
+  --bg-letter:        var(--color-palette-b-dark);
+  --bg-home:          var(--color-palette-d-dark);
 }}
 
 
@@ -56,6 +80,118 @@
   margin: 0;
   text-wrap: balance;
   text-align: center;
+  display: flex;
+  position: relative;
+}
+
+.keyboard form fieldset input {
+  border-radius: 0px;
+  border-top: 1px solid #6668;
+  border-bottom: 1px solid #6668;
+  box-sizing: border-box;
+  border: none;
+  z-index: 1;
+  color: var(--fg-normal);
+}
+
+.keyboard form fieldset::before{
+  content: '';
+  position: absolute;
+  left:0;
+  height: 100%;
+  border: 0.5px solid var(--fg-normal);
+  border-radius: 0.2em;
+  transition: .5s left ease;
+}
+
+.keyboard form fieldset:has(:nth-child(1)) input,
+.keyboard form fieldset:has(:nth-child(1))::before {
+  width: 100%;
+}
+.keyboard form fieldset:has(:nth-child(2)) input,
+.keyboard form fieldset:has(:nth-child(2))::before {
+  width: 50%;
+}
+.keyboard form fieldset:has(:nth-child(3)) input,
+.keyboard form fieldset:has(:nth-child(3))::before {
+  width: 33%;
+}
+.keyboard form fieldset:has(:nth-child(4)) input,
+.keyboard form fieldset:has(:nth-child(4))::before {
+  width: 25%;
+}
+.keyboard form fieldset:has(:nth-child(5)) input,
+.keyboard form fieldset:has(:nth-child(5))::before {
+  width: 20%;
+}
+.keyboard form fieldset:has(:nth-child(6)) input,
+.keyboard form fieldset:has(:nth-child(6))::before {
+  width: 16.67%;
+}
+
+.keyboard form fieldset:has(:nth-child(2)):has(:nth-child(1):checked)::before {
+  left: 0%;
+}
+.keyboard form fieldset:has(:nth-child(2)):has(:nth-child(2):checked)::before {
+  left: 50%;
+}
+
+.keyboard form fieldset:has(:nth-child(3)):has(:nth-child(1):checked)::before {
+  left: 0%;
+}
+.keyboard form fieldset:has(:nth-child(3)):has(:nth-child(2):checked)::before {
+  left: 33%;
+}
+.keyboard form fieldset:has(:nth-child(3)):has(:nth-child(3):checked)::before {
+  left: 66%;
+}
+
+.keyboard form fieldset:has(:nth-child(4)):has(:nth-child(1):checked)::before {
+  left: 0%;
+}
+.keyboard form fieldset:has(:nth-child(4)):has(:nth-child(2):checked)::before {
+  left: 25%;
+}
+.keyboard form fieldset:has(:nth-child(4)):has(:nth-child(3):checked)::before {
+  left: 50%;
+}
+.keyboard form fieldset:has(:nth-child(4)):has(:nth-child(4):checked)::before {
+  left: 75%;
+}
+
+.keyboard form fieldset:has(:nth-child(5)):has(:nth-child(1):checked)::before {
+  left: 0%;
+}
+.keyboard form fieldset:has(:nth-child(5)):has(:nth-child(2):checked)::before {
+  left: 20%;
+}
+.keyboard form fieldset:has(:nth-child(5)):has(:nth-child(3):checked)::before {
+  left: 40%;
+}
+.keyboard form fieldset:has(:nth-child(5)):has(:nth-child(4):checked)::before {
+  left: 60%;
+}
+.keyboard form fieldset:has(:nth-child(5)):has(:nth-child(5):checked)::before {
+  left: 80%;
+}
+
+.keyboard form fieldset:has(:nth-child(6)):has(:nth-child(1):checked)::before {
+  left: 0%;
+}
+.keyboard form fieldset:has(:nth-child(6)):has(:nth-child(2):checked)::before {
+  left: 16.6%;
+}
+.keyboard form fieldset:has(:nth-child(6)):has(:nth-child(3):checked)::before {
+  left: 33.3%;
+}
+.keyboard form fieldset:has(:nth-child(6)):has(:nth-child(4):checked)::before {
+  left: 50%;
+}
+.keyboard form fieldset:has(:nth-child(6)):has(:nth-child(5):checked)::before {
+  left: 66.6%;
+}
+.keyboard form fieldset:has(:nth-child(6)):has(:nth-child(6):checked)::before {
+  left: 83.3%;
 }
 
 .keyboard form input {
@@ -68,25 +204,22 @@
   outline: none;
   padding: 0 8px;
   margin: 2px 0;
-  background-color: var(--bg-special);
+  /* background-color: var(--bg-special); */
   color: var(--fg-special);
-  border: 1px solid #6668;
-  border-radius: 2px;
-  opacity: 0.6;
   transition: all 50ms linear;
   cursor: pointer;
 }
 
 .keyboard form input:hover {
-  background-color: var(--bg-accent);
+  /* background-color: var(--bg-accent); */
+  /* color: var(--bg-accent); */
   opacity: 1;
 }
 
 .keyboard form input:checked {
-  background-image: linear-gradient(180deg, var(--bg-letter), var(--bg-home));
-  background-color: var(--bg-normal);
-  text-shadow: 0 1px 0px var(--fg-normal-shadow);
-  color: var(--fg-normal);
+  /* background-image: linear-gradient(180deg, var(--bg-letter), var(--bg-home));
+  background-color: var(--bg-normal); */
+  font-weight: bold;
   opacity: 1;
 }
 
@@ -111,7 +244,7 @@
   display: none;
   text-align: center;
   text-wrap: balance;
-  margin: 1em auto;
+  margin: -0.5em auto 1.5em;
 }
 
 .keyboard nav a,
@@ -121,13 +254,15 @@
   margin: 2px 1px;
   padding: 0 6px;
   font-family: sans-serif;
-  font-size: 1em;
+  text-decoration: none;
+  font-size: 0.85em;
+  color: var(--fg-disabled);
+  background-color: transparent;
 }
 
 .keyboard nav button {
   font-weight: bold;
   cursor: pointer;
-  color: var(--fg-main);
 }
 
 .keyboard [disabled] {
@@ -144,16 +279,16 @@
   .keyboard nav a,
   .keyboard nav button {
     display: inline-block;
-    height: 2em;
-    line-height: 2em;
-    background-color: var(--bg-special);
-    border: 1px outset #6668;
+    height: 2.2em;
+    line-height: 3em;
+    border: 1px solid var(--fg-disabled);
     border-radius: 5px;
   }
   .keyboard nav a:hover,
   .keyboard nav button:hover {
-    background-color: var(--bg-accent);
-    text-decoration: underline;
+    text-decoration: none;
+    color: var(--fg-main);
+    border-color: var(--fg-main);
   }
 }
 
diff --git a/www/assets/css/theme.css b/www/assets/css/theme.css
index b1f81d07..535421c9 100644
--- a/www/assets/css/theme.css
+++ b/www/assets/css/theme.css
@@ -4,51 +4,112 @@
  * ╰───────────────────────────────────────────────────────────────╯
 **/
 
+/* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+:root {
+  --color-palette-a: #9CF6F6;
+  --color-palette-b: #F3C98B;
+  --color-palette-c: #DAA588;
+  --color-palette-d: #C46D5E;
+  --color-palette-e: #F56960;
+}
+
+/* Derived color palette -- when lighter or darker shades are required */
+:root {
+  --color-palette-a-light: #DAFCFC;
+  --color-palette-b-light: #FBEEDA;
+  --color-palette-c-light: #F5E7E0;
+  --color-palette-d-light: #EED7D2;
+  --color-palette-e-light: #FBC9C5;
+  
+  --color-palette-a-dark: #0E9595;
+  --color-palette-b-dark: #CB8215;
+  --color-palette-c-dark: #9C5630;
+  --color-palette-d-dark: #77372C;
+  --color-palette-e-dark: #99130A;
+}
+
+/* Keycap color palette -- for generating realistic keycaps */
+:root {
+  --keycap-color-a: #282828;
+  --keycap-color-b: #202020;
+  --keycap-color-c: #232323;
+  --keycap-color-d: #4a4a4a;
+  --keycap-color-e: #0009;
+  --keycap-color-f: #0004;
+  --keycap-color-i: rgba(255, 255, 255, 1.0);
+  --keycap-bs-1: rgba(0, 0, 0, 0.15);
+  --keycap-bs-2: rgba(0, 0, 0, 0.25);
+  --keycap-bs-3: rgba(0, 0, 0, 0.75);
+  --keycap-bs-4: rgba(0, 0, 0, 0.25);
+}
+
+
 :root {
   color-scheme: light dark;
 
   /* <html|body|main> background and text colors */
-  --bg-root:          #ccc;
-  --bg-main:          #f8f8f8;
-  --bg-main-shadow:   #888;
-  --fg-main-border:   #aaa;
+  --bg-root:          white;
+  --bg-main:          white;
+  --bg-main-shadow:   white;
+  --fg-main-border:   white;
   --fg-main:          #222;
+  --fg-disabled:      #999;
 
   /* banner -- the foreground matches the favicon #rocket color */
-  --bg-banner:        #e9e9e9;
-  --fg-banner-border: #5446;
-  --fg-banner:        #544;
+  --bg-banner:        white;
+  --fg-banner-border: #eee;
+  --fg-banner:        #222;
 
   /* <h2|a|code> and specific emphasis */
-  --bg-accent:        #b884;
-  --fg-accent-border: brown;
-  --fg-accent:        brown;
+  --bg-accent:        var(--color-palette-d-light);
+  --fg-accent-border: var(--color-palette-d);
+  --fg-accent:        var(--color-palette-d);
 
   /* <kbd> and special inline content */
-  --bg-key:           #8884;
-  --fg-key-border:    #888;
+  --key-bg:              #6a6a6a;
+  --key-bg-gradient:     #282828;
+  --key-border:          #202020;
+  --key-border-gradient: #232323;
+  --key-fg:              rgba(255, 255, 255, 0.85);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     /* <html|body|main> background and text colors */
-    --bg-root:          #151417;
-    --bg-main:          #1a1a1f;
-    --bg-main-shadow:   #111;
-    --fg-main-border:   #111;
-    --fg-main:          #ccc;
-
-    /* banner -- the foreground matches the favicon #rocket color */
-    --bg-banner:        #29292d;
-    --fg-banner-border: #cbb5;
-    --fg-banner:        #cbb;
+    --bg-root:          #222;
+    --bg-main:          #222;
+    --bg-main-shadow:   #222;
+    --fg-main-border:   #222;
+    --fg-main:          #eee;
+    --fg-disabled:      #666;
+
+    /* banner -- the foreground DOES NOT matches the favicon #rocket color */
+    --bg-banner:        #222;
+    --fg-banner-border: #444;
+    --fg-banner:        #eee;
 
     /* <h2|a|code> and specific emphasis */
-    --fg-accent-border: #f967;
-    --fg-accent:        #f96;
+    --bg-accent:        var(--color-palette-d-dark);
+
+    /* <kbd> and special inline content */
+    --key-bg:              #dfdfdf;
+    --key-bg-gradient:     #dcdcdc;
+    --key-border:          #959595;
+    --key-border-gradient: #d7d7d7;
+    --key-fg:              rgba(0, 0, 0, 0.85);
   }
 }
 
+/**
+ * ╭───────────────────────────────────────────────────────────────╮
+ * │                             Fonts                             │
+ * ╰───────────────────────────────────────────────────────────────╯
+**/
+:root {
+  --main-font-family: sans-serif;
+  --code-font-family: sans-serif;
+}
+
 
 /**
  * ╭───────────────────────────────────────────────────────────────╮
@@ -64,7 +125,7 @@
 html {
   height: 100%;
   width:  100%;
-  font-family: sans-serif;
+  font-family: var(--main-font-family);
   background-color: var(--bg-root);
   /* scroll-behavior: smooth; */
 }
@@ -280,7 +341,7 @@ h1 {
   text-align: center;
   font-size: 2em;
   line-height: 1em;
-  margin: 1.8em auto 1.2em;
+  margin: 1.8em auto 0.5em;
 }
 
 h1 + time {
@@ -355,20 +416,57 @@ header + nav ul ul {
  * ╰───────────────────────────────────────────────────────────────╯
 **/
 
-kbd, span.odk { /* key */
-  margin: 0 2px;
-  font-size: 1em;
-  border: 1px outset var(--bg-key-border);
-  background-color: var(--bg-key);
-  padding: 2px 3px;
+kbd,
+span.odk {
+  /* Match the page defaults in light mode but switch to a light-ish grey in dark mode */
+  background: linear-gradient(90deg, var(--key-bg), var(--key-bg-gradient));
+  /* background-color: white; */
+  color: var(--key-fg);
+
+  /* Round off the corners like physical keys have */
+  border-radius: 0.25rem;
+
+  /* Add a simple border */
+  border: 1px solid var(--key-border);
+
+  /* A sharp shadow (with no blur) really gives the old school keyboard look */
+  box-shadow: 0 2px 0 1px var(--key-border);
+  /* Remove the text cursor — totally optional but I wanted it for my hover effect */
+  cursor: default;
+  font-family: var(--code-font-family);
+  font-size: 0.8em;
+  /* Remove any extra space so I can accurately tweak the padding */
+  line-height: 1;
+
+  /* Make narrow numbers and letters look less odd */
+  min-width: 0.8rem;
+  /* `min-width` doesn’t work on inline elements */
+  display: inline-block;
+  /* Keep the characters centred when narrower than the `max-width` */
+  text-align: center;
+
+  /* Seemed to look more key-like with more horizontal padding 🤷 */
+  padding: 3px 5px 2px 5px;
+  margin: 0 0.2em 0 0.2em;
+
+  /* These two lines pull the whole element up now that they’re bottom-heavy due to the `box-shadow`. This looks better against the cap height of regular paragraph text. */
+  position: relative;
+  top: -1.5px;
+
+  /* This is my favourite part of the whole thing. The key gets “pushed” down and the shadow gets reduced so it looks like it might when typing on a physical keyboard. */
+  &:hover {
+      box-shadow: 0 1.5px 0 0.5px linear-gradient(0deg, var(--key-border), var(--key-border-gradient));
+      top: 1px;
+  }
 }
+  
 
 code { /* character, digrams, trigrams */
   font-weight: bold;
-  font-family: serif;
+  font-family: var(--code-font-family);
   background-color: var(--bg-accent);
   padding: 2px 4px;
-  border-radius: 2px;
+  border-radius: 0.25em;
 }
 
 
@@ -392,12 +490,6 @@ code { /* character, digrams, trigrams */
     justify-content: flex-start;
     background-color: var(--bg-banner);
   }
-  header + nav li {
-    border-left: 1px solid var(--fg-banner-border);
-  }
-  header + nav li:last-child {
-    border-right: 1px solid var(--fg-banner-border);
-  }
 
   /* display navigation submenus, not sure it s a good idea though */
   header + nav li:has(.active) ul {
diff --git a/www/content/claviers/arsenik/arsenik_iso.svg b/www/content/claviers/arsenik/arsenik_iso.svg
index 05080cbe..56292692 100644
--- a/www/content/claviers/arsenik/arsenik_iso.svg
+++ b/www/content/claviers/arsenik/arsenik_iso.svg
@@ -1,6 +1,30 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
     }
@@ -30,8 +54,8 @@
     .right .layerNav { font-weight: normal; }
 
     .layerMod, .colorMod { fill: #333; }
-    .layerSym, .colorSym { fill: blue; }
-    .layerNav, .colorNav { fill: #e83; }
+    .layerSym, .colorSym { fill: var(--color-palette-a-dark); }
+    .layerNav, .colorNav { fill: var(--color-palette-c); }
     #row_AA    .level2   { fill: #333; }
 
     @media (prefers-color-scheme: dark) {
@@ -39,8 +63,8 @@
       rect                 { fill: #444; }
       .dualKey             { fill: #666; }
       .layerMod, .colorMod { fill: #eee; }
-      .layerSym, .colorSym { fill: #99f; }
-      .layerNav, .colorNav { fill: #e83; }
+      .layerSym, .colorSym { fill: var(--color-palette-a-light); }
+      .layerNav, .colorNav { fill: var(--color-palette-c); }
       #row_AA .level2      { fill: #ccc; }
     }
   </style>
diff --git a/www/content/claviers/arsenik/arsenik_ortho.svg b/www/content/claviers/arsenik/arsenik_ortho.svg
index a1372b85..ed290dd7 100644
--- a/www/content/claviers/arsenik/arsenik_ortho.svg
+++ b/www/content/claviers/arsenik/arsenik_ortho.svg
@@ -1,6 +1,30 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
     }
@@ -35,8 +59,8 @@
     .right .layerNav { font-weight: normal; }
 
     .layerMod, .colorMod { fill: #333; }
-    .layerSym, .colorSym { fill: blue; }
-    .layerNav, .colorNav { fill: #e83; }
+    .layerSym, .colorSym { fill: var(--color-palette-a-dark); }
+    .layerNav, .colorNav { fill: var(--color-palette-c); }
     #row_AA    .level2   { fill: #333; }
 
     @media (prefers-color-scheme: dark) {
@@ -44,8 +68,8 @@
       rect                 { fill: #444; }
       .dualKey             { fill: #666; }
       .layerMod, .colorMod { fill: #eee; }
-      .layerSym, .colorSym { fill: #99f; }
-      .layerNav, .colorNav { fill: #e83; }
+      .layerSym, .colorSym { fill: var(--color-palette-a-light); }
+      .layerNav, .colorNav { fill: var(--color-palette-c); }
       #row_AA .level2      { fill: #ccc; }
     }
   </style>
diff --git a/www/content/claviers/arsenik/arsenik_planck.svg b/www/content/claviers/arsenik/arsenik_planck.svg
index 6d9bc3fc..2741a608 100644
--- a/www/content/claviers/arsenik/arsenik_planck.svg
+++ b/www/content/claviers/arsenik/arsenik_planck.svg
@@ -1,6 +1,30 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
     }
@@ -33,8 +57,8 @@
     .right .layerNav { font-weight: normal; }
 
     .layerMod, .colorMod { fill: #333; }
-    .layerSym, .colorSym { fill: blue; }
-    .layerNav, .colorNav { fill: #e83; }
+    .layerSym, .colorSym { fill: var(--color-palette-a-dark); }
+    .layerNav, .colorNav { fill: var(--color-palette-c); }
     #row_AA    .level2   { fill: #333; }
 
     @media (prefers-color-scheme: dark) {
@@ -42,8 +66,8 @@
       rect                 { fill: #444; }
       .dualKey             { fill: #666; }
       .layerMod, .colorMod { fill: #eee; }
-      .layerSym, .colorSym { fill: #99f; }
-      .layerNav, .colorNav { fill: #e83; }
+      .layerSym, .colorSym { fill: var(--color-palette-a-light); }
+      .layerNav, .colorNav { fill: var(--color-palette-c); }
       #row_AA .level2      { fill: #ccc; }
     }
   </style>
diff --git a/www/content/claviers/arsenik/ergol_iso.svg b/www/content/claviers/arsenik/ergol_iso.svg
index 1cdbd8bd..49a82091 100644
--- a/www/content/claviers/arsenik/ergol_iso.svg
+++ b/www/content/claviers/arsenik/ergol_iso.svg
@@ -1,6 +1,30 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
     }
@@ -27,36 +51,26 @@
     .layerMod { font-weight: bold; font-size: 14px; }
 
     .layerMod, .colorMod { fill: #333; }
-    .layerSym, .colorSym { fill: blue; }
+    .layerSym, .colorSym { fill: var(--color-palette-a-dark); }
     #row_AA    .level2   { fill: #333; }
 
-    [finger="m1"] rect { fill: hsl(  0, 100%, 95%); }
-    [finger="l2"] rect { fill: hsl( 42, 100%, 85%); }
-    [finger="r2"] rect { fill: hsl( 61, 100%, 85%); }
+    [finger="m1"] rect { fill: var(--color-palette-a); }
+    [finger="l2"] rect { fill: var(--color-palette-a); }
+    [finger="r2"] rect { fill: var(--color-palette-b); }
     [finger="l3"] rect,
-    [finger="r3"] rect { fill: hsl(136, 100%, 85%); }
+    [finger="r3"] rect { fill: var(--color-palette-c); }
     [finger="l4"] rect,
-    [finger="r4"] rect { fill: hsl(200, 100%, 85%); }
+    [finger="r4"] rect { fill: var(--color-palette-d); }
     [finger="l5"] rect,
-    [finger="r5"] rect { fill: hsl(230, 100%, 85%); }
+    [finger="r5"] rect { fill: var(--color-palette-e); }
 
     @media (prefers-color-scheme: dark) {
       text                 { fill: #aaa; }
       rect                 { fill: #444; }
       .dualKey             { fill: #666; }
       .layerMod, .colorMod { fill: #eee; }
-      .layerSym, .colorSym { fill: #99f; }
+      .layerSym, .colorSym { fill: var(--color-palette-a-light); }
       #row_AA .level2      { fill: #ccc; }
-      /* 'hints' theme */
-      [finger="m1"] rect { fill: hsl(  0, 25%, 30%); }
-      [finger="l2"] rect { fill: hsl( 31, 30%, 30%); }
-      [finger="r2"] rect { fill: hsl( 61, 30%, 30%); }
-      [finger="l3"] rect,
-      [finger="r3"] rect { fill: hsl(136, 30%, 30%); }
-      [finger="l4"] rect,
-      [finger="r4"] rect { fill: hsl(200, 30%, 30%); }
-      [finger="l5"] rect,
-      [finger="r5"] rect { fill: hsl(230, 30%, 30%); }
     }
   </style>
 
diff --git a/www/content/claviers/arsenik/ergol_isoa.svg b/www/content/claviers/arsenik/ergol_isoa.svg
index ed54b58f..4e4aebaa 100644
--- a/www/content/claviers/arsenik/ergol_isoa.svg
+++ b/www/content/claviers/arsenik/ergol_isoa.svg
@@ -1,6 +1,30 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
     }
@@ -27,36 +51,26 @@
     .layerMod { font-weight: bold; font-size: 14px; }
 
     .layerMod, .colorMod { fill: #333; }
-    .layerSym, .colorSym { fill: blue; }
+    .layerSym, .colorSym { fill: var(--color-palette-a-dark); }
     #row_AA    .level2   { fill: #333; }
 
-    [finger="m1"] rect { fill: hsl(  0, 100%, 95%); }
-    [finger="l2"] rect { fill: hsl( 42, 100%, 85%); }
-    [finger="r2"] rect { fill: hsl( 61, 100%, 85%); }
+    [finger="m1"] rect { fill: var(--color-palette-a); }
+    [finger="l2"] rect { fill: var(--color-palette-a); }
+    [finger="r2"] rect { fill: var(--color-palette-b); }
     [finger="l3"] rect,
-    [finger="r3"] rect { fill: hsl(136, 100%, 85%); }
+    [finger="r3"] rect { fill: var(--color-palette-c); }
     [finger="l4"] rect,
-    [finger="r4"] rect { fill: hsl(200, 100%, 85%); }
+    [finger="r4"] rect { fill: var(--color-palette-d); }
     [finger="l5"] rect,
-    [finger="r5"] rect { fill: hsl(230, 100%, 85%); }
+    [finger="r5"] rect { fill: var(--color-palette-e); }
 
     @media (prefers-color-scheme: dark) {
       text                 { fill: #aaa; }
       rect                 { fill: #444; }
       .dualKey             { fill: #666; }
       .layerMod, .colorMod { fill: #eee; }
-      .layerSym, .colorSym { fill: #99f; }
+      .layerSym, .colorSym { fill: var(--color-palette-a-light); }
       #row_AA .level2      { fill: #ccc; }
-      /* 'hints' theme */
-      [finger="m1"] rect { fill: hsl(  0, 25%, 30%); }
-      [finger="l2"] rect { fill: hsl( 31, 30%, 30%); }
-      [finger="r2"] rect { fill: hsl( 61, 30%, 30%); }
-      [finger="l3"] rect,
-      [finger="r3"] rect { fill: hsl(136, 30%, 30%); }
-      [finger="l4"] rect,
-      [finger="r4"] rect { fill: hsl(200, 30%, 30%); }
-      [finger="l5"] rect,
-      [finger="r5"] rect { fill: hsl(230, 30%, 30%); }
     }
   </style>
 
diff --git a/www/content/claviers/arsenik/ergol_isoa_lt.svg b/www/content/claviers/arsenik/ergol_isoa_lt.svg
index 9214eb00..53394975 100644
--- a/www/content/claviers/arsenik/ergol_isoa_lt.svg
+++ b/www/content/claviers/arsenik/ergol_isoa_lt.svg
@@ -1,6 +1,30 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="90 60 720 240">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
     }
@@ -30,8 +54,8 @@
     .right .layerNav { font-weight: normal; }
 
     .layerMod, .colorMod { fill: #333; }
-    .layerSym, .colorSym { fill: blue; }
-    .layerNav, .colorNav { fill: #e83; }
+    .layerSym, .colorSym { fill: var(--color-palette-a-dark); }
+    .layerNav, .colorNav { fill: var(--color-palette-c); }
     #row_AA    .level2   { fill: #333; }
 
     @media (prefers-color-scheme: dark) {
@@ -39,8 +63,8 @@
       rect                 { fill: #444; }
       .dualKey             { fill: #666; }
       .layerMod, .colorMod { fill: #eee; }
-      .layerSym, .colorSym { fill: #99f; }
-      .layerNav, .colorNav { fill: #e83; }
+      .layerSym, .colorSym { fill: var(--color-palette-a-light); }
+      .layerNav, .colorNav { fill: var(--color-palette-c); }
       #row_AA .level2      { fill: #ccc; }
     }
   </style>
diff --git a/www/content/claviers/compacts/3x5.svg b/www/content/claviers/compacts/3x5.svg
index 7cdaa5e0..69af6bdd 100644
--- a/www/content/claviers/compacts/3x5.svg
+++ b/www/content/claviers/compacts/3x5.svg
@@ -1,24 +1,29 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 836 300">
 
   <style>
-    /* color theme */
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
 
+    /* color theme */
     :root {
       --fg-normal-border: #666;
       --bg-normal:        #fff;
       --bg-special:       #bbb;
-      --bg-number:        hsl(295,  50%, 80%);
-      --bg-letter:        hsl(222, 100%, 84%);
-      --bg-home:          hsl(222, 100%, 74%);
+      --bg-number:        var(--color-palette-a);
+      --bg-letter:        var(--color-palette-b);
+      --bg-home:          var(--color-palette-d);
     }
 
     @media (prefers-color-scheme: dark) { :root {
       --fg-normal-border: #666;
       --bg-normal:        #4d4d4d;
       --bg-special:       #444;
-      --bg-number:        hsl(280, 10%, 34%);
-      --bg-letter:        hsl(220, 15%, 35%);
-      --bg-home:          hsl(225, 30%, 30%);
     }}
 
     rect, path {
diff --git a/www/content/claviers/compacts/3x5_ergol.svg b/www/content/claviers/compacts/3x5_ergol.svg
index 183ef9e5..e6f6f0cc 100644
--- a/www/content/claviers/compacts/3x5_ergol.svg
+++ b/www/content/claviers/compacts/3x5_ergol.svg
@@ -1,6 +1,30 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 836 300">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
       --stag-pinky:  71.25px;
@@ -60,12 +84,12 @@
     .thb_7 g { transform: rotate(-12deg); }
     .thb_6 g { transform: rotate(-24deg); }
 
-    #sym .dualKey { fill: #99f; }
-    #nav .dualKey { fill: #e83; }
-    #num .dualKey { fill: #e83; }
-    .sym { fill: #44f; transform: translate(0, -23px); }
-    .nav { fill: #e83; }
-    .num { fill: #e83; }
+    #sym .dualKey { fill: var(--color-palette-a-dark); }
+    #nav .dualKey { fill: var(--color-palette-c); }
+    #num .dualKey { fill: var(--color-palette-c); }
+    .sym { fill: var(--color-palette-a-dark); transform: translate(0, -23px); }
+    .nav { fill: var(--color-palette-c); }
+    .num { fill: var(--color-palette-c); }
     .mod { fill: #333; }
 
     .level1, .level2 { opacity: 0.8; }
@@ -77,9 +101,9 @@
       .specialKey rect { fill: #333; }
       rect, path       { fill: #444; }
       text             { fill: #bbb; }
-      .sym             { fill: #99f; }
+      .sym             { fill: var(--color-palette-a-light); }
       .mod             { fill: #eee; }
-      #sym .dualKey    { fill: #77d; }
+      #sym .dualKey    { fill: var(--color-palette-a-light); }
       #sym text.layer  { fill: navy; }
       #nav text.layer  { fill: brown; }
       #num text.layer  { fill: brown; }
diff --git a/www/content/claviers/compacts/3x6.svg b/www/content/claviers/compacts/3x6.svg
index 83da5bfb..1998e6d7 100644
--- a/www/content/claviers/compacts/3x6.svg
+++ b/www/content/claviers/compacts/3x6.svg
@@ -1,24 +1,29 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 836 300">
 
   <style>
-    /* color theme */
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
 
+    /* color theme */
     :root {
       --fg-normal-border: #666;
       --bg-normal:        #fff;
       --bg-special:       #bbb;
-      --bg-number:        hsl(295,  50%, 80%);
-      --bg-letter:        hsl(222, 100%, 84%);
-      --bg-home:          hsl(222, 100%, 74%);
+      --bg-number:        var(--color-palette-a);
+      --bg-letter:        var(--color-palette-b);
+      --bg-home:          var(--color-palette-d);
     }
 
     @media (prefers-color-scheme: dark) { :root {
       --fg-normal-border: #666;
       --bg-normal:        #4d4d4d;
       --bg-special:       #444;
-      --bg-number:        hsl(280, 10%, 34%);
-      --bg-letter:        hsl(220, 15%, 35%);
-      --bg-home:          hsl(225, 30%, 30%);
     }}
 
     rect, path {
diff --git a/www/content/claviers/compacts/3x6_ergol.svg b/www/content/claviers/compacts/3x6_ergol.svg
index a8bd742e..16f14b15 100644
--- a/www/content/claviers/compacts/3x6_ergol.svg
+++ b/www/content/claviers/compacts/3x6_ergol.svg
@@ -1,6 +1,30 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 836 300">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
     }
@@ -54,10 +78,10 @@
     .thb_7 g { transform: rotate(-12deg); }
     .thb_6 g { transform: rotate(-24deg); }
 
-    #sym rect { fill: #99f; }
-    #nav rect { fill: #e83; }
-    .sym { fill: #44f; transform: translate(0, -23px); }
-    .nav { fill: #e83; }
+    #sym rect { fill: var(--color-palette-a-dark); }
+    #nav rect { fill: var(--color-palette-c); }
+    .sym { fill: var(--color-palette-a-dark); transform: translate(0, -23px); }
+    .nav { fill: var(--color-palette-c); }
 
     .level1, .level2 { opacity: 0.8; }
     .sym             { opacity: 0.6; }
@@ -66,8 +90,8 @@
       .specialKey rect { fill: #333; }
       rect, path       { fill: #444; }
       text             { fill: #bbb; }
-      .sym             { fill: #99f; }
-      #sym rect        { fill: #77d; }
+      .sym             { fill: var(--color-palette-a-light); }
+      #sym rect        { fill: var(--color-palette-a-light); }
       #sym text        { fill: navy; }
       #nav text        { fill: brown;}
     }
diff --git a/www/content/claviers/compacts/4x6.svg b/www/content/claviers/compacts/4x6.svg
index 6c3da3ff..17e9cab7 100644
--- a/www/content/claviers/compacts/4x6.svg
+++ b/www/content/claviers/compacts/4x6.svg
@@ -1,24 +1,29 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 836 340">
 
   <style>
-    /* color theme */
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
 
+    /* color theme */
     :root {
       --fg-normal-border: #666;
       --bg-normal:        #fff;
       --bg-special:       #bbb;
-      --bg-number:        hsl(295,  50%, 80%);
-      --bg-letter:        hsl(222, 100%, 84%);
-      --bg-home:          hsl(222, 100%, 74%);
+      --bg-number:        var(--color-palette-a);
+      --bg-letter:        var(--color-palette-b);
+      --bg-home:          var(--color-palette-d);
     }
 
     @media (prefers-color-scheme: dark) { :root {
       --fg-normal-border: #666;
       --bg-normal:        #4d4d4d;
       --bg-special:       #444;
-      --bg-number:        hsl(280, 10%, 34%);
-      --bg-letter:        hsl(220, 15%, 35%);
-      --bg-home:          hsl(225, 30%, 30%);
     }}
 
     rect, path {
diff --git a/www/content/claviers/compacts/4x6_ergol.svg b/www/content/claviers/compacts/4x6_ergol.svg
index 15896bdc..e7627a37 100644
--- a/www/content/claviers/compacts/4x6_ergol.svg
+++ b/www/content/claviers/compacts/4x6_ergol.svg
@@ -1,6 +1,30 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 836 340">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
     }
@@ -58,10 +82,10 @@
     .thb_7 g { transform: rotate(-12deg); }
     .thb_6 g { transform: rotate(-24deg); }
 
-    #sym rect { fill: #99f; }
-    #nav rect { fill: #e83; }
-    .sym { fill: #44f; transform: translate(0, -23px); }
-    .nav { fill: #e83; }
+    #sym rect { fill: var(--color-palette-a-dark); }
+    #nav rect { fill: var(--color-palette-c); }
+    .sym { fill: var(--color-palette-a-dark); transform: translate(0, -23px); }
+    .nav { fill: var(--color-palette-c); }
 
     .level1, .level2 { opacity: 0.8; }
     .sym             { opacity: 0.6; }
@@ -70,8 +94,8 @@
       .specialKey rect { fill: #333; }
       rect, path       { fill: #444; }
       text             { fill: #bbb; }
-      .sym             { fill: #99f; }
-      #sym rect        { fill: #77d; }
+      .sym             { fill: var(--color-palette-a-light); }
+      #sym rect        { fill: var(--color-palette-a-light); }
       #sym text        { fill: navy; }
       #nav text        { fill: brown;}
     }
diff --git a/www/content/claviers/compacts/func.svg b/www/content/claviers/compacts/func.svg
index a487cd1f..5cad2fbc 100644
--- a/www/content/claviers/compacts/func.svg
+++ b/www/content/claviers/compacts/func.svg
@@ -1,6 +1,30 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 180">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
     }
@@ -42,15 +66,15 @@
     text { fill: #666; }
     .hrm { fill: #ddd; }
     .mod { fill: #333; }
-    .sym { fill: blue; }
-    .nav { fill: #e83; }
+    .sym { fill: var(--color-palette-a-dark); }
+    .nav { fill: var(--color-palette-c); }
 
     @media (prefers-color-scheme: dark) {
       rect { fill: #444; }
       text { fill: #888; }
       .hrm { fill: #666; }
       .mod { fill: #eee; }
-      .sym { fill: #99f; }
+      .sym { fill: var(--color-palette-a-light); }
       .nav { fill: #e83; }
     }
   </style>
diff --git a/www/content/claviers/compacts/navnum.svg b/www/content/claviers/compacts/navnum.svg
index 7954eb0d..e5ea32a1 100644
--- a/www/content/claviers/compacts/navnum.svg
+++ b/www/content/claviers/compacts/navnum.svg
@@ -1,6 +1,15 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 180">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
     :root {
       color-scheme: light dark;
     }
@@ -41,8 +50,8 @@
     text { fill: #666; }
     .hrm { fill: #ddd; }
     .mod { fill: #333; }
-    .sym { fill: blue; }
-    .nav { fill: #e83; }
+    .sym { fill: var(--color-palette-a); }
+    .nav { fill: var(--color-palette-c); }
 
     @media (prefers-color-scheme: dark) {
       rect { fill: #444; }
diff --git a/www/content/dactylo/index.html b/www/content/dactylo/index.html
index 6a824638..6bbfd097 100644
--- a/www/content/dactylo/index.html
+++ b/www/content/dactylo/index.html
@@ -70,10 +70,10 @@
     text-transform: uppercase;
     background-color: transparent;
     display: inline-block;
-    margin: 0 2px;
-    padding: 0;
+    margin: 2px;
     border: none;
     cursor: pointer;
+    font-weight: normal;
   }
 
   .key_list kbd.inactive {
diff --git a/www/content/installation/angle_mod.svg b/www/content/installation/angle_mod.svg
index 235c4b61..f6ace5a9 100644
--- a/www/content/installation/angle_mod.svg
+++ b/www/content/installation/angle_mod.svg
@@ -1,6 +1,15 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 180">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
     :root {
       color-scheme: light dark;
     }
@@ -19,33 +28,23 @@
     #row_AD text,
     #row_AC text,
     .layerSym { opacity: 0; }
-    .layerSym { font-weight: normal; fill: blue; }
+    .layerSym { font-weight: normal; fill: var(--color-palette-a-dark); }
 
     /* 'hints' theme */
-    .m1 rect { fill: hsl(  0, 100%, 95%); }
-    .l2 rect { fill: hsl( 42, 100%, 85%); }
-    .r2 rect { fill: hsl( 61, 100%, 85%); }
+    .m1 rect { fill: var(--color-palette-a); }
+    .l2 rect { fill: var(--color-palette-a); }
+    .r2 rect { fill: var(--color-palette-a); }
     .l3 rect,
-    .r3 rect { fill: hsl(136, 100%, 85%); }
+    .r3 rect { fill: var(--color-palette-b); }
     .l4 rect,
-    .r4 rect { fill: hsl(200, 100%, 85%); }
+    .r4 rect { fill: var(--color-palette-c); }
     .l5 rect,
-    .r5 rect { fill: hsl(230, 100%, 85%); }
+    .r5 rect { fill: var(--color-palette-d); }
 
     @media (prefers-color-scheme: dark) {
       text                 { fill: #aaa; }
       rect                 { fill: #444; }
       .layerSym            { fill: #99f; }
-      /* 'hints' theme */
-      .m1 rect { fill: hsl(  0, 25%, 30%); }
-      .l2 rect { fill: hsl( 31, 30%, 30%); }
-      .r2 rect { fill: hsl( 61, 30%, 30%); }
-      .l3 rect,
-      .r3 rect { fill: hsl(136, 30%, 30%); }
-      .l4 rect,
-      .r4 rect { fill: hsl(200, 30%, 30%); }
-      .l5 rect,
-      .r5 rect { fill: hsl(230, 30%, 30%); }
       .dimmed rect { fill: #4444; }
     }
   </style>
@@ -150,7 +149,7 @@
   </g>
 
   <g transform="translate(400 92)">
-    <text style="font-size: 92px; dominant-baseline: middle; fill: brown;">➤</text>
+    <text style="font-size: 92px; dominant-baseline: middle; fill: #555;">➤</text>
   </g>
 
   <g transform="translate(440)">
diff --git a/www/content/presentation/ergol_1dfh.svg b/www/content/presentation/ergol_1dfh.svg
index 40bdf7a1..5aead661 100644
--- a/www/content/presentation/ergol_1dfh.svg
+++ b/www/content/presentation/ergol_1dfh.svg
@@ -2,6 +2,30 @@
   viewBox="90 60 720 240">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
       /* default keys */
@@ -10,15 +34,15 @@
       --fg-normal:        #333;
       --bg-normal:        #fff;
       /* special keys */
-      --fg-level3:        blue;
-      --fg-level5:        green;
-      --fg-deadkey:       red;
+      --fg-level3:        var(--color-palette-a-dark);
+      --fg-level5:        var(--color-palette-b-dark);
+      --fg-deadkey:       var(--color-palette-d-dark);
       --fg-special:       #555;
       --bg-special:       #e4e4e4;
       /* 'reach' theme */
-      --bg-number:        hsl(295, 100%, 95%);
-      --bg-letter:        hsl(222, 100%, 95%);
-      --bg-home:          hsl(222, 100%, 90%);
+      --bg-number:        var(--color-palette-a-light);
+      --bg-letter:        var(--color-palette-b-light);
+      --bg-home:          var(--color-palette-d-light);
     }
 
     @media (prefers-color-scheme: dark) { :root {
@@ -27,15 +51,15 @@
       --fg-normal:        #bbb;
       --bg-normal:        #4d4d4d;
       /* special keys */
-      --fg-level3:        #99f;
-      --fg-level5:        #6d6;
-      --fg-deadkey:       #f77;
+      --fg-level3:        var(--color-palette-a-light);
+      --fg-level5:        var(--color-palette-b-light);
+      --fg-deadkey:       var(--color-palette-d-light);
       --fg-special:       #888;
       --bg-special:       #333;
       /* 'reach' theme */
-      --bg-number:        hsl(280, 10%, 34%);
-      --bg-letter:        hsl(220, 15%, 35%);
-      --bg-home:          hsl(225, 30%, 30%);
+      --bg-number:        var(--color-palette-a-dark);
+      --bg-letter:        var(--color-palette-b-dark);
+      --bg-home:          var(--color-palette-d-dark);
     }}
 
     rect, path {
diff --git a/www/content/presentation/ergol_1dk.svg b/www/content/presentation/ergol_1dk.svg
index 8bb9c3f1..a0bc809d 100644
--- a/www/content/presentation/ergol_1dk.svg
+++ b/www/content/presentation/ergol_1dk.svg
@@ -1,9 +1,34 @@
 <svg xmlns="http://www.w3.org/2000/svg" class="gnu" viewBox="135 60 630 240">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+    
     :root {
       color-scheme: light dark;
     }
+    
     rect, path {
       fill: #f8f8f8;
       fill: #fff;
@@ -27,13 +52,13 @@
     .left   { transform: translate(-15px, 0); }
     .right  { transform: translate(+15px, 0); }
 
-    #odk    { fill: #7e7; }
-    .level3 { fill: green; }
+    #odk    { fill: var(--color-palette-e); }
+    .level3 { fill: var(--color-palette-a-dark); }
 
     .layer, .level1, .level2 { opacity: 0.6; }
 
     .deadKey {
-      fill: red;
+      fill: var(--color-palette-d-dark);
       opacity: 0.8;
       font-size: 24px;
     }
@@ -44,9 +69,8 @@
       .specialKey rect { fill: #333; }
       rect, path       { fill: #444; }
       text             { fill: #ccc; }
-      #odk             { fill: #484; }
-      .deadKey         { fill: #f44; }
-      .level3          { fill: #6b6; }
+      .deadKey         { fill: var(--color-palette-d-light); }
+      .level3          { fill: var(--color-palette-a-light); }
     }
   </style>
 
diff --git a/www/content/presentation/ergol_1dk_de.svg b/www/content/presentation/ergol_1dk_de.svg
index fd48a77f..00ed79e9 100644
--- a/www/content/presentation/ergol_1dk_de.svg
+++ b/www/content/presentation/ergol_1dk_de.svg
@@ -2,6 +2,30 @@
 <svg xmlns="http://www.w3.org/2000/svg" class="gnu" viewBox="135 60 630 240">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
     }
@@ -28,13 +52,13 @@
     .left   { transform: translate(-15px, 0); }
     .right  { transform: translate(+15px, 0); }
 
-    #odk    { fill: #7e7; }
-    .level3 { fill: green; }
+    #odk    { fill: var(--color-palette-e); }
+    .level3 { fill: var(--color-palette-a-dark); }
 
     .layer, .level1, .level2 { opacity: 0.6; }
 
     .deadKey {
-      fill: red;
+      fill: var(--color-palette-d-dark);
       opacity: 0.8;
       font-size: 24px;
     }
@@ -46,8 +70,8 @@
       rect, path       { fill: #444; }
       text             { fill: #bbb; }
       #odk             { fill: #484; }
-      .deadKey         { fill: #f44; }
-      .level3          { fill: #6b6; }
+      .deadKey         { fill: var(--color-palette-d-light); }
+      .level3          { fill: var(--color-palette-a-light); }
     }
   </style>
 
diff --git a/www/content/presentation/ergol_altgr.svg b/www/content/presentation/ergol_altgr.svg
index 9723f3ec..2bf5b361 100644
--- a/www/content/presentation/ergol_altgr.svg
+++ b/www/content/presentation/ergol_altgr.svg
@@ -1,6 +1,30 @@
 <svg xmlns="http://www.w3.org/2000/svg" class="gnu" viewBox="135 60 630 240">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
     }
@@ -21,7 +45,7 @@
     .specialKey rect { fill: #e4e4e4; }
 
     .deadKey {
-      /* fill: red; */
+      /* fill: var(--color-palette-d-dark); */
       opacity: 0.5;
       font-size: 24px;
       font-weight: bolder;
@@ -34,9 +58,10 @@
     .left   { transform: translate(-15px, 0); }
     .right  { transform: translate(+15px, 0); }
 
-    #altgr  rect { fill: #99f; }
-    .level3      { fill: blue; }
-    .layer  { font-size: 14px; }
+    #altgr rect { fill: var(--color-palette-a); }
+    #altgr text { fill: var(--color-palette-a-dark); }
+    .level3     { fill: var(--color-palette-a-dark); }
+    .layer      { font-size: 14px; }
 
     .layer, .level1, .level2 { opacity: 0.6; }
 
@@ -44,10 +69,10 @@
       .specialKey rect { fill: #333; }
       rect, path       { fill: #444; }
       text             { fill: #bbb; }
-      #altgr rect      { fill: #77d; }
-      #altgr text      { fill: navy; }
-      .deadKey         { fill: #f44; }
-      .level3          { fill: #99f; }
+      #altgr rect      { fill: var(--color-palette-a); }
+      #altgr text      { fill: var(--color-palette-a-light); }
+      /* .deadKey      { var(--color-palette-d-light); } */
+      .level3          { var(--color-palette-a-light); }
     }
   </style>
 
diff --git a/www/content/presentation/ergol_en.svg b/www/content/presentation/ergol_en.svg
index 0e1141c0..3126096a 100644
--- a/www/content/presentation/ergol_en.svg
+++ b/www/content/presentation/ergol_en.svg
@@ -1,8 +1,33 @@
 <svg xmlns="http://www.w3.org/2000/svg" class="gnu" viewBox="135 60 630 240">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
+      --colormap-color: 153, 19, 10; /* --color-palette-e-dark = #99130A*/
     }
     rect, path {
       fill: #f8f8f8;
@@ -11,7 +36,7 @@
       stroke-width: .5px;
     }
     text {
-      fill: #777;
+      fill: #333;
       text-shadow: 0 1px 0px #8bb8;
       font: normal 20px sans-serif;
       text-align: center;
@@ -33,66 +58,69 @@
     .right  { transform: translate(+15px, 0); }
 
     .layer  { opacity: 0.7; font-size: 14px; }
-    .level3 { opacity: 0.0; fill: green; }
+    .level3 { opacity: 0.0; fill: var(--color-palette-a-dark); }
 
     @media (prefers-color-scheme: dark) {
+      :root {
+        --colormap-color: 251, 201, 197; /* --color-palette-e-light = #FBC9C5*/
+      }
       rect, path { fill: #444; }
       text       { fill: #bbb; }
-      .deadKey   { fill: #f44; }
-      .level3    { fill: #6b6; }
+      /* .deadKey   { fill: #f44; } */
+      .level3    { fill: var(--color-palette-a-light); }
     }
   </style>
 
   <g id="row_AD">
     <g class="left">
       <g transform="translate(90)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.01);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.01);"/>
         <text x="12.8" y="20.6" class="level2">Q</text>
         <text x="38.0" y="43.4" class="level3">æ</text>
       </g>
       <g transform="translate(150)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.13);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.13);"/>
         <text x="12.8" y="20.6" class="level2">C</text>
         <text x="38.0" y="43.4" class="level3">ç</text>
       </g>
       <g transform="translate(210)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.47);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.47);"/>
         <text x="12.8" y="20.6" class="level2">O</text>
         <text x="38.0" y="43.4" class="level3">œ</text>
       </g>
       <g transform="translate(270)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.083);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.083);"/>
         <text x="12.8" y="20.6" class="level2">P</text>
         <text x="38.0" y="43.4" class="level3">ô</text>
       </g>
       <g transform="translate(330)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.13);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.13);"/>
         <text x="12.8" y="20.6" class="level2">W</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
     </g>
     <g class="right">
       <g transform="translate(390)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.005);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.005);"/>
         <text x="12.8" y="20.6" class="level2">J</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
       <g transform="translate(450)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.15);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.15);"/>
         <text x="12.8" y="20.6" class="level2">M</text>
         <text x="38.0" y="43.4" class="level3">µ</text>
       </g>
       <g transform="translate(510)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.262);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.262);"/>
         <text x="12.8" y="20.6" class="level2">D</text>
         <text x="38.0" y="43.4" class="level3">_</text>
       </g>
       <g transform="translate(570)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.048);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.048);"/>
         <text x="15" y="24" class="deadKey">★</text>
       </g>
       <g transform="translate(630)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.107);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.107);"/>
         <text x="12.8" y="20.6" class="level2">Y</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
@@ -102,54 +130,54 @@
   <g id="row_AC">
     <g class="left">
       <g transform="translate(90)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.48);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.48);"/>
         <text x="12.8" y="20.6" class="level2">A</text>
         <text x="38.0" y="43.4" class="level3">à</text>
       </g>
       <g transform="translate(150)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.37);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.37);"/>
         <text x="12.8" y="20.6" class="level2">S</text>
         <text x="38.0" y="43.4" class="level3">é</text>
       </g>
       <g transform="translate(210)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.70);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.70);"/>
         <text x="12.8" y="20.6" class="level2">E</text>
         <text x="38.0" y="43.4" class="level3">è</text>
       </g>
       <g transform="translate(270)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.398);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.398);"/>
         <text x="12.8" y="20.6" class="level2">N</text>
         <text x="38.0" y="43.4" class="level3">ê</text>
       </g>
       <g transform="translate(330)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.134);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.134);"/>
         <text x="12.8" y="20.6" class="level2">F</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
     </g>
     <g class="right">
       <g transform="translate(390)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.215);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.215);"/>
         <text x="12.8" y="20.6" class="level2">L</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
       <g transform="translate(450)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.32);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.32);"/>
         <text x="12.8" y="20.6" class="level2">R</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
       <g transform="translate(510)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.55);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.55);"/>
         <text x="12.8" y="20.6" class="level2">T</text>
         <text x="38.0" y="43.4" class="level3">î</text>
       </g>
       <g transform="translate(570)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.39);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.39);"/>
         <text x="12.8" y="20.6" class="level2">I</text>
         <text x="38.0" y="43.4" class="level3">û</text>
       </g>
       <g transform="translate(630)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.16);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.16);"/>
         <text x="12.8" y="20.6" class="level2">U</text>
         <text x="38.0" y="43.4" class="level3">ù</text>
       </g>
@@ -159,57 +187,57 @@
   <g id="row_AB">
     <g class="left">
       <g transform="translate(90)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.004);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.004);"/>
         <text x="12.8" y="20.6" class="level2">Z</text>
         <text x="38.0" y="43.4" class="level3">â</text>
       </g>
       <g transform="translate(150)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.014);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.014);"/>
         <text x="12.8" y="20.6" class="level2">X</text>
         <text x="38.0" y="43.4" class="level3">ß</text>
       </g>
       <g transform="translate(210)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.003);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.003);"/>
         <text x="12.8" y="43.4" class="level1">-</text>
         <text x="12.8" y="20.6" class="level2">?</text>
         <text x="38.0" y="43.4" class="level3">—</text>
       </g>
       <g transform="translate(270)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.063);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.063);"/>
         <text x="12.8" y="20.6" class="level2">V</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
       <g transform="translate(330)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.082);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.082);"/>
         <text x="12.8" y="20.6" class="level2">B</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
     </g>
     <g class="right">
       <g transform="translate(390)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.027);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.027);"/>
         <text x="12.8" y="43.4" class="level1">.</text>
         <text x="12.8" y="20.6" class="level2">:</text>
         <text x="38.0" y="43.4" class="level3">…</text>
       </g>
       <g transform="translate(450)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.403);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.403);"/>
         <text x="12.8" y="20.6" class="level2">H</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
       <g transform="translate(510)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.11);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.11);"/>
         <text x="12.8" y="20.6" class="level2">G</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
       <g transform="translate(570)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.139);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.139);"/>
         <text x="12.8" y="43.4" class="level1">,</text>
         <text x="12.8" y="20.6" class="level2">;</text>
         <text x="38.0" y="43.4" class="level3">·</text>
       </g>
       <g transform="translate(630)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.04);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.04);"/>
         <text x="12.8" y="20.6" class="level2">K</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
@@ -218,14 +246,14 @@
 
   <g id="row_AA">
     <g transform="translate(180)">
-      <rect width="82" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0);"/>
+      <rect width="82" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0);"/>
       <text x="26" y="42.8" class="layer">Shift</text>
     </g>
     <g transform="translate(270)">
-      <rect width="232" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.086);"/>
+      <rect width="232" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.086);"/>
     </g>
     <g transform="translate(510)">
-      <rect width="82" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0);"/>
+      <rect width="82" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0);"/>
       <text x="26" y="42.8" class="layer">AltGr</text>
     </g>
   </g>
diff --git a/www/content/presentation/ergol_fr.svg b/www/content/presentation/ergol_fr.svg
index 7445bee9..3946bb32 100644
--- a/www/content/presentation/ergol_fr.svg
+++ b/www/content/presentation/ergol_fr.svg
@@ -3,7 +3,10 @@
   <style>
     :root {
       color-scheme: light dark;
+      --color-palette-a-dark: #0E9595;
+      --colormap-color: 153, 19, 10; /* --color-palette-e-dark = #99130A */
     }
+
     rect, path {
       fill: #f8f8f8;
       fill: #fff;
@@ -11,7 +14,7 @@
       stroke-width: .5px;
     }
     text {
-      fill: #777;
+      fill: #333;
       text-shadow: 0 1px 0px #8bb8;
       font: normal 20px sans-serif;
       text-align: center;
@@ -19,7 +22,7 @@
     }
 
     .deadKey {
-      /* fill: red; */
+      /* fill: var(--fg-dead-key); */
       opacity: 0.8;
       font-size: 24px;
       font-weight: bolder;
@@ -33,67 +36,67 @@
     .right  { transform: translate(+15px, 0); }
 
     .layer  { opacity: 0.7; font-size: 14px; }
-    .level3 { opacity: 0.7; fill: green; }
+    .level3 { opacity: 0.7; fill: var(--color-palette-a-dark); }
 
     @media (prefers-color-scheme: dark) {
       rect, path { fill: #444; }
       text       { fill: #bbb; }
-      .deadKey   { fill: #f44; }
-      .level3    { fill: #6b6; }
+      /* .deadKey   { fill: #f44; } */
+      .level3    { fill: var(--color-palette-a-light); }
     }
   </style>
 
   <g id="row_AD">
     <g class="left">
       <g transform="translate(90)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.096);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.096);"/>
         <text x="12.8" y="20.6" class="level2">Q</text>
         <text x="38.0" y="43.4" class="level3">â</text>
       </g>
       <g transform="translate(150)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.19);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.19);"/>
         <text x="12.8" y="20.6" class="level2">C</text>
         <text x="38.0" y="43.4" class="level3">ç</text>
       </g>
       <g transform="translate(210)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.319);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.319);"/>
         <text x="12.8" y="20.6" class="level2">O</text>
         <text x="38.0" y="43.4" class="level3">œ</text>
       </g>
       <g transform="translate(270)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.157);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.157);"/>
         <text x="12.8" y="20.6" class="level2">P</text>
         <text x="38.0" y="43.4" class="level3">ô</text>
       </g>
       <g transform="translate(330)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0);"/>
         <text x="12.8" y="20.6" class="level2">W</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
     </g>
     <g class="right">
       <g transform="translate(390)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.036);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.036);"/>
         <text x="12.8" y="20.6" class="level2">J</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
       <g transform="translate(450)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.16);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.16);"/>
         <text x="12.8" y="20.6" class="level2">M</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
       <g transform="translate(510)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.21);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.21);"/>
         <text x="12.8" y="20.6" class="level2">D</text>
         <text x="38.0" y="43.4" class="level3">_</text>
       </g>
       <g transform="translate(570)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.263);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.263);"/>
         <text x="15" y="24" class="deadKey">★</text>
         <text x="38" y="55" class="deadKey">¨</text>
       </g>
       <g transform="translate(630)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.014);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.014);"/>
         <text x="12.8" y="20.6" class="level2">Y</text>
         <text x="38.0" y="43.4" class="level3">û</text>
       </g>
@@ -103,54 +106,54 @@
   <g id="row_AC">
     <g class="left">
       <g transform="translate(90)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.46);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.46);"/>
         <text x="12.8" y="20.6" class="level2">A</text>
         <text x="38.0" y="43.4" class="level3">à</text>
       </g>
       <g transform="translate(150)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.527);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.527);"/>
         <text x="12.8" y="20.6" class="level2">S</text>
         <text x="38.0" y="43.4" class="level3">é</text>
       </g>
       <g transform="translate(210)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.884);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.884);"/>
         <text x="12.8" y="20.6" class="level2">E</text>
         <text x="38.0" y="43.4" class="level3">è</text>
       </g>
       <g transform="translate(270)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.42);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.42);"/>
         <text x="12.8" y="20.6" class="level2">N</text>
         <text x="38.0" y="43.4" class="level3">ê</text>
       </g>
       <g transform="translate(330)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.055);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.055);"/>
         <text x="12.8" y="20.6" class="level2">F</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
     </g>
     <g class="right">
       <g transform="translate(390)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.295);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.295);"/>
         <text x="12.8" y="20.6" class="level2">L</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
       <g transform="translate(450)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.391);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.391);"/>
         <text x="12.8" y="20.6" class="level2">R</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
       <g transform="translate(510)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.426);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.426);"/>
         <text x="12.8" y="20.6" class="level2">T</text>
         <text x="38.0" y="43.4" class="level3">î</text>
       </g>
       <g transform="translate(570)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.408);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.408);"/>
         <text x="12.8" y="20.6" class="level2">I</text>
         <text x="38.0" y="43.4" class="level3">ï</text>
       </g>
       <g transform="translate(630)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.374);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.374);"/>
         <text x="12.8" y="20.6" class="level2">U</text>
         <text x="38.0" y="43.4" class="level3">ù</text>
       </g>
@@ -160,57 +163,57 @@
   <g id="row_AB">
     <g class="left">
       <g transform="translate(90)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.022);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.022);"/>
         <text x="12.8" y="20.6" class="level2">Z</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
       <g transform="translate(150)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.022);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.022);"/>
         <text x="12.8" y="20.6" class="level2">X</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
       <g transform="translate(210)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.005);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.005);"/>
         <text x="12.8" y="43.4" class="level1">-</text>
         <text x="12.8" y="20.6" class="level2">?</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
       <g transform="translate(270)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.107);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.107);"/>
         <text x="12.8" y="20.6" class="level2">V</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
       <g transform="translate(330)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.048);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.048);"/>
         <text x="12.8" y="20.6" class="level2">B</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
     </g>
     <g class="right">
       <g transform="translate(390)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.04);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.04);"/>
         <text x="12.8" y="43.4" class="level1">.</text>
         <text x="12.8" y="20.6" class="level2">:</text>
         <text x="38.0" y="43.4" class="level3">…</text>
       </g>
       <g transform="translate(450)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.063);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.063);"/>
         <text x="12.8" y="20.6" class="level2">H</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
       <g transform="translate(510)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.053);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.053);"/>
         <text x="12.8" y="20.6" class="level2">G</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
       <g transform="translate(570)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.137);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.137);"/>
         <text x="12.8" y="43.4" class="level1">,</text>
         <text x="12.8" y="20.6" class="level2">;</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
       <g transform="translate(630)">
-        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0);"/>
+        <rect width="52" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0);"/>
         <text x="12.8" y="20.6" class="level2">K</text>
         <text x="38.0" y="43.4" class="level3"> </text>
       </g>
@@ -219,14 +222,14 @@
 
   <g id="row_AA">
     <g transform="translate(180)">
-      <rect width="82" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0);"/>
+      <rect width="82" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0);"/>
       <text x="26" y="42.8" class="layer">Shift</text>
     </g>
     <g transform="translate(270)">
-      <rect width="232" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0.086);"/>
+      <rect width="232" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0.086);"/>
     </g>
     <g transform="translate(510)">
-      <rect width="82" height="52" rx="5" ry="5" style="fill: rgba(127, 127, 255, 0);"/>
+      <rect width="82" height="52" rx="5" ry="5" style="fill: rgba(var(--colormap-color), 0);"/>
       <text x="26" y="42.8" class="layer">AltGr</text>
     </g>
   </g>
diff --git a/www/layouts/partials/head/css.html b/www/layouts/partials/head/css.html
index 4de95c67..f258997d 100644
--- a/www/layouts/partials/head/css.html
+++ b/www/layouts/partials/head/css.html
@@ -1,12 +1,14 @@
-{{- with resources.Get "css/theme.css" }}
-  {{- if eq hugo.Environment "development" }}
-    <link rel="stylesheet" href="{{ .RelPermalink }}">
-  {{- else }}
-    {{- with . | minify | fingerprint }}
-      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+{{ range $css := slice "css/theme.css" "css/icons.css" }}
+    {{- with resources.Get . }}
+    {{- if eq hugo.Environment "development" }}
+        <link rel="stylesheet" href="{{ .RelPermalink }}">
+    {{- else }}
+        {{- with . | minify | fingerprint }}
+        <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+        {{- end }}
     {{- end }}
-  {{- end }}
-{{- end }}
+    {{- end }}
+{{ end }}
 
 {{ range .Params.cssSheets }}
   {{- with resources.Get . }}
diff --git a/www/layouts/shortcodes/x-keyboard.html b/www/layouts/shortcodes/x-keyboard.html
index 5296c00e..981a991d 100644
--- a/www/layouts/shortcodes/x-keyboard.html
+++ b/www/layouts/shortcodes/x-keyboard.html
@@ -1,5 +1,18 @@
 {{ $name := .Get "name" }}
 <div class="keyboard">
+  {{ if $name }}
+    <nav>
+      {{ with .Get "href" }}
+        <a href="{{ . }}"><span class="gg-software-download"></span> Installer</a>
+      {{ end }}
+      {{ with .Get "data" }}
+        <button disabled><i class="gg-play-button-o"></i> Tester</button>
+        <a href="/stats/#/{{ . }}//en+fr"><i class="gg-align-bottom"></i> Stats</a>
+        <a href="/dactylo/#{{ . }}"><i class="gg-keyboard"></i> Apprendre</a><!-- 🎓 -->
+      {{ end }}
+    </nav>
+  {{ end }}
+
   <div style="width: 100%; padding-top: 34%; position: relative;">
     <object type="image/svg+xml"
             {{ with .Get "class" }} class="{{ . }}" {{ end }}
@@ -11,7 +24,7 @@
     <fieldset class="layers" hidden>
       <input type="radio" name="layers" label="Typo"  value="odk" checked
         title="caractères obtenus par la touche « Typo » (vue simplifiée)">
-      <input type="radio" name="layers" label="Typo+Symboles"   value="mixed"
+      <input type="radio" name="layers" label="Typo & Symboles"   value="mixed"
         title="caractères obtenus par les touches « Typo » et « Symboles »">
       <input type="radio" name="layers" label="Symboles" value="altgr"
         title="caractères obtenus par la touche « Symboles »">
@@ -39,15 +52,5 @@
       <x-keyboard src="/layouts/{{ . }}.json"></x-keyboard>
     </dialog>
     {{ end }}
-    <nav>
-      {{ with .Get "href" }}
-        <a href="{{ . }}"><span>⇣</span> Installer</a>
-      {{ end }}
-      {{ with .Get "data" }}
-        <button disabled>⇪ Tester</button>
-        <a href="/stats/#/{{ . }}//en+fr"><span>𝚺</span> Stats</a>
-        <a href="/dactylo/#{{ . }}"><span>⌨</span> Apprendre</a><!-- 🎓 -->
-      {{ end }}
-    </nav>
   {{ end }}
 </div>
diff --git a/www/static/img/bepo.svg b/www/static/img/bepo.svg
index cc3d19e2..60248335 100644
--- a/www/static/img/bepo.svg
+++ b/www/static/img/bepo.svg
@@ -1,5 +1,29 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 300" platform="gnu" theme="" class="iso intlBackslash">
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
       /* default keys */
@@ -8,15 +32,15 @@
       --fg-normal:        #333;
       --bg-normal:        #fff;
       /* special keys */
-      --fg-level3:        blue;
-      --fg-level5:        green;
-      --fg-deadkey:       red;
+      --fg-level3:        var(--color-palette-a-dark);
+      --fg-level5:        var(--color-palette-b-dark);
+      --fg-deadkey:       var(--color-palette-d-dark);
       --fg-special:       #555;
       --bg-special:       #e4e4e4;
       /* 'reach' theme */
-      --bg-number:        hsl( 42, 100%, 95%);
-      --bg-letter:        hsl(222, 100%, 95%);
-      --bg-home:          hsl(222, 100%, 90%);
+      --bg-number:        var(--color-palette-a-light);
+      --bg-letter:        var(--color-palette-b-light);
+      --bg-home:          var(--color-palette-d-light);
     }
 
     /* vibrant dark */
@@ -26,19 +50,19 @@
       --fg-normal:        #bbb;
       --bg-normal:        #444;
       /* special keys */
-      --fg-level3:        #99f;
-      --fg-level5:        #6d6;
-      --fg-deadkey:       #f44;
+      --fg-level3:        var(--color-palette-a-light);
+      --fg-level5:        var(--color-palette-b-light);
+      --fg-deadkey:       var(--color-palette-d-light);
       --fg-special:       #888;
       --bg-special:       #333;
       /* 'reach' theme */
-      --bg-number:        hsl( 60, 25%, 30%);
-      --bg-letter:        hsl(180, 30%, 30%);
-      --bg-home:          hsl(230, 30%, 30%);
+      --bg-number:        var(--color-palette-a-dark);
+      --bg-letter:        var(--color-palette-b-dark);
+      --bg-home:          var(--color-palette-d-dark);
     }}
 
     /* mild dark */
-    @media (prefers-color-scheme: dark) { :root {
+    /* @media (prefers-color-scheme: dark) { :root {
       --fg-normal-shadow: #8558;
       --fg-normal-border: #666;
       --fg-normal:        #bbb;
@@ -53,7 +77,7 @@
       --bg-number:        hsl( 80, 10%, 35%);
       --bg-letter:        hsl(220, 15%, 35%);
       --bg-home:          hsl(230, 30%, 30%);
-    }}
+    }} */
 
     rect, path {
       fill: var(--bg-normal);
diff --git a/www/static/img/bepolar.svg b/www/static/img/bepolar.svg
index 640d85e2..5520d926 100644
--- a/www/static/img/bepolar.svg
+++ b/www/static/img/bepolar.svg
@@ -3,6 +3,30 @@
      viewBox="0 0 900 300">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
       /* default keys */
@@ -11,15 +35,15 @@
       --fg-normal:        #333;
       --bg-normal:        #fff;
       /* special keys */
-      --fg-level3:        blue;
-      --fg-level5:        green;
-      --fg-deadkey:       red;
+      --fg-level3:        var(--color-palette-a-dark);
+      --fg-level5:        var(--color-palette-b-dark);
+      --fg-deadkey:       var(--color-palette-d-dark);
       --fg-special:       #555;
       --bg-special:       #e4e4e4;
       /* 'reach' theme */
-      --bg-number:        hsl(295, 100%, 95%);
-      --bg-letter:        hsl(222, 100%, 95%);
-      --bg-home:          hsl(222, 100%, 90%);
+      --bg-number:        var(--color-palette-a-light);
+      --bg-letter:        var(--color-palette-b-light);
+      --bg-home:          var(--color-palette-d-light);
     }
 
     @media (prefers-color-scheme: dark) { :root {
@@ -28,15 +52,15 @@
       --fg-normal:        #bbb;
       --bg-normal:        #4d4d4d;
       /* special keys */
-      --fg-level3:        #99f;
-      --fg-level5:        #6d6;
-      --fg-deadkey:       #f77;
+      --fg-level3:        var(--color-palette-a-light);
+      --fg-level5:        var(--color-palette-b-light);
+      --fg-deadkey:       var(--color-palette-d-light);
       --fg-special:       #888;
       --bg-special:       #333;
       /* 'reach' theme */
-      --bg-number:        hsl(280, 10%, 34%);
-      --bg-letter:        hsl(220, 15%, 35%);
-      --bg-home:          hsl(225, 30%, 30%);
+      --bg-number:        var(--color-palette-a-dark);
+      --bg-letter:        var(--color-palette-b-dark);
+      --bg-home:          var(--color-palette-d-dark);
     }}
 
     rect, path {
diff --git a/www/static/img/colemak-french-touch.svg b/www/static/img/colemak-french-touch.svg
index c2c6d8bc..200f828a 100644
--- a/www/static/img/colemak-french-touch.svg
+++ b/www/static/img/colemak-french-touch.svg
@@ -3,6 +3,30 @@
      viewBox="0 0 900 300">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
       /* default keys */
@@ -11,15 +35,15 @@
       --fg-normal:        #333;
       --bg-normal:        #fff;
       /* special keys */
-      --fg-level3:        blue;
-      --fg-level5:        green;
-      --fg-deadkey:       red;
+      --fg-level3:        var(--color-palette-a-dark);
+      --fg-level5:        var(--color-palette-b-dark);
+      --fg-deadkey:       var(--color-palette-d-dark);
       --fg-special:       #555;
       --bg-special:       #e4e4e4;
       /* 'reach' theme */
-      --bg-number:        hsl(295, 100%, 95%);
-      --bg-letter:        hsl(222, 100%, 95%);
-      --bg-home:          hsl(222, 100%, 90%);
+      --bg-number:        var(--color-palette-a-light);
+      --bg-letter:        var(--color-palette-b-light);
+      --bg-home:          var(--color-palette-d-light);
     }
 
     @media (prefers-color-scheme: dark) { :root {
@@ -28,15 +52,15 @@
       --fg-normal:        #bbb;
       --bg-normal:        #4d4d4d;
       /* special keys */
-      --fg-level3:        #99f;
-      --fg-level5:        #6d6;
-      --fg-deadkey:       #f77;
+      --fg-level3:        var(--color-palette-a-light);
+      --fg-level5:        var(--color-palette-b-light);
+      --fg-deadkey:       var(--color-palette-d-light);
       --fg-special:       #888;
       --bg-special:       #333;
       /* 'reach' theme */
-      --bg-number:        hsl(280, 10%, 34%);
-      --bg-letter:        hsl(220, 15%, 35%);
-      --bg-home:          hsl(225, 30%, 30%);
+      --bg-number:        var(--color-palette-a-dark);
+      --bg-letter:        var(--color-palette-b-dark);
+      --bg-home:          var(--color-palette-d-dark);
     }}
 
     rect, path {
diff --git a/www/static/img/erglace.svg b/www/static/img/erglace.svg
index 12535649..0ebde77a 100644
--- a/www/static/img/erglace.svg
+++ b/www/static/img/erglace.svg
@@ -3,6 +3,30 @@
      viewBox="0 0 900 300">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
       /* default keys */
@@ -11,15 +35,15 @@
       --fg-normal:        #333;
       --bg-normal:        #fff;
       /* special keys */
-      --fg-level3:        blue;
-      --fg-level5:        green;
-      --fg-deadkey:       red;
+      --fg-level3:        var(--color-palette-a-dark);
+      --fg-level5:        var(--color-palette-b-dark);
+      --fg-deadkey:       var(--color-palette-d-dark);
       --fg-special:       #555;
       --bg-special:       #e4e4e4;
       /* 'reach' theme */
-      --bg-number:        hsl(295, 100%, 95%);
-      --bg-letter:        hsl(222, 100%, 95%);
-      --bg-home:          hsl(222, 100%, 90%);
+      --bg-number:        var(--color-palette-a-light);
+      --bg-letter:        var(--color-palette-b-light);
+      --bg-home:          var(--color-palette-d-light);
     }
 
     @media (prefers-color-scheme: dark) { :root {
@@ -28,15 +52,15 @@
       --fg-normal:        #bbb;
       --bg-normal:        #4d4d4d;
       /* special keys */
-      --fg-level3:        #99f;
-      --fg-level5:        #6d6;
-      --fg-deadkey:       #f77;
+      --fg-level3:        var(--color-palette-a-light);
+      --fg-level5:        var(--color-palette-b-light);
+      --fg-deadkey:       var(--color-palette-d-light);
       --fg-special:       #888;
       --bg-special:       #333;
       /* 'reach' theme */
-      --bg-number:        hsl(280, 10%, 34%);
-      --bg-letter:        hsl(220, 15%, 35%);
-      --bg-home:          hsl(225, 30%, 30%);
+      --bg-number:        var(--color-palette-a-dark);
+      --bg-letter:        var(--color-palette-b-dark);
+      --bg-home:          var(--color-palette-d-dark);
     }}
 
     rect, path {
diff --git a/www/static/img/ergol.svg b/www/static/img/ergol.svg
index 74ccb75f..991d902a 100644
--- a/www/static/img/ergol.svg
+++ b/www/static/img/ergol.svg
@@ -3,6 +3,30 @@
      viewBox="0 0 900 300">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
       /* default keys */
@@ -11,15 +35,15 @@
       --fg-normal:        #333;
       --bg-normal:        #fff;
       /* special keys */
-      --fg-level3:        blue;
-      --fg-level5:        green;
-      --fg-deadkey:       red;
+      --fg-level3:        var(--color-palette-a-dark);
+      --fg-level5:        var(--color-palette-b-dark);
+      --fg-deadkey:       var(--color-palette-d-dark);
       --fg-special:       #555;
       --bg-special:       #e4e4e4;
       /* 'reach' theme */
-      --bg-number:        hsl(295, 100%, 95%);
-      --bg-letter:        hsl(222, 100%, 95%);
-      --bg-home:          hsl(222, 100%, 90%);
+      --bg-number:        var(--color-palette-a-light);
+      --bg-letter:        var(--color-palette-b-light);
+      --bg-home:          var(--color-palette-d-light);
     }
 
     @media (prefers-color-scheme: dark) { :root {
@@ -28,15 +52,15 @@
       --fg-normal:        #bbb;
       --bg-normal:        #4d4d4d;
       /* special keys */
-      --fg-level3:        #99f;
-      --fg-level5:        #6d6;
-      --fg-deadkey:       #f77;
+      --fg-level3:        var(--color-palette-a-light);
+      --fg-level5:        var(--color-palette-b-light);
+      --fg-deadkey:       var(--color-palette-d-light);
       --fg-special:       #888;
       --bg-special:       #333;
       /* 'reach' theme */
-      --bg-number:        hsl(280, 10%, 34%);
-      --bg-letter:        hsl(220, 15%, 35%);
-      --bg-home:          hsl(225, 30%, 30%);
+      --bg-number:        var(--color-palette-a-dark);
+      --bg-letter:        var(--color-palette-b-dark);
+      --bg-home:          var(--color-palette-d-dark);
     }}
 
     rect, path {
@@ -49,6 +73,7 @@
       font: normal 20px sans-serif;
       text-align: center;
       text-shadow: 0 1px 0px var(--fg-normal-shadow);
+      cursor: default;
     }
 
     .specialKey,
diff --git a/www/static/img/ergol_full.svg b/www/static/img/ergol_full.svg
index f35e24e8..975a77f1 100644
--- a/www/static/img/ergol_full.svg
+++ b/www/static/img/ergol_full.svg
@@ -11,15 +11,15 @@
       --fg-normal:        #333;
       --bg-normal:        #fff;
       /* special keys */
-      --fg-level3:        blue;
-      --fg-level5:        green;
-      --fg-deadkey:       red;
+      --fg-level3:        var(--color-palette-a-dark);
+      --fg-level5:        var(--color-palette-b-dark);
+      --fg-deadkey:       var(--color-palette-d-dark);
       --fg-special:       #555;
       --bg-special:       #e4e4e4;
       /* 'reach' theme */
-      --bg-number:        hsl(295, 100%, 95%);
-      --bg-letter:        hsl(222, 100%, 95%);
-      --bg-home:          hsl(222, 100%, 90%);
+      --bg-number:        var(--color-palette-a-light);
+      --bg-letter:        var(--color-palette-b-light);
+      --bg-home:          var(--color-palette-d-light);
     }
 
     @media (prefers-color-scheme: dark) { :root {
@@ -28,15 +28,15 @@
       --fg-normal:        #bbb;
       --bg-normal:        #4d4d4d;
       /* special keys */
-      --fg-level3:        #99f;
-      --fg-level5:        #6d6;
-      --fg-deadkey:       #f77;
+      --fg-level3:        var(--color-palette-a-light);
+      --fg-level5:        var(--color-palette-b-light);
+      --fg-deadkey:       var(--color-palette-d-light);
       --fg-special:       #888;
       --bg-special:       #333;
       /* 'reach' theme */
-      --bg-number:        hsl(280, 10%, 34%);
-      --bg-letter:        hsl(220, 15%, 35%);
-      --bg-home:          hsl(225, 30%, 30%);
+      --bg-number:        var(--color-palette-a-dark);
+      --bg-letter:        var(--color-palette-b-dark);
+      --bg-home:          var(--color-palette-d-dark);
     }}
 
     rect, path {
diff --git a/www/static/img/lafayette.svg b/www/static/img/lafayette.svg
index ac9ab04b..1252e06a 100644
--- a/www/static/img/lafayette.svg
+++ b/www/static/img/lafayette.svg
@@ -3,6 +3,30 @@
      viewBox="0 0 900 300">
 
   <style>
+    /* Base color palette -- https://coolors.co/9cf6f6-f3c98b-daa588-c46d5e-f56960 */
+    :root {
+      --color-palette-a: #9CF6F6;
+      --color-palette-b: #F3C98B;
+      --color-palette-c: #DAA588;
+      --color-palette-d: #C46D5E;
+      --color-palette-e: #F56960;
+    }
+
+    /* Derived color palette -- when lighter or darker shades are required */
+    :root {
+      --color-palette-a-light: #DAFCFC;
+      --color-palette-b-light: #FBEEDA;
+      --color-palette-c-light: #F5E7E0;
+      --color-palette-d-light: #EED7D2;
+      --color-palette-e-light: #FBC9C5;
+      
+      --color-palette-a-dark: #0E9595;
+      --color-palette-b-dark: #CB8215;
+      --color-palette-c-dark: #9C5630;
+      --color-palette-d-dark: #77372C;
+      --color-palette-e-dark: #99130A;
+    }
+
     :root {
       color-scheme: light dark;
       /* default keys */
@@ -11,15 +35,15 @@
       --fg-normal:        #333;
       --bg-normal:        #fff;
       /* special keys */
-      --fg-level3:        blue;
-      --fg-level5:        green;
-      --fg-deadkey:       red;
+      --fg-level3:        var(--color-palette-a-dark);
+      --fg-level5:        var(--color-palette-b-dark);
+      --fg-deadkey:       var(--color-palette-d-dark);
       --fg-special:       #555;
       --bg-special:       #e4e4e4;
       /* 'reach' theme */
-      --bg-number:        hsl(295, 100%, 95%);
-      --bg-letter:        hsl(222, 100%, 95%);
-      --bg-home:          hsl(222, 100%, 90%);
+      --bg-number:        var(--color-palette-a-light);
+      --bg-letter:        var(--color-palette-b-light);
+      --bg-home:          var(--color-palette-d-light);
     }
 
     @media (prefers-color-scheme: dark) { :root {
@@ -28,15 +52,15 @@
       --fg-normal:        #bbb;
       --bg-normal:        #4d4d4d;
       /* special keys */
-      --fg-level3:        #99f;
-      --fg-level5:        #6d6;
-      --fg-deadkey:       #f77;
+      --fg-level3:        var(--color-palette-a-light);
+      --fg-level5:        var(--color-palette-b-light);
+      --fg-deadkey:       var(--color-palette-d-light);
       --fg-special:       #888;
       --bg-special:       #333;
       /* 'reach' theme */
-      --bg-number:        hsl(280, 10%, 34%);
-      --bg-letter:        hsl(220, 15%, 35%);
-      --bg-home:          hsl(225, 30%, 30%);
+      --bg-number:        var(--color-palette-a-dark);
+      --bg-letter:        var(--color-palette-b-dark);
+      --bg-home:          var(--color-palette-d-dark);
     }}
 
     rect, path {