diff --git a/src/css/base.css b/src/css/base.css
index 04d460a..faf87fa 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -35,6 +35,23 @@
 -webkit-font-smoothing: antialiased;
 --shadow-bg: 0 var(--x2) var(--x4) var(--z0);
 --shadow: 0 var(--x1) var(--x8) rgba(0,0,0,0.4);
+--accent0:  var(--d0);  --comp0:  var(--g0);
+--accent1:  var(--d1);  --comp1:  var(--g1);
+--accent2:  var(--d2);  --comp2:  var(--g2);
+--accent3:  var(--d3);  --comp3:  var(--g3);
+--accent4:  var(--d4);  --comp4:  var(--g4);
+--accent5:  var(--d5);  --comp5:  var(--g5);
+--accent6:  var(--d6);  --comp6:  var(--g6);
+--accent7:  var(--d7);  --comp7:  var(--g7);
+--accent8:  var(--d8);  --comp8:  var(--g8);
+--accent9:  var(--d9);  --comp9:  var(--g9);
+--accent10: var(--d10); --comp10: var(--g10);
+--accent11: var(--d11); --comp11: var(--g11);
+--accent12: var(--d12); --comp12: var(--g12);
+--accent13: var(--d13); --comp13: var(--g13);
+--accent14: var(--d14); --comp14: var(--g14);
+--accent15: var(--d15); --comp15: var(--g15);
+
 }
 
 .inverted {
@@ -74,6 +91,22 @@
 -webkit-font-smoothing: auto;
 --shadow-bg: 0 var(--x2) var(--x4) var(--z3);
 --shadow: 0 var(--x1) var(--x8) rgba(0,0,0,0.1);
+--accent0:  var(--d0);  --comp0:  var(--g0);
+--accent1:  var(--d1);  --comp1:  var(--g1);
+--accent2:  var(--d2);  --comp2:  var(--g2);
+--accent3:  var(--d3);  --comp3:  var(--g3);
+--accent4:  var(--d4);  --comp4:  var(--g4);
+--accent5:  var(--d5);  --comp5:  var(--g5);
+--accent6:  var(--d6);  --comp6:  var(--g6);
+--accent7:  var(--d7);  --comp7:  var(--g7);
+--accent8:  var(--d8);  --comp8:  var(--g8);
+--accent9:  var(--d9);  --comp9:  var(--g9);
+--accent10: var(--d10); --comp10: var(--g10);
+--accent11: var(--d11); --comp11: var(--g11);
+--accent12: var(--d12); --comp12: var(--g12);
+--accent13: var(--d13); --comp13: var(--g13);
+--accent14: var(--d14); --comp14: var(--g14);
+--accent15: var(--d15); --comp15: var(--g15);
 }
 
 :root {
diff --git a/src/css/button.css b/src/css/button.css
index 21d7a70..a79f075 100644
--- a/src/css/button.css
+++ b/src/css/button.css
@@ -42,7 +42,7 @@
 }
 
 .button.current svg {
-  fill: var(--d15);
+  fill: var(--accent15);
 }
 
 .button.disabled svg {
diff --git a/src/css/context-menu.css b/src/css/context-menu.css
index 6e92470..003c569 100644
--- a/src/css/context-menu.css
+++ b/src/css/context-menu.css
@@ -39,7 +39,7 @@
 }
 
 .contextMenu LI.hover A {
-  background-color: var(--d7);
+  background-color: var(--accent7);
   color: var(--z15);
   cursor: default;
 }
diff --git a/src/css/draginput.css b/src/css/draginput.css
index ba9d18e..41a3cac 100644
--- a/src/css/draginput.css
+++ b/src/css/draginput.css
@@ -40,7 +40,7 @@
 
 .draginput:hover input,
 .draginput.active input {
-  color: var(--d8);
+  color: var(--accent8);
 }
 
 .draginput.active, 
@@ -122,7 +122,7 @@
   background: transparent;
   font: 24px/normal sans-serif;
   text-align: center;
-  color: var(--d7);
+  color: var(--accent7);
   padding: 30px 0 16px;
   width: 100%;
   height: 24px;
@@ -130,7 +130,7 @@
   z-index: 2;
 }
 
-.draginput input::selection { background: var(--d4); }
+.draginput input::selection { background: var(--accent4); }
 
 .draginput.text-input input, 
 .draginput.text-input input:hover, 
@@ -231,14 +231,14 @@
 }
 
 .draginput:hover .draginput_cursor {
-  border-color: var(--d6);
+  border-color: var(--accent6);
 }
 
 .draginput_cursor{
   position: absolute;
   top: 50%;
   width: 100%;
-  border-top: solid var(--d4) 1px;
+  border-top: solid var(--accent4) 1px;
   z-index: 0;
 }
 
