From 32b43cff9a950d7a72cb7f63cc7358b6acd27753 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 9 Feb 2019 14:32:18 -0800
Subject: [PATCH] Convert color schema, begin migrating old classes (finishes
 grey & red)

---
 resources/assets/index.html                   |   2 +-
 .../scripts/components/auth/ForgotPassword.ts |   4 +-
 .../scripts/components/auth/LoginForm.ts      |   2 +-
 .../scripts/components/auth/ResetPassword.ts  |   4 +-
 .../scripts/components/auth/TwoFactorForm.ts  |   4 +-
 .../assets/scripts/components/core/Modal.ts   |   2 +-
 .../scripts/components/core/Navigation.ts     |   6 +-
 .../scripts/components/dashboard/ServerBox.ts |   4 +-
 .../dashboard/account/ChangePassword.ts       |   2 +-
 .../account/TwoFactorAuthentication.ts        |   6 +-
 .../dashboard/account/UpdateEmail.ts          |   2 +-
 .../scripts/components/server/Server.ts       |  44 +++----
 .../server/components/PowerButtons.ts         |   4 +-
 .../server/components/ProgressBar.ts          |   6 +-
 .../database/CreateDatabaseModal.vue          |   2 +-
 .../components/database/DatabaseRow.vue       |  12 +-
 .../database/DeleteDatabaseModal.vue          |   4 +-
 .../server/components/filemanager/FileRow.ts  |   4 +-
 .../components/filemanager/FolderRow.ts       |   4 +-
 .../components/server/subpages/Console.ts     |   4 +-
 .../components/server/subpages/Databases.ts   |   4 +-
 .../components/server/subpages/FileManager.ts |   2 +-
 .../assets/styles/components/animations.css   |   2 +-
 .../assets/styles/components/buttons.css      |  10 +-
 .../assets/styles/components/filemanager.css  |  14 +--
 resources/assets/styles/components/forms.css  |  16 +--
 .../styles/components/miscellaneous.css       |  12 +-
 .../assets/styles/components/navigation.css   |  36 +++---
 .../styles/components/notifications.css       |   2 +-
 .../assets/styles/components/spinners.css     |   2 +-
 .../admin/nodes/view/index.blade.php          |   4 +-
 .../pterodactyl/templates/auth/core.blade.php |   4 +-
 .../pterodactyl/templates/base/core.blade.php |   2 +-
 .../pterodactyl/templates/wrapper.blade.php   |   2 +-
 tailwind.js                                   | 118 ++++++++++--------
 35 files changed, 186 insertions(+), 166 deletions(-)

diff --git a/resources/assets/index.html b/resources/assets/index.html
index 57d787921..2d0076944 100644
--- a/resources/assets/index.html
+++ b/resources/assets/index.html
@@ -10,7 +10,7 @@
 <div id="pterodactyl">
     <router-view></router-view>
     <div class="w-full m-auto mt-0 container">
-        <p class="text-right text-grey-dark text-xs">
+        <p class="text-right text-neutral-600 text-xs">
         </p>
     </div>
 </div>
