diff --git a/src/diagrams/state/styles.js b/src/diagrams/state/styles.js
index 1a13f96e53..d6877eec7a 100644
--- a/src/diagrams/state/styles.js
+++ b/src/diagrams/state/styles.js
@@ -114,7 +114,7 @@ g.stateGroup line {
   fill: ${options.background};
 }
 .statediagram-cluster.statediagram-cluster-alt .inner {
-  fill: '#e0e0e0';
+  fill: #e0e0e0;
 }
 
 .statediagram-cluster .inner {
diff --git a/src/themes/state.scss b/src/themes/state.scss
index 0fb7c0f867..ab1d45f834 100644
--- a/src/themes/state.scss
+++ b/src/themes/state.scss
@@ -82,7 +82,7 @@ g.stateGroup line {
 }
 
 .statediagram-cluster rect {
-  fill: $nodeBkg;
+  // fill: $nodeBkg;
   stroke: $nodeBorder;
   stroke-width: 1px;
 }
diff --git a/src/themes/theme-dark.js b/src/themes/theme-dark.js
index 8eeeefb516..4dcbdf7736 100644
--- a/src/themes/theme-dark.js
+++ b/src/themes/theme-dark.js
@@ -1,8 +1,10 @@
-import { invert, lighten, darken, rgba } from 'khroma';
+import { invert, lighten, darken, rgba, adjust } from 'khroma';
 
 class Theme {
   constructor() {
     this.background = '#333';
+    this.primaryColor = '#1f2020';
+    this.secondaryColor = lighten(this.primaryColor, 16);
     this.mainBkg = '#1f2020';
     this.secondBkg = 'calculated';
     this.mainContrastColor = 'lightgrey';
@@ -115,6 +117,15 @@ class Theme {
     /* state colors */
     this.labelColor = this.textColor;
     this.altBackground = lighten(this.background, 20);
+
+    this.fillType0 = this.primaryColor;
+    this.fillType1 = this.secondaryColor;
+    this.fillType2 = adjust(this.primaryColor, { h: 64 });
+    this.fillType3 = adjust(this.secondaryColor, { h: 64 });
+    this.fillType4 = adjust(this.primaryColor, { h: -64 });
+    this.fillType5 = adjust(this.secondaryColor, { h: -64 });
+    this.fillType6 = adjust(this.primaryColor, { h: 128 });
+    this.fillType7 = adjust(this.secondaryColor, { h: 128 });
     /* class */
     this.classText = this.nodeBorder;
   }
diff --git a/src/themes/theme-default.js b/src/themes/theme-default.js
index f239b93ab1..f3fe47696b 100644
--- a/src/themes/theme-default.js
+++ b/src/themes/theme-default.js
@@ -1,8 +1,10 @@
-import { lighten, rgba } from 'khroma';
+import { lighten, rgba, adjust } from 'khroma';
 
 class Theme {
   constructor() {
     /* Base variables */
+    this.primaryColor = '#ECECFF';
+    this.secondaryColor = '#ffffde';
     this.background = 'white';
     this.mainBkg = '#ECECFF';
     this.secondBkg = '#ffffde';
@@ -123,6 +125,15 @@ class Theme {
     /* state colors */
     /* class */
     this.classText = this.nodeBorder;
+    /* journey */
+    this.fillType0 = this.primaryColor;
+    this.fillType1 = this.secondaryColor;
+    this.fillType2 = adjust(this.primaryColor, { h: 64 });
+    this.fillType3 = adjust(this.secondaryColor, { h: 64 });
+    this.fillType4 = adjust(this.primaryColor, { h: -64 });
+    this.fillType5 = adjust(this.secondaryColor, { h: -64 });
+    this.fillType6 = adjust(this.primaryColor, { h: 128 });
+    this.fillType7 = adjust(this.secondaryColor, { h: 128 });
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {
diff --git a/src/themes/theme-forest.js b/src/themes/theme-forest.js
index 616b73411c..c36d037a74 100644
--- a/src/themes/theme-forest.js
+++ b/src/themes/theme-forest.js
@@ -1,7 +1,9 @@
-import { darken } from 'khroma';
+import { darken, adjust } from 'khroma';
 class Theme {
   constructor() {
     /* Base vales */
+    this.primaryColor = '#cde498';
+    this.secondaryColor = '#cdffb2';
     this.background = 'white';
     this.mainBkg = '#cde498';
     this.secondBkg = '#cdffb2';
@@ -98,6 +100,15 @@ class Theme {
     /* state colors */
     /* class */
     this.classText = this.nodeBorder;
+    /* journey */
+    this.fillType0 = this.primaryColor;
+    this.fillType1 = this.secondaryColor;
+    this.fillType2 = adjust(this.primaryColor, { h: 64 });
+    this.fillType3 = adjust(this.secondaryColor, { h: 64 });
+    this.fillType4 = adjust(this.primaryColor, { h: -64 });
+    this.fillType5 = adjust(this.secondaryColor, { h: -64 });
+    this.fillType6 = adjust(this.primaryColor, { h: 128 });
+    this.fillType7 = adjust(this.secondaryColor, { h: 128 });
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {
diff --git a/src/themes/theme-neutral.js b/src/themes/theme-neutral.js
index 4dbe6db03f..b55506f4f0 100644
--- a/src/themes/theme-neutral.js
+++ b/src/themes/theme-neutral.js
@@ -1,13 +1,15 @@
-import { darken, lighten } from 'khroma';
+import { darken, lighten, adjust } from 'khroma';
 
 // const Color = require ( 'khroma/dist/color' ).default
 // Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB"
 
 class Theme {
   constructor() {
+    this.primaryColor = '#eee';
+    this.contrast = '#26a';
+    this.secondaryColor = lighten(this.contrast, 55);
     this.background = 'white';
     this.mainBkg = '#eee';
-    this.contrast = '#26a';
     this.secondBkg = 'calculated';
     this.lineColor = '#666';
     this.border1 = '#999';
@@ -130,6 +132,15 @@ class Theme {
     /* state colors */
     /* class */
     this.classText = this.nodeBorder;
+    /* journey */
+    this.fillType0 = this.primaryColor;
+    this.fillType1 = this.secondaryColor;
+    this.fillType2 = adjust(this.primaryColor, { h: 64 });
+    this.fillType3 = adjust(this.secondaryColor, { h: 64 });
+    this.fillType4 = adjust(this.primaryColor, { h: -64 });
+    this.fillType5 = adjust(this.secondaryColor, { h: -64 });
+    this.fillType6 = adjust(this.primaryColor, { h: 128 });
+    this.fillType7 = adjust(this.secondaryColor, { h: 128 });
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {