diff --git a/app/models/page_types/building.rb b/app/models/page_types/building.rb
index bca68f64..ae1da37e 100644
--- a/app/models/page_types/building.rb
+++ b/app/models/page_types/building.rb
@@ -23,11 +23,11 @@ class Building < ActiveRecord::Base
   relates :district_schools, with: :building_schools
 
   def self.color
-    'blue-grey'
+    'blue-grey bg-gray-600'
   end
 
   def self.text_color
-    'blue-grey-text'
+    'blue-grey-text text-gray-600'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/character.rb b/app/models/page_types/character.rb
index 10fb2ed7..ab0ae49a 100644
--- a/app/models/page_types/character.rb
+++ b/app/models/page_types/character.rb
@@ -49,11 +49,11 @@ class Character < ApplicationRecord
   end
 
   def self.color
-    'red'
+    'red red-500'
   end
 
   def self.text_color
-    'red-text'
+    'red-text text-red-500'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/condition.rb b/app/models/page_types/condition.rb
index 4a12af6a..6dd76717 100644
--- a/app/models/page_types/condition.rb
+++ b/app/models/page_types/condition.rb
@@ -14,11 +14,11 @@ class Condition < ActiveRecord::Base
   self.authorizer_name = 'ExtendedContentAuthorizer'
 
   def self.color
-    'text-darken-1 lime'
+    'text-darken-1 lime bg-lime-600'
   end
 
   def self.text_color
-    'text-darken-1 lime-text'
+    'text-darken-1 lime-text text-lime-600'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/continent.rb b/app/models/page_types/continent.rb
index b74e62dc..649c1b36 100644
--- a/app/models/page_types/continent.rb
+++ b/app/models/page_types/continent.rb
@@ -30,11 +30,11 @@ class Continent < ActiveRecord::Base
   end
 
   def self.color
-    'lighten-1 text-lighten-1 green'
+    'lighten-1 text-lighten-1 green bg-green-700'
   end
 
   def self.text_color
-    'text-lighten-1 green-text'
+    'text-lighten-1 green-text text-green-700'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/country.rb b/app/models/page_types/country.rb
index 72a04a76..2e6ebb91 100644
--- a/app/models/page_types/country.rb
+++ b/app/models/page_types/country.rb
@@ -34,11 +34,11 @@ class Country < ApplicationRecord
   end
 
   def self.color
-    'lighten-2 text-lighten-2 brown'
+    'lighten-2 text-lighten-2 brown bg-brown-700'
   end
 
   def self.text_color
-    'text-lighten-2 brown-text'
+    'text-lighten-2 brown-text text-brown-700'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/creature.rb b/app/models/page_types/creature.rb
index 19ad5da3..143e9bac 100644
--- a/app/models/page_types/creature.rb
+++ b/app/models/page_types/creature.rb
@@ -33,11 +33,11 @@ class Creature < ApplicationRecord
   end
 
   def self.color
-    'brown'
+    'brown bg-amber-900'
   end
 
   def self.text_color
-    'brown-text'
+    'brown-text text-amber text-amber-900'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/deity.rb b/app/models/page_types/deity.rb
index 696bfc8d..d8c323ae 100644
--- a/app/models/page_types/deity.rb
+++ b/app/models/page_types/deity.rb
@@ -34,11 +34,11 @@ class Deity < ApplicationRecord
   end
 
   def self.color
-    'text-lighten-4 blue'
+    'text-lighten-4 blue bg-blue-300'
   end
 
   def self.text_color
-    'text-lighten-4 blue-text'
+    'text-lighten-4 blue-text text-blue-300'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/flora.rb b/app/models/page_types/flora.rb
index d8249ef3..2d03c80d 100644
--- a/app/models/page_types/flora.rb
+++ b/app/models/page_types/flora.rb
@@ -29,11 +29,11 @@ class Flora < ApplicationRecord
   end
 
   def self.color
-    'text-lighten-2 lighten-2 teal'
+    'text-lighten-2 lighten-2 teal bg-lime-700'
   end
 
   def self.text_color
-    'text-lighten-2 teal-text'
+    'text-lighten-2 teal-text text-lime-700'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/food.rb b/app/models/page_types/food.rb
index 2931d350..7179eb7f 100644
--- a/app/models/page_types/food.rb
+++ b/app/models/page_types/food.rb
@@ -14,11 +14,11 @@ class Food < ActiveRecord::Base
   self.authorizer_name = 'ExtendedContentAuthorizer'
 
   def self.color
