diff --git a/resources/assets/stylesheets/mixins/colors.scss b/resources/assets/stylesheets/mixins/colors.scss
index 5fd585b2d65c33ba71e314506c33e818015d6b6e..c3faffae1bb21a95ba2e352642cd83d0c3489c0b 100644
--- a/resources/assets/stylesheets/mixins/colors.scss
+++ b/resources/assets/stylesheets/mixins/colors.scss
@@ -265,6 +265,10 @@ $color--tile-border: $color--gray-5;
 $color--tile-background: $color--gray-7;
 $color--tile-background-focus: $color--gray-6;
 $color--tile-background-hover: $color--gray-6;
+$color--tile-marker-inactive: $color--gray-4;
+$color--tile-marker-active: $color--green-1;
+$color--tile-marker-attention: $color--yellow-1;
+$color--tile-title-background: $color--gray-6;
 
 $color--content-box-border: $color--gray-6;
 $color--content-box-header: $color--gray-6;
diff --git a/resources/assets/stylesheets/scss/grid.scss b/resources/assets/stylesheets/scss/grid.scss
index 21748639866610f3855c5257f2192f5ee5bf2c4b..f8979b6976c8660a608b8e012f9b45e2f0f99d2e 100644
--- a/resources/assets/stylesheets/scss/grid.scss
+++ b/resources/assets/stylesheets/scss/grid.scss
@@ -14,7 +14,7 @@ $grid-element-width: 270px;
 }
 
 .studip-grid-element {
-    border: 1px solid var(--light-gray-color);
+    border: 1px solid var(--color--tile-border);
 }
 
 // Responsive displays
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index 4735f73b88525d939789fb125df8e50b7914cc9e..6337c110ece63d03ec6534241bdc336669be495a 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -246,6 +246,10 @@ $grid-gap: 0;
     --color--tile-background: #{$color--tile-background};
     --color--tile-background-focus: #{$color--tile-background-focus};
     --color--tile-background-hover: #{$color--tile-background-hover};
+    --color--tile-marker-inactive: #{$color--tile-marker-inactive};
+    --color--tile-marker-active: #{$color--tile-marker-active};
+    --color--tile-marker-attention: #{$color--tile-marker-attention};
+    --color--tile-title-background: #{$color--tile-title-background};
 
     --color--content-box-border: #{$color--content-box-border};
     --color--content-box-header: #{$color--content-box-header};
diff --git a/resources/vue/components/ContentModulesEditTiles.vue b/resources/vue/components/ContentModulesEditTiles.vue
index 8a7d1d18098f48f919d6a958d51aa1076392733c..c650f9eb633f3fffdd7dadef5a7b5840c9c8d05a 100644
--- a/resources/vue/components/ContentModulesEditTiles.vue
+++ b/resources/vue/components/ContentModulesEditTiles.vue
@@ -192,18 +192,18 @@ export default {
     display: flex;
     flex-direction: row;
     background-color: var(--white);
-    border-left: 1px solid var(--dark-gray-color-60);
+    border-left: 1px solid var(--color--tile-marker-inactive);
 
     &.visibility-visible {
-        border-left-color: var(--green);
+        border-left-color: var(--color--tile-marker-active);
         > div {
-            border-left-color: var(--green);
+            border-left-color: var(--color--tile-marker-active);
         }
     }
     &.visibility-invisible {
         border-left-color: var(--yellow);
         > div {
-            border-left-color: var(--yellow);
+            border-left-color: var(--color--tile-marker-attention);
         }
     }
 
@@ -243,7 +243,7 @@ export default {
         flex-direction: column;
         justify-content: space-between;
         transition: all var(--transition-duration) ease;
-        border-left: 10px solid var(--dark-gray-color-60);
+        border-left: 10px solid var(--color--tile-marker-inactive);
         min-height: 150px;
         width: 100%;
 
@@ -262,7 +262,7 @@ export default {
             }
         }
         > .down_part {
-            background-color: var(--content-color-20);
+            background-color: var(--color--tile-title-background);
             display: flex;
             justify-content: space-between;
             align-items: center;