diff --git a/resources/assets/scripts/components/auth/ForgotPassword.ts b/resources/assets/scripts/components/auth/ForgotPassword.ts
index 8da6da7d8..954be1287 100644
--- a/resources/assets/scripts/components/auth/ForgotPassword.ts
+++ b/resources/assets/scripts/components/auth/ForgotPassword.ts
@@ -69,7 +69,7 @@ export default Vue.component('forgot-password', {
                            v-on:input="updateEmail($event)"
                     />
                     <label for="grid-email" id="grid-email-label">{{ $t('strings.email') }}</label>
-                    <p class="text-grey-darker text-xs">{{ $t('auth.forgot_password.label_help') }}</p>
+                    <p class="text-neutral-800 text-xs">{{ $t('auth.forgot_password.label_help') }}</p>
                 </div>
             </div>
             <div>
@@ -81,7 +81,7 @@ export default Vue.component('forgot-password', {
                 </button>
             </div>
             <div class="pt-6 text-center">
-                <router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark"
+                <router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600"
                              aria-label="Go to login"
                              :to="{ name: 'login' }"
                 >
diff --git a/resources/assets/scripts/components/auth/LoginForm.ts b/resources/assets/scripts/components/auth/LoginForm.ts
index 902094480..1425cb5b2 100644
--- a/resources/assets/scripts/components/auth/LoginForm.ts
+++ b/resources/assets/scripts/components/auth/LoginForm.ts
@@ -102,7 +102,7 @@ export default Vue.component('login-form', {
                 </button>
             </div>
             <div class="pt-6 text-center">
-                <router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark" aria-label="Forgot password"
+                <router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600" aria-label="Forgot password"
                              :to="{ name: 'forgot-password' }">
                     {{ $t('auth.forgot_password.label') }}
                 </router-link>
diff --git a/resources/assets/scripts/components/auth/ResetPassword.ts b/resources/assets/scripts/components/auth/ResetPassword.ts
index bf7a49afd..d293523e9 100644
--- a/resources/assets/scripts/components/auth/ResetPassword.ts
+++ b/resources/assets/scripts/components/auth/ResetPassword.ts
@@ -88,7 +88,7 @@ export default Vue.component('reset-password', {
                            v-model="password"
                     />
                     <label for="grid-password">{{ $t('strings.password') }}</label>
-                    <p class="text-grey-darker text-xs">{{ $t('auth.password_requirements') }}</p>
+                    <p class="text-neutral-800 text-xs">{{ $t('auth.password_requirements') }}</p>
                 </div>
             </div>
             <div class="flex flex-wrap -mx-3 mb-6">
@@ -110,7 +110,7 @@ export default Vue.component('reset-password', {
                 </button>
             </div>
             <div class="pt-6 text-center">
-                <router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark"
+                <router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600"
                              :to="{ name: 'login' }"
                 >
                     {{ $t('auth.go_to_login') }}
diff --git a/resources/assets/scripts/components/auth/TwoFactorForm.ts b/resources/assets/scripts/components/auth/TwoFactorForm.ts
index 42b41c5ac..5464dde94 100644
--- a/resources/assets/scripts/components/auth/TwoFactorForm.ts
+++ b/resources/assets/scripts/components/auth/TwoFactorForm.ts
@@ -60,7 +60,7 @@ export default Vue.component('two-factor-form', {
                            v-model="code"
                     />
                     <label for="grid-code">{{ $t('auth.two_factor.label') }}</label>
-                    <p class="text-grey-darker text-xs">{{ $t('auth.two_factor.label_help') }}</p>
+                    <p class="text-neutral-800 text-xs">{{ $t('auth.two_factor.label_help') }}</p>
                 </div>
             </div>
             <div>
@@ -69,7 +69,7 @@ export default Vue.component('two-factor-form', {
                 </button>
             </div>
             <div class="pt-6 text-center">
-                <router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark"
+                <router-link class="text-xs textneutral-500stracking-wide no-underline uppercase hover:text-neutral-600"
                              :to="{ name: 'login' }"
                 >
                     Back to Login
diff --git a/resources/assets/scripts/components/core/Modal.ts b/resources/assets/scripts/components/core/Modal.ts
index 09dc77164..34b8e21dc 100644
--- a/resources/assets/scripts/components/core/Modal.ts
+++ b/resources/assets/scripts/components/core/Modal.ts
@@ -34,7 +34,7 @@ export default Vue.component('modal', {
                 <div class="modal-container" @click.stop>
                     <div v-on:click="close">
                         <icon name="x"
-                              class="absolute pin-r pin-t m-2 text-grey cursor-pointer"
+                              class="absolute pin-r pin-t m-2 textneutral-500scursor-pointer"
                               aria-label="Close modal"
                               role="button"
                         />
diff --git a/resources/assets/scripts/components/core/Navigation.ts b/resources/assets/scripts/components/core/Navigation.ts
index dc2b123c8..c2fffc2cb 100644
--- a/resources/assets/scripts/components/core/Navigation.ts
+++ b/resources/assets/scripts/components/core/Navigation.ts
@@ -101,7 +101,7 @@ export default Vue.component('navigation', {
                             <a href="#">
                                 <div class="flex items-center">
                                     <div class="flex-1">
-                                        <span class="text-sm text-grey-darker">Loading...</span>
+                                        <span class="text-sm text-neutral-800">Loading...</span>
                                     </div>
                                     <div class="flex-none">
                                         <span class="spinner spinner-relative"></span>
@@ -113,8 +113,8 @@ export default Vue.component('navigation', {
                             <router-link :to="{ name: 'server', params: { id: server.identifier }}" v-on:click.native="searchActive = false">
                                 <div class="flex items-center">
                                     <div class="flex-1">
-                                        <span class="font-bold text-grey-darkest">{{ server.name }}</span><br />
-                                        <span class="font-light text-grey-dark text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
+                                        <span class="font-bold text-neutral-900">{{ server.name }}</span><br />
+                                        <span class="font-light text-neutral-600 text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
                                     </div>
                                     <div class="flex-none">
                                         <span class="pillbox bg-indigo">{{ server.node }}</span>
diff --git a/resources/assets/scripts/components/dashboard/ServerBox.ts b/resources/assets/scripts/components/dashboard/ServerBox.ts
index fdf2df18a..4629a3348 100644
--- a/resources/assets/scripts/components/dashboard/ServerBox.ts
+++ b/resources/assets/scripts/components/dashboard/ServerBox.ts
@@ -171,12 +171,12 @@ export default Vue.component('server-box', {
                             {{ server.name }}
                         </h2>
                     </router-link>
-                    <div class="text-grey-darker font-normal text-sm">
+                    <div class="text-neutral-800 font-normal text-sm">
                         <p v-if="server.description.length" class="pb-1">{{ server.description }}</p>
     
                         <div class="absolute pin-b pin-l p-4 w-full">
                             <span class="font-semibold text-indigo">{{ server.node }}</span>
-                            <span class="float-right text-grey-dark font-light">{{ server.allocation.ip }}:{{ server.allocation.port }}</span>
+                            <span class="float-right text-neutral-600 font-light">{{ server.allocation.ip }}:{{ server.allocation.port }}</span>
                         </div>
                     </div>
                 </div>
diff --git a/resources/assets/scripts/components/dashboard/account/ChangePassword.ts b/resources/assets/scripts/components/dashboard/account/ChangePassword.ts
index 86fa093f5..7dc7d2c9a 100644
--- a/resources/assets/scripts/components/dashboard/account/ChangePassword.ts
+++ b/resources/assets/scripts/components/dashboard/account/ChangePassword.ts
@@ -53,7 +53,7 @@ export default Vue.component('change-password', {
         <div id="change-password-container" :class>
             <form method="post" v-on:submit.prevent="submitForm">
                 <div class="content-box">
-                    <h2 class="mb-6 text-grey-darkest font-medium">{{ $t('dashboard.account.password.title') }}</h2>
+                    <h2 class="mb-6 text-neutral-900 font-medium">{{ $t('dashboard.account.password.title') }}</h2>
                     <div class="mt-6">
                         <label for="grid-password-current" class="input-label">{{ $t('strings.password') }}</label>
                         <input id="grid-password-current" name="current_password" type="password" class="input" required
diff --git a/resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.ts b/resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.ts
index 22b62fb6c..cb05a46e8 100644
--- a/resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.ts
+++ b/resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.ts
@@ -128,7 +128,7 @@ export default Vue.component('two-factor-authentication', {
                 <span class="spinner spinner-xl text-blue"></span>
             </div>
             <div id="container-disable-two-factor" v-if="response.enabled" v-show="!spinner">
-                <h2 class="font-medium text-grey-darkest">{{ $t('dashboard.account.two_factor.disable.title') }}</h2>
+                <h2 class="font-medium text-neutral-900">{{ $t('dashboard.account.two_factor.disable.title') }}</h2>
                 <div class="mt-6">
                     <label class="input-label" for="grid-two-factor-token-disable">{{ $t('dashboard.account.two_factor.disable.field') }}</label>
                     <input id="grid-two-factor-token-disable" type="number" class="input"
@@ -151,14 +151,14 @@ export default Vue.component('two-factor-authentication', {
                 </div>
             </div>
             <div id="container-enable-two-factor" v-else v-show="!spinner">
-                <h2 class="font-medium text-grey-darkest">{{ $t('dashboard.account.two_factor.setup.title') }}</h2>
+                <h2 class="font-medium text-neutral-900">{{ $t('dashboard.account.two_factor.setup.title') }}</h2>
                 <div class="flex mt-6">
                     <div class="flex-none w-full sm:w-1/2 text-center">
                         <div class="h-48">
                             <img :src="response.qr_image" id="grid-qr-code" alt="Two-factor qr image" class="h-48">
                         </div>
                         <div>
-                            <p class="text-xs text-grey-darker mb-2">{{ $t('dashboard.account.two_factor.setup.help') }}</p>
+                            <p class="text-xs text-neutral-800 mb-2">{{ $t('dashboard.account.two_factor.setup.help') }}</p>
                             <p class="text-xs"><code>{{response.secret}}</code></p>
                         </div>
                     </div>
diff --git a/resources/assets/scripts/components/dashboard/account/UpdateEmail.ts b/resources/assets/scripts/components/dashboard/account/UpdateEmail.ts
index 1e18cd158..39e287dbb 100644
--- a/resources/assets/scripts/components/dashboard/account/UpdateEmail.ts
+++ b/resources/assets/scripts/components/dashboard/account/UpdateEmail.ts
@@ -51,7 +51,7 @@ export default Vue.component('update-email', {
         <div id="update-email-container" :class>
             <form method="post" v-on:submit.prevent="submitForm">
                 <div class="content-box">
-                    <h2 class="mb-6 text-grey-darkest font-medium">{{ $t('dashboard.account.email.title') }}</h2>
+                    <h2 class="mb-6 text-neutral-900 font-medium">{{ $t('dashboard.account.email.title') }}</h2>
                     <div>
                         <label for="grid-email" class="input-label">{{ $t('strings.email_address') }}</label>
                         <input id="grid-email" name="email" type="email" class="input" required
diff --git a/resources/assets/scripts/components/server/Server.ts b/resources/assets/scripts/components/server/Server.ts
index 9cfdcc0cc..d515ecc60 100644
--- a/resources/assets/scripts/components/server/Server.ts
+++ b/resources/assets/scripts/components/server/Server.ts
@@ -82,32 +82,28 @@ export default Vue.component('server', {
                         <div class="mr-6">
                             <div class="p-6 text-center bg-white rounded shadow">
                                 <h3 class="mb-2 text-blue font-medium">{{server.name}}</h3>
-                                <span class="text-grey-dark text-sm">{{server.node}}</span>
-                                <power-buttons class="mt-6 pt-6 text-center border-t border-grey-lighter"/>
+                                <span class="text-neutral-600 text-sm">{{server.node}}</span>
+                                <power-buttons class="mt-6 pt-6 text-center border-t border-neutral-100"/>
                             </div>
                         </div>
-                        <div class="mt-6 sidenav mr-6">
-                            <router-link :to="{ name: 'server', params: { id: $route.params.id } }">
-                                Console
-                            </router-link>
-                            <router-link :to="{ name: 'server-files' }">
-                                File Manager
-                            </router-link>
-                            <!--<router-link :to="{ name: 'server-subusers' }">-->
-                                <!--<icon name="users" class="h-4"></icon> Subusers-->
-                            <!--</router-link>-->
-                            <!--<router-link :to="{ name: 'server-schedules' }">-->
-                                <!--<icon name="calendar" class="h-4"></icon> Schedules-->
-                            <!--</router-link>-->
-                            <router-link :to="{ name: 'server-databases' }">
-                                Databases
-                            </router-link>
-                            <!--<router-link :to="{ name: 'server-allocations' }">-->
-                                <!--<icon name="globe" class="h-4"></icon> Allocations-->
-                            <!--</router-link>-->
-                            <!--<router-link :to="{ name: 'server-settings' }">-->
-                                <!--<icon name="settings" class="h-4"></icon> Settings-->
-                            <!--</router-link>-->
+                        <div class="sidenav mt-6 mr-6">
+                            <ul>
+                                <li>
+                                    <router-link :to="{ name: 'server', params: { id: $route.params.id } }">
+                                        Console
+                                    </router-link>
+                                </li>
+                                <li>
+                                    <router-link :to="{ name: 'server-files' }">
+                                        File Manager
+                                    </router-link>
+                                </li>
+                                <li>
+                                    <router-link :to="{ name: 'server-databases' }">
+                                        Databases
+                                    </router-link>
+                                </li>
+                            </ul>
                         </div>
                     </div>
                     <div class="h-full w-full">
diff --git a/resources/assets/scripts/components/server/components/PowerButtons.ts b/resources/assets/scripts/components/server/components/PowerButtons.ts
index 9e6987ee3..b4c518a91 100644
--- a/resources/assets/scripts/components/server/components/PowerButtons.ts
+++ b/resources/assets/scripts/components/server/components/PowerButtons.ts
@@ -28,7 +28,7 @@ export default Vue.component('power-buttons', {
                             v-on:click.prevent="sendPowerAction('start')"
                     >Start</button>
                     <div v-else>
-                        <button class="btn btn-red uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('stop')">Stop</button>
+                        <button class="btn btn-red-500 uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('stop')">Stop</button>
                         <button class="btn btn-secondary uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('restart')">Restart</button>
                         <button class="btn btn-secondary uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('kill')">Kill</button>
                     </div>
@@ -37,7 +37,7 @@ export default Vue.component('power-buttons', {
             <div v-else>
                 <div class="text-center">
                     <div class="spinner"></div>
-                    <div class="pt-2 text-xs text-grey-light">Connecting to node</div>
+                    <div class="pt-2 text-xs text-neutral-400">Connecting to node</div>
                 </div>
             </div>
         </div>
diff --git a/resources/assets/scripts/components/server/components/ProgressBar.ts b/resources/assets/scripts/components/server/components/ProgressBar.ts
index 9c09c5dab..7e5ca527b 100644
--- a/resources/assets/scripts/components/server/components/ProgressBar.ts
+++ b/resources/assets/scripts/components/server/components/ProgressBar.ts
@@ -13,7 +13,7 @@ export default Vue.component('progress-bar', {
             } else if (this.percent >= 70 && this.percent < 90) {
                 return "bg-yellow-dark";
             } else {
-                return "bg-red-dark";
+                return "bg-red-600";
             }
         },
         borderColor: function () {
@@ -22,7 +22,7 @@ export default Vue.component('progress-bar', {
             } else if (this.percent >= 70 && this.percent < 90) {
                 return "border-yellow-dark";
             } else {
-                return "border-red-dark";
+                return "border-red-600";
             }
         }
     },
@@ -30,7 +30,7 @@ export default Vue.component('progress-bar', {
     template: `
         <div>
             <div class="text-right mb-1" v-if="title.length > 0">
-                <span class="text-grey-dark text-xs uppercase">{{ title }}</span>
+                <span class="text-neutral-600 text-xs uppercase">{{ title }}</span>
             </div>
             <div class="w-full border rounded h-4" :class="borderColor">
                 <div class="h-full w-1/3 text-center" :style="{ width: percent + '%' }" :class="backgroundColor">
diff --git a/resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue b/resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue
index 35cff9478..343e0f524 100644
--- a/resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue
+++ b/resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <message-box class="alert error mb-6" :message="errorMessage" v-show="errorMessage.length"/>
-        <h2 class="font-medium text-grey-darkest mb-6">Create a new database</h2>
+        <h2 class="font-medium text-neutral-900 mb-6">Create a new database</h2>
         <div class="mb-6">
             <label class="input-label" for="grid-database-name">Database name</label>
             <input id="grid-database-name" type="text" class="input" name="database_name" required
diff --git a/resources/assets/scripts/components/server/components/database/DatabaseRow.vue b/resources/assets/scripts/components/server/components/database/DatabaseRow.vue
index 159ac7561..980f7308b 100644
--- a/resources/assets/scripts/components/server/components/database/DatabaseRow.vue
+++ b/resources/assets/scripts/components/server/components/database/DatabaseRow.vue
@@ -1,17 +1,17 @@
 <template>
-    <div class="content-box mb-6 hover:border-grey">
-        <div class="flex items-center text-grey-darker">
+    <div class="content-box mb-6 hover:borderneutral-500">
+        <div class="flex items-center text-neutral-800">
             <database-icon class="flex-none text-green"></database-icon>
             <div class="flex-1 px-4">
-                <p class="uppercase text-xs text-grey pb-1 select-none">Database Name</p>
+                <p class="uppercase text-xs textneutral-500spb-1 select-none">Database Name</p>
                 <p>{{database.name}}</p>
             </div>
             <div class="flex-1 px-4">
-                <p class="uppercase text-xs text-grey pb-1 select-none">Username</p>
+                <p class="uppercase text-xs textneutral-500spb-1 select-none">Username</p>
                 <p>{{database.username}}</p>
             </div>
             <div class="flex-1 px-4">
-                <p class="uppercase text-xs text-grey pb-1 select-none">Password</p>
+                <p class="uppercase text-xs textneutral-500spb-1 select-none">Password</p>
                 <p>
                     <code class="text-sm cursor-pointer" v-on:click="revealPassword">
                         <span class="select-none" v-if="!database.showPassword">
@@ -22,7 +22,7 @@
                 </p>
             </div>
             <div class="flex-1 px-4">
-                <p class="uppercase text-xs text-grey pb-1 select-none">Server</p>
+                <p class="uppercase text-xs textneutral-500spb-1 select-none">Server</p>
                 <p><code class="text-sm">{{database.host.address}}:{{database.host.port}}</code></p>
             </div>
             <div class="flex-none px-4">
diff --git a/resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue b/resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue
index aed842d82..4281d5dd6 100644
--- a/resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue
+++ b/resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
-        <h2 class="font-medium text-grey-darkest mb-6">Delete this database?</h2>
-        <p class="text-grey-darkest text-sm">This action <strong>cannot</strong> be undone. This will permanetly delete the <strong>{{database.name}}</strong> database and remove all associated data.</p>
+        <h2 class="font-medium text-neutral-900 mb-6">Delete this database?</h2>
+        <p class="text-neutral-900 text-sm">This action <strong>cannot</strong> be undone. This will permanetly delete the <strong>{{database.name}}</strong> database and remove all associated data.</p>
         <div class="mt-6">
             <label class="input-label">Confirm database name</label>
             <input type="text" class="input" v-model="nameConfirmation"/>
diff --git a/resources/assets/scripts/components/server/components/filemanager/FileRow.ts b/resources/assets/scripts/components/server/components/filemanager/FileRow.ts
index 3ff59365b..56876f7ef 100644
--- a/resources/assets/scripts/components/server/components/filemanager/FileRow.ts
+++ b/resources/assets/scripts/components/server/components/filemanager/FileRow.ts
@@ -89,8 +89,8 @@ export default Vue.component('file-row', {
                     <icon name="link2" v-else/>
                 </div>
                 <div class="flex-1">{{file.name}}</div>
-                <div class="flex-1 text-right text-grey-dark">{{readableSize(file.size)}}</div>
-                <div class="flex-1 text-right text-grey-dark">{{formatDate(file.modified)}}</div>
+                <div class="flex-1 text-right text-neutral-600">{{readableSize(file.size)}}</div>
+                <div class="flex-1 text-right text-neutral-600">{{formatDate(file.modified)}}</div>
                 <div class="flex-none w-1/6"></div>
             </div>
             <file-context-menu class="context-menu" v-show="contextMenuVisible" ref="contextMenu"/>
diff --git a/resources/assets/scripts/components/server/components/filemanager/FolderRow.ts b/resources/assets/scripts/components/server/components/filemanager/FolderRow.ts
index e69a9a9b8..a139ac976 100644
--- a/resources/assets/scripts/components/server/components/filemanager/FolderRow.ts
+++ b/resources/assets/scripts/components/server/components/filemanager/FolderRow.ts
@@ -35,8 +35,8 @@ export default Vue.component('folder-row', {
                     <icon name="folder"/>
                 </div>
                 <div class="flex-1">{{directory.name}}</div>
-                <div class="flex-1 text-right text-grey-dark"></div>
-                <div class="flex-1 text-right text-grey-dark">{{formatDate(directory.modified)}}</div>
+                <div class="flex-1 text-right text-neutral-600"></div>
+                <div class="flex-1 text-right text-neutral-600">{{formatDate(directory.modified)}}</div>
                 <div class="flex-none w-1/6"></div>
             </router-link>
         </div>
diff --git a/resources/assets/scripts/components/server/subpages/Console.ts b/resources/assets/scripts/components/server/subpages/Console.ts
index ad1e4af97..f199a97d2 100644
--- a/resources/assets/scripts/components/server/subpages/Console.ts
+++ b/resources/assets/scripts/components/server/subpages/Console.ts
@@ -162,12 +162,12 @@ export default Vue.component('server-console', {
         <div class="animate fadein shadow-md">
             <div class="text-xs font-mono">
                 <div class="rounded-t p-2 bg-black overflow-scroll w-full" style="min-height: 16rem;max-height:64rem;">
-                    <div class="mb-2 text-grey-light" ref="terminal" v-if="connected"></div>
+                    <div class="mb-2 text-neutral-400" ref="terminal" v-if="connected"></div>
                     <div v-else>
                         <div class="spinner spinner-xl mt-24"></div>
                     </div>
                 </div>
-                <div class="rounded-b bg-grey-darkest text-white flex">
+                <div class="rounded-b bg-neutral-900 text-white flex">
                     <div class="flex-no-shrink p-2">
                         <span class="font-bold">$</span>
                     </div>
diff --git a/resources/assets/scripts/components/server/subpages/Databases.ts b/resources/assets/scripts/components/server/subpages/Databases.ts
index 543c27627..aa21efc21 100644
--- a/resources/assets/scripts/components/server/subpages/Databases.ts
+++ b/resources/assets/scripts/components/server/subpages/Databases.ts
@@ -92,8 +92,8 @@ export default Vue.component('server-databases', {
             <div class="animate fadein" v-else>
                 <div class="content-box mb-6" v-if="!databases.length">
                     <div class="flex items-center">
-                        <icon name="database" class="flex-none text-grey-darker"></icon>
-                        <div class="flex-1 px-4 text-grey-darker">
+                        <icon name="database" class="flex-none text-neutral-800"></icon>
+                        <div class="flex-1 px-4 text-neutral-800">
                             <p>You have no databases.</p>
                         </div>
                     </div>
diff --git a/resources/assets/scripts/components/server/subpages/FileManager.ts b/resources/assets/scripts/components/server/subpages/FileManager.ts
index 5235e57a5..f357297b7 100644
--- a/resources/assets/scripts/components/server/subpages/FileManager.ts
+++ b/resources/assets/scripts/components/server/subpages/FileManager.ts
@@ -136,7 +136,7 @@ export default Vue.component('file-manager', {
                     <div class="alert error" v-text="errorMessage"></div>
                 </div>
                 <div v-else-if="!directories.length && !files.length">
-                    <p class="text-grey text-sm text-center p-6 pb-4">This directory is empty.</p>
+                    <p class="textneutral-500stext-sm text-center p-6 pb-4">This directory is empty.</p>
                 </div>
                 <div class="filemanager" v-else>
                     <div class="header">
diff --git a/resources/assets/styles/components/animations.css b/resources/assets/styles/components/animations.css
index 836140a0e..25e988df7 100644
--- a/resources/assets/styles/components/animations.css
+++ b/resources/assets/styles/components/animations.css
@@ -35,7 +35,7 @@
     @apply .bg-red;
   }
   100% {
-    @apply .bg-red-dark;
+    @apply .bg-red-600;
   }
 }
 
diff --git a/resources/assets/styles/components/buttons.css b/resources/assets/styles/components/buttons.css
index 0d0d94c73..6066b51af 100644
--- a/resources/assets/styles/components/buttons.css
+++ b/resources/assets/styles/components/buttons.css
@@ -23,23 +23,23 @@
 
   &.btn-red {
     &:not(.btn-secondary) {
-      @apply .bg-red .border-red-dark .border .text-white;
+      @apply .bg-red-500 .border-red-600 .border .text-white;
     }
 
     &:hover:enabled {
-      @apply .bg-red-dark .border-red-darker;
+      @apply .bg-red-600 .border-red-800;
     }
   }
 
   &.btn-secondary {
-    @apply .border .border-grey-light .text-grey-dark;
+    @apply .border .border-neutral-400 .text-neutral-600;
 
     &:hover:enabled {
-      @apply .border-grey .text-grey-darker;
+      @apply .borderneutral-500s.text-neutral-800;
     }
 
     &.btn-red:hover:enabled {
-      @apply .bg-red-dark .border-red-darker .text-white;
+      @apply .bg-red-600 .border-red-800 .text-white;
     }
   }
 
diff --git a/resources/assets/styles/components/filemanager.css b/resources/assets/styles/components/filemanager.css
index c1e539847..30a86d4e2 100644
--- a/resources/assets/styles/components/filemanager.css
+++ b/resources/assets/styles/components/filemanager.css
@@ -1,6 +1,6 @@
 .filemanager {
   & .header {
-    @apply .flex .text-sm .pb-4 .font-bold .border-b .border-grey-light .mb-3;
+    @apply .flex .text-sm .pb-4 .font-bold .border-b .border-neutral-400 .mb-3;
 
     & > div {
       @apply .pr-4;
@@ -19,7 +19,7 @@
     }
 
     &.active-selection, &.clickable:hover {
-      @apply .bg-grey-lightest .text-grey-darkest .shadow;
+      @apply .bg-neutral-50 .text-neutral-900 .shadow;
     }
 
     & > .icon {
@@ -31,10 +31,10 @@
   }
 
   .context-menu {
-    @apply .absolute .bg-white .py-2 .border .rounded .text-grey-darker .text-sm .cursor-pointer;
+    @apply .absolute .bg-white .py-2 .border .rounded .text-neutral-800 .text-sm .cursor-pointer;
 
     & > div:not(:last-of-type) {
-      @apply .border-b .border-grey-lightest .pb-2 .mb-2;
+      @apply .border-b .border-neutral-50 .pb-2 .mb-2;
     }
 
     & .context-row {
@@ -53,11 +53,11 @@
       }
 
       &:hover {
-        @apply .bg-grey-lightest .border-t .border-b .border-grey-lighter;
+        @apply .bg-neutral-50 .border-t .border-b .border-neutral-100;
       }
 
       &.danger:hover {
-        @apply .bg-red-lightest .border-t .border-b .border-red-lighter;
+        @apply .bg-red-50 .border-t .border-b .border-red-100;
       }
 
     }
@@ -65,7 +65,7 @@
 }
 
 .filemanager-breadcrumbs {
-  @apply .px-4 .py-3 .mb-6 .rounded .bg-white .text-grey-darker .shadow-md;
+  @apply .px-4 .py-3 .mb-6 .rounded .bg-white .text-neutral-800 .shadow-md;
 
   & a {
     @apply .no-underline .text-blue;
diff --git a/resources/assets/styles/components/forms.css b/resources/assets/styles/components/forms.css
index 85fe6cf64..48a09858f 100644
--- a/resources/assets/styles/components/forms.css
+++ b/resources/assets/styles/components/forms.css
@@ -21,7 +21,7 @@ input[type=number] {
 }
 
 .input-open > .input {
-    @apply .appearance-none .block .w-full .text-grey-darker .border-b-2 .border-grey-light .py-3 .mb-3;
+    @apply .appearance-none .block .w-full .text-neutral-800 .border-b-2 .border-neutral-400 .py-3 .mb-3;
 
     &:focus {
         @apply .border-blue-light;
@@ -30,7 +30,7 @@ input[type=number] {
     }
 
     &:focus + label, &:valid + label, &.has-content + label {
-        @apply .text-grey-darker .px-0 .cursor-pointer;
+        @apply .text-neutral-800 .px-0 .cursor-pointer;
         transform:translateY(-26px)
     }
 
@@ -40,7 +40,7 @@ input[type=number] {
 }
 
 .input-open > label {
-    @apply .block .uppercase .tracking-wide .text-grey .text-xs .mb-2 .absolute;
+    @apply .block .uppercase .tracking-wide .textneutral-500s.text-xs .mb-2 .absolute;
     top: 14px;
     transition: transform 200ms ease-out;
 }
@@ -49,7 +49,7 @@ input[type=number] {
  * Styling for other forms throughout the Panel.
  */
 .input:not(.open-label) {
-    @apply .appearance-none .p-3 .rounded .border .text-grey-darker .w-full;
+    @apply .appearance-none .p-3 .rounded .border .text-neutral-800 .w-full;
     transition: all 100ms linear;
 
     &:focus {
@@ -61,18 +61,18 @@ input[type=number] {
     }
 
     &.error {
-        @apply .text-red-dark .border-red;
+        @apply .text-red-600 .border-red;
     }
 }
 
 .input-label {
-    @apply .block .uppercase .tracking-wide .text-grey-darkest .text-xs .font-bold .mb-2;
+    @apply .block .uppercase .tracking-wide .text-neutral-900 .text-xs .font-bold .mb-2;
 }
 
 .input-help {
-    @apply .text-xs .text-grey .pt-2;
+    @apply .text-xs .textneutral-500s.pt-2;
 
     &.error {
-        @apply .text-red-dark;
+        @apply .text-red-600;
     }
 }
diff --git a/resources/assets/styles/components/miscellaneous.css b/resources/assets/styles/components/miscellaneous.css
index 34795a6b4..7fdf3ed5b 100644
--- a/resources/assets/styles/components/miscellaneous.css
+++ b/resources/assets/styles/components/miscellaneous.css
@@ -11,7 +11,7 @@ code {
  * Indicators for server online status.
  */
 .indicator {
-    @apply .bg-grey-darker .border .border-grey;
+    @apply .bg-neutral-800 .border .border-grey;
     border-radius: 50%;
     width: 16px;
     height: 16px;
@@ -89,16 +89,16 @@ code {
     }
 
     & a, & a:visited {
-        @apply .no-underline .text-grey-darkest;
+        @apply .no-underline .text-neutral-900;
     }
 
     & > .content {
-        @apply .border .border-grey-light .bg-white .no-underline .block .text-black .p-4;
-        border-top: 4px solid config('colors.grey-light') !important;
+        @apply .border .border-neutral-400 .bg-white .no-underline .block .text-black .p-4;
+        border-top: 4px solid config('colors.neutral-400') !important;
     }
 
     & > .footer {
-        @apply .border .border-grey-light .border-t-0 .bg-grey-lightest;
+        @apply .border .border-neutral-400 .border-t-0 .bg-neutral-50;
     }
 }
 
@@ -110,7 +110,7 @@ code {
     @apply .w-full .my-4;
 
     & > input[type="text"] {
-        @apply .w-full .p-3 .rounded .border .text-grey-darker;
+        @apply .w-full .p-3 .rounded .border .text-neutral-800;
         transition: border 150ms ease-in;
 
         &:focus {
diff --git a/resources/assets/styles/components/navigation.css b/resources/assets/styles/components/navigation.css
index d9715b60b..ff16caf24 100644
--- a/resources/assets/styles/components/navigation.css
+++ b/resources/assets/styles/components/navigation.css
@@ -19,7 +19,7 @@
         @apply .mr-2;
 
         & > .search-input {
-            @apply .text-sm .p-2 .ml-8 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest .w-96;
+            @apply .text-sm .p-2 .ml-8 .rounded .border .border-blue-darker .bg-neutral-50 .text-neutral-900 .w-96;
             opacity: 0.9;
             transition: ease-in-out opacity 150ms;
 
@@ -35,13 +35,13 @@
         }
 
         & .search-results {
-            @apply .absolute .bg-grey-lightest .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
+            @apply .absolute .bg-neutral-50 .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
 
             & a {
                 @apply .block .no-underline .p-2 .rounded;
 
                 &:hover {
-                    @apply .bg-grey-lighter;
+                    @apply .bg-neutral-100;
                 }
             }
         }
@@ -51,7 +51,7 @@
         @apply .flex .h-full .items-center;
 
         & > a {
-            @apply .block .flex .self-stretch .items-center .no-underline .text-grey-lighter .font-light .text-sm .px-5;
+            @apply .block .flex .self-stretch .items-center .no-underline .text-neutral-100 .font-light .text-sm .px-5;
 
             &:hover {
                 @apply .bg-blue-dark;
@@ -61,16 +61,24 @@
 }
 
 .sidenav {
-    a {
-        @apply .block .no-underline .text-grey-darker .py-2;
-        transition: color 75ms ease-in;
+    ul {
+        @apply .list-reset;
 
-        &:hover {
-            @apply .text-grey;
-        }
+        & li {
+            @apply .block;
 
-        &.router-link-exact-active {
-            @apply .font-medium;
+            & > a {
+                transition: border-left-color 250ms linear, color 250ms linear;
+                @apply .block .px-4 .py-3 .border-l-3 .border-neutral-100 .no-underline .text-neutral-400 .font-medium;
+
+                &:hover, &.router-link-exact-active {
+                    @apply .text-neutral-800;
+                }
+
+                &.router-link-exact-active {
+                    @apply .border-blue .cursor-default;
+                }
+            }
         }
     }
 }
@@ -79,10 +87,10 @@
     @apply .py-2;
 
     a {
-        @apply .block .py-3 .px-6 .text-grey-darkest .no-underline .border .border-transparent;
+        @apply .block .py-3 .px-6 .text-neutral-900 .no-underline .border .border-transparent;
 
         &:hover, &.router-link-exact-active {
-            @apply .border-grey-light .bg-grey-lightest;
+            @apply .border-neutral-400 .bg-neutral-50;
 
             border-left: 1px solid transparent;
             border-right: 1px solid transparent;
diff --git a/resources/assets/styles/components/notifications.css b/resources/assets/styles/components/notifications.css
index dc4ebc684..b3f7896cc 100644
--- a/resources/assets/styles/components/notifications.css
+++ b/resources/assets/styles/components/notifications.css
@@ -13,7 +13,7 @@
     }
 
     &.error {
-        @apply .bg-red-dark .border-red-darker .text-red-lightest;
+        @apply .bg-red-600 .border-red-800 .text-red-50;
 
         & > .title {
             @apply .bg-red;
diff --git a/resources/assets/styles/components/spinners.css b/resources/assets/styles/components/spinners.css
index 1bdaa08fe..f87f1d86e 100644
--- a/resources/assets/styles/components/spinners.css
+++ b/resources/assets/styles/components/spinners.css
@@ -7,7 +7,7 @@
   }
 
   &:after {
-    @apply .border-2 .border-grey-light .absolute .block .h-4 .w-4 .rounded-full;
+    @apply .border-2 .border-neutral-400 .absolute .block .h-4 .w-4 .rounded-full;
     animation: spinners--spin 500ms infinite linear;
     border-top-color: transparent !important;
     border-right-color: transparent !important;
diff --git a/resources/themes/pterodactyl/admin/nodes/view/index.blade.php b/resources/themes/pterodactyl/admin/nodes/view/index.blade.php
index 71eb346d2..ac9e29530 100644
--- a/resources/themes/pterodactyl/admin/nodes/view/index.blade.php
+++ b/resources/themes/pterodactyl/admin/nodes/view/index.blade.php
@@ -98,7 +98,7 @@
                 <div class="row">
                     @if($node->maintenance_mode)
                     <div class="col-sm-12">
-                        <div class="info-box bg-orange">
+                        <div class="info-box bg-grey">
                             <span class="info-box-icon"><i class="ion ion-wrench"></i></span>
                             <div class="info-box-content" style="padding: 23px 10px 0;">
                                 <span class="info-box-text">This node is under</span>
@@ -169,4 +169,4 @@
         });
     })();
     </script>
-@endsection
\ No newline at end of file
+@endsection
diff --git a/resources/themes/pterodactyl/templates/auth/core.blade.php b/resources/themes/pterodactyl/templates/auth/core.blade.php
index 7ace7bc0b..5d1d7a4cd 100644
--- a/resources/themes/pterodactyl/templates/auth/core.blade.php
+++ b/resources/themes/pterodactyl/templates/auth/core.blade.php
@@ -1,5 +1,5 @@
 @extends('templates/wrapper', [
-    'css' => ['body' => 'bg-grey-darkest']
+    'css' => ['body' => 'bg-neutral-900']
 ])
 
 @section('container')
@@ -8,7 +8,7 @@
             <img src="/assets/img/pterodactyl-flat.svg" class="max-w-xxs">
         </div>
         <router-view></router-view>
-        <p class="text-center text-grey text-xs">
+        <p class="text-center textneutral-500stext-xs">
             {!! trans('strings.copyright', ['year' => date('Y')]) !!}
         </p>
     </div>
diff --git a/resources/themes/pterodactyl/templates/base/core.blade.php b/resources/themes/pterodactyl/templates/base/core.blade.php
index 112597ad4..a80bbb90c 100644
--- a/resources/themes/pterodactyl/templates/base/core.blade.php
+++ b/resources/themes/pterodactyl/templates/base/core.blade.php
@@ -56,7 +56,7 @@
 @section('below-container')
     <div class="flex-grow"></div>
     <div class="w-full m-auto mt-0 container">
-        <p class="text-center sm:text-right text-grey-dark text-xs">
+        <p class="text-center sm:text-right text-neutral-600 text-xs">
             {!! trans('strings.copyright', ['year' => date('Y')]) !!}
         </p>
     </div>
diff --git a/resources/themes/pterodactyl/templates/wrapper.blade.php b/resources/themes/pterodactyl/templates/wrapper.blade.php
index 503840932..f84e243cf 100644
--- a/resources/themes/pterodactyl/templates/wrapper.blade.php
+++ b/resources/themes/pterodactyl/templates/wrapper.blade.php
@@ -32,7 +32,7 @@
 
         @include('layouts.scripts')
     </head>
-    <body class="{{ $css['body'] ?? 'bg-grey-lightest' }}">
+    <body class="{{ $css['body'] ?? 'bg-neutral-50' }}">
         @section('content')
             @yield('above-container')
             <div id="pterodactyl" class="flex flex-col">
diff --git a/tailwind.js b/tailwind.js
index 47c9fc052..fca78721c 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -49,61 +49,76 @@ let colors = {
     'white': '#ffffff',
     'basically-white': '#fafafb',
 
-    'grey-lightest': '#F5F7FA',
-    'grey-lighter': '#E4E7EB',
-    'grey-light': '#CBD2D9',
-    'grey': '#9AA5B1',
-    'grey-dark': '#52606D',
-    'grey-darker': '#3E4C59',
-    'grey-darkest': '#323F4B',
+    // The design's primary colors. Splashes of color that should appear the most
+    // within the UI and determine the overall look of the site.
+    'primary-50': 'hsl(202, 100%, 95%)', // lightest
+    'primary-100': 'hsl(204, 100%, 86%)', // lighter
+    'primary-200': 'hsl(206, 93%, 73%)',
+    'primary-300': 'hsl(208, 88%, 62%)',
+    'primary-400': 'hsl(210, 83%, 53%)', // light
+    'primary-500': 'hsl(212, 92%, 43%)', // base
+    'primary-600': 'hsl(214, 95%, 36%)', // dark
+    'primary-700': 'hsl(215, 96%, 32%)',
+    'primary-800': 'hsl(216, 98%, 25%)', // darker
+    'primary-900': 'hsl(218, 100%, 17%)', //darkest
 
-    'red-lightest': '#FFE3E3',
-    'red-lighter': '#FFBDBD',
-    'red-light': '#F86A6A',
-    'red': '#CF1124',
-    'red-dark': '#AB091E',
-    'red-darker': '#8A041A',
-    'red-darkest': '#610316',
+    // Color used the most in the design and make up the majority of the UI.
+    'neutral-50': 'hsl(216, 33%, 97%)',
+    'neutral-100': 'hsl(214, 15%, 91%)',
+    'neutral-200': 'hsl(210, 16%, 82%)',
+    'neutral-300': 'hsl(211, 13%, 65%)',
+    'neutral-400': 'hsl(211, 10%, 53%)',
+    'neutral-500': 'hsl(211, 12%, 43%)',
+    'neutral-600': 'hsl(209, 14%, 37%)',
+    'neutral-700': 'hsl(209, 18%, 30%)',
+    'neutral-800': 'hsl(209, 20%, 25%)',
+    'neutral-900': 'hsl(210, 24%, 16%)',
 
-    'orange-lightest': '#FFE8D9',
-    'orange-lighter': '#FFD0B5',
-    'orange-light': '#F9703E',
-    'orange': '#DE3A11',
-    'orange-dark': '#C52707',
-    'orange-darker': '#AD1D07',
-    'orange-darkest': '#841003',
+    // Supporting colors used to make an element stand out or re-inforce error
+    // states or trends.
+    'red-50': 'hsl(360, 100%, 95%)',
+    'red-100': 'hsl(360, 100%, 87%)',
+    'red-200': 'hsl(360, 100%, 80%)',
+    'red-300': 'hsl(360, 91%, 69%)',
+    'red-400': 'hsl(360, 83%, 62%)',
+    'red-500': 'hsl(356, 75%, 53%)',
+    'red-600': 'hsl(354, 85%, 44%)',
+    'red-700': 'hsl(352, 90%, 35%)',
+    'red-800': 'hsl(350, 94%, 28%)',
+    'red-900': 'hsl(348, 94%, 20%)',
 
-    'yellow-lightest': '#fbfae9',
-    'yellow-lighter': '#ede9a7',
-    'yellow-light': '#e0d965',
-    'yellow': '#d2c823',
-    'yellow-dark': '#bdb420',
-    'yellow-darker': '#7e7815',
-    'yellow-darkest': '#3f3c0b',
+    'yellow-50': 'hsl(49, 100%, 96%)',
+    'yellow-100': 'hsl(48, 100%, 88%)',
+    'yellow-200': 'hsl(48, 95%, 76%)',
+    'yellow-300': 'hsl(48, 94%, 68%)',
+    'yellow-400': 'hsl(44, 92%, 63%)',
+    'yellow-500': 'hsl(42, 87%, 55%)',
+    'yellow-600': 'hsl(36, 77%, 49%)',
+    'yellow-700': 'hsl(29, 80%, 44%)',
+    'yellow-800': 'hsl(22, 82%, 39%)',
+    'yellow-900': 'hsl(15, 86%, 30%)',
 
-    'green-lightest': '#eef7eb',
-    'green-lighter': '#bbdeae',
-    'green-light': '#89c671',
-    'green': '#56ad34',
-    'green-dark': '#4d9c2f',
-    'green-darker': '#34681f',
-    'green-darkest': '#1a3410',
+    'cyan-50': 'hsl(171, 82%, 94%)',
+    'cyan-100': 'hsl(172, 97%, 88%)',
+    'cyan-200': 'hsl(174, 96%, 78%)',
+    'cyan-300': 'hsl(176, 87%, 67%)',
+    'cyan-400': 'hsl(178, 78%, 57%)',
+    'cyan-500': 'hsl(180, 77%, 47%)',
+    'cyan-600': 'hsl(182, 85%, 39%)',
+    'cyan-700': 'hsl(184, 90%, 34%)',
+    'cyan-800': 'hsl(186, 91%, 29%)',
+    'cyan-900': 'hsl(188, 91%, 23%)',
 
-    'blue-lightest': '#E6F6FF',
-    'blue-lighter': '#BAE3FF',
-    'blue-light': '#2186EB',
-    'blue': '#0967D2',
-    'blue-dark': '#0552B5',
-    'blue-darker': '#01337D',
-    'blue-darkest': '#002159',
-
-    'cyan-lightest': '#E1FCF8',
-    'cyan-lighter': '#C1FEF6',
-    'cyan-light': '#62F4EB',
-    'cyan': '#0FB5BA',
-    'cyan-dark': '#099AA4',
-    'cyan-darker': '#07818F',
-    'cyan-darkest': '#05606E',
+    'green-50': 'hsl(83, 100%, 96%)',
+    'green-100': 'hsl(83, 100%, 87%)',
+    'green-200': 'hsl(86, 100%, 76%)',
+    'green-300': 'hsl(88, 91%, 66%)',
+    'green-400': 'hsl(90, 84%, 55%)',
+    'green-500': 'hsl(92, 86%, 45%)',
+    'green-600': 'hsl(92, 89%, 38%)',
+    'green-700': 'hsl(100, 89%, 31%)',
+    'green-800': 'hsl(99, 91%, 25%)',
+    'green-900': 'hsl(100, 93%, 17%)',
 };
 
 module.exports = {
@@ -357,6 +372,7 @@ module.exports = {
         default: '1px',
         '0': '0',
         '2': '2px',
+        '3': '3px',
         '4': '4px',
         '8': '8px',
     },
@@ -378,7 +394,7 @@ module.exports = {
     |
     */
 
-    borderColors: global.Object.assign({default: colors['grey-light']}, colors),
+    borderColors: global.Object.assign({default: colors['neutral-400']}, colors),
 
     /*
     |-----------------------------------------------------------------------------