-    'red'
+    'red bg-red-400'
   end
 
   def self.text_color
-    'red-text'
+    'red-text text-red-400'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/government.rb b/app/models/page_types/government.rb
index fc3e89d2..0d188d68 100644
--- a/app/models/page_types/government.rb
+++ b/app/models/page_types/government.rb
@@ -24,11 +24,11 @@ class Government < ApplicationRecord
   end
 
   def self.color
-    'darken-2 green'
+    'darken-2 green bg-amber-600'
   end
 
   def self.text_color
-    'green-text'
+    'green-text text-amber-600'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/group.rb b/app/models/page_types/group.rb
index 9875f2a0..02ffcee5 100644
--- a/app/models/page_types/group.rb
+++ b/app/models/page_types/group.rb
@@ -37,11 +37,11 @@ class Group < ApplicationRecord
   end
 
   def self.color
-    'cyan'
+    'cyan bg-cyan-500'
   end
 
   def self.text_color
-    'cyan-text'
+    'cyan-text text-cyan-500'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/item.rb b/app/models/page_types/item.rb
index 4bb42db3..bfe9b550 100644
--- a/app/models/page_types/item.rb
+++ b/app/models/page_types/item.rb
@@ -31,11 +31,11 @@ class Item < ApplicationRecord
   end
 
   def self.color
-    'text-darken-2 amber'
+    'text-darken-2 amber bg-amber-500'
   end
 
   def self.text_color
-    'text-darken-2 amber-text'
+    'text-darken-2 amber-text text-amber-500'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/job.rb b/app/models/page_types/job.rb
index 9c4b8692..d7f306d0 100644
--- a/app/models/page_types/job.rb
+++ b/app/models/page_types/job.rb
@@ -14,11 +14,11 @@ class Job < ActiveRecord::Base
   self.authorizer_name = 'ExtendedContentAuthorizer'
 
   def self.color
-    'text-lighten-1 brown'
+    'text-lighten-1 brown bg-yellow-700'
   end
 
   def self.text_color
-    'text-lighten-1 brown-text'
+    'text-lighten-1 brown-text text-yellow-700'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/landmark.rb b/app/models/page_types/landmark.rb
index 11047469..13dd96e8 100644
--- a/app/models/page_types/landmark.rb
+++ b/app/models/page_types/landmark.rb
@@ -28,11 +28,11 @@ class Landmark < ApplicationRecord
   end
 
   def self.color
-    'text-lighten-1 lighten-1 orange'
+    'text-lighten-1 lighten-1 orange bg-orange-600'
   end
 
   def self.text_color
-    'text-lighten-1 orange-text'
+    'text-lighten-1 orange-text text-orange-600'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/language.rb b/app/models/page_types/language.rb
index c2e94f6e..6217e5e1 100644
--- a/app/models/page_types/language.rb
+++ b/app/models/page_types/language.rb
@@ -21,11 +21,11 @@ class Language < ApplicationRecord
   end
 
   def self.color
-    'blue'
+    'blue bg-cyan-700'
   end
 
   def self.text_color
-    'blue-text'
+    'blue-text text-cyan-700'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/location.rb b/app/models/page_types/location.rb
index b01ab186..c82a7ff9 100644
--- a/app/models/page_types/location.rb
+++ b/app/models/page_types/location.rb
@@ -43,11 +43,11 @@ class Location < ApplicationRecord
   end
 
   def self.color
-    'green'
+    'green bg-green-500'
   end
 
   def self.text_color
-    'green-text'
+    'green-text text-green-500'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/lore.rb b/app/models/page_types/lore.rb
index 914f83e1..c4210b15 100644
--- a/app/models/page_types/lore.rb
+++ b/app/models/page_types/lore.rb
@@ -44,11 +44,11 @@ class Lore < ActiveRecord::Base
   relates :related_lores, with: :lore_related_lores
 
   def self.color
-    'text-lighten-2 lighten-1 orange'
+    'text-lighten-2 lighten-1 orange bg-teal-600'
   end
 
   def self.text_color
-    'text-lighten-2 orange-text'
+    'text-lighten-2 orange-text text-teal-600'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/magic.rb b/app/models/page_types/magic.rb
index 0486b39a..a8deaea8 100644
--- a/app/models/page_types/magic.rb
+++ b/app/models/page_types/magic.rb
@@ -22,11 +22,11 @@ class Magic < ApplicationRecord
   end
 
   def self.color
