Add Tailwind color palette (#452)

app/assets/stylesheets/application.tailwind.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Reset rules, default styles applied to plain HTML */
+@layer base {
+}
+
 @layer components {
   .prose {
     table {
@@ -43,3 +47,7 @@
     @apply w-full p-3 text-center text-white bg-black rounded-lg hover:bg-gray-700;
   }
 }
+
+/* Small, single purpose classes that should take precedence over other styles */
+@layer utilities {
+}

app/helpers/application_helper.rb

@@ -24,8 +24,8 @@ module ApplicationHelper
 
   def sidebar_link_to(name, path, options = {})
     base_class_names = [ "block", "border", "border-transparent", "rounded-xl", "-ml-2", "p-2", "text-sm", "font-medium", "text-gray-500", "flex", "items-center" ]
-    hover_class_names = [ "hover:bg-white", "hover:border-[#141414]/[0.07]", "hover:text-gray-900", "hover:shadow-xs" ]
+    hover_class_names = [ "hover:bg-white", "hover:border-alpha-black-50", "hover:text-gray-900", "hover:shadow-xs" ]
-    current_page_class_names = [ "bg-white", "border-[#141414]/[0.07]", "text-gray-900", "shadow-xs" ]
+    current_page_class_names = [ "bg-white", "border-alpha-black-50", "text-gray-900", "shadow-xs" ]
 
     link_class_names = if current_page?(path)
                          base_class_names.delete("border-transparent")

app/views/accounts/_account_list.html.erb

@@ -4,26 +4,26 @@
 
 <% if accounts.sum(&:converted_balance) > 0 %>
 <details class="mb-1 text-sm group" data-controller="account-collapse" data-account-collapse-type-value="<%= type %>">
-  <summary class="flex gap-4 px-2 py-3 items-center w-full rounded-[10px] font-medium hover:bg-[#f2f2f2]">
+  <summary class="flex gap-4 px-2 py-3 items-center w-full rounded-[10px] font-medium hover:bg-gray-100">
-    <%= lucide_icon("chevron-down", class: "hidden group-open:block text-[#737373] w-5 h-5") %>
+    <%= lucide_icon("chevron-down", class: "hidden group-open:block text-gray-500 w-5 h-5") %>
-    <%= lucide_icon("chevron-right", class: "group-open:hidden text-[#737373] w-5 h-5") %>
+    <%= lucide_icon("chevron-right", class: "group-open:hidden text-gray-500 w-5 h-5") %>
     <div class="text-left"><%= type.model_name.human %></div>
     <div class="ml-auto"><%= format_currency accounts.sum(&:converted_balance) %></div>
   </summary>
   
   <% accounts.each do |account| %>
-    <%= link_to account_path(account), class: "flex items-center w-full gap-3 px-2 py-3 mb-1 hover:bg-[#f2f2f2] rounded-[10px]" do %>
+    <%= link_to account_path(account), class: "flex items-center w-full gap-3 px-2 py-3 mb-1 hover:bg-gray-100 rounded-[10px]" do %>
       <div>
         <p class="font-medium"><%= account.name %></p>
         <% if account.subtype %>
-          <p class="text-xs text-[#737373]"><%= account.subtype&.humanize %></p>
+          <p class="text-xs text-gray-500"><%= account.subtype&.humanize %></p>
         <% end %>
       </div>
       <p class="ml-auto font-medium"><%= format_currency account.converted_balance %></p>
     <% end %>
   <% end %>
 
-  <%= link_to new_account_path(step: 'method', type: type.name.demodulize), class: "flex items-center gap-4 px-2 py-3 mb-1 text-[#737373] text-sm font-medium rounded-[10px] hover:bg-[#f2f2f2]", data: { turbo_frame: "modal" } do %>
+  <%= link_to new_account_path(step: 'method', type: type.name.demodulize), class: "flex items-center gap-4 px-2 py-3 mb-1 text-gray-500 text-sm font-medium rounded-[10px] hover:bg-gray-100", data: { turbo_frame: "modal" } do %>
     <%= lucide_icon("plus", class: "w-5 h-5") %>
     <p>New <%= type.model_name.human.downcase %></p>
   <% end %>

app/views/accounts/_account_type.html.erb

@@ -1,5 +1,5 @@
-<%= link_to new_account_path(step: 'method', type: type.class.name.demodulize), class: "flex items-center gap-4 w-full text-center focus:outline-none focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 block px-2 hover:bg-gray-50 rounded-lg p-2" do %>
+<%= link_to new_account_path(step: 'method', type: type.class.name.demodulize), class: "flex items-center gap-4 w-full text-center focus:outline-none focus:bg-gray-25 border border-transparent focus:border focus:border-gray-200 block px-2 hover:bg-gray-25 rounded-lg p-2" do %>
-  <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg <%= bg_color %> shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
+  <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg <%= bg_color %> border border-alpha-black-25">
     <%= lucide_icon(icon, class: "#{text_color} w-5 h-5") %>
   </span>
   <%= type.model_name.human %>

app/views/accounts/_entry_method.html.erb

@@ -1,13 +1,13 @@
 <% if local_assigns[:disabled] && disabled %>
   <span class="flex items-center w-full gap-4 p-2 px-2 text-center border border-transparent rounded-lg cursor-not-allowed focus:outline-none focus:bg-gray-50 focus:border focus:border-gray-200 hover:bg-gray-50">
-    <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-[#141414]/5 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
+    <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
       <%= lucide_icon(icon, class: "text-gray-500 w-5 h-5") %>
     </span>
     <%= text %>
   </span>
 <% else %>
   <%= link_to new_account_path(type: type.class.name.demodulize), class: "flex items-center gap-4 w-full text-center focus:outline-none focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2" do %>
-    <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-[#141414]/5 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
+    <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
       <%= lucide_icon(icon, class: "text-gray-500 w-5 h-5") %>
     </span>
     <%= text %>

app/views/accounts/new.html.erb

@@ -3,38 +3,38 @@
 <%= modal do %>
   <div class="flex flex-col min-h-[530px]" data-controller="list-keyboard-navigation">
   <% if @account.accountable.blank? %>
-    <div class="border-b border-[#141414]/2 p-4 text-gray-400">
+    <div class="border-b border-alpha-black-25 p-4 text-gray-400">
       <%= t '.select_accountable_type' %>
     </div>
     <div class="flex flex-col p-2 text-sm grow">
       <button hidden data-controller="hotkey" data-hotkey="k,K,ArrowUp,ArrowLeft" data-action="list-keyboard-navigation#focusPrevious">Previous</button>
       <button hidden data-controller="hotkey" data-hotkey="j,J,ArrowDown,ArrowRight" data-action="list-keyboard-navigation#focusNext">Next</button>
 
-      <%= render "account_type", type: Account::Depository.new, bg_color: "bg-[#EFF8FF]", text_color: "text-[#2E90FA]", icon: "landmark" %>
+      <%= render "account_type", type: Account::Depository.new, bg_color: "bg-blue-50", text_color: "text-blue-500", icon: "landmark" %>
-      <%= render "account_type", type: Account::Investment.new, bg_color: "bg-[#ECFDF3]", text_color: "text-[#32D583]", icon: "line-chart" %>
+      <%= render "account_type", type: Account::Investment.new, bg_color: "bg-green-50", text_color: "text-green-500", icon: "line-chart" %>
-      <%= render "account_type", type: Account::Property.new, bg_color: "bg-[#FCF5F9]", text_color: "text-[#F23E94]", icon: "home" %>
+      <%= render "account_type", type: Account::Property.new, bg_color: "bg-pink-50", text_color: "text-pink-500", icon: "home" %>
-      <%= render "account_type", type: Account::Vehicle.new, bg_color: "bg-[#EEF4FF]", text_color: "text-[#6172F3]", icon: "car-front" %>
+      <%= render "account_type", type: Account::Vehicle.new, bg_color: "bg-indigo-50", text_color: "text-indigo-500", icon: "car-front" %>
-      <%= render "account_type", type: Account::Credit.new, bg_color: "bg-[#F0F9FF]", text_color: "text-[#36BFFA]", icon: "credit-card" %>
+      <%= render "account_type", type: Account::Credit.new, bg_color: "bg-violet-50", text_color: "text-violet-500", icon: "credit-card" %>
-      <%= render "account_type", type: Account::Loan.new, bg_color: "bg-[#FEF6EE]", text_color: "text-[#F38744]", icon: "hand-coins" %>
+      <%= render "account_type", type: Account::Loan.new, bg_color: "bg-yellow-50", text_color: "text-yellow-500", icon: "hand-coins" %>
-      <%= render "account_type", type: Account::OtherAsset.new, bg_color: "bg-[#ECFDF3]", text_color: "text-[#12B76A]", icon: "plus" %>
+      <%= render "account_type", type: Account::OtherAsset.new, bg_color: "bg-green-50", text_color: "text-green-500", icon: "plus" %>
-      <%= render "account_type", type: Account::OtherLiability.new, bg_color: "bg-[#FEF3F2]", text_color: "text-[#F04438]", icon: "minus" %>
+      <%= render "account_type", type: Account::OtherLiability.new, bg_color: "bg-red-50", text_color: "text-red-500", icon: "minus" %>
     </div>
-    <div class="border-t border-[#141414]/2 p-4 text-gray-500 text-sm flex justify-between">
+    <div class="border-t border-alpha-black-25 p-4 text-gray-500 text-sm flex justify-between">
       <div class="flex space-x-5">
         <div class="flex items-center space-x-2">
-          <span>Select</span> <kbd class="bg-[#141414]/5 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon('corner-down-left', class: 'inline w-3 h-3')%></kbd>
+          <span>Select</span> <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon('corner-down-left', class: 'inline w-3 h-3')%></kbd>
         </div>
         <div class="flex items-center space-x-2">
-          <span>Navigate</span> <kbd class="bg-[#141414]/5 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon('arrow-up', class: 'inline w-3 h-3')%></kbd> <kbd class="bg-[#141414]/5 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon('arrow-down', class: 'inline w-3 h-3')%></kbd>
+          <span>Navigate</span> <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon('arrow-up', class: 'inline w-3 h-3')%></kbd> <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon('arrow-down', class: 'inline w-3 h-3')%></kbd>
         </div>
       </div>
       <div class="flex items-center space-x-2">
-        <span>Close</span> <kbd class="bg-[#141414]/5 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-8 h-5 shrink-0 grow-0 items-center justify-center text-xs">ESC</kbd>
+        <span>Close</span> <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-8 h-5 shrink-0 grow-0 items-center justify-center text-xs">ESC</kbd>
       </div>
     </div>
   <% elsif params[:step] == 'method' && @account.accountable.present? %>
-    <div class="border-b border-[#141414]/2 p-4 text-gray-400 flex items-center space-x-3">
+    <div class="border-b border-alpha-black-25 p-4 text-gray-400 flex items-center space-x-3">
-      <%= link_to new_account_path, class: "flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-[#141414]/5 back focus:outline-gray-300 focus:outline" do %>
+      <%= link_to new_account_path, class: "flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 back focus:outline-gray-300 focus:outline" do %>
         <%= lucide_icon('arrow-left', class: 'text-gray-500 w-5 h-5') %>
       <% end %>
       <span>How would you like to add it?</span>
@@ -47,22 +47,22 @@
       <%= render "entry_method", type: @account.accountable, text: 'Securely link bank account with data provider (coming soon)', icon: "link-2", disabled: true %>
       <%= render "entry_method", type: @account.accountable, text: 'Upload spreadsheet (coming soon)', icon: "sheet", disabled: true %>
     </div>
-    <div class="border-t border-[#141414]/2 p-4 text-gray-500 text-sm flex justify-between">
+    <div class="border-t border-alpha-black-25 p-4 text-gray-500 text-sm flex justify-between">
       <div class="flex space-x-5">
         <div class="flex items-center space-x-2">
-          <span>Select</span> <kbd class="bg-[#141414]/5 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon('corner-down-left', class: 'inline w-3 h-3')%></kbd>
+          <span>Select</span> <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon('corner-down-left', class: 'inline w-3 h-3')%></kbd>
         </div>
         <div class="flex items-center space-x-2">
-          <span>Navigate</span> <kbd class="bg-[#141414]/5 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon('arrow-up', class: 'inline w-3 h-3')%></kbd> <kbd class="bg-[#141414]/5 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon('arrow-down', class: 'inline w-3 h-3')%></kbd>
+          <span>Navigate</span> <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon('arrow-up', class: 'inline w-3 h-3')%></kbd> <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-5 h-5 shrink-0 grow-0 items-center justify-center"><%= lucide_icon('arrow-down', class: 'inline w-3 h-3')%></kbd>
         </div>
       </div>
       <div class="flex items-center space-x-2">
-        <span>Close</span> <kbd class="bg-[#141414]/5 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-8 h-5 shrink-0 grow-0 items-center justify-center text-xs">ESC</kbd>
+        <span>Close</span> <kbd class="bg-alpha-black-50 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)] p-1 rounded-md flex w-8 h-5 shrink-0 grow-0 items-center justify-center text-xs">ESC</kbd>
       </div>
     </div>
   <% else %>
-    <div class="border-b border-[#141414]/2 p-4 text-gray-800 flex items-center space-x-3">
+    <div class="border-b border-alpha-black-25 p-4 text-gray-800 flex items-center space-x-3">
-      <%= link_to new_account_path(step: 'method', type: params[:type]), class: "flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-[#141414]/5 focus:outline-gray-300 focus:outline" do %>
+      <%= link_to new_account_path(step: 'method', type: params[:type]), class: "flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 focus:outline-gray-300 focus:outline" do %>
         <%= lucide_icon('arrow-left', class: 'text-gray-500 w-5 h-5') %>
       <% end %>
       <span>Add <%= @account.accountable.model_name.human.downcase %></span>

app/views/layouts/application.html.erb

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="bg-offwhite">
+<html class="bg-gray-25 h-full">
   <head>
     <title><%= content_for(:title) || "Maybe" %></title>
     <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
@@ -59,7 +59,7 @@
         </nav>
         <div class="flex flex-col mt-6">
           <div class="flex items-center justify-between">
-            <%= link_to accounts_path, class: 'text-xs uppercase text-[#737373] font-bold tracking-wide' do%>
+            <%= link_to accounts_path, class: 'text-xs uppercase text-gray-500 font-bold tracking-wide' do%>
               <%= t('.accounts') %>
             <% end %>
             <%= link_to new_account_path, class: 'block hover:bg-gray-100 p-2 text-sm font-semibold text-gray-900 flex items-center rounded', title: t('.new_account'), data: { turbo_frame: "modal" } do %>
@@ -68,7 +68,7 @@
           </div>
 
 
-          <%= link_to new_account_path, class: "flex items-center gap-4 px-2 py-3 mb-1 text-[#737373] text-sm font-medium rounded-[10px] hover:bg-[#f2f2f2]", data: { turbo_frame: "modal" } do %>
+          <%= link_to new_account_path, class: "flex items-center gap-4 px-2 py-3 mb-1 text-gray-500 text-sm font-medium rounded-[10px] hover:bg-gray-100", data: { turbo_frame: "modal" } do %>
             <%= lucide_icon("plus", class: "w-5 h-5") %>
             <p><%= t('.new_account') %></p>
           <% end %>

app/views/password_resets/edit.html.erb

@@ -5,12 +5,12 @@
 <%= form_with url: password_reset_path(token: params[:token]), html: {class: 'space-y-6'} do |form| %>
   <%= auth_messages form %>
 
-  <div class="relative border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
+  <div class="relative border border-gray-100 bg-gray-25 rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
     <%= form.label :password, class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %>
     <%= form.password_field :password, required: 'required', class: 'p-4 pt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100 w-full' %>
   </div>
 
-  <div class="relative border border-gray-100 bg-offwhite rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
+  <div class="relative border border-gray-100 bg-gray-25 rounded-xl focus-within:bg-white focus-within:shadow focus-within:opacity-100">
     <%= form.label :password_confirmation, class: 'p-4 pb-0 block text-sm font-medium text-gray-700' %>
     <%= form.password_field :password_confirmation, required: 'required', class: 'p-4 pt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100 w-full' %>
   </div>

app/views/shared/_currency_dropdown.html.erb

@@ -3,9 +3,9 @@
     <div data-currency-dropdown-target="label"><%= f.object.original_currency %></div>
     <%# Example of how account currency value is updated %>
     <%#= f.hidden_field :currency, data: {currency_dropdown_target: "input"} %>
-    <%= lucide_icon("chevron-down", class: "text-[#737373] w-5 h-5" ) %>
+    <%= lucide_icon("chevron-down", class: "text-gray-500 w-5 h-5" ) %>
   </button>
-  <ul data-currency-dropdown-target="menu" class="hidden fixed p-1 bg-white rounded-[10px] min-w-[112px] z-50 translate-y-2 border border-[#141414]/8 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)]">
+  <ul data-currency-dropdown-target="menu" class="hidden fixed p-1 bg-white rounded-[10px] min-w-[112px] z-50 translate-y-2 border border-alpha-black-100 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.1)]">
     <% options.each do |option| %>
       <li data-action="click->currency-dropdown#selectOption" data-currency-dropdown-target="option" data-value="<%= option %>" class="flex justify-between items-center p-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer rounded-lg <%= "bg-gray-100" if option === f.object.original_currency %>"><%= option %>
         <%= inline_svg_tag('icn-check.svg', class: "text-gray-500 fill-current #{'hidden'if option != f.object.original_currency}") %>

app/views/shared/_modal.html.erb

@@ -1,6 +1,6 @@
 <%# locals: (content:) -%>
 <%= turbo_frame_tag "modal" do %>
-  <dialog class="bg-white border border-[#141414]/25 rounded-2xl max-h-[556px] max-w-[580px] w-full shadow-xs h-full" data-controller="modal" data-action="click->modal#click_outside">
+  <dialog class="bg-white border border-alpha-black-25 rounded-2xl max-h-[556px] max-w-[580px] w-full shadow-xs h-full" data-controller="modal" data-action="click->modal#click_outside">
     <div class="flex flex-col h-full">
       <%= content %>
     </div>

config/tailwind.config.js

@@ -1,36 +1,215 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
+const defaultTheme = require("tailwindcss/defaultTheme");
 
 module.exports = {
   content: [
-    './public/*.html',
+    "./public/*.html",
-    './app/helpers/**/*.rb',
+    "./app/helpers/**/*.rb",
-    './app/javascript/**/*.js',
+    "./app/javascript/**/*.js",
-    './app/views/**/*.{erb,haml,html,slim}'
+    "./app/views/**/*.{erb,haml,html,slim}",
   ],
   theme: {
+    colors: {
+      transparent: "transparent",
+      current: "currentColor",
+      white: "#ffffff",
+      black: "#0B0B0B",
+      success: "#10A861",
+      warning: "#F79009",
+      error: "#F13636",
+      gray: {
+        25: "#FAFAFA",
+        50: "#F5F5F5",
+        100: "#F0F0F0",
+        200: "#E5E5E5",
+        300: "#D6D6D6",
+        400: "#A3A3A3 ",
+        500: "#737373",
+        600: "#525252",
+        700: "#3D3D3D",
+        800: "#212121",
+        900: "#141414",
+      },
+      "alpha-white": {
+        25: "rgba(255, 255, 255, 0.03)",
+        50: "rgba(255, 255, 255, 0.05)",
+        100: "rgba(255, 255, 255, 0.08)",
+        200: "rgba(255, 255, 255, 0.1)",
+        300: "rgba(255, 255, 255, 0.15)",
+        400: "rgba(255, 255, 255, 0.2)",
+        500: "rgba(255, 255, 255, 0.3)",
+        600: "rgba(255, 255, 255, 0.4)",
+        700: "rgba(255, 255, 255, 0.5)",
+        800: "rgba(255, 255, 255, 0.6)",
+        900: "rgba(255, 255, 255, 0.7)",
+      },
+      "alpha-black": {
+        25: "rgba(20, 20, 20, 0.03)",
+        50: "rgba(20, 20, 20, 0.05)",
+        100: "rgba(20, 20, 20, 0.08)",
+        200: "rgba(20, 20, 20, 0.1)",
+        300: "rgba(20, 20, 20, 0.15)",
+        400: "rgba(20, 20, 20, 0.2)",
+        500: "rgba(20, 20, 20, 0.3)",
+        600: "rgba(20, 20, 20, 0.4)",
+        700: "rgba(20, 20, 20, 0.5)",
+        800: "rgba(20, 20, 20, 0.6)",
+        900: "rgba(20, 20, 20, 0.7)",
+      },
+      red: {
+        25: "#FFFBFB",
+        50: "#FFF1F0",
+        100: "#FFDEDB",
+        200: "#FEB9B3",
+        300: "#F88C86",
+        400: "#ED4E4E",
+        500: "#F13636",
+        600: "#EC2222",
+        700: "#C91313",
+        800: "#A40E0E",
+        900: "#7E0707",
+      },
+      green: {
+        25: "#F6FEF9",
+        50: "#ECFDF3",
+        100: "#D1FADF",
+        200: "#A6F4C5",
+        300: "#6CE9A6",
+        400: "#32D583",
+        500: "#12B76A",
+        600: "#10A861",
+        700: "#078C52",
+        800: "#05603A",
+        900: "#054F31",
+      },
+      yellow: {
+        25: "#FFFCF5",
+        50: "#FFFAEB",
+        100: "#FEF0C7",
+        200: "#FEDF89",
+        300: "#FEC84B",
+        400: "#FDB022",
+        500: "#F79009",
+        600: "#DC6803",
+        700: "#B54708",
+        800: "#93370D",
+        900: "#7A2E0E",
+      },
+      cyan: {
+        25: "#F5FEFF",
+        50: "#ECFDFF",
+        100: "#CFF9FE",
+        200: "#A5F0FC",
+        300: "#67E3F9",
+        400: "#22CCEE",
+        500: "#06AED4",
+        600: "#088AB2",
+        700: "#0E7090",
+        800: "#155B75",
+        900: "#155B75",
+      },
+      blue: {
+        25: "#F5FAFF",
+        50: "#EFF8FF",
+        100: "#D1E9FF",
+        200: "#B2DDFF",
+        300: "#84CAFF",
+        400: "#53B1FD",
+        500: "#2E90FA",
+        600: "#1570EF",
+        700: "#175CD3",
+        800: "#1849A9",
+        900: "#194185",
+      },
+      indigo: {
+        25: "#F5F8FF",
+        50: "#EFF4FF",
+        100: "#E0EAFF",
+        200: "#C7D7FE",
+        300: "#A4BCFD",
+        400: "#8098F9",
+        500: "#6172F3",
+        600: "#444CE7",
+        700: "#3538CD",
+        800: "#2D31A6",
+        900: "#2D3282",
+      },
+      violet: {
+        25: "#FBFAFF",
+        50: "#F5F3FF",
+        100: "#ECE9FE",
+        200: "#DDD6FE",
+        300: "#C3B5FD",
+        400: "#A48AFB",
+        500: "#875BF7",
+        600: "#7839EE",
+        700: "#6927DA",
+        800: "#5720B7",
+        900: "#491C96",
+      },
+      fuchsia: {
+        25: "#FEFAFF",
+        50: "#FDF4FF",
+        100: "#FBE8FF",
+        200: "#F6D0FE",
+        300: "#EEAAFD",
+        400: "#E478FA",
+        500: "#D444F1",
+        600: "#BA24D5",
+        700: "#9F1AB1",
+        800: "#821890",
+        900: "#6F1877",
+      },
+      pink: {
+        25: "#FFFAFC",
+        50: "#FEF0F7",
+        100: "#FFD1E2",
+        200: "#FFB1CE",
+        300: "#FD8FBA",
+        400: "#F86BA7",
+        500: "#F23E94",
+        600: "#D5327F",
+        700: "#BA256B",
+        800: "#9E1958",
+        900: "#840B45",
+      },
+      orange: {
+        25: "#FFF9F5",
+        50: "#FFF4ED",
+        100: "#FFE6D5",
+        200: "#FFD6AE",
+        300: "#FF9C66",
+        400: "#FF692E",
+        500: "#FF4405",
+        600: "#E62E05",
+        700: "#BC1B06",
+        800: "#97180C",
+        900: "#771A0D",
+      },
+    },
+    boxShadow: {
+      none: "0 0 #0000",
+      inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+      xs: "0px 1px 2px 0px rgba(11, 11, 11, 0.05)",
+      sm: "0px 1px 2px 0px rgba(11, 11, 11, 0.06), 0px 1px 3px 0px rgba(11, 11, 11, 0.10)",
+      md: "0px 2px 4px -2px rgba(11, 11, 11, 0.06), 0px 4px 8px -2px rgba(11, 11, 11, 0.10)",
+      lg: "0px 4px 6px -2px rgba(11, 11, 11, 0.03), 0px 12px 16px -4px rgba(11, 11, 11, 0.08)",
+      xl: "0px 8px 8px -4px rgba(11, 11, 11, 0.03), 0px 20px 24px -4px rgba(11, 11, 11, 0.08)",
+      "2xl": "0px 24px 48px -12px rgba(11, 11, 11, 0.12)",
+      "3xl": "0px 32px 64px -12px rgba(11, 11, 11, 0.14)",
+    },
     extend: {
       fontFamily: {
-        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+        display: ["Inter var", ...defaultTheme.fontFamily.sans],
       },
       fontSize: {
-        '2xs': '.625rem',
+        "2xs": ".625rem",
       },
-      colors: {
-        black: '#242629',
-        offwhite: '#F9FAFB',
-      },
-      dropShadow: {
-        'form': '0px 4px 10px rgba(52, 54, 60, 0.08)',
-      },
-      boxShadow: {
-        'xs': '0px 1px 2px 0px #1018280D'
-      }
     },
   },
   plugins: [
-    require('@tailwindcss/forms'),
+    require("@tailwindcss/forms"),
-    require('@tailwindcss/aspect-ratio'),
+    require("@tailwindcss/aspect-ratio"),
-    require('@tailwindcss/typography'),
+    require("@tailwindcss/typography"),
-    require('@tailwindcss/container-queries'),
+    require("@tailwindcss/container-queries"),
-  ]
+  ],
-}
+};