diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js
index c29b5a8587..e03fa31d9f 100644
--- a/ghost/portal/src/components/Frame.styles.js
+++ b/ghost/portal/src/components/Frame.styles.js
@@ -14,6 +14,28 @@ import {MagicLinkStyles} from './pages/MagicLinkPage';
 
 // Global styles
 export const GlobalStyles = `
+
+    /* Colors
+    /* ----------------------------------------------------- */
+    :root {
+        --black: #000;
+        --grey0: #1d1d1d;
+        --grey1: #333;
+        --grey2: #3d3d3d;
+        --grey3: #474747;
+        --grey4: #515151;
+        --grey5: #686868;
+        --grey6: #7f7f7f;
+        --grey7: #979797;
+        --grey8: #aeaeae;
+        --grey9: #c5c5c5;
+        --grey10: #dcdcdc;
+        --grey11: #e1e1e1;
+        --grey12: #eaeaea;
+        --grey13: #f8f8f8;
+        --white: #fff;
+    }
+
     
     /* Globals
     /* ----------------------------------------------------- */
@@ -57,11 +79,11 @@ export const GlobalStyles = `
     }
 
     .gh-portal-main-title {
-        color: #333;
+        color: var(--grey1);
     }
 
     .gh-portal-text-disabled {
-        color: #484848;
+        color: var(--grey3);
         opacity: 0.35;
         font-weight: normal;
     }
@@ -74,13 +96,13 @@ export const GlobalStyles = `
         font-size: 1.3rem;
         margin-bottom: 2px;
         font-weight: 500;
-        color: #333;
+        color: var(--grey1);
         letter-spacing: 0.35px;
     }
 
     .gh-portal-setting-data {
         font-size: 1.3rem;
-        color: #7f7f7f;
+        color: var(--grey6);
         line-height: 1.15em;
     }
 
@@ -106,9 +128,9 @@ export const GlobalStyles = `
         transition: .4s ease;
         box-shadow: none;
         user-select: none;
-        background: #fff;
+        background: var(--white);
         box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 2px 6px -3px rgba(0,0,0,0.19);
-        color: #212121;
+        color: var(--grey0);
     }
 
     .gh-portal-btn:hover {
@@ -149,7 +171,7 @@ export const GlobalStyles = `
     .gh-portal-popup-background {
         position: absolute;
         display: block;
-        content: "aaa";
+        content: "";
         top: 0;
         right: 0;
         bottom: 0;
@@ -177,7 +199,7 @@ export const GlobalStyles = `
         padding: 32px;
         text-align: left;
         box-sizing: border-box;
-        background: #fff;
+        background: var(--white);
         width: 440px;
         border-radius: 5px;
         margin: 0 auto;
@@ -207,7 +229,7 @@ export const GlobalStyles = `
     .gh-portal-closeicon {
         width: 16px;
         height: 16px;
-        color: #c5c5c5;
+        color: var(--grey9);
         cursor: pointer;
         padding: 12px;
     }
@@ -260,7 +282,7 @@ export const GlobalStyles = `
     /* Buttons
     /* ----------------------------------------------------- */
     .gh-portal-list {
-        background: #fff;
+        background: var(--white);
         box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.07), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.05);
         border-radius: 3px;
         padding: 20px;
@@ -271,7 +293,7 @@ export const GlobalStyles = `
         align-items: center;
         margin: 0 -20px 20px;
         padding: 0 20px 20px;
-        border-bottom: 1px solid #eaeaea;
+        border-bottom: 1px solid var(--grey12);
     }
 
     .gh-portal-list section:last-of-type {
@@ -295,7 +317,7 @@ export const GlobalStyles = `
         line-height: 1.15em;
         padding: 0;
         margin: 2px 0 0;
-        color: #7f7f7f;
+        color: var(--grey6);
     }
 
     .gh-portal-btn-list {
diff --git a/ghost/portal/src/components/common/InputField.js b/ghost/portal/src/components/common/InputField.js
index 9b39f3dbe7..816f183564 100644
--- a/ghost/portal/src/components/common/InputField.js
+++ b/ghost/portal/src/components/common/InputField.js
@@ -8,7 +8,7 @@ export const InputFieldStyles = `
         height: 40px;
         outline: none;
         color: inherit;
-        background: #fff;
+        background: var(--white);
         border: none;
         border-radius: 3px;
         font-size: 1.5rem;
@@ -29,7 +29,7 @@ export const InputFieldStyles = `
     }
 
     .gh-portal-input::placeholder {
-        color: #929292;
+        color: var(--grey7);
     }
 `;
 
diff --git a/ghost/portal/src/components/common/MemberGravatar.js b/ghost/portal/src/components/common/MemberGravatar.js
index 10958e5dc8..44b4e4f397 100644
--- a/ghost/portal/src/components/common/MemberGravatar.js
+++ b/ghost/portal/src/components/common/MemberGravatar.js
@@ -33,7 +33,7 @@ const Styles = ({style = {}}) => {
             height: '56px',
             color: '#fff',
             ...(style.userIcon || {}) // Override any custom style
-        },
+        }
     };
 };
 
diff --git a/ghost/portal/src/components/common/PlansSection.js b/ghost/portal/src/components/common/PlansSection.js
index 83494bf627..151dc89748 100644
--- a/ghost/portal/src/components/common/PlansSection.js
+++ b/ghost/portal/src/components/common/PlansSection.js
@@ -4,7 +4,7 @@ export const PlanSectionStyles = `
     .gh-portal-plans-container {
         display: flex;
         align-items: stretch;
-        border: 1px solid #ddd;
+        border: 1px solid var(--grey10);
         border-radius: 5px;
     }
 