-    'orange'
+    'orange bg-yellow-500'
   end
 
   def self.text_color
-    'orange-text'
+    'orange-text text-yellow-500'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/planet.rb b/app/models/page_types/planet.rb
index 85e5144a..17d376b0 100644
--- a/app/models/page_types/planet.rb
+++ b/app/models/page_types/planet.rb
@@ -31,11 +31,11 @@ class Planet < ApplicationRecord
   end
 
   def self.color
-    'text-lighten-2 blue'
+    'text-lighten-2 blue bg-lime-500'
   end
 
   def self.text_color
-    'text-lighten-2 blue-text'
+    'text-lighten-2 blue-text text-lime-500'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/race.rb b/app/models/page_types/race.rb
index dc78c517..2890e7fa 100644
--- a/app/models/page_types/race.rb
+++ b/app/models/page_types/race.rb
@@ -28,11 +28,11 @@ class Race < ApplicationRecord
   end
 
   def self.color
-    'darken-2 light-green'
+    'darken-2 light-green bg-indigo-500'
   end
 
   def self.text_color
-    'text-darken-2 light-green-text'
+    'text-darken-2 light-green-text text-indigo-500'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/religion.rb b/app/models/page_types/religion.rb
index bff0bd4c..0c837596 100644
--- a/app/models/page_types/religion.rb
+++ b/app/models/page_types/religion.rb
@@ -35,11 +35,11 @@ class Religion < ApplicationRecord
   end
 
   def self.color
-    'indigo'
+    'indigo bg-amber-600'
   end
 
   def self.text_color
-    'indigo-text'
+    'indigo-text text-amber-600'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/scene.rb b/app/models/page_types/scene.rb
index 483884bc..4481c3ca 100644
--- a/app/models/page_types/scene.rb
+++ b/app/models/page_types/scene.rb
@@ -27,11 +27,11 @@ class Scene < ApplicationRecord
   end
 
   def self.color
-    'grey'
+    'grey bg-gray-400'
   end
 
   def self.text_color
-    'grey-text'
+    'grey-text text-gray-400'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/school.rb b/app/models/page_types/school.rb
index 946d2510..655792ba 100644
--- a/app/models/page_types/school.rb
+++ b/app/models/page_types/school.rb
@@ -14,11 +14,11 @@ class School < ActiveRecord::Base
   self.authorizer_name = 'ExtendedContentAuthorizer'
 
   def self.color
-    'cyan'
+    'cyan bg-rose-800'
   end
 
   def self.text_color
-    'cyan-text'
+    'cyan-text text-rose-800'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/sport.rb b/app/models/page_types/sport.rb
index cad76ef1..90917dcb 100644
--- a/app/models/page_types/sport.rb
+++ b/app/models/page_types/sport.rb
@@ -15,11 +15,11 @@ class Sport < ActiveRecord::Base
   self.authorizer_name = 'ExtendedContentAuthorizer'
 
   def self.color
-    'orange'
+    'orange bg-orange-300'
   end
 
   def self.text_color
-    'orange-text'
+    'orange-text text-orange-300'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/technology.rb b/app/models/page_types/technology.rb
index 118fe85d..c8f929f5 100644
--- a/app/models/page_types/technology.rb
+++ b/app/models/page_types/technology.rb
@@ -28,11 +28,11 @@ class Technology < ApplicationRecord
   end
 
   def self.color
-    'text-darken-2 red'
+    'text-darken-2 red bg-fuchsia-500'
   end
 
   def self.text_color
-    'text-darken-2 red-text'
+    'text-darken-2 red-text text-fuchsia-500'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/town.rb b/app/models/page_types/town.rb
index b4283951..d1aa2328 100644
--- a/app/models/page_types/town.rb
+++ b/app/models/page_types/town.rb
@@ -31,11 +31,11 @@ class Town < ApplicationRecord
   end
 
   def self.color
-    'text-lighten-3 lighten-3 purple'
+    'text-lighten-3 lighten-3 purple bg-purple-500'
   end
 
   def self.text_color
-    'text-lighten-3 purple-text'
+    'text-lighten-3 purple-text text-purple-500'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/tradition.rb b/app/models/page_types/tradition.rb
index 31b3fe36..8ce17804 100644
--- a/app/models/page_types/tradition.rb
+++ b/app/models/page_types/tradition.rb
@@ -14,11 +14,11 @@ class Tradition < ActiveRecord::Base
   self.authorizer_name = 'ExtendedContentAuthorizer'
 
   def self.color
