diff --git a/ui/src/bulma-vars.scss b/ui/src/bulma-vars.scss
new file mode 100644
index 0000000..090ce5f
--- /dev/null
+++ b/ui/src/bulma-vars.scss
@@ -0,0 +1,20 @@
+@charset "utf-8";
+
+//=====================
+// custom color scheme
+//=====================
+
+$primary: #945DE1;
+$link: #64B4BD;
+$info: #8C4E80;
+$success: #7E8E2B;
+$warning: #F6CA6B;
+$danger: #C5443B;
+
+// Sass variables (bulma)
+@import "~bulma/sass/utilities/initial-variables.sass";
+@import "~bulma/sass/utilities/derived-variables.sass";
+
+// Sass variables (bulma-prefers-dark)
+@import "~bulma-prefers-dark/sass/utilities/initial-variables.sass";
+@import "~bulma-prefers-dark/sass/utilities/derived-variables.sass";
\ No newline at end of file
diff --git a/ui/src/components/calendar/SVGRect.vue b/ui/src/components/calendar/SVGRect.vue
index 97f1d2d..51206f5 100644
--- a/ui/src/components/calendar/SVGRect.vue
+++ b/ui/src/components/calendar/SVGRect.vue
@@ -1,6 +1,6 @@
 <template>
   <rect
-    :class="color !== undefined ? `visible ${color}` : ''"
+    :class="variant !== undefined ? variant : ''"
     :x="rectangle.left"
     :y="rectangle.top"
     :width="rectangle.width"
@@ -12,12 +12,11 @@
 import { Rectangle } from "@/lib/rectangle";
 import { Options, Vue } from "vue-class-component";
 
-// type RectClass = "red" | "yellow" | "green" | "blue" | "purple";
-type RectColor = "yellow" | "green";
+type RectColor = "primary" | "link" | "info" | "success" | "warning" | "danger";
 
 @Options({
   props: {
-    color: {
+    variant: {
       type: String,
       required: false,
     },
@@ -25,29 +24,48 @@ type RectColor = "yellow" | "green";
   },
 })
 export default class extends Vue {
-  public color?: RectColor;
+  public variant?: RectColor;
   public rectangle!: Rectangle;
 }
 </script>
 
 <style lang="scss" scoped>
+@import "@/bulma-vars";
+
 rect {
   fill: transparent;
+  fill-opacity: 0.3;
+  stroke-opacity: 0.9;
+  stroke-width: 1;
 
-  &.visible {
-    fill-opacity: 0.2;
-    stroke-opacity: 0.9;
-    stroke-width: 1;
+  &.primary {
+    fill: $primary;
+    stroke: $primary;
+  }
 
-    &.yellow {
-      fill: gold;
-      stroke: yellow;
-    }
+  &.link {
+    fill: $link;
+    stroke: $link;
+  }
 
-    &.green {
-      fill: lightgreen;
-      stroke: green;
-    }
+  &.info {
+    fill: $info;
+    stroke: $info;
+  }
+
+  &.success {
+    fill: $success;
+    stroke: $success;
+  }
+
+  &.warning {
+    fill: $warning;
+    stroke: $warning;
+  }
+
+  &.danger {
+    fill: $danger;
+    stroke: $danger;
   }
 }
 </style>
diff --git a/ui/src/components/editor/PreviewDoor.vue b/ui/src/components/editor/PreviewDoor.vue
index 77597c3..61f1248 100644
--- a/ui/src/components/editor/PreviewDoor.vue
+++ b/ui/src/components/editor/PreviewDoor.vue
@@ -1,5 +1,8 @@
 <template>
-  <SVGRect :rectangle="door.position" :color="editing ? 'yellow' : 'green'" />
+  <SVGRect
+    :rectangle="door.position"
+    :variant="editing ? 'success' : 'primary'"
+  />
   <foreignObject
     :x="Math.round(parent_aspect_ratio * door.position.left)"
     :y="door.position.top"
diff --git a/ui/src/components/editor/RectangleCanvas.vue b/ui/src/components/editor/RectangleCanvas.vue
index 2fc72c5..66d26d1 100644
--- a/ui/src/components/editor/RectangleCanvas.vue
+++ b/ui/src/components/editor/RectangleCanvas.vue
@@ -10,11 +10,15 @@
   >
     <SVGRect
       v-for="(rect, index) in rectangles"
-      color="green"
+      variant="primary"
       :key="`rect-${index}`"
       :rectangle="rect"
     />
-    <SVGRect v-if="preview_visible" color="yellow" :rectangle="preview_rect" />
+    <SVGRect
+      v-if="preview_visible"
+      variant="success"
+      :rectangle="preview_rect"
+    />
   </ThouCanvas>
 </template>
 
diff --git a/ui/src/main.scss b/ui/src/main.scss
index 2a856ec..ebf2c5c 100644
--- a/ui/src/main.scss
+++ b/ui/src/main.scss
@@ -1,23 +1,6 @@
 @charset "utf-8";
 
-//=====================
-// custom color scheme
-//=====================
-
-$primary: #945DE1;
-$link: #64B4BD;
-$info: #8C4E80;
-$success: #7E8E2B;
-$warning: #F6CA6B;
-$danger: #C5443B;
-
-// Sass variables (bulma)
-@import "~bulma/sass/utilities/initial-variables";
-@import "~bulma/sass/utilities/derived-variables";
-
-// Sass variables (bulma-prefers-dark)
-@import "~bulma-prefers-dark/sass/utilities/initial-variables";
-@import "~bulma-prefers-dark/sass/utilities/derived-variables";
+@import "@/bulma-vars";
 
 //=================
 // variable tweaks