diff --git a/src/components/action-menu/action-menu.css b/src/components/action-menu/action-menu.css
index 6771a6851d50d5aefd856d94700811d6be15bf3d..8f39946c128d445c5dbd98acbade5ac10553f1c2 100644
--- a/src/components/action-menu/action-menu.css
+++ b/src/components/action-menu/action-menu.css
@@ -28,7 +28,7 @@ button::-moz-focus-inner {
 }
 
 .button:hover {
-    background: $pen-primary;
+    background: $extensions-primary;
 }
 
 .button:active {
@@ -126,7 +126,7 @@ button::-moz-focus-inner {
     is not very easy to style.
 */
 .tooltip {
-    background-color: $pen-primary !important;
+    background-color: $extensions-primary !important;
     opacity: 1 !important;
     border: 1px solid hsla(0, 0%, 0%, .1) !important;
     box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25) !important;
@@ -134,7 +134,7 @@ button::-moz-focus-inner {
 }
 
 .tooltip:after {
-    background-color: $pen-primary;
+    background-color: $extensions-primary;
 }
 
 .coming-soon-tooltip {
diff --git a/src/components/camera-modal/camera-modal.css b/src/components/camera-modal/camera-modal.css
index 5f631e41bf5ad9b22675065153f683534c896a7b..4ea962fbafd68bc7ecdf3736d96930070a46f0de 100644
--- a/src/components/camera-modal/camera-modal.css
+++ b/src/components/camera-modal/camera-modal.css
@@ -93,7 +93,7 @@ $main-button-size: 2.75rem;
 }
 
 .main-button:hover {
-    background: $pen-primary;
+    background: $extensions-primary;
     box-shadow: 0 0 0 6px $motion-transparent;
 }
 
diff --git a/src/components/cards/card.css b/src/components/cards/card.css
index 99ab8a66c01f10aa99f68fdbd1153bf1e2a72538..782b1e6eac6a1e8f67c6ee55c6354bb96e51ad07 100644
--- a/src/components/cards/card.css
+++ b/src/components/cards/card.css
@@ -41,7 +41,7 @@
     left: 0;
     height: 1.8rem;
     width: 100%;
-    background: $motion-primary;
+    background: $extensions-primary;
 }
 
 .left-button, .right-button {
@@ -51,14 +51,15 @@
     z-index: 20;
     user-select: none;
     cursor: pointer;
-    background: $motion-primary;
-    box-shadow: 0 0 0 4px $motion-transparent;
     height: 40px;
     width: 40px;
+    background: $extensions-primary;
+    box-shadow: 0 0 0 4px $extensions-transparent;
     border-radius: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
+    box-shadow: 0 0 0 6px $extensions-transparent;
 }
 
 .left-button {
@@ -88,9 +89,9 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    background: $motion-primary;
-    border-bottom: 1px solid $motion-tertiary;
     padding: 0.5rem;
+    background: $extensions-primary;
+    border-bottom: 1px solid $extensions-tertiary;
     font-size: 0.625rem;
 }
 
diff --git a/src/components/import-modal/import-modal.css b/src/components/import-modal/import-modal.css
index b41c02b1baaa92923fc92af9ecbe3d22667cef1f..b265efae02fc5ed6c7348a4422d9b84e9e474fa0 100644
--- a/src/components/import-modal/import-modal.css
+++ b/src/components/import-modal/import-modal.css
@@ -45,7 +45,7 @@ $sides: 20rem;
 
     box-sizing: border-box;
     width: 100%;
-    background-color: $pen-primary;
+    background-color: $extensions-primary;
 }
 
 .header-item {
@@ -129,12 +129,12 @@ $sides: 20rem;
     font-weight: bold;
     font-size: .875rem;
     cursor: pointer;
-    border: 0px solid $pen-primary;
+    border: 0px solid $extensions-primary;
     outline: none;
 }
 
 .input-row button.ok-button {
-    background: $pen-primary;
+    background: $extensions-primary;
     color: white;
 }
 
diff --git a/src/components/preview-modal/preview-modal.css b/src/components/preview-modal/preview-modal.css
index 2c35acf63e0f78fbca407f74b063e691e105f2ec..d6cf6dc4568fd5178ea0849bbd92551838d14bf9 100644
--- a/src/components/preview-modal/preview-modal.css
+++ b/src/components/preview-modal/preview-modal.css
@@ -69,8 +69,8 @@
 }
 
 .button-row button.view-project-button {
-    background: $pen-primary;
-    border-color: $pen-primary;
+    background: $extensions-primary;
+    border-color: $extensions-primary;
     color: white;
 }
 
diff --git a/src/css/colors.css b/src/css/colors.css
index 8dbc51ecdbeb9157cb0425cdcba22a941ea5bef6..39503771d31f4c543d8ff98bcb2d387155159bd4 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -26,4 +26,6 @@ $control-primary: hsla(38, 100%, 55%, 1); /* #FFAB19 */
 
 $data-primary: hsla(30, 100%, 55%, 1); /* #FF8C1A */
 
-$pen-primary: hsla(163, 85%, 40%, 1); /* #0FBD8C */
+$extensions-primary: hsla(163, 85%, 40%, 1); /* #0FBD8C */
+$extensions-tertiary: hsla(163, 85%, 30%, 1); /* #0B8E69 */
+$extensions-transparent: hsla(163, 85%, 40%, 0.35); /* 35% transparent version of extensions-primary */