-    'text-lighten-3 lighten-3 red'
+    'text-lighten-3 lighten-3 red bg-rose-300'
   end
 
   def self.text_color
-    'text-lighten-3 red-text'
+    'text-lighten-3 red-text text-rose-300'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/universe.rb b/app/models/page_types/universe.rb
index d7c6cf20..3055a519 100644
--- a/app/models/page_types/universe.rb
+++ b/app/models/page_types/universe.rb
@@ -75,11 +75,11 @@ class Universe < ApplicationRecord
   end
 
   def self.color
-    'purple'
+    'purple bg-purple-800'
   end
 
   def self.text_color
-    'purple-text'
+    'purple-text text-purple-800'
   end
 
   def self.hex_color
diff --git a/app/models/page_types/vehicle.rb b/app/models/page_types/vehicle.rb
index a5feca86..b5a3f140 100644
--- a/app/models/page_types/vehicle.rb
+++ b/app/models/page_types/vehicle.rb
@@ -14,11 +14,11 @@ class Vehicle < ActiveRecord::Base
   self.authorizer_name = 'ExtendedContentAuthorizer'
 
   def self.color
-    'text-lighten-2 lighten-2 green'
+    'text-lighten-2 lighten-2 green bg-cyan-400'
   end
 
   def self.text_color
-    'text-lighten-2 green-text'
+    'text-lighten-2 green-text text-cyan-400'
   end
 
   def self.hex_color
diff --git a/app/views/cards/intros/_content_type_intro.html.erb b/app/views/cards/intros/_content_type_intro.html.erb
index e8a6d2d5..9e86057f 100644
--- a/app/views/cards/intros/_content_type_intro.html.erb
+++ b/app/views/cards/intros/_content_type_intro.html.erb
@@ -6,7 +6,7 @@
 <%= link_to send("#{content_name}_worldbuilding_info_path"), class: 'black-text' do %>
   <div class="bg-white p-6 rounded-lg hover:shadow-lg">
     <%= image_tag "card-headers/#{content_name.pluralize}.webp", height: 300, width: 300, class: 'h-64 rounded w-full object-cover object-center mb-6' %>
-    <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">
+    <h3 class="tracking-widest text-notebook-blue text-xs font-medium title-font">
       FREE FOR ALL USERS
     </h3>
     <h2 class="text-lg text-gray-900 font-medium title-font mb-4">
diff --git a/app/views/devise/registrations/new.html.erb b/app/views/devise/registrations/new.html.erb
index 5c283195..e29af747 100644
--- a/app/views/devise/registrations/new.html.erb
+++ b/app/views/devise/registrations/new.html.erb
@@ -71,7 +71,7 @@
               end
             %>
 
-            <%= f.submit "Sign up", class: 'block w-full px-4 py-4 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 bg-notebook-blue border border-transparent rounded-lg active:bg-blue-500 hover:bg-blue-500 hover:bg-blue-700 focus:outline-none focus:shadow-outline-blue cursor-pointer' %>
+            <%= f.submit "Sign up", class: 'block w-full px-4 py-4 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 bg-notebook-blue border border-transparent rounded-lg active:bg-notebook-blue hover:bg-notebook-blue hover:bg-blue-700 focus:outline-none focus:shadow-outline-blue cursor-pointer' %>
           <% end %>
 
           <div class="mt-4 text-center text-sm font-bold">
diff --git a/app/views/devise/sessions/_form.html.erb b/app/views/devise/sessions/_form.html.erb
index 201282b6..6067f5d4 100644
--- a/app/views/devise/sessions/_form.html.erb
+++ b/app/views/devise/sessions/_form.html.erb
@@ -23,6 +23,5 @@
   </div>
   <div class="text-center mt-4 text-sm hover:text-notebook-blue">
     <%= link_to 'Forgot your password?', new_user_password_path, class: 'text-notebook-blue hover:border-notebook-blue border-b-2' %>
-
   </div>
 <% end %>
diff --git a/app/views/main/for_roleplayers.html.erb b/app/views/main/for_roleplayers.html.erb
index 94f53743..146ac9a0 100644
--- a/app/views/main/for_roleplayers.html.erb
+++ b/app/views/main/for_roleplayers.html.erb
@@ -208,7 +208,7 @@
         <div class="bg-blue-100 my-2 rounded flex p-4 items-center">
           <span class="title-font font-medium">
             <i class="material-icons float-left mr-4 mt-6 mb-4">check</i>
