diff --git a/frontend/resources/styles/main/partials/workspace-canvas.scss b/frontend/resources/styles/main/partials/workspace-canvas.scss
index e95f90d3f..718c18e84 100644
--- a/frontend/resources/styles/main/partials/workspace-canvas.scss
+++ b/frontend/resources/styles/main/partials/workspace-canvas.scss
@@ -102,12 +102,23 @@
     position: absolute;
     pointer-events: none;
     top: 0px;
+
+    rect {
+      fill: $canvas-bg;
+    }
+    path {
+      stroke: $medium-ui-text;
+    }
   }
 
   .vertical-rule {
     transition: none;
     pointer-events: none;
     left: 0px;
+
+    rect {
+      fill: $canvas-bg;
+    }
   }
 
 }
diff --git a/frontend/src/uxbox/main/ui/workspace/rules.cljs b/frontend/src/uxbox/main/ui/workspace/rules.cljs
index dbb80439e..932e972e7 100644
--- a/frontend/src/uxbox/main/ui/workspace/rules.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/rules.cljs
@@ -111,7 +111,7 @@
         labels (->> (map (partial horizontal-text-label zoom) +ticks+)
                     (filterv identity))]
     [:g {}
-     [:path {:d (str/join " " path) :stroke "#9da2a6"}]
+     [:path {:d (str/join " " path)}]
      labels]))
 
 ;; --- Vertical Rule Ticks (Component)
@@ -124,7 +124,7 @@
         labels (->> (map (partial vertical-text-label zoom) +ticks+)
                     (filterv identity))]
     [:g {}
-     [:path {:d (str/join " " path) :stroke "#9da2a6"}]
+     [:path {:d (str/join " " path)}]
      labels]))
 
 ;; --- Horizontal Rule (Component)
@@ -140,8 +140,7 @@
      {:width c/viewport-width
       :height 20}
      [:rect {:height 20
-             :width c/viewport-width
-             :fill "rgb(233, 234, 235)"}]
+             :width c/viewport-width}]
      [:g {:transform (str "translate(" translate-x ", 0)")}
       (horizontal-rule-ticks zoom)]]))
 
@@ -163,5 +162,4 @@
      [:rect {:x 0
              :y 0
              :height 20
-             :width 20
-             :fill "rgb(233, 234, 235)"}]]))
+             :width 20}]]))