@@ -15,7 +15,7 @@ export const PlanSectionStyles = `
         position: relative;
         padding: 16px;
         flex: 1;
-        border-right: 1px solid #ddd;
+        border-right: 1px solid var(--grey10);
         font-size: 1.4rem;
         line-height: 1.35em;
         cursor: pointer;
@@ -75,7 +75,7 @@ export const PlanSectionStyles = `
     }
 
     .gh-portal-plan-type {
-        color: #999;
+        color: var(--grey7);
     }
 
     .gh-portal-plan-feature {
@@ -84,7 +84,7 @@ export const PlanSectionStyles = `
         text-align: center;
         font-size: 1.25rem;
         line-height: 1.25em;
-        border-top: 1px solid #eaeaea;
+        border-top: 1px solid var(--grey12);
         width: 100%;
         letter-spacing: 0.2px;
         font-weight: 500;
@@ -116,7 +116,7 @@ export const PlanSectionStyles = `
         left: -9px;
         height: 18px;
         width: 18px;
-        background-color: #eee;
+        background-color: var(--grey12);
         border-radius: 999px;
     }
 
@@ -139,7 +139,7 @@ export const PlanSectionStyles = `
         top: 3px;
         width: 3px;
         height: 9px;
-        border: solid white;
+        border: solid var(--white);
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
diff --git a/ghost/portal/src/components/common/Switch.js b/ghost/portal/src/components/common/Switch.js
index f547a9c52a..ba5c5a4996 100644
--- a/ghost/portal/src/components/common/Switch.js
+++ b/ghost/portal/src/components/common/Switch.js
@@ -13,7 +13,7 @@ export const SwitchStyles = `
     .gh-portal-for-switch label p,
     .gh-portal-for-switch .container p {
         overflow: auto;
-        color: #15171A;
+        color: var(--grey0);
         font-weight: normal;
     }
 
@@ -30,8 +30,8 @@ export const SwitchStyles = `
         left: 0;
         right: 0;
         bottom: 0;
-        background: #f8f8f8;
-        border: 1px solid #e0e0e0;
+        background: var(--grey13);
+        border: 1px solid var(--grey11);
         transition: .3s;
         width: 36px !important;
         height: 22px !important;
@@ -41,7 +41,7 @@ export const SwitchStyles = `
 
     .gh-portal-for-switch label:hover input:not(:checked) + .input-toggle-component,
     .gh-portal-for-switch .container:hover input:not(:checked) + .input-toggle-component {
-        border-color: #ccc;
+        border-color: var(--grey9);
     }
 
     .gh-portal-for-switch .input-toggle-component:before {
diff --git a/ghost/portal/src/components/pages/AccountHomePage.js b/ghost/portal/src/components/pages/AccountHomePage.js
index 38a77c9d05..2ff89eb00d 100644
--- a/ghost/portal/src/components/pages/AccountHomePage.js
+++ b/ghost/portal/src/components/pages/AccountHomePage.js
@@ -7,7 +7,7 @@ const React = require('react');
 
 export const AccountHomePageStyles = `
     .gh-portal-account-main {
-        background: #f8f8f8;
+        background: var(--grey13);
         margin: -32px -32px 0;
         padding: 32px;
         border-bottom: 1px solid #eaeaea;
diff --git a/ghost/portal/src/components/pages/AccountPlanPage.js b/ghost/portal/src/components/pages/AccountPlanPage.js
index 0090a2e89f..dc99a7af4c 100644
--- a/ghost/portal/src/components/pages/AccountPlanPage.js
+++ b/ghost/portal/src/components/pages/AccountPlanPage.js
@@ -37,7 +37,7 @@ export default class AccountPlanPage extends React.Component {
     renderHeader() {
         return (
             <header className='gh-portal-detail-header'>
-                <h3 className='gh-portal-maiin-title'>Choose plan</h3>
+                <h3 className='gh-portal-main-title'>Choose plan</h3>
             </header>
         );
     }
diff --git a/ghost/portal/src/components/pages/SignupPage.js b/ghost/portal/src/components/pages/SignupPage.js
index a12b3dbd9f..ac7f413425 100644
--- a/ghost/portal/src/components/pages/SignupPage.js
+++ b/ghost/portal/src/components/pages/SignupPage.js
@@ -23,7 +23,7 @@ export const SignupPageStyles = `
         align-items: center;
         padding: 0 32px 32px;
         margin: 0 -32px 18px;
-        border-bottom: 1px solid #eaeaea;
+        border-bottom: 1px solid var(--grey12);
     }
 
     .gh-portal-signin-header {
@@ -32,7 +32,7 @@ export const SignupPageStyles = `
         align-items: center;
         padding: 0 32px 32px;
         margin: 0 -32px 32px;
-        border-bottom: 1px solid #eaeaea;
+        border-bottom: 1px solid var(--grey12);
     }
 
     .gh-portal-signup-header.nodivider {
@@ -45,7 +45,7 @@ export const SignupPageStyles = `
         justify-content: center;
         font-size: 1.3rem;
         margin-top: 8px;
-        color: #515151;
+        color: var(--grey4);
         letter-spacing: 0.2px;
     }