-            If you <span class="text-blue-500">customize</span> a page's template, the fields you change are automatically synced across all of your
+            If you <span class="text-notebook-blue">customize</span> a page's template, the fields you change are automatically synced across all of your
             pages of that type. For example, adding a field for an item's damage type will instantly create that field for <em>all</em> of your
             items!
           </span>
@@ -216,14 +216,14 @@
         <div class="bg-blue-100 my-2 rounded flex p-4 items-center">
           <span class="title-font font-medium">
             <i class="material-icons float-left mr-4 mt-2">check</i>
-            Whenever you <span class="text-blue-500">mention</span> another page, a two-way link is automatically created that you can click
+            Whenever you <span class="text-notebook-blue">mention</span> another page, a two-way link is automatically created that you can click
             through, from either page.
           </span>
         </div>
         <div class="bg-blue-100 my-2 rounded flex p-4 items-center">
           <span class="title-font font-medium">
             <i class="material-icons float-left mr-4 mt-5 mb-4">check</i>
-            Whenever you <span class="text-blue-500">link</span> one page to another, you may notice the inverse link also created automatically. For example,
+            Whenever you <span class="text-notebook-blue">link</span> one page to another, you may notice the inverse link also created automatically. For example,
             creating a "subgroup" link on a Group page will automatically create a "supergroup" link back.
           </span>
         </div>
@@ -302,7 +302,7 @@
 </section>
 
 <div class="text-center my-24">
-  <%= link_to 'Ready to start building a new world?', new_user_registration_path, class: 'bg-blue-500 hover:bg-blue-400 shadow-lg rounded-lg white-text py-4 px-8 mx-auto text-xl border border-blue-400' %>
+  <%= link_to 'Ready to start building a new world?', new_user_registration_path, class: 'bg-notebook-blue hover:bg-blue-400 shadow-lg rounded-lg white-text py-4 px-8 mx-auto text-xl border border-blue-400' %>
   <div class="mt-6 text-gray-500">
     Empower your entire writing process with a new kind of tool.
   </div>
@@ -316,10 +316,10 @@
       </h1>
       <p class="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
         Have another question? Feel free to ask it in the
-        <%= link_to 'Site Support forums', 'https://www.notebook.ai/forum/site-support', class: 'text-blue-500' %>,
-        tweet <%= link_to '@IndentLabs', 'https://www.twitter.com/indentlabs', class: 'text-blue-500' %>,
+        <%= link_to 'Site Support forums', 'https://www.notebook.ai/forum/site-support', class: 'text-notebook-blue' %>,
+        tweet <%= link_to '@IndentLabs', 'https://www.twitter.com/indentlabs', class: 'text-notebook-blue' %>,
         or
-        <%= link_to 'PM @andrew', 'https://www.notebook.ai/@andrew', class: 'text-blue-500' %>!
+        <%= link_to 'PM @andrew', 'https://www.notebook.ai/@andrew', class: 'text-notebook-blue' %>!
       </p>
     </div>
     <div class="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
diff --git a/app/views/main/for_writers.html.erb b/app/views/main/for_writers.html.erb
index 17181e62..ff0a5cff 100644
--- a/app/views/main/for_writers.html.erb
+++ b/app/views/main/for_writers.html.erb
@@ -4,8 +4,8 @@
       <div class="text-center w-full">
         <div class="text-black py-4 px-5 my-5">
           <div class="mb-3 text-4xl md:text-6xl" style="text-shadow: white 0px 0px 18px;">
-            The <span class="text-blue-500">smart</span> notebook<br class="hidden sm:block" />
-            for <span class="text-blue-500">smart</span> writers
+            The <span class="text-notebook-blue">smart</span> notebook<br class="hidden sm:block" />
+            for <span class="text-notebook-blue">smart</span> writers
           </div>
           <div class="leading-normal text-3xl" style="text-shadow: white 0px 0px 10px;">
             Novel planning software that's fun <em>and</em> effective.
@@ -201,7 +201,7 @@
         <div class="bg-blue-100 my-2 rounded flex p-4 items-center">
           <span class="title-font font-medium">
             <i class="material-icons float-left mr-4 mt-6 mb-4">check</i>