@@ -253,10 +253,10 @@
 }
 
 .draginput input:focus {
-  background: var(--d7);
-  color: var(--d15);
+  background: var(--accent7);
+  color: var(--accent15);
   outline: none;
-  box-shadow: 0 0 5px 2px var(--d7);
+  box-shadow: 0 0 5px 2px var(--accent7);
 }
 
  .draginput input:focus+span {
@@ -290,7 +290,7 @@ body.dragging .draginput .angle {
 .draginput .angle-cursor {
   width:         4px;
   height:        25px;
-  border-top: solid var(--d7) 3px;
+  border-top: solid var(--accent7) 3px;
   position: absolute;
   margin: 0 0 0 23px;
   transform-origin: 50% 0;
@@ -322,7 +322,7 @@ body.dragging .draginput .angle {
   height: var(--x4);
   border-radius: var(--x4);
   z-index: 10;
-  border: solid var(--d7) 2px;
+  border: solid var(--accent7) 2px;
   border-top-color: transparent;
   animation: spin 1s linear infinite;
 }
diff --git a/src/css/jgraduate.css b/src/css/jgraduate.css
index 552555b..dea7ba2 100644
--- a/src/css/jgraduate.css
+++ b/src/css/jgraduate.css
@@ -50,8 +50,8 @@ h2.jGraduate_Title {
 
 li.jGraduate_tab_current,
 li.jGraduate_tab_current:hover {
-  color:  var(--d7);
-  -webkit-text-stroke: 0.5px var(--d8);
+  color:  var(--accent7);
+  -webkit-text-stroke: 0.5px var(--accent8);
 }
 
 .jGraduate_colPick {
diff --git a/src/css/menu.css b/src/css/menu.css
index 35de3c2..52d0bc0 100644
--- a/src/css/menu.css
+++ b/src/css/menu.css
@@ -92,7 +92,7 @@
 
 .menu_list .menu_item:hover,
 .menu_list .menu_item.push_button_pressed:hover {
-  background: var(--d15);
+  background: var(--accent15);
   color: #000;
 }
 
@@ -126,7 +126,7 @@
 }
 
 .menu_list .menu_item:not(.disabled):hover span {
-  background: var(--d13);
+  background: var(--accent13);
 }
 
 #modal_donate {
diff --git a/src/css/method-draw.css b/src/css/method-draw.css
index ee0f109..baa51e0 100644
--- a/src/css/method-draw.css
+++ b/src/css/method-draw.css
@@ -92,7 +92,7 @@ div#font-selector .font-item:hover {
  input[type=text].tuco,  input[type=number].tuco {width: 150px;}
 
  input[type=submit],  input[type=button], button {
-  background: var(--d7);
+  background: var(--accent7);
   color: var(--z15);
   border-radius: var(--x1);
   padding: var(--x2) var(--x4);
@@ -106,13 +106,13 @@ div#font-selector .font-item:hover {
 input[type=submit]:hover,
 input[type=button]:hover,  
 button:hover {
-  background: var(--d9);
+  background: var(--accent9);
 }
 
 input[type=submit]:active,  
 input[type=button]:active,
 button:active { 
-  box-shadow: 0 0 0 var(--x1) var(--d14);
+  box-shadow: 0 0 0 var(--x1) var(--accent14);
   outline: none;
 }
 
diff --git a/src/css/select.css b/src/css/select.css
index 1979fa9..e672f20 100644
--- a/src/css/select.css
+++ b/src/css/select.css
@@ -27,6 +27,6 @@
 
 .select-input select:focus {
   outline: none;
-  box-shadow: 0 0 0 1px var(--d7);
+  box-shadow: 0 0 0 1px var(--accent7);
 
 }
\ No newline at end of file
diff --git a/src/css/shapelib.css b/src/css/shapelib.css
index 53efc87..8975822 100644
--- a/src/css/shapelib.css
+++ b/src/css/shapelib.css
@@ -43,7 +43,7 @@
 
 #shape_cats div.current {
   font-weight: bold;
-  background: var(--d7);
+  background: var(--accent7);
   color: var(--z15);
 }
 
diff --git a/src/css/sponsors.css b/src/css/sponsors.css
index 479e5f4..6deb778 100644
--- a/src/css/sponsors.css
+++ b/src/css/sponsors.css
@@ -22,7 +22,7 @@
 
 .sponsor a:hover {
   color: var(--z15);
-  background: var(--d7);
+  background: var(--accent7);
 }
 
 .sponsor .deta {
@@ -78,7 +78,7 @@
 
 .sponsor a:hover {
   color: var(--z0);
-  background: var(--d7);
+  background: var(--accent7);
 }
 
 .sponsor a:hover + .sponsor-description {
diff --git a/src/css/tools.css b/src/css/tools.css
index 9dd94fa..3bf1ff7 100644
--- a/src/css/tools.css
+++ b/src/css/tools.css
@@ -39,11 +39,11 @@
 }
 
 .tool_button.current svg {
-  fill: var(--d8);
+  fill: var(--accent8);
 }
 
 .tool_button.current svg {
-  fill: var(--d7);
+  fill: var(--accent7);
 }