-            If you <span class="text-blue-500">customize</span> a page's template, the fields you change are automatically synced across all of your
+            If you <span class="text-notebook-blue">customize</span> a page's template, the fields you change are automatically synced across all of your
             pages of that type. For example, adding a field for an item's damage type will instantly create that field for <em>all</em> of your
             items!
           </span>
@@ -209,14 +209,14 @@
         <div class="bg-blue-100 my-2 rounded flex p-4 items-center">
           <span class="title-font font-medium">
             <i class="material-icons float-left mr-4 mt-2">check</i>
-            Whenever you <span class="text-blue-500">mention</span> another page, a two-way link is automatically created that you can click
+            Whenever you <span class="text-notebook-blue">mention</span> another page, a two-way link is automatically created that you can click
             through, from either page.
           </span>
         </div>
         <div class="bg-blue-100 my-2 rounded flex p-4 items-center">
           <span class="title-font font-medium">
             <i class="material-icons float-left mr-4 mt-5 mb-4">check</i>
-            Whenever you <span class="text-blue-500">link</span> one page to another, you may notice the inverse link also created automatically. For example,
+            Whenever you <span class="text-notebook-blue">link</span> one page to another, you may notice the inverse link also created automatically. For example,
             creating a "subgroup" link on a Group page will automatically create a "supergroup" link back.
           </span>
         </div>
@@ -337,7 +337,7 @@
 </section>
 
 <div class="text-center my-24">
-  <%= link_to 'Ready to start building a new world?', new_user_registration_path, class: 'bg-blue-500 hover:bg-blue-400 shadow-lg rounded-lg white-text py-4 px-8 mx-auto text-xl border border-blue-400' %>
+  <%= link_to 'Ready to start building a new world?', new_user_registration_path, class: 'bg-notebook-blue hover:bg-blue-400 shadow-lg rounded-lg white-text py-4 px-8 mx-auto text-xl border border-blue-400' %>
   <div class="mt-6 text-gray-500">
     Empower your entire writing process with a new kind of tool.
   </div>
@@ -351,10 +351,10 @@
       </h1>
       <p class="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
         Have another question? Feel free to ask it in the
-        <%= link_to 'Site Support forums', 'https://www.notebook.ai/forum/site-support', class: 'text-blue-500' %>,
-        tweet <%= link_to '@IndentLabs', 'https://www.twitter.com/indentlabs', class: 'text-blue-500' %>,
+        <%= link_to 'Site Support forums', 'https://www.notebook.ai/forum/site-support', class: 'text-notebook-blue' %>,
+        tweet <%= link_to '@IndentLabs', 'https://www.twitter.com/indentlabs', class: 'text-notebook-blue' %>,
         or
-        <%= link_to 'PM @andrew', 'https://www.notebook.ai/@andrew', class: 'text-blue-500' %>!
+        <%= link_to 'PM @andrew', 'https://www.notebook.ai/@andrew', class: 'text-notebook-blue' %>!
       </p>
     </div>
     <div class="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
diff --git a/app/views/main/index.html.erb b/app/views/main/index.html.erb
index 9a80b5e9..7f8baa37 100644
--- a/app/views/main/index.html.erb
+++ b/app/views/main/index.html.erb
@@ -4,17 +4,17 @@
       <div class="text-center w-full">
         <div class="text-black py-4 px-5 my-5">
           <div class="mb-3 text-4xl md:text-6xl" style="text-shadow: white 0px 0px 10px;">
-            The <span class="text-blue-500">smart</span> notebook<br class="hidden sm:block" />
-            for <span class="text-blue-500">smart</span> worldbuilders
+            The <span class="text-notebook-blue">smart</span> notebook<br class="hidden sm:block" />
+            for <span class="text-notebook-blue">smart</span> worldbuilders
           </div>
           <div class="leading-normal text-2xl" style="text-shadow: white 0px 0px 10px;">
             <%= t('marketing.landing_page.promo_subheader') %>
           </div>
         </div>
         <div class="cta clear-left px-5">
-          <%= link_to new_user_registration_path, class: 'no-underline btn block sm:inline-block global-transition text-white bg-blue-500 hover:bg-blue-400' do %>
+          <%= link_to new_user_registration_path, class: 'no-underline px-4 py-4 rounded-lg block sm:inline-block global-transition text-white bg-notebook-blue hover:bg-blue-400 hover:shadow-lg' do %>
             <div class="flex justify-center items-center">
-              <span>Start worldbuilding now</span>
+              <span>Start worldbuilding</span>
               <span class="fa fa-xs fa-arrow-right ml-4"></span>
             </div>
           <% end %>
@@ -34,7 +34,7 @@
     <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
       <div class="p-4 md:w-1/2 flex">
         <div class="flex flex-row items-center mb-2">
-          <div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-blue-100 text-blue-500 flex-shrink-0">
+          <div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-blue-100 text-notebook-blue flex-shrink-0">
             <i class="material-icons text-3xl mb-1">create</i>
           </div>
           <div class="ml-4 text-2xl font-bold">
@@ -45,7 +45,7 @@
           <p class="leading-relaxed text-base">
             <%= t('marketing.landing_page.cta.writers.body') %>
           </p>
-          <%= link_to writers_landing_path, class: 'mt-3 text-indigo-500 inline-flex items-center' do %>
+          <%= link_to writers_landing_path, class: 'mt-3 text-notebook-blue inline-flex items-center' do %>
             <%= t('marketing.landing_page.cta.writers.button') %>
             <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
               <path d="M5 12h14M12 5l7 7-7 7"></path>
@@ -56,7 +56,7 @@
 
       <div class="p-4 md:w-1/2 flex">
         <div class="flex flex-row items-center mb-2">
-          <div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-blue-100 text-blue-500 flex-shrink-0">
+          <div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-blue-100 text-notebook-blue flex-shrink-0">
             <i class="material-icons text-3xl mb-1">gavel</i>
           </div>
           <div class="ml-4 text-2xl font-bold">
@@ -67,7 +67,7 @@
           <p class="leading-relaxed text-base">
             <%= t('marketing.landing_page.cta.roleplayers.body') %>
           </p>
-          <%= link_to roleplayers_landing_path, class: 'mt-3 text-indigo-500 inline-flex items-center' do %>
+          <%= link_to roleplayers_landing_path, class: 'mt-3 text-notebook-blue inline-flex items-center' do %>
             <%= t('marketing.landing_page.cta.roleplayers.button') %>
             <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
               <path d="M5 12h14M12 5l7 7-7 7"></path>
@@ -297,13 +297,13 @@
       <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
         <div class="relative mb-4">
           <%= f.label 'Your name', class: 'leading-7 text-sm text-gray-600' %>
-          <%= f.text_field :name, class: 'w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out' %>
+          <%= f.text_field :name, class: 'w-full bg-white rounded border border-gray-300 focus:border-notebook-blue focus:ring-2 focus:ring-notebook-blue text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out' %>
         </div>
 
         <div class="relative mb-4">
           <%= f.label :email, class: 'leading-7 text-sm text-gray-600' %>
           <em class="text-sm">(This is the email you will log in with)</em>
-          <%= f.email_field :email, class: 'w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out' %>
+          <%= f.email_field :email, class: 'w-full bg-white rounded border border-gray-300 focus:border-notebook-blue focus:ring-2 focus:ring-notebook-blue text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out' %>
         </div>
 
         <div class="relative mb-4">
@@ -311,12 +311,12 @@
           <% if @minimum_password_length %>
             <em>(<%= @minimum_password_length %> characters minimum)</em>
           <% end %><br />
-          <%= f.password_field :password, autocomplete: "off", class: 'w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out' %>
+          <%= f.password_field :password, autocomplete: "off", class: 'w-full bg-white rounded border border-gray-300 focus:border-notebook-blue focus:ring-2 focus:ring-notebook-blue text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out' %>
         </div>
 
         <div class="relative mb-4">
           <%= f.label :password_confirmation, class: 'leading-7 text-sm text-gray-600' %><br />
-          <%= f.password_field :password_confirmation, autocomplete: "off", class: 'w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out' %>
+          <%= f.password_field :password_confirmation, autocomplete: "off", class: 'w-full bg-white rounded border border-gray-300 focus:border-notebook-blue focus:ring-2 focus:ring-notebook-blue text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out' %>
         </div>
 
         <div class="relative mb-4">
@@ -352,7 +352,7 @@
           end
         %>
 
-        <%= f.submit "Sign up", class: 'w-full text-white bg-blue-500 border-0 py-2 px-8 focus:outline-none hover:bg-blue-600 rounded text-lg cursor-pointer' %>
+        <%= f.submit "Sign up", class: 'w-full text-white bg-notebook-blue border-0 py-2 px-8 focus:outline-none hover:bg-blue-600 rounded text-lg cursor-pointer' %>
       <% end %>
     </div>
   </div>
@@ -393,7 +393,7 @@
                 <p class="text-gray-500 my-2">
                   <%= t('marketing.landing_page.benefits.locations.text') %>
                 </p>
-                <p class="text-gray-500 my-2 text-blue-500">
+                <p class="text-gray-500 my-2 text-notebook-blue">
                   See the full list below.
                 </p>
               </div>
@@ -455,9 +455,6 @@
       </div>
     </section>
 
-
-    
-
   </div>
 </section>
 
@@ -471,7 +468,7 @@
             <div class="block relative h-48 rounded overflow-hidden hover:shadow-lg">
               <%= image_tag "card-headers/#{content_type.name.downcase.pluralize}.webp", class: 'h-full w-full rounded w-full object-cover object-center' %>
             </div>
-            <div class="text-gray-900 title-font text-lg font-medium text-center <%= content_type.text_color %>">
+            <div class="title-font text-lg font-medium text-center <%= content_type.text_color %>">
               <%= content_type.name.pluralize %>
             </div>
           <% end %>
@@ -500,7 +497,7 @@
       </p>
     </div>
     <div class="flex flex-wrap -m-4">
-      <div class="p-4 xl:w-1/4 md:w-1/2 w-full">
+      <div class="p-4 xl:w-1/4 w-full">
         <div class="h-3/4 mt-16 p-6 rounded-lg border-2 border-gray-300 bg-white flex flex-col relative overflow-hidden">
           <h2 class="text-sm tracking-widest title-font mb-1 font-medium">STARTER</h2>
           <h1 class="text-5xl text-gray-900 pb-4 mb-4 border-b border-gray-200 leading-none">Free forever</h1>
@@ -634,8 +631,8 @@
             </div>
           </div>
           <div class="p-4 xl:w-1/3 md:w-1/2 w-full mx-auto">
-            <div class="h-full p-6 rounded-lg border-2 border-indigo-500 flex flex-col bg-white relative overflow-hidden">
-              <span class="bg-indigo-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl">MOST POPULAR</span>
+            <div class="h-full p-6 rounded-lg border-2 border-notebook-blue flex flex-col bg-white relative overflow-hidden">
+              <span class="bg-notebook-blue text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl">MOST POPULAR</span>
               <h2 class="text-sm tracking-widest title-font mb-1 font-medium">PREMIUM</h2>
               <h1 class="text-5xl text-gray-900 leading-none flex items-center pb-4 mb-4 border-b border-gray-200">
                 <span>$24</span>
@@ -699,7 +696,7 @@
                 Create collections
               </p>
               <%= link_to new_user_registration_path, class: 'mt-auto' do %>
-                <button class="flex items-center mt-auto text-white bg-indigo-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-indigo-600 rounded">
+                <button class="flex items-center mt-auto text-white bg-notebook-blue border-0 py-2 px-4 w-full focus:outline-none hover:bg-blue-500 rounded">
                   Sign up
                   <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-auto" viewBox="0 0 24 24">
                     <path d="M5 12h14M12 5l7 7-7 7"></path>
diff --git a/tailwind.config.js b/tailwind.config.js
index cfeee48e..00ec269a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,41 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        'notebook-blue': '#2196F3'
+        'notebook-blue': '#2196F3',
+        slate: colors.slate,
+        gray: colors.gray,
+        zinc: colors.zinc,
+        neutral: colors.neutral,
+        stone: colors.stone,
+        red: colors.red,
+        orange: colors.orange,
+        amber: colors.amber,
+        yellow: colors.yellow,
+        lime: colors.lime,
+        green: colors.green,
+        emerald: colors.emerald,
+        teal: colors.teal,
+        cyan: colors.cyan,
+        sky: colors.sky,
+        blue: colors.blue,
+        indigo: colors.indigo,
+        violet: colors.violet,
+        purple: colors.purple,
+        fuchsia: colors.fuchsia,
+        pink: colors.pink,
+        rose: colors.rose,
+        brown: {
+          50: '#fdf8f6',
+          100: '#f2e8e5',
+          200: '#eaddd7',
+          300: '#e0cec7',
+          400: '#d2bab0',
+          500: '#bfa094',
+          600: '#a18072',
+          700: '#977669',
+          800: '#846358',
+          900: '#43302b',
+        },
       }
     },
   },