diff --git a/app/components.json b/app/components.json
index 9420f17bfc..6ef06bd947 100644
--- a/app/components.json
+++ b/app/components.json
@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.js",
-    "css": "styles/tailwind.css",
+    "css": "styles/globals.css",
     "baseColor": "slate",
     "cssVariables": true
   },
diff --git a/app/components/avatar/component.tsx b/app/components/avatar/component.tsx
index 64867272e1..07be9c0c84 100644
--- a/app/components/avatar/component.tsx
+++ b/app/components/avatar/component.tsx
@@ -30,7 +30,7 @@ export const Avatar: React.FC<AvatarProps> = ({
   return (
     <div
       className={cn({
-        'relative z-0 flex items-center justify-center rounded-full border-2 border-gray-700 bg-transparent bg-cover bg-center bg-no-repeat hover:z-10 focus:outline-none':
+        'relative z-0 flex items-center justify-center rounded-full border-2 border-gray-800 bg-transparent bg-cover bg-center bg-no-repeat hover:z-10 focus:outline-none':
           true,
         'text-white': contrast > 2.5,
         'text-black': contrast < 2.5,
diff --git a/app/components/button/component.tsx b/app/components/button/component.tsx
index 5d1d05d9db..cd322751dd 100644
--- a/app/components/button/component.tsx
+++ b/app/components/button/component.tsx
@@ -11,28 +11,28 @@ const THEME = {
     'text-primary-500 bg-transparent hover:bg-transparent active:bg-transparent border border-primary-500 hover:border-primary-400 active:border-primary-300',
 
   secondary:
-    'text-white bg-gray-500 hover:bg-gray-400 active:bg-gray-300 border border-gray-500 hover:border-gray-400 active:border-gray-300',
+    'text-white bg-gray-700 hover:bg-gray-600 active:bg-gray-400 border border-gray-700 hover:border-gray-600 active:border-gray-400',
   'secondary-alt':
-    'text-gray-300 bg-transparent hover:bg-transparent active:bg-transparent border border-gray-400 hover:border-gray-300 active:border-gray-200',
+    'text-gray-400 bg-transparent hover:bg-transparent active:bg-transparent border border-gray-600 hover:border-gray-400 active:border-gray-300',
 
-  tertiary: 'text-black bg-gray-100 hover:bg-gray-400 hover:border-gray-400 hover:text-white',
+  tertiary: 'text-black bg-gray-200 hover:bg-gray-100 hover:border-gray-100 hover:text-white',
 
   white:
-    'text-gray-700 bg-white hover:text-white hover:bg-transparent active:bg-transparent border border-gray-400 hover:border-gray-300 active:border-gray-200',
+    'text-gray-800 bg-white hover:text-white hover:bg-transparent active:bg-transparent border border-gray-100 hover:border-gray-400 active:border-gray-300',
 
   danger:
-    'text-red-700 bg-transparent hover:text-white hover:bg-red-700 active:bg-red-600 border border-red-700 hover:border-red-600 active:border-red-500',
+    'text-red-800 bg-transparent hover:text-white hover:bg-red-800 active:bg-red-700 border border-red-800 hover:border-red-700 active:border-red-600',
   'danger-alt':
-    'text-white hover:bg-transparent border border-red-500 hover:text-red-500 bg-red-500 active:bg-red-600 hover:border hover:border-red-500 active:text-white active:border-red-600',
+    'text-white hover:bg-transparent border border-red-600 hover:text-red-600 bg-red-600 active:bg-red-700 hover:border hover:border-red-600 active:text-white active:border-red-700',
 
   spacial:
-    'text-white bg-transparent hover:bg-gray-400 active:bg-gray-300 flex items-center justify-center rounded-4xl focus:outline-none',
+    'text-white bg-transparent hover:bg-gray-100 active:bg-gray-400 flex items-center justify-center rounded-[40px] focus:outline-none',
 
-  dark: 'text-white bg-gray-600 border border-gray-600 hover:bg-black hover:text-white',
+  dark: 'text-white bg-gray-700 border border-gray-700 hover:bg-black hover:text-white',
   'dark-alt':
-    'text-gray-800 bg-transparent border border-gray-800 hover:border-gray-400 hover:text-gray-400',
+    'text-gray-900 bg-transparent border border-gray-900 hover:border-gray-100 hover:text-gray-100',
 
-  clear: 'text-gray-800 hover:text-gray-400',
+  clear: 'text-gray-900 hover:text-gray-100',
 
   'transparent-black':
     'text-black bg-transparent border border-black hover:bg-black hover:text-white',
@@ -93,7 +93,7 @@ const hasHref = (props: ButtonProps | AnchorProps): props is AnchorProps => 'hre
 
 function buildClassName({ className, disabled, size, theme }) {
   return cn({
-    'group relative flex items-center justify-center rounded-4xl transition-colors focus:outline-none':
+    'group relative flex items-center justify-center rounded-[40px] transition-colors focus:outline-none':
       true,
     [THEME[theme]]: true,
     [SIZE[size]]: true,
@@ -106,9 +106,9 @@ function buildChildren({ theme, children }) {
   if (theme === 'spacial') {
     return (
       <>
-        <div className="absolute bottom-0 left-0 right-0 top-0 z-0 rounded-4xl bg-gradient-to-r from-purple-500 to-blue-500">
+        <div className="absolute bottom-0 left-0 right-0 top-0 z-0 rounded-[40px] bg-gradient-to-r from-purple-600 to-blue-600">
           <div className="relative h-full w-full border-2 border-transparent">
-            <div className="absolute h-full w-full rounded-4xl bg-black transition-colors group-hover:bg-transparent" />
+            <div className="absolute h-full w-full rounded-[40px] bg-black transition-colors group-hover:bg-transparent" />
           </div>
         </div>
         <div className="relative z-20">{children}</div>
diff --git a/app/components/carousel/component.tsx b/app/components/carousel/component.tsx
index 307bc70ab4..eff391cc5d 100644
--- a/app/components/carousel/component.tsx
+++ b/app/components/carousel/component.tsx
@@ -51,7 +51,7 @@ export const Carousel: React.FC<CarouselProps> = ({ slides }: CarouselProps) =>
         type="button"
         aria-label="dot-element"
         onClick={() => slider.current.prev()}
-        className="absolute -left-36 top-12 flex h-16 w-16 items-center justify-center rounded-full border border-gray-500 opacity-30 hover:opacity-90"
+        className="absolute -left-36 top-12 flex h-16 w-16 items-center justify-center rounded-full border border-gray-600 opacity-30 hover:opacity-90"
       >
         <Icon className="h-3 w-3 text-black" icon={ARROW_LEFT_SVG} />
       </button>
@@ -106,8 +106,8 @@ export const Carousel: React.FC<CarouselProps> = ({ slides }: CarouselProps) =>
               }}
               className={cx({
                 'relative w-20': true,
-                'h-1 bg-blue-500': slide === i,
-                'h-0.5 bg-gray-300': slide !== i,
+                'h-1 bg-blue-600': slide === i,
+                'h-0.5 bg-gray-400': slide !== i,
               })}
             >
               <div className="absolute left-0 top-1/2 h-3 w-full -translate-y-1/2 transform bg-transparent" />
@@ -119,7 +119,7 @@ export const Carousel: React.FC<CarouselProps> = ({ slides }: CarouselProps) =>
         type="button"
         aria-label="dot-element"
         onClick={() => slider.current.next()}
-        className="absolute -right-36 top-12 flex h-16 w-16 items-center justify-center rounded-full border border-gray-500 opacity-30 hover:opacity-90"
+        className="absolute -right-36 top-12 flex h-16 w-16 items-center justify-center rounded-full border border-gray-600 opacity-30 hover:opacity-90"
       >
         <Icon className="h-3 w-3 text-black" icon={ARROW_RIGHT_SVG} />
       </button>
diff --git a/app/components/confirmation-prompt/component.tsx b/app/components/confirmation-prompt/component.tsx
index d65100ee16..56d8a2d2a2 100644
--- a/app/components/confirmation-prompt/component.tsx
+++ b/app/components/confirmation-prompt/component.tsx
@@ -27,14 +27,14 @@ export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
   <Modal open={open} title={title} size="narrow" dismissable={dismissible} onDismiss={onDismiss}>
     <div className="px-8 py-4">
       <header>
-        <div className="leading-1 mt-8 font-heading text-xl font-medium text-gray-800 sm:mt-0 sm:pr-32">
+        <div className="leading-1 mt-8 font-heading text-xl font-medium text-gray-900 sm:mt-0 sm:pr-32">
           {title}
         </div>
         <p
           className={classnames({
             'my-4 text-sm sm:pr-32': true,
             'text-black underline': !!danger,
-            'text-gray-400': !danger,
+            'text-gray-100': !danger,
           })}
         >
           {description}
diff --git a/app/components/disclaimer/component.tsx b/app/components/disclaimer/component.tsx
index 5740255303..93de6bc540 100644
--- a/app/components/disclaimer/component.tsx
+++ b/app/components/disclaimer/component.tsx
@@ -7,8 +7,8 @@ import Icon from 'components/icon';
 import WARNING_SVG from 'svgs/notifications/warning.svg?sprite';
 
 const TYPE = {
-  warning: 'text-yellow-400',
-  blocked: 'text-red-500',
+  warning: 'text-yellow-500',
+  blocked: 'text-red-600',
   invalidated: 'text-white',
 };
 
@@ -20,7 +20,7 @@ export interface DisclaimerProps {
 export const Disclaimer: React.FC<DisclaimerProps> = ({ children, type }: DisclaimerProps) => (
   <div
     className={cx({
-      'flex w-full items-center space-x-4 rounded-xl bg-gray-500 px-4 py-3 text-sm': true,
+      'flex w-full items-center space-x-4 rounded-xl bg-gray-600 px-4 py-3 text-sm': true,
     })}
   >
     <Icon
diff --git a/app/components/features/intersect-item/component.tsx b/app/components/features/intersect-item/component.tsx
index a9eab48b22..1c4b607a7f 100644
--- a/app/components/features/intersect-item/component.tsx
+++ b/app/components/features/intersect-item/component.tsx
@@ -114,7 +114,7 @@ export const Item: React.FC<ItemProps> = ({
     <div
       ref={ref}
       className={cx({
-        'bg-white text-gray-500': true,
+        'bg-white text-gray-600': true,
         [className]: !!className,
         invisible: !inView,
       })}
@@ -130,7 +130,7 @@ export const Item: React.FC<ItemProps> = ({
             id={`checkbox-${id}`}
             value={`${id}`}
             checked={selected}
-            className="form-checkbox-dark mt-1.5 block h-4 w-4 text-green-300"
+            className="form-checkbox-dark mt-1.5 block h-4 w-4 text-green-400"
             onChange={onSelectedChanged}
           />
           <h2 className="mt-1 font-heading text-sm">{name}</h2>
@@ -139,8 +139,8 @@ export const Item: React.FC<ItemProps> = ({
         {selected && (
           <div>
             <div className="mt-3 flex items-center font-heading tracking-wide">
-              <Icon icon={SPLIT_SVG} className="h-5 w-5 text-green-300" />
-              <h4 className="ml-2 text-xs uppercase text-gray-500">
+              <Icon icon={SPLIT_SVG} className="h-5 w-5 text-green-400" />
+              <h4 className="ml-2 text-xs uppercase text-gray-600">
                 You can <strong>split</strong> this feature into categories
               </h4>
             </div>
@@ -170,7 +170,7 @@ export const Item: React.FC<ItemProps> = ({
 
             return (
               <li key={`${f.value}`} className="relative mt-0.5 flex items-center py-2 pr-2.5">
-                <div className="absolute left-0 top-0 block h-full w-px bg-green-300" />
+                <div className="absolute left-0 top-0 block h-full w-px bg-green-400" />
                 <div className="relative flex font-heading text-xs">
                   <div className="ml-2.5">
                     <Checkbox
@@ -178,7 +178,7 @@ export const Item: React.FC<ItemProps> = ({
                       id={`checkbox-${f.value}`}
                       value={`${f.value}`}
                       checked={checked}
-                      className="form-checkbox-dark block h-4 w-4 text-green-300"
+                      className="form-checkbox-dark block h-4 w-4 text-green-400"
                       onChange={onSplitFeaturesChanged}
                     />
                   </div>
diff --git a/app/components/features/selected-item/component.tsx b/app/components/features/selected-item/component.tsx
index c9327727ef..469cd518b2 100644
--- a/app/components/features/selected-item/component.tsx
+++ b/app/components/features/selected-item/component.tsx
@@ -129,14 +129,14 @@ export const Item: React.FC<ItemProps> = ({
   return (
     <div
       className={cx({
-        'bg-gray-700 text-white': true,
+        'bg-gray-800 text-white': true,
         [className]: !!className,
       })}
     >
       <header
         className={cx({
           'border-l-4 px-4 py-2': true,
-          'border-yellow-400': true,
+          'border-yellow-500': true,
         })}
       >
         <div className="flex items-start justify-between">
@@ -147,7 +147,7 @@ export const Item: React.FC<ItemProps> = ({
               <Tooltip
                 arrow
                 placement="top"
-                content={<div className="rounded bg-white p-2 text-gray-500">Split</div>}
+                content={<div className="rounded bg-white p-2 text-gray-600">Split</div>}
               >
                 <button
                   aria-label="manage-see-on-map"
@@ -156,7 +156,7 @@ export const Item: React.FC<ItemProps> = ({
                   className={cx({
                     'flex h-5 w-5 items-center justify-center ': true,
                     'text-white': !splitSelected,
-                    'text-yellow-400': !!splitSelected,
+                    'text-yellow-500': !!splitSelected,
                   })}
                 >
                   <Icon icon={SPLIT_SVG} className="h-4 w-4" />
@@ -168,7 +168,7 @@ export const Item: React.FC<ItemProps> = ({
               arrow
               placement="top"
               content={
-                <div className="rounded bg-white p-2 text-gray-500">
+                <div className="rounded bg-white p-2 text-gray-600">
                   {isShown ? 'Remove from map' : 'See on map'}
                 </div>
               }
@@ -179,7 +179,7 @@ export const Item: React.FC<ItemProps> = ({
                 onClick={onSeeOnMap}
                 className={cx({
                   'flex h-5 w-5 items-center justify-center text-white': true,
-                  'text-gray-300': !isShown,
+                  'text-gray-400': !isShown,
                 })}
               >
                 <Icon className="h-4 w-4" icon={isShown ? SHOW_SVG : HIDE_SVG} />
@@ -190,7 +190,7 @@ export const Item: React.FC<ItemProps> = ({
               <Tooltip
                 arrow
                 placement="top"
-                content={<div className="rounded bg-white p-2 text-gray-500">Remove</div>}
+                content={<div className="rounded bg-white p-2 text-gray-600">Remove</div>}
               >
                 <button
                   aria-label="manage-see-on-map"
@@ -247,7 +247,7 @@ export const Item: React.FC<ItemProps> = ({
         {editable && strat && (
           <div>
             <div className="mt-3 flex items-center space-x-2 font-heading tracking-wide">
-              <Icon icon={INTERSECT_SVG} className="h-5 w-5 text-yellow-300" />
+              <Icon icon={INTERSECT_SVG} className="h-5 w-5 text-yellow-400" />
               <h4 className="ml-2 text-xs uppercase text-white">
                 You can <strong>intersect</strong> this feature with others
               </h4>
@@ -309,14 +309,14 @@ export const Item: React.FC<ItemProps> = ({
 
             return (
               <li key={`${f.value}`} className="relative mt-0.5 flex items-center py-2 pr-2.5">
-                <div className="absolute left-0 top-0 block h-full w-px bg-yellow-200" />
+                <div className="absolute left-0 top-0 block h-full w-px bg-yellow-300" />
                 <div className="relative flex font-heading text-xs">
                   <div className="ml-2.5">
                     <Checkbox
                       id={`checkbox-${f.value}`}
                       value={`${f.value}`}
                       checked={checked}
-                      className="form-checkbox-dark block h-4 w-4 text-yellow-200"
+                      className="form-checkbox-dark block h-4 w-4 text-yellow-300"
                       onChange={onSplitFeaturesChanged}
                     />
                   </div>
@@ -336,7 +336,7 @@ export const Item: React.FC<ItemProps> = ({
           {intersectFeaturesSelected.map((f) => {
             return (
               <li key={`${f.value}`} className="relative mt-0.5 flex items-center py-2 pr-2.5">
-                <div className="absolute left-0 top-0 block h-full w-px bg-gradient-to-b from-green-300 to-yellow-300" />
+                <div className="absolute left-0 top-0 block h-full w-px bg-gradient-to-b from-green-400 to-yellow-400" />
                 <div className="relative flex font-heading text-xs">
                   <div className="ml-2.5 inline-block max-w-sm">
                     {name} in {f.label}
diff --git a/app/components/features/target-spf-item/component.tsx b/app/components/features/target-spf-item/component.tsx
index 1b37849b84..07627a9725 100644
--- a/app/components/features/target-spf-item/component.tsx
+++ b/app/components/features/target-spf-item/component.tsx
@@ -1,12 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
 
-import cx from 'classnames';
-
 import Input from 'components/forms/input';
 import Label from 'components/forms/label';
 import Slider from 'components/forms/slider';
 import Icon from 'components/icon';
 import Tooltip from 'components/tooltip';
+import { cn } from 'utils/cn';
 
 import HIDE_SVG from 'svgs/ui/hide.svg?sprite';
 import REMOVE_SVG from 'svgs/ui/remove.svg?sprite';
@@ -52,22 +51,22 @@ export const TargetSPFItem: React.FC<TargetSPFItemProps> = ({
   return (
     <div
       key={id}
-      className={cx({
+      className={cn({
         'relative mb-2 border-transparent py-2 pl-5 text-xs text-white': true,
         [className]: !!className,
-        'bg-gray-700': !isAllTargets,
-        'rounded-lg border bg-gray-500': isAllTargets,
+        'bg-gray-800': !isAllTargets,
+        'rounded-lg border bg-gray-700': isAllTargets,
       })}
     >
       <div
-        className={cx({
+        className={cn({
           'absolute left-0 top-0 h-full w-1 ': true,
-          'bg-yellow-400': !isAllTargets,
+          'bg-yellow-500': !isAllTargets,
         })}
       />
       <div className="flex items-start justify-between pb-2 pr-2">
         <span
-          className={cx({
+          className={cn({
             'pr-10 font-heading text-sm font-medium': true,
             'w-4/5': !editable,
           })}
@@ -79,15 +78,15 @@ export const TargetSPFItem: React.FC<TargetSPFItemProps> = ({
             <Tooltip
               arrow
               placement="top"
-              content={<div className="rounded bg-white p-2 text-gray-500">See on map</div>}
+              content={<div className="rounded bg-white p-2 text-gray-600">See on map</div>}
             >
               <button
                 aria-label="manage-see-on-map"
                 type="button"
                 onClick={onSeeOnMap}
-                className={cx({
+                className={cn({
                   'flex h-5 w-5 items-center justify-center text-white': true,
-                  'text-gray-300': !isShown,
+                  'text-gray-400': !isShown,
                 })}
               >
                 <Icon className="h-4 w-4" icon={isShown ? SHOW_SVG : HIDE_SVG} />
@@ -98,7 +97,7 @@ export const TargetSPFItem: React.FC<TargetSPFItemProps> = ({
             <Tooltip
               arrow
               placement="top"
-              content={<div className="rounded bg-white p-2 text-gray-500">Remove</div>}
+              content={<div className="rounded bg-white p-2 text-gray-600">Remove</div>}
             >
               <button
                 aria-label="manage-see-on-map"
@@ -130,12 +129,12 @@ export const TargetSPFItem: React.FC<TargetSPFItemProps> = ({
               if (onChangeTarget) onChangeTarget(+(sliderValue * 100).toFixed(0));
             }}
           />
-          <div className="flex w-full justify-between text-gray-400">
+          <div className="flex w-full justify-between text-gray-100">
             <span>0%</span>
             <span>100%</span>
           </div>
         </div>
-        <div className="flex w-24 flex-col justify-between border-l border-gray-500 px-4">
+        <div className="flex w-24 flex-col justify-between border-l border-gray-600 px-4">
           <span className="whitespace-nowrap">{isAllTargets ? 'ALL SPF' : 'SPF'}</span>
           <div className="mb-6 w-10">
             <Input
diff --git a/app/components/forms/checkbox/index.tsx b/app/components/forms/checkbox/index.tsx
index c7f9e95268..0819c47461 100644
--- a/app/components/forms/checkbox/index.tsx
+++ b/app/components/forms/checkbox/index.tsx
@@ -6,19 +6,19 @@ const THEME = {
   dark: {
     base: 'bg-black border rounded-sm text-primary-500 focus:border-primary-500 focus:outline-none',
     status: {
-      none: 'border-gray-500',
-      valid: 'border-gray-500',
-      error: 'border-red-500 focus:border-red-500',
-      disabled: 'border-gray-500 opacity-50',
+      none: 'border-gray-600',
+      valid: 'border-gray-600',
+      error: 'border-red-600 focus:border-red-600',
+      disabled: 'border-gray-600 opacity-50',
     },
   },
   light: {
     base: 'bg-white border rounded-sm text-primary-500 focus:border-primary-500 focus:outline-none',
     status: {
-      none: 'border-gray-800',
-      valid: 'border-gray-800',
-      error: 'border-red-500 focus:border-red-500',
-      disabled: 'border-gray-800 opacity-50',
+      none: 'border-gray-900',
+      valid: 'border-gray-900',
+      error: 'border-red-600 focus:border-red-600',
+      disabled: 'border-gray-900 opacity-50',
     },
   },
 };
diff --git a/app/components/forms/error/component.tsx b/app/components/forms/error/component.tsx
index 1a505ed177..3405dae4b6 100644
--- a/app/components/forms/error/component.tsx
+++ b/app/components/forms/error/component.tsx
@@ -14,7 +14,7 @@ export const Error: React.FC<ErrorProps> = ({ children, visible, className }: Er
   return (
     <div
       className={cx({
-        'mb-5 rounded border border-red-500 bg-red-100 px-3 py-1 text-sm text-red-500': true,
+        'mb-5 rounded border border-red-600 bg-red-200 px-3 py-1 text-sm text-red-600': true,
         [className]: !!className,
       })}
     >
diff --git a/app/components/forms/input/component.tsx b/app/components/forms/input/component.tsx
index 6c28cfc6a1..1d70f16d65 100644
--- a/app/components/forms/input/component.tsx
+++ b/app/components/forms/input/component.tsx
@@ -8,12 +8,12 @@ import Icon from 'components/icon';
 
 const THEME = {
   dark: {
-    base: 'w-full leading-tight text-white bg-gray-800 bg-opacity-0 focus:outline-none focus:bg-gray-700',
+    base: 'w-full leading-tight text-white bg-gray-900 bg-opacity-0 focus:outline-none focus:bg-gray-800',
     status: {
-      none: 'border-gray-500',
-      valid: 'border-gray-500',
-      error: 'border-red-500',
-      disabled: 'border-gray-500 opacity-50',
+      none: 'border-gray-700',
+      valid: 'border-gray-700',
+      error: 'border-red-600',
+      disabled: 'border-gray-600 opacity-50',
     },
     icon: 'text-white',
     mode: {
@@ -22,14 +22,14 @@ const THEME = {
     },
   },
   light: {
-    base: 'w-full leading-tight text-gray-800 bg-white focus:outline-none focus:bg-gray-100',
+    base: 'w-full leading-tight text-gray-900 bg-white focus:outline-none focus:bg-gray-200',
     status: {
-      none: 'border-gray-800',
-      valid: 'border-gray-800',
-      error: 'border-red-500',
-      disabled: 'border-gray-800 opacity-50',
+      none: 'border-gray-900',
+      valid: 'border-gray-900',
+      error: 'border-red-600',
+      disabled: 'border-gray-900 opacity-50',
     },
-    icon: 'text-gray-800 text-opacity-50',
+    icon: 'text-gray-900 text-opacity-50',
     mode: {
       normal: 'border rounded',
       dashed: 'border-dashed border-b',
diff --git a/app/components/forms/label/component.tsx b/app/components/forms/label/component.tsx
index 4839ec669a..6eea7019d1 100644
--- a/app/components/forms/label/component.tsx
+++ b/app/components/forms/label/component.tsx
@@ -4,7 +4,7 @@ import { cn } from 'utils/cn';
 
 const THEME = {
   dark: 'block font-heading font-medium text-xs text-white',
-  light: 'block font-heading font-medium text-xs text-gray-600',
+  light: 'block font-heading font-medium text-xs text-gray-700',
 };
 
 export interface LabelProps {
diff --git a/app/components/forms/radio/component.tsx b/app/components/forms/radio/component.tsx
index 4d2e80ce7a..0e132528a2 100644
--- a/app/components/forms/radio/component.tsx
+++ b/app/components/forms/radio/component.tsx
@@ -4,21 +4,21 @@ import cx from 'classnames';
 
 const THEME = {
   dark: {
-    base: 'bg-gray-800 border rounded-full text-primary-500 focus:border-primary-500 focus:outline-none',
+    base: 'bg-gray-900 border rounded-full text-primary-500 focus:border-primary-500 focus:outline-none',
     status: {
-      none: 'border-gray-800',
-      valid: 'border-gray-800',
-      error: 'border-red-500',
-      disabled: 'border-gray-800 opacity-50',
+      none: 'border-gray-900',
+      valid: 'border-gray-900',
+      error: 'border-red-600',
+      disabled: 'border-gray-900 opacity-50',
     },
   },
   light: {
     base: 'bg-white border rounded-full text-primary-500 focus:border-primary-500 focus:outline-none',
     status: {
-      none: 'border-gray-800',
-      valid: 'border-gray-800',
-      error: 'border-red-500 focus:border-red-500',
-      disabled: 'border-gray-800 opacity-50',
+      none: 'border-gray-900',
+      valid: 'border-gray-900',
+      error: 'border-red-600 focus:border-red-600',
+      disabled: 'border-gray-900 opacity-50',
     },
   },
 };
diff --git a/app/components/forms/select/constants/theme.ts b/app/components/forms/select/constants/theme.ts
index f973f9dfde..5c6a9a7d90 100644
--- a/app/components/forms/select/constants/theme.ts
+++ b/app/components/forms/select/constants/theme.ts
@@ -1,61 +1,61 @@
 export default {
   dark: {
-    container: 'text-white bg-gray-700 ring-1 ring-gray-400 rounded-3xl',
-    open: 'ring-2 ring-primary-400 bg-gray-700 text-white rounded-2xl',
-    closed: 'border-gray-400 text-gray-400',
+    container: 'text-white bg-gray-800 ring-1 ring-gray-600 rounded-3xl',
+    open: 'ring-2 ring-primary-400 bg-gray-800 text-white rounded-2xl',
+    closed: 'border-gray-100 text-gray-100',
     prefix: {
       base: 'text-white',
     },
     icon: {
       closed: 'text-white',
       open: 'text-primary-500 transform rotate-180',
-      disabled: 'text-gray-400',
+      disabled: 'text-gray-100',
     },
     item: {
-      base: 'text-sm text-gray-300',
-      highlighted: 'text-sm bg-gray-700 text-white',
+      base: 'text-sm text-gray-400',
+      highlighted: 'text-sm bg-gray-800 text-white',
       disabled: 'text-sm opacity-50 pointer-events-none',
     },
   },
   light: {
-    container: 'text-gray-600 bg-white ring-1 ring-gray-400 rounded-3xl',
-    open: 'ring-2 ring-primary-400 bg-white text-gray-600 rounded-xl',
-    closed: 'text-gray-400',
+    container: 'text-gray-700 bg-white ring-1 ring-gray-100 rounded-3xl',
+    open: 'ring-2 ring-primary-400 bg-white text-gray-700 rounded-xl',
+    closed: 'text-gray-100',
     prefix: {
-      base: 'text-gray-800',
+      base: 'text-gray-900',
     },
     icon: {
-      closed: 'text-gray-600',
+      closed: 'text-gray-700',
       open: 'text-primary-500 transform rotate-180',
-      disabled: 'text-gray-400',
+      disabled: 'text-gray-100',
     },
     item: {
-      base: 'text-sm text-gray-400',
-      highlighted: 'text-sm bg-gray-100 text-gray-800',
+      base: 'text-sm text-gray-100',
+      highlighted: 'text-sm bg-gray-200 text-gray-900',
       disabled: 'text-sm opacity-50 pointer-events-none',
     },
   },
   'light-square': {
-    container: 'text-gray-600 bg-white ring-1 ring-gray-400 rounded',
-    open: 'ring-1 ring-primary-400 bg-white text-gray-600 rounded',
-    closed: 'text-gray-400',
+    container: 'text-gray-700 bg-white ring-1 ring-gray-100 rounded',
+    open: 'ring-1 ring-primary-400 bg-white text-gray-700 rounded',
+    closed: 'text-gray-100',
     prefix: {
-      base: 'text-gray-800',
+      base: 'text-gray-900',
     },
     icon: {
-      closed: 'text-gray-600',
+      closed: 'text-gray-700',
       open: 'text-primary-500 transform rotate-180',
-      disabled: 'text-gray-400',
+      disabled: 'text-gray-100',
     },
     item: {
-      base: 'text-sm text-gray-400',
-      highlighted: 'text-sm bg-gray-100 text-gray-800',
+      base: 'text-sm text-gray-100',
+      highlighted: 'text-sm bg-gray-200 text-gray-900',
       disabled: 'text-sm opacity-50 pointer-events-none',
     },
   },
   states: {
     none: '',
-    error: 'ring-red-500',
+    error: 'ring-red-600',
     valid: '',
   },
   sizes: {
diff --git a/app/components/forms/slider/component.tsx b/app/components/forms/slider/component.tsx
index d14fb13ab1..c9d64a47a2 100644
--- a/app/components/forms/slider/component.tsx
+++ b/app/components/forms/slider/component.tsx
@@ -14,17 +14,17 @@ const THEME = {
   dark: {
     base: 'relative w-full h-12 pt-8 touch-action-none',
     filledTrack: 'absolute left-0 h-1.5 bg-white rounded',
-    track: 'w-full h-1.5 bg-gray-300 rounded opacity-20',
+    track: 'w-full h-1.5 bg-gray-400 rounded opacity-20',
   },
   light: {
     base: 'relative w-full h-12 pt-8 touch-action-none',
-    filledTrack: 'absolute left-0 h-1.5 bg-gray-800 rounded',
-    track: 'w-full h-1.5 bg-gray-300 rounded opacity-20',
+    filledTrack: 'absolute left-0 h-1.5 bg-gray-900 rounded',
+    track: 'w-full h-1.5 bg-gray-400 rounded opacity-20',
   },
   'dark-small': {
     base: 'relative w-full h-12 pt-8 touch-action-none',
     filledTrack: 'absolute left-0 h-1.5 bg-black rounded',
-    track: 'w-full h-1.5 bg-gray-300 rounded opacity-20',
+    track: 'w-full h-1.5 bg-gray-400 rounded opacity-20',
   },
 };
 
diff --git a/app/components/forms/slider/thumb/component.tsx b/app/components/forms/slider/thumb/component.tsx
index 88ab52ea10..be9f1ce4cc 100644
--- a/app/components/forms/slider/thumb/component.tsx
+++ b/app/components/forms/slider/thumb/component.tsx
@@ -10,36 +10,36 @@ import { SliderState } from '@react-stately/slider';
 
 const THEME = {
   dark: {
-    thumb: 'absolute top-0 w-4 h-4 transform -translate-x-1/2 rounded-full bg-gray-700 border-2',
+    thumb: 'absolute top-0 w-4 h-4 transform -translate-x-1/2 rounded-full bg-gray-800 border-2',
     status: {
       default: 'border-white',
       dragging: 'border-white opacity-80',
       focused: 'border-white ring-2 ring-primary-500',
-      valid: 'border-green-500',
-      error: 'border-red-500',
+      valid: 'border-green-600',
+      error: 'border-red-600',
       disabled: 'border-white',
     },
   },
   light: {
-    thumb: 'absolute top-0 w-4 h-4 transform -translate-x-1/2 rounded-full bg-gray-700 border-2',
+    thumb: 'absolute top-0 w-4 h-4 transform -translate-x-1/2 rounded-full bg-gray-800 border-2',
     status: {
       default: 'border-white',
       dragging: 'border-white opacity-80',
       focused: 'border-white ring-2 ring-primary-500',
-      valid: 'border-green-500',
-      error: 'border-red-500',
+      valid: 'border-green-600',
+      error: 'border-red-600',
       disabled: 'border-white',
     },
   },
   'dark-small': {
     thumb:
-      'cursor-pointer absolute top-0 w-4 h-4 transform -translate-x-1/2 rounded-full bg-gray-700 border-2',
+      'cursor-pointer absolute top-0 w-4 h-4 transform -translate-x-1/2 rounded-full bg-gray-800 border-2',
     status: {
       default: 'border-white',
       dragging: 'border-white opacity-80',
       focused: 'border-white ring-2 ring-primary-500',
-      valid: 'border-green-500',
-      error: 'border-red-500',
+      valid: 'border-green-600',
+      error: 'border-red-600',
       disabled: 'border-white',
     },
   },
diff --git a/app/components/forms/slider/value/component.tsx b/app/components/forms/slider/value/component.tsx
index c3bfdc6f27..56bfe01deb 100644
--- a/app/components/forms/slider/value/component.tsx
+++ b/app/components/forms/slider/value/component.tsx
@@ -11,19 +11,19 @@ const THEME = {
     base: 'absolute top-0 transform -translate-x-1/2 text-black',
     output: 'text-sm text-white border border-t-0 border-l-0 border-r-0 border-dashed border-white',
     input:
-      'absolute left-0 top-0 w-full h-full text-sm border-none bg-primary-300 rounded rounded-lg cursor-text text-center font-medium appearance-none bg-transparent text-gray-500 focus:outline-none',
+      'absolute left-0 top-0 w-full h-full text-sm border-none bg-primary-300 rounded rounded-lg cursor-text text-center font-medium appearance-none bg-transparent text-gray-600 focus:outline-none',
   },
   light: {
     base: 'absolute top-0 transform -translate-x-1/2 text-black',
     input:
-      'absolute left-0 top-0 w-full h-full text-sm border-none bg-primary-300 rounded rounded-lg cursor-text text-center font-medium appearance-none bg-transparent text-gray-500 focus:outline-none',
+      'absolute left-0 top-0 w-full h-full text-sm border-none bg-primary-300 rounded rounded-lg cursor-text text-center font-medium appearance-none bg-transparent text-gray-600 focus:outline-none',
     output:
-      'text-sm text-gray-800 border border-t-0 border-l-0 border-r-0 border-dashed border-gray-800',
+      'text-sm text-gray-900 border border-t-0 border-l-0 border-r-0 border-dashed border-gray-900',
   },
   'dark-small': {
     base: 'absolute top-0 transform -translate-x-1/2 text-black',
     input:
-      'absolute left-0 top-0 w-full h-full text-sm border-none bg-primary-300 rounded rounded-lg cursor-text text-center font-medium appearance-none bg-transparent text-gray-500 focus:outline-none',
+      'absolute left-0 top-0 w-full h-full text-sm border-none bg-primary-300 rounded rounded-lg cursor-text text-center font-medium appearance-none bg-transparent text-gray-600 focus:outline-none',
     output: 'text-xs text-black',
   },
 };
diff --git a/app/components/forms/textarea/component.tsx b/app/components/forms/textarea/component.tsx
index c846a5f0c2..eae904b8a3 100644
--- a/app/components/forms/textarea/component.tsx
+++ b/app/components/forms/textarea/component.tsx
@@ -6,19 +6,19 @@ const THEME = {
   dark: {
     base: 'leading-tight text-white bg-transparent border rounded focus:outline-none',
     status: {
-      none: 'border-gray-500',
-      valid: 'border-gray-500',
-      error: 'border-red-500',
-      disabled: 'border-gray-800 opacity-50',
+      none: 'border-gray-600',
+      valid: 'border-gray-600',
+      error: 'border-red-600',
+      disabled: 'border-gray-900 opacity-50',
     },
   },
   light: {
-    base: 'leading-tight text-gray-800 bg-transparent border rounded focus:outline-none',
+    base: 'leading-tight text-gray-900 bg-transparent border rounded focus:outline-none',
     status: {
-      none: 'border-gray-500',
-      valid: 'border-gray-500',
-      error: 'border-red-500',
-      disabled: 'border-gray-800 opacity-50',
+      none: 'border-gray-600',
+      valid: 'border-gray-600',
+      error: 'border-red-600',
+      disabled: 'border-gray-900 opacity-50',
     },
   },
 };
diff --git a/app/components/gap-analysis/item/component.tsx b/app/components/gap-analysis/item/component.tsx
index e71a313f05..8661f8d0ae 100644
--- a/app/components/gap-analysis/item/component.tsx
+++ b/app/components/gap-analysis/item/component.tsx
@@ -78,7 +78,7 @@ export const Item: React.FC<ItemProps> = ({
         'relative overflow-hidden border-l-4 px-4 pb-4 pt-1 text-white transition-opacity duration-300':
           true,
         'opacity-20': muted,
-        'border-purple-700': true,
+        'border-purple-800': true,
         'pb-8': !onTarget,
         [className]: className !== undefined && className !== null,
       })}
@@ -87,7 +87,7 @@ export const Item: React.FC<ItemProps> = ({
     >
       <div className="flex justify-between">
         <Tooltip
-          content={<div className="rounded bg-white p-2 text-gray-500">{name}</div>}
+          content={<div className="rounded bg-white p-2 text-gray-600">{name}</div>}
           placement="top-start"
           delay={[400, null]}
           offset={[-10, -34]}
@@ -99,7 +99,7 @@ export const Item: React.FC<ItemProps> = ({
 
         <button
           type="button"
-          className="flex flex-shrink-0 items-center justify-between rounded-4xl border border-transparent px-2 py-1 text-xs focus:border-white"
+          className="flex flex-shrink-0 items-center justify-between rounded-[40px] border border-transparent px-2 py-1 text-xs focus:border-white"
           onClick={onHighlight}
         >
           {highlighted ? 'Lowlight on map' : 'Highlight on map'}
@@ -108,38 +108,38 @@ export const Item: React.FC<ItemProps> = ({
       </div>
       <div className="flex justify-start">
         <div className="mr-5">
-          <div className="mr-3 inline-block h-3 w-3 rounded-sm bg-purple-700 align-middle" />
+          <div className="mr-3 inline-block h-3 w-3 rounded-sm bg-purple-800 align-middle" />
           <span className="text-sm">
             Current: {percentFormatter.format(current.percent)} ({current.value} {current.unit})
           </span>
         </div>
         <div>
-          <div className="w- with-stripes mr-3 inline-block h-3 w-3 rounded-sm bg-gradient-repeat-to-br from-gray-100 to-gray-800 align-middle" />
+          <div className="w- with-stripes mr-3 inline-block h-3 w-3 rounded-sm bg-gradient-repeat-to-br from-gray-200 to-gray-900 align-middle" />
           <span className="text-sm">
             Target: {percentFormatter.format(target.percent)} ({target.value} {target.unit})
           </span>
         </div>
       </div>
-      <div ref={chartRef} className="relative mt-4 h-2.5 rounded-sm bg-gray-600">
+      <div ref={chartRef} className="relative mt-4 h-2.5 rounded-sm bg-gray-700">
         <div
-          className="absolute h-full rounded-sm bg-purple-700"
+          className="absolute h-full rounded-sm bg-purple-800"
           style={{ width: `${current.percent * 100}%` }}
         />
         <div
-          className="with-stripes absolute left-1 top-1/2 h-1.5 -translate-y-1/2 transform rounded-md border border-black bg-gradient-repeat-to-br from-gray-100 to-gray-800"
+          className="with-stripes absolute left-1 top-1/2 h-1.5 -translate-y-1/2 transform rounded-md border border-black bg-gradient-repeat-to-br from-gray-200 to-gray-900"
           style={{ width: `${target.percent * 100}%` }}
         />
 
         {!onTarget && (
           <div
-            className="absolute top-1/2 h-4 w-px -translate-y-1/2 transform bg-red-500"
+            className="absolute top-1/2 h-4 w-px -translate-y-1/2 transform bg-red-600"
             style={{
               left: `${current.percent * 100}%`,
             }}
           >
             <div
               className={classnames({
-                'absolute left-1/2 top-full mt-2.5 -translate-y-1/2 transform whitespace-nowrap text-xs text-red-500':
+                'absolute left-1/2 top-full mt-2.5 -translate-y-1/2 transform whitespace-nowrap text-xs text-red-600':
                   true,
                 ...metStyles,
               })}
diff --git a/app/components/icon/component.stories.tsx b/app/components/icon/component.stories.tsx
index d23f12fe5f..4a5da00741 100644
--- a/app/components/icon/component.stories.tsx
+++ b/app/components/icon/component.stories.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
+
 import { Story } from '@storybook/react/types-6-0';
+
 import DOWNLOAD_SVG from 'svgs/ui/download.svg';
+
 import Icon, { IconProps } from './component';
 
 export default {
@@ -12,6 +15,6 @@ const Template: Story<IconProps> = (args) => <Icon {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-  className: 'w-5 h-5 text-blue-500',
+  className: 'w-5 h-5 text-blue-600',
   icon: DOWNLOAD_SVG,
 };
diff --git a/app/components/info-button/component.tsx b/app/components/info-button/component.tsx
index f791cd2d67..2cb5e5f9dd 100644
--- a/app/components/info-button/component.tsx
+++ b/app/components/info-button/component.tsx
@@ -9,15 +9,15 @@ import INFO_SVG from 'svgs/ui/info.svg?sprite';
 
 const THEME = {
   primary: {
-    button: 'bg-blue-400',
-    icon: 'text-gray-800',
+    button: 'bg-blue-500',
+    icon: 'text-gray-900',
   },
   secondary: {
     button: 'bg-black',
     icon: 'text-white',
   },
   tertiary: {
-    button: 'bg-gray-400',
+    button: 'bg-gray-600',
     icon: 'text-white',
   },
 };
@@ -57,7 +57,7 @@ export const InfoButton: React.FC<InfoButtonProps> = ({
     interactive
     content={
       <div
-        className="rounded bg-white p-4 text-gray-500"
+        className="rounded bg-white p-4 text-gray-700"
         style={{
           boxShadow: '0 4px 20px rgba(0,0,0,0.25)',
         }}
diff --git a/app/components/loading-more/component.tsx b/app/components/loading-more/component.tsx
index 6cadc4f7cb..735060f671 100644
--- a/app/components/loading-more/component.tsx
+++ b/app/components/loading-more/component.tsx
@@ -14,7 +14,7 @@ export const LoadingMore: React.FC<LoadingMoreProps> = ({ visible = false }: Loa
         className={cx({
           'opacity-100': visible,
           'opacity-0': !visible,
-          'pointer-events-none absolute bottom-0 left-0 z-20 w-full bg-gray-400 text-center font-heading text-xs uppercase transition':
+          'pointer-events-none absolute bottom-0 left-0 z-20 w-full bg-gray-100 text-center font-heading text-xs uppercase transition':
             true,
         })}
         transition={{
diff --git a/app/components/loading/component.stories.tsx b/app/components/loading/component.stories.tsx
index 2ef6670fc1..3231c539c1 100644
--- a/app/components/loading/component.stories.tsx
+++ b/app/components/loading/component.stories.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
+
 import { Story } from '@storybook/react/types-6-0';
+
 import Loading from './component';
 import { LoadingProps } from './types';
 
@@ -12,6 +14,6 @@ const Template: Story<LoadingProps> = (args) => <Loading {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-  className: 'w-5 h-5 text-blue-500',
+  className: 'w-5 h-5 text-blue-600',
   visible: true,
 };
diff --git a/app/components/map/controls/fit-bounds/component.tsx b/app/components/map/controls/fit-bounds/component.tsx
index 7226a138d1..520f64d9ff 100644
--- a/app/components/map/controls/fit-bounds/component.tsx
+++ b/app/components/map/controls/fit-bounds/component.tsx
@@ -31,8 +31,8 @@ export const FitBoundsControl = ({
     <button
       aria-label="fit-bounds"
       className={cx({
-        'mb-0.5 rounded-4xl bg-black px-0.5 py-1 text-white focus:outline-none': true,
-        'hover:bg-gray-700 active:bg-gray-600': !!bounds,
+        'mb-0.5 rounded-[40px] bg-black px-0.5 py-1 text-white focus:outline-none': true,
+        'hover:bg-gray-800 active:bg-gray-700': !!bounds,
         'cursor-default opacity-50': !bounds,
         [className]: !!className,
       })}
diff --git a/app/components/map/controls/zoom/component.tsx b/app/components/map/controls/zoom/component.tsx
index 6cf0d98050..c65bcc920a 100644
--- a/app/components/map/controls/zoom/component.tsx
+++ b/app/components/map/controls/zoom/component.tsx
@@ -2,9 +2,8 @@ import React, { useCallback } from 'react';
 
 import { ViewportProps } from 'react-map-gl';
 
-import cx from 'classnames';
-
 import Icon from 'components/icon';
+import { cn } from 'utils/cn';
 
 import ZOOM_IN_SVG from 'svgs/map/zoom-in.svg?sprite';
 import ZOOM_OUT_SVG from 'svgs/map/zoom-out.svg?sprite';
@@ -38,16 +37,16 @@ export const ZoomControl = ({ className, viewport, onZoomChange }: ZoomControlPr
 
   return (
     <div
-      className={cx({
+      className={cn({
         'inline-flex flex-col': true,
         [className]: !!className,
       })}
     >
       <button
         aria-label="zoom-in"
-        className={cx({
-          'mb-0.5 rounded-t-4xl bg-black p-0.5 text-white focus:outline-none': true,
-          'hover:bg-gray-700 active:bg-gray-600': zoom !== maxZoom,
+        className={cn({
+          'mb-0.5 rounded-t-full bg-black p-0.5 text-white focus:outline-none': true,
+          'hover:bg-gray-800 active:bg-gray-700': zoom !== maxZoom,
           'cursor-default opacity-50': zoom === maxZoom,
         })}
         type="button"
@@ -58,9 +57,9 @@ export const ZoomControl = ({ className, viewport, onZoomChange }: ZoomControlPr
       </button>
       <button
         aria-label="zoom-out"
-        className={cx({
-          'rounded-b-4xl bg-black p-0.5 text-white focus:outline-none': true,
-          'hover:bg-gray-700 active:bg-gray-600': zoom !== minZoom,
+        className={cn({
+          'rounded-b-full bg-black p-0.5 text-white focus:outline-none': true,
+          'hover:bg-gray-800 active:bg-gray-700': zoom !== minZoom,
           'cursor-default opacity-50': zoom === minZoom,
         })}
         type="button"
diff --git a/app/components/map/legend/component.stories.tsx b/app/components/map/legend/component.stories.tsx
index 50761445d8..3b6fc5d468 100644
--- a/app/components/map/legend/component.stories.tsx
+++ b/app/components/map/legend/component.stories.tsx
@@ -45,13 +45,13 @@ const Template: Story<LegendProps> = (args) => {
               />
             )}
             {type === 'basic' && (
-              <LegendTypeBasic className="text-sm text-gray-300" items={items} />
+              <LegendTypeBasic className="text-sm text-gray-400" items={items} />
             )}
             {type === 'choropleth' && (
-              <LegendTypeChoropleth className="text-sm text-gray-300" items={items} />
+              <LegendTypeChoropleth className="text-sm text-gray-400" items={items} />
             )}
             {type === 'gradient' && (
-              <LegendTypeGradient className={{ box: 'text-sm text-gray-300' }} items={items} />
+              <LegendTypeGradient className={{ box: 'text-sm text-gray-400' }} items={items} />
             )}
           </LegendItem>
         );
diff --git a/app/components/map/legend/component.tsx b/app/components/map/legend/component.tsx
index 174c35de6a..54374fbc2f 100644
--- a/app/components/map/legend/component.tsx
+++ b/app/components/map/legend/component.tsx
@@ -53,7 +53,7 @@ export const Legend: React.FC<LegendProps> = ({
         className="relative flex w-full items-center space-x-2 px-5 py-3 font-heading text-xs uppercase text-white focus:outline-none"
         onClick={onToggleOpen}
       >
-        <Icon icon={LEGEND_SVG} className="h-4 w-4 text-gray-300" />
+        <Icon icon={LEGEND_SVG} className="h-4 w-4 text-gray-400" />
         <span>Legend</span>
 
         <Icon
@@ -76,7 +76,7 @@ export const Legend: React.FC<LegendProps> = ({
         >
           <div className="pointer-events-none absolute left-0 top-0 z-10 h-3 w-full bg-gradient-to-b from-black via-black" />
           <div className="overflow-y-auto overflow-x-hidden">
-            <div className="divide-y divide-gray-600 divide-opacity-50 py-2">
+            <div className="divide-y divide-gray-700 divide-opacity-50 py-2">
               {!!sortable && (
                 <SortableList sortable={sortable} onChangeOrder={onChangeOrder}>
                   {children}
diff --git a/app/components/map/legend/item/component.tsx b/app/components/map/legend/item/component.tsx
index 2fa98812aa..4b69455656 100644
--- a/app/components/map/legend/item/component.tsx
+++ b/app/components/map/legend/item/component.tsx
@@ -90,7 +90,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
             className={cn({
               'font-heading text-sm': true,
               'text-white': theme === 'dark' || !theme,
-              'text-gray-700': theme === 'light',
+              'text-gray-800': theme === 'light',
             })}
           >
             {name}
@@ -101,7 +101,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
           <button
             aria-label="drag"
             type="button"
-            className="cursor-pointer text-gray-400 hover:text-white"
+            className="cursor-pointer text-gray-100 hover:text-white"
             {...listeners}
             {...attributes}
           >
@@ -117,7 +117,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
                 placement="top"
                 trigger={openOpacity ? 'manual' : 'mouseenter focus'}
                 content={
-                  <div className="rounded bg-white p-2 text-gray-500">
+                  <div className="rounded bg-white p-2 text-gray-600">
                     Opacity ({format(opacity)})
                   </div>
                 }
@@ -135,7 +135,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
                       setOpenOpacity(false);
                     }}
                     content={
-                      <div className="w-60 rounded bg-white px-6 pb-4 pt-1.5 text-gray-500">
+                      <div className="w-60 rounded bg-white px-6 pb-4 pt-1.5 text-gray-600">
                         <Slider
                           labelRef={null}
                           theme="dark-small"
@@ -156,7 +156,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
                       type="button"
                       className={cn({
                         'flex h-5 w-5 items-center justify-center text-white': true,
-                        'text-gray-300': opacity !== 1,
+                        'text-gray-400': opacity !== 1,
                       })}
                     >
                       <Icon className="h-4 w-4 pt-px" icon={OPACITY_SVG} />
@@ -172,7 +172,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
               <Tooltip
                 arrow
                 placement="top"
-                content={<div className="rounded bg-white p-2 text-gray-500">Visibility</div>}
+                content={<div className="rounded bg-white p-2 text-gray-600">Visibility</div>}
               >
                 <button
                   aria-label="manage-visibility"
@@ -180,7 +180,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
                   onClick={onChangeVisibility}
                   className={cn({
                     'flex h-5 w-5 items-center justify-center text-white': true,
-                    'text-gray-300': !visibility,
+                    'text-gray-400': !visibility,
                   })}
                 >
                   <Icon className="h-4 w-4" icon={visibility ? SHOW_SVG : HIDE_SVG} />
@@ -191,7 +191,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
         </div>
       </header>
 
-      <div className="text-sm text-gray-300">{description}</div>
+      <div className="text-sm text-gray-400">{description}</div>
 
       {validChildren && <div className="mt-2.5">{children}</div>}
     </div>
diff --git a/app/components/map/legend/mock.tsx b/app/components/map/legend/mock.tsx
index 599ec8c6d1..22304c58dc 100644
--- a/app/components/map/legend/mock.tsx
+++ b/app/components/map/legend/mock.tsx
@@ -90,21 +90,21 @@ const ITEMS = [
   {
     id: 'XXX',
     name: 'Included areas',
-    icon: <Icon icon={HEXAGON_SVG} className="mt-1 h-3.5 w-3.5 text-purple-500" />,
+    icon: <Icon icon={HEXAGON_SVG} className="mt-1 h-3.5 w-3.5 text-purple-600" />,
     description:
       'Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus minus eligendi doloremque unde, atque maxime dolore officiis quia architecto fugiat, dolorem animi vel! Velit minus facere maxime consequuntur iure. Nisi!',
   },
   {
     id: 'YYY',
     name: 'All features',
-    icon: <div className="mt-1 h-3 w-3 rounded bg-blue-500" />,
+    icon: <div className="mt-1 h-3 w-3 rounded bg-blue-600" />,
     description:
       'Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus minus eligendi doloremque unde, atque maxime.',
   },
   {
     id: 'ZZZ',
     name: 'Protected areas',
-    icon: <div className="mt-1 h-3 w-3 rounded bg-pink-500" />,
+    icon: <div className="mt-1 h-3 w-3 rounded bg-pink-600" />,
     description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
   },
   {
diff --git a/app/components/map/legend/types/matrix/component.tsx b/app/components/map/legend/types/matrix/component.tsx
index 546993cc25..da95f18b02 100644
--- a/app/components/map/legend/types/matrix/component.tsx
+++ b/app/components/map/legend/types/matrix/component.tsx
@@ -49,7 +49,7 @@ export const LegendTypeMatrix: React.FC<LegendTypeMatrixProps> = ({
                 className="absolute flex h-px items-center space-x-1 leading-none"
                 style={{ bottom: `${(100 / 11) * 2}%` }}
               >
-                <span className="relative top-px block h-px w-1 bg-gray-300" />
+                <span className="relative top-px block h-px w-1 bg-gray-400" />
                 <span className="relative block -rotate-45 transform">
                   <span>10</span>
                 </span>
@@ -58,7 +58,7 @@ export const LegendTypeMatrix: React.FC<LegendTypeMatrixProps> = ({
                 className="absolute flex h-px items-center space-x-1 leading-none"
                 style={{ bottom: `${(100 / 11) * 6}%` }}
               >
-                <span className="relative top-px block h-px w-1 bg-gray-300" />
+                <span className="relative top-px block h-px w-1 bg-gray-400" />
                 <span className="relative block -rotate-45 transform">
                   <span>50</span>
                 </span>
@@ -67,7 +67,7 @@ export const LegendTypeMatrix: React.FC<LegendTypeMatrixProps> = ({
                 className="absolute flex h-px items-center space-x-1 leading-none"
                 style={{ bottom: '100%' }}
               >
-                <span className="relative top-px block h-px w-1 bg-gray-300" />
+                <span className="relative top-px block h-px w-1 bg-gray-400" />
                 <span className="relative block -rotate-45 transform">
                   <span>100</span>
                 </span>
@@ -79,7 +79,7 @@ export const LegendTypeMatrix: React.FC<LegendTypeMatrixProps> = ({
                 className="absolute flex h-px transform items-center space-x-1 leading-none"
                 style={{ bottom: `${100 - (100 / 11) * 2}%` }}
               >
-                <span className="relative top-px block h-px w-1 bg-gray-300" />
+                <span className="relative top-px block h-px w-1 bg-gray-400" />
                 <span className="relative block -rotate-180 transform">
                   <span className="relative block rotate-45 transform">10</span>
                 </span>
@@ -88,7 +88,7 @@ export const LegendTypeMatrix: React.FC<LegendTypeMatrixProps> = ({
                 className="absolute flex h-px transform items-center space-x-1 leading-none"
                 style={{ bottom: `${100 - (100 / 11) * 6}%` }}
               >
-                <span className="relative top-px block h-px w-1 bg-gray-300" />
+                <span className="relative top-px block h-px w-1 bg-gray-400" />
                 <span className="relative block -rotate-180 transform">
                   <span className="relative block rotate-45 transform">50</span>
                 </span>
@@ -97,7 +97,7 @@ export const LegendTypeMatrix: React.FC<LegendTypeMatrixProps> = ({
                 className="absolute flex h-px transform items-center space-x-1 leading-none"
                 style={{ bottom: '0%' }}
               >
-                <span className="relative top-px block h-px w-1 bg-gray-300" />
+                <span className="relative top-px block h-px w-1 bg-gray-400" />
                 <span className="relative block -rotate-180 transform">
                   <span className="relative block rotate-45 transform">100</span>
                 </span>
diff --git a/app/components/modal/component.tsx b/app/components/modal/component.tsx
index d35fd42577..27ca0f5fe9 100644
--- a/app/components/modal/component.tsx
+++ b/app/components/modal/component.tsx
@@ -134,7 +134,7 @@ export const Modal: React.FC<ModalProps> = ({
                       <button
                         type="button"
                         onClick={onDismiss}
-                        className="absolute -top-4 right-4 flex items-center px-4 py-4 text-sm text-gray-300 hover:text-black focus:text-black"
+                        className="absolute -top-4 right-4 flex items-center px-4 py-4 text-sm text-gray-400 hover:text-black focus:text-black"
                       >
                         <span className="text-xs">Close</span>
                         <Icon icon={CLOSE_SVG} className="ml-2 inline-block h-3 w-3 text-black" />
diff --git a/app/components/progress-bar/component.tsx b/app/components/progress-bar/component.tsx
index 2090861ab8..b7b4528a58 100644
--- a/app/components/progress-bar/component.tsx
+++ b/app/components/progress-bar/component.tsx
@@ -18,9 +18,9 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({
         className: !!className,
       })}
     >
-      <div className="h-0.5 bg-gradient-to-r from-blue-400 to-purple-500 opacity-30" />
+      <div className="h-0.5 bg-gradient-to-r from-blue-500 to-purple-600 opacity-30" />
       <div
-        className="absolute bottom-0 h-0.5 max-w-full bg-gradient-to-r from-blue-400 to-purple-500"
+        className="absolute bottom-0 h-0.5 max-w-full bg-gradient-to-r from-blue-500 to-purple-600"
         style={{ width: `${progress}%` }}
       />
     </div>
diff --git a/app/components/scenarios/blm-chart/component.tsx b/app/components/scenarios/blm-chart/component.tsx
index 5e3c99b470..7daf371db4 100644
--- a/app/components/scenarios/blm-chart/component.tsx
+++ b/app/components/scenarios/blm-chart/component.tsx
@@ -188,7 +188,7 @@ export const BlmChart: React.FC<BlmChartProps> = ({ data }: BlmChartProps) => {
                 yScale(yDomain[1]) + 0.3 * (yScale(yDomain[0]) - yScale(yDomain[1]))
               })`}
             >
-              <text textAnchor="end" className="text-right text-xs uppercase text-gray-600">
+              <text textAnchor="end" className="text-right text-xs uppercase text-gray-700">
                 <tspan x={Y_AXIS_WIDTH} y="0">
                   Boundary
                 </tspan>
@@ -220,7 +220,7 @@ export const BlmChart: React.FC<BlmChartProps> = ({ data }: BlmChartProps) => {
                 yScale(yDomain[0]) + X_AXIS_HEIGHT
               })`}
             >
-              <text x="0" y="0" textAnchor="middle" className="text-xs uppercase text-gray-600">
+              <text x="0" y="0" textAnchor="middle" className="text-xs uppercase text-gray-700">
                 Cost
               </text>
             </g>
@@ -282,7 +282,7 @@ export const BlmChart: React.FC<BlmChartProps> = ({ data }: BlmChartProps) => {
                     <div
                       className={classnames({
                         'h-full w-full rounded-2xl bg-white bg-contain': true,
-                        'border-2 border-gray-800': !isBlm,
+                        'border-2 border-gray-900': !isBlm,
                         'border-2 border-primary-500': isBlm,
                       })}
                       style={{ backgroundImage: `url(${thumbnail})` }}
diff --git a/app/components/scenarios/item/component.tsx b/app/components/scenarios/item/component.tsx
index 18fc2f1c1d..d91163e448 100644
--- a/app/components/scenarios/item/component.tsx
+++ b/app/components/scenarios/item/component.tsx
@@ -20,11 +20,11 @@ const SCENARIO_STATES = {
   },
   'run-failure': {
     text: 'Fail Running Scenario',
-    styles: 'text-red-500',
+    styles: 'text-red-600',
   },
   'run-done': {
     text: 'Run Scenario',
-    styles: 'text-green-500',
+    styles: 'text-green-600',
   },
   'calibration-running': {
     text: 'Running Calibration',
@@ -32,7 +32,7 @@ const SCENARIO_STATES = {
   },
   'calibration-failure': {
     text: 'Fail Running Calibration',
-    styles: 'text-red-500',
+    styles: 'text-red-600',
   },
   'pa-running': {
     text: 'Running PA percentage',
@@ -40,7 +40,7 @@ const SCENARIO_STATES = {
   },
   'pa-failure': {
     text: 'Fail PA percentage',
-    styles: 'text-red-500',
+    styles: 'text-red-600',
   },
   'pu-running': {
     text: 'Running PU inclusion',
@@ -48,7 +48,7 @@ const SCENARIO_STATES = {
   },
   'pu-failure': {
     text: 'Fail PU inclusion',
-    styles: 'text-red-500',
+    styles: 'text-red-600',
   },
   'features-running': {
     text: 'Running Features',
@@ -56,7 +56,7 @@ const SCENARIO_STATES = {
   },
   'features-failure': {
     text: 'Fail Features',
-    styles: 'text-red-500',
+    styles: 'text-red-600',
   },
   'clone-running': {
     text: 'Running cloning',
@@ -64,11 +64,11 @@ const SCENARIO_STATES = {
   },
   'clone-failure': {
     text: 'Fail cloning scenario',
-    styles: 'text-red-500',
+    styles: 'text-red-600',
   },
   draft: {
     text: 'Edited',
-    styles: 'text-gray-400',
+    styles: 'text-gray-100',
   },
 };
 
@@ -189,7 +189,7 @@ export const Item: React.FC<ItemProps> = ({
       >
         <div
           className={cx({
-            'flex flex-grow flex-col rounded-l-3xl bg-gray-700 pl-8': true,
+            'flex flex-grow flex-col rounded-l-3xl bg-gray-800 pl-8': true,
             'rounded-bl-none': settings,
           })}
         >
@@ -199,7 +199,7 @@ export const Item: React.FC<ItemProps> = ({
                 <div className="flex flex-row items-center">
                   {warnings && (
                     <div className="relative mr-5 flex h-10 w-10 items-center rounded-full border border-solid border-white">
-                      <div className="absolute -right-1 -top-1 h-4 w-4 rounded-full border-4 border-solid border-gray-700 bg-red-500" />
+                      <div className="absolute -right-1 -top-1 h-4 w-4 rounded-full border-4 border-solid border-gray-800 bg-red-600" />
                       <Icon className="h-10 w-10" icon={WARNING_SVG} />
                     </div>
                   )}
@@ -210,13 +210,13 @@ export const Item: React.FC<ItemProps> = ({
                         arrow
                         placement="top"
                         content={
-                          <div className="rounded bg-white p-2 text-center text-xs text-gray-500">
+                          <div className="rounded bg-white p-2 text-center text-xs text-gray-600">
                             <div>{lock.displayName || lock.email}</div>
                             <div>is editing this scenario</div>
                           </div>
                         }
                       >
-                        <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gray-500">
+                        <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gray-600">
                           <Icon className="relative w-3 text-white" icon={LOCK_SVG} />
                         </div>
                       </Tooltip>
@@ -279,7 +279,7 @@ export const Item: React.FC<ItemProps> = ({
           type="button"
           onClick={onEdit}
           className={cx({
-            'flex-column flex h-full items-center rounded-r-3xl bg-gray-700 px-8': true,
+            'flex-column flex h-full items-center rounded-r-3xl bg-gray-800 px-8': true,
             'text-primary-500 transition-colors hover:bg-primary-500 hover:text-black focus:bg-primary-300 focus:text-black focus:outline-none':
               true,
             'rounded-br-none': settings,
diff --git a/app/components/scenarios/item/settings/component.tsx b/app/components/scenarios/item/settings/component.tsx
index cd6d430338..eace4d9ac6 100644
--- a/app/components/scenarios/item/settings/component.tsx
+++ b/app/components/scenarios/item/settings/component.tsx
@@ -23,7 +23,7 @@ export const Item: React.FC<ItemSettingsProps> = ({
   const editable = useCanEditProject(pid);
 
   return (
-    <div className="w-full rounded-b-3xl bg-gray-700 px-8 pb-4 pt-6">
+    <div className="w-full rounded-b-3xl bg-gray-800 px-8 pb-4 pt-6">
       {children}
 
       <div className="mt-2.5 flex w-full justify-end space-x-1">
diff --git a/app/components/scroll-area/index.tsx b/app/components/scroll-area/index.tsx
index 7416e03302..308711d4bd 100644
--- a/app/components/scroll-area/index.tsx
+++ b/app/components/scroll-area/index.tsx
@@ -37,7 +37,7 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
diff --git a/app/components/search/index.tsx b/app/components/search/index.tsx
index bf0a690aea..cf74d2c4ad 100644
--- a/app/components/search/index.tsx
+++ b/app/components/search/index.tsx
@@ -36,7 +36,7 @@ export const Search = ({ theme = 'dark', size = 'base', ...rest }: SearchProps)
 
   return (
     <div
-      className={cn('relative flex w-full border-b border-gray-600', {
+      className={cn('relative flex w-full border-b border-gray-700', {
         [THEME[theme]]: true,
         [SIZES[size]]: true,
       })}
@@ -44,7 +44,7 @@ export const Search = ({ theme = 'dark', size = 'base', ...rest }: SearchProps)
       <Icon
         icon={SEARCH_SVG}
         className={cn({
-          'absolute left-1 top-1/2 h-4.5 w-4.5 -translate-y-1/2 transform': true,
+          'absolute left-1 top-1/2 h-4 w-4 -translate-y-1/2 transform': true,
           [THEME[theme]]: true,
         })}
       />
@@ -55,7 +55,7 @@ export const Search = ({ theme = 'dark', size = 'base', ...rest }: SearchProps)
         placeholder={placeholder}
         type="search"
         className={cn(
-          'w-full truncate bg-transparent px-9 font-sans leading-4 placeholder-gray-300 placeholder-opacity-50 focus:outline-none',
+          'w-full truncate bg-transparent px-9 font-sans leading-4 placeholder-gray-400 placeholder-opacity-50 focus:outline-none',
           {
             [THEME[theme]]: true,
             [SIZES[size]]: true,
diff --git a/app/components/steps/component.tsx b/app/components/steps/component.tsx
index 7f9ac71a71..fd7a8c2100 100644
--- a/app/components/steps/component.tsx
+++ b/app/components/steps/component.tsx
@@ -8,8 +8,8 @@ export interface StepsProps {
 export const Steps: React.FC<StepsProps> = ({ step, length }: StepsProps) => (
   <div className="flex space-x-0.5 text-sm font-medium">
     <span className="text-white">{step}</span>
-    <span className="text-gray-400">/</span>
-    <span className="text-gray-400">{length}</span>
+    <span className="text-gray-100">/</span>
+    <span className="text-gray-100">{length}</span>
   </div>
 );
 
diff --git a/app/components/table/component.tsx b/app/components/table/component.tsx
index 3e86a4ffb9..a58bcbb41e 100644
--- a/app/components/table/component.tsx
+++ b/app/components/table/component.tsx
@@ -101,7 +101,7 @@ export const Table: React.FC<TableProps> = ({
             <tr
               key={row.id}
               className={cx({
-                'bg-gray-100 bg-opacity-50': !rowIsSelected && (rowIndex + 1) % 2 === 0,
+                'bg-gray-200 bg-opacity-50': !rowIsSelected && (rowIndex + 1) % 2 === 0,
                 'bg-white': !rowIsSelected && (rowIndex + 1) % 2 === 1,
                 'bg-primary-300 bg-opacity-30': rowIsSelected,
               })}
diff --git a/app/components/table2/component.tsx b/app/components/table2/component.tsx
index 8d55720478..87a6862d1c 100644
--- a/app/components/table2/component.tsx
+++ b/app/components/table2/component.tsx
@@ -167,7 +167,7 @@ export const Table2: React.FC<Table2Props> = ({
             const { key: rowKey, ...restRowProps } = row.getRowProps();
 
             return (
-              <div key={rowKey} {...restRowProps} className="border-t border-gray-100 px-10">
+              <div key={rowKey} {...restRowProps} className="border-t border-gray-200 px-10">
                 {row.cells.map((cell) => {
                   const { key: cellKey, ...restCellProps } = cell.getCellProps();
 
diff --git a/app/components/table2/pagination/component.tsx b/app/components/table2/pagination/component.tsx
index 31a835972c..a5312cf1b9 100644
--- a/app/components/table2/pagination/component.tsx
+++ b/app/components/table2/pagination/component.tsx
@@ -57,7 +57,7 @@ export const Table2Pagination: React.FC<Table2PaginationProps> = ({
           previousClassName="hidden"
           nextClassName="hidden"
           pageClassName="text-sm px-1.5 py-0.5 rounded-md"
-          activeClassName="bg-gray-100"
+          activeClassName="bg-gray-200"
           breakLabel="..."
           pageCount={pageCount}
           forcePage={pageIndex}
diff --git a/app/components/tabs/component.tsx b/app/components/tabs/component.tsx
index 0019baf91e..402243eb1a 100644
--- a/app/components/tabs/component.tsx
+++ b/app/components/tabs/component.tsx
@@ -37,7 +37,7 @@ export const Tabs: React.FC<TabsProps> = ({ items = [], selected, onSelected }:
           >
             {tab.name}
             {/* {tab.warning && (
-              <div className="absolute w-2 h-2 bg-yellow-500 rounded-full top-3 -right-3" />
+              <div className="absolute w-2 h-2 bg-yellow-600 rounded-full top-3 -right-3" />
             )} */}
 
             {tab.id === selected && tab.status !== 'disabled' && (
diff --git a/app/components/tag/component.stories.tsx b/app/components/tag/component.stories.tsx
index 40da493a0c..bb868c9e8c 100644
--- a/app/components/tag/component.stories.tsx
+++ b/app/components/tag/component.stories.tsx
@@ -22,7 +22,7 @@ Default.args = {
 export const Yellow = Template.bind({});
 Yellow.args = {
   children: 'Species',
-  className: 'text-black bg-yellow-300',
+  className: 'text-black bg-yellow-400',
 };
 
 export const Blue = Template.bind({});
diff --git a/app/components/tag/component.tsx b/app/components/tag/component.tsx
index 9eff63b2a0..238a99b977 100644
--- a/app/components/tag/component.tsx
+++ b/app/components/tag/component.tsx
@@ -12,7 +12,7 @@ export const Tag: React.FC<TagProps> = ({ children, className }: TagProps) => (
     className={cx({
       'relative inline-flex rounded': true,
       [`${className}`]: !!className,
-      'bg-gray-200 text-black': !className,
+      'bg-gray-300 text-black': !className,
     })}
   >
     <div
diff --git a/app/components/toast/component.tsx b/app/components/toast/component.tsx
index df9f3d2340..4e72d000bb 100644
--- a/app/components/toast/component.tsx
+++ b/app/components/toast/component.tsx
@@ -18,23 +18,23 @@ import { ToastProps, ToastTheme } from './types';
 const THEME: ToastTheme = {
   info: {
     icon: INFO_SVG,
-    bg: 'from-blue-400 to-blue-700',
-    hoverBg: 'from-blue-100 to-blue-400',
+    bg: 'from-blue-500 to-blue-800',
+    hoverBg: 'from-blue-200 to-blue-500',
   },
   success: {
     icon: SUCCESS_SVG,
-    bg: 'from-green-400 to-green-700',
-    hoverBg: 'from-green-100 to-green-400',
+    bg: 'from-green-500 to-green-800',
+    hoverBg: 'from-green-200 to-green-500',
   },
   warning: {
     icon: WARNING_SVG,
-    bg: 'from-yellow-400 to-yellow-700',
-    hoverBg: 'from-yellow-100 to-yellow-400',
+    bg: 'from-yellow-500 to-yellow-800',
+    hoverBg: 'from-yellow-200 to-yellow-500',
   },
   error: {
     icon: ERROR_SVG,
-    bg: 'from-red-400 to-red-700',
-    hoverBg: 'from-red-100 to-red-400',
+    bg: 'from-red-1000 to-red-800',
+    hoverBg: 'from-red-200 to-red-1000',
   },
 };
 
@@ -87,7 +87,7 @@ export const Toast: React.FC<ToastProps> = ({
         })}
       >
         <div
-          className="flex w-full rounded-2xl bg-white p-2 text-gray-500 shadow-md transition hover:ring-4 hover:ring-white hover:ring-opacity-40"
+          className="flex w-full rounded-2xl bg-white p-2 text-gray-600 shadow-md transition hover:ring-4 hover:ring-white hover:ring-opacity-40"
           onMouseEnter={() => {
             controls.stop();
           }}
diff --git a/app/components/tooltip/component.stories.tsx b/app/components/tooltip/component.stories.tsx
index fc55ca9463..9ca4fbdf61 100644
--- a/app/components/tooltip/component.stories.tsx
+++ b/app/components/tooltip/component.stories.tsx
@@ -18,7 +18,7 @@ const Template: Story<TooltipProps> = (args: TooltipProps) => (
       {...args}
       arrow
       content={
-        <div className="rounded bg-white px-2 py-1 text-gray-500">
+        <div className="rounded bg-white px-2 py-1 text-gray-600">
           <span>Tooltip</span>
         </div>
       }
@@ -32,7 +32,7 @@ const Template: Story<TooltipProps> = (args: TooltipProps) => (
       trigger="click"
       placement="bottom-end"
       content={
-        <div className="rounded bg-white p-5 text-gray-500">
+        <div className="rounded bg-white p-5 text-gray-600">
           <h2 className="text-lg text-primary-500">Title</h2>
           <p>This is a content. We could have whateveryouwant</p>
         </div>
diff --git a/app/components/upload-tabs/index.tsx b/app/components/upload-tabs/index.tsx
index 31c29e7eaf..58e7c323a3 100644
--- a/app/components/upload-tabs/index.tsx
+++ b/app/components/upload-tabs/index.tsx
@@ -7,7 +7,7 @@ import { cn } from 'utils/cn';
 const BUTTON_COMMON_CLASSES =
   'relative py-2 transition after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:-translate-x-1/2 after:transform after:bg-primary-500 after:transition-all focus:outline-none text-black/85';
 const BUTTON_ACTIVE_CLASSES = 'after:w-full';
-const BUTTON_INACTIVE_CLASSES = 'text-gray-300';
+const BUTTON_INACTIVE_CLASSES = 'text-gray-400';
 
 type UploadFeatureMode = 'shapefile' | 'csv';
 
@@ -21,7 +21,7 @@ export const UploadFeatureTabs = ({
   const { CSVUpload } = useFeatureFlags();
 
   return (
-    <div className="flex w-full space-x-4 border-b border-gray-300 text-xs font-medium text-black">
+    <div className="flex w-full space-x-4 border-b border-gray-400 text-xs font-medium text-black">
       <button
         type="button"
         className={cn({
diff --git a/app/components/uploader/index.tsx b/app/components/uploader/index.tsx
index f9c287fd24..6a2be8af91 100644
--- a/app/components/uploader/index.tsx
+++ b/app/components/uploader/index.tsx
@@ -26,7 +26,7 @@ export const Uploader = ({
   return (
     <div className="mb-5 mt-3">
       <Button
-        className="dropzone w-full cursor-pointer py-1 hover:bg-gray-500"
+        className="dropzone w-full cursor-pointer py-1 hover:bg-gray-600"
         theme="secondary"
         size="base"
         disabled={disabled}
diff --git a/app/dist/output.css b/app/dist/output.css
new file mode 100644
index 0000000000..6f8a5c7fa3
--- /dev/null
+++ b/app/dist/output.css
@@ -0,0 +1,6604 @@
+/*
+! tailwindcss v3.3.1 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #E8E8E8;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+*/
+
+html {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: Basier Circle, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #A2A2A9;
+  /* 2 */
+}
+
+input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #A2A2A9;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #A2A2A9;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+  display: none;
+}
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary: 142.1 76.2% 36.3%;
+  --primary-foreground: 355.7 100% 97.3%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 142.1 76.2% 36.3%;
+  --radius: 0.3rem;
+}
+
+.dark {
+  --background: 20 14.3% 4.1%;
+  --foreground: 0 0% 95%;
+  --card: 24 9.8% 10%;
+  --card-foreground: 0 0% 95%;
+  --popover: 0 0% 9%;
+  --popover-foreground: 0 0% 95%;
+  --primary: 142.1 70.6% 45.3%;
+  --primary-foreground: 144.9 80.4% 10%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 15%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 85.7% 97.3%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 142.4 71.8% 29.2%;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Remove arrows from number inputs */
+
+input[type=number]::-webkit-inner-spin-button,
+  input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+input[type='search']::-webkit-search-decoration,
+  input[type='search']::-webkit-search-cancel-button,
+  input[type='search']::-webkit-search-results-button,
+  input[type='search']::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+input:-webkit-autofill,
+  input:-webkit-autofill:focus {
+  -webkit-transition: background-color 0s 60000s, color 0s 60000s;
+  transition: background-color 0s 60000s, color 0s 60000s;
+}
+
+input[data-autocompleted] {
+  background-color: transparent !important;
+}
+
+/* Poppins */
+
+@font-face {
+  font-family: 'Poppins';
+
+  src: url('/fonts/Poppins-Bold.woff2') format('woff2'),
+      url('/fonts/Poppins-Bold.woff') format('woff');
+
+  font-weight: bold;
+
+  font-style: normal;
+
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Poppins';
+
+  src: url('/fonts/Poppins-Medium.woff2') format('woff2'),
+      url('/fonts/Poppins-Medium.woff') format('woff');
+
+  font-weight: 500;
+
+  font-style: normal;
+
+  font-display: swap;
+}
+
+/* Basier Circle */
+
+@font-face {
+  font-family: 'Basier Circle';
+
+  src: url('/fonts/basiercircle-regular-webfont.woff2') format('woff2'),
+      url('/fonts/basiercircle-regular-webfont.woff') format('woff');
+
+  font-weight: 400;
+
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Basier Circle';
+
+  src: url('/fonts/basiercircle-medium-webfont.woff2') format('woff2'),
+      url('/fonts/basiercircle-medium-webfont.woff') format('woff');
+
+  font-weight: 500;
+
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Basier Circle';
+
+  src: url('/fonts/basiercircle-semibold-webfont.woff2') format('woff2'),
+      url('/fonts/basiercircle-semibold-webfont.woff') format('woff');
+
+  font-weight: 600;
+
+  font-style: normal;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(1 173 241 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(1 173 241 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+.container {
+  width: 100%;
+}
+
+@media (min-width: 0px) {
+  .container {
+    max-width: 0px;
+  }
+}
+
+@media (min-width: 420px) {
+  .container {
+    max-width: 420px;
+  }
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
+.form-input,.form-textarea,.form-select,.form-multiselect {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #fff;
+  border-color: #77777F;
+  border-width: 1px;
+  border-radius: 0px;
+  padding-top: 0.5rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-shadow: 0 0 #0000;
+}
+
+.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #3787FF;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  border-color: #3787FF;
+}
+
+.form-input::-moz-placeholder, .form-textarea::-moz-placeholder {
+  color: #77777F;
+  opacity: 1;
+}
+
+.form-input:-ms-input-placeholder, .form-textarea:-ms-input-placeholder {
+  color: #77777F;
+  opacity: 1;
+}
+
+.form-input::placeholder,.form-textarea::placeholder {
+  color: #77777F;
+  opacity: 1;
+}
+
+.form-input::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+.form-input::-webkit-date-and-time-value {
+  min-height: 1.5em;
+}
+
+.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.form-select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2377777F' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+  print-color-adjust: exact;
+}
+
+.form-checkbox,.form-radio {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  padding: 0;
+  print-color-adjust: exact;
+  display: inline-block;
+  vertical-align: middle;
+  background-origin: border-box;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  flex-shrink: 0;
+  height: 1rem;
+  width: 1rem;
+  color: #3787FF;
+  background-color: #fff;
+  border-color: #77777F;
+  border-width: 1px;
+  --tw-shadow: 0 0 #0000;
+}
+
+.form-checkbox {
+  border-radius: 0px;
+}
+
+.form-radio {
+  border-radius: 100%;
+}
+
+.form-checkbox:focus,.form-radio:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 2px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #3787FF;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+.form-checkbox:checked,.form-radio:checked {
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.form-checkbox:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+.form-radio:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+
+.form-checkbox:checked:hover,.form-checkbox:checked:focus,.form-radio:checked:hover,.form-radio:checked:focus {
+  border-color: transparent;
+  background-color: currentColor;
+}
+
+.form-checkbox:indeterminate {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.form-checkbox:indeterminate:hover,.form-checkbox:indeterminate:focus {
+  border-color: transparent;
+  background-color: currentColor;
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.pointer-events-auto {
+  pointer-events: auto;
+}
+
+.\!visible {
+  visibility: visible !important;
+}
+
+.visible {
+  visibility: visible;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+.static {
+  position: static;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.sticky {
+  position: sticky;
+}
+
+.inset-0 {
+  inset: 0px;
+}
+
+.inset-x-4 {
+  left: 1rem;
+  right: 1rem;
+}
+
+.-bottom-1 {
+  bottom: -0.25rem;
+}
+
+.-left-1 {
+  left: -0.25rem;
+}
+
+.-left-36 {
+  left: -9rem;
+}
+
+.-left-px {
+  left: -1px;
+}
+
+.-right-1 {
+  right: -0.25rem;
+}
+
+.-right-3 {
+  right: -0.75rem;
+}
+
+.-right-36 {
+  right: -9rem;
+}
+
+.-top-1 {
+  top: -0.25rem;
+}
+
+.-top-4 {
+  top: -1rem;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
+.bottom-1 {
+  bottom: 0.25rem;
+}
+
+.bottom-16 {
+  bottom: 4rem;
+}
+
+.bottom-28 {
+  bottom: 7rem;
+}
+
+.bottom-32 {
+  bottom: 8rem;
+}
+
+.bottom-full {
+  bottom: 100%;
+}
+
+.left-0 {
+  left: 0px;
+}
+
+.left-1 {
+  left: 0.25rem;
+}
+
+.left-1\/2 {
+  left: 50%;
+}
+
+.left-16 {
+  left: 4rem;
+}
+
+.left-3 {
+  left: 0.75rem;
+}
+
+.left-4 {
+  left: 1rem;
+}
+
+.left-full {
+  left: 100%;
+}
+
+.right-0 {
+  right: 0px;
+}
+
+.right-1 {
+  right: 0.25rem;
+}
+
+.right-12 {
+  right: 3rem;
+}
+
+.right-24 {
+  right: 6rem;
+}
+
+.right-4 {
+  right: 1rem;
+}
+
+.right-5 {
+  right: 1.25rem;
+}
+
+.right-6 {
+  right: 1.5rem;
+}
+
+.right-8 {
+  right: 2rem;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.top-1 {
+  top: 0.25rem;
+}
+
+.top-1\.5 {
+  top: 0.375rem;
+}
+
+.top-1\/2 {
+  top: 50%;
+}
+
+.top-12 {
+  top: 3rem;
+}
+
+.top-14 {
+  top: 3.5rem;
+}
+
+.top-2 {
+  top: 0.5rem;
+}
+
+.top-2\/4 {
+  top: 50%;
+}
+
+.top-3 {
+  top: 0.75rem;
+}
+
+.top-3\.5 {
+  top: 0.875rem;
+}
+
+.top-5 {
+  top: 1.25rem;
+}
+
+.top-6 {
+  top: 1.5rem;
+}
+
+.top-full {
+  top: 100%;
+}
+
+.top-px {
+  top: 1px;
+}
+
+.\!z-50 {
+  z-index: 50 !important;
+}
+
+.z-0 {
+  z-index: 0;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.z-20 {
+  z-index: 20;
+}
+
+.z-30 {
+  z-index: 30;
+}
+
+.z-40 {
+  z-index: 40;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+.col-span-1 {
+  grid-column: span 1 / span 1;
+}
+
+.col-span-5 {
+  grid-column: span 5 / span 5;
+}
+
+.col-span-7 {
+  grid-column: span 7 / span 7;
+}
+
+.row-auto {
+  grid-row: auto;
+}
+
+.m-0 {
+  margin: 0px;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.-mx-10 {
+  margin-left: -2.5rem;
+  margin-right: -2.5rem;
+}
+
+.-mx-5 {
+  margin-left: -1.25rem;
+  margin-right: -1.25rem;
+}
+
+.mx-10 {
+  margin-left: 2.5rem;
+  margin-right: 2.5rem;
+}
+
+.mx-12 {
+  margin-left: 3rem;
+  margin-right: 3rem;
+}
+
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.mx-8 {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-10 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.my-2\.5 {
+  margin-top: 0.625rem;
+  margin-bottom: 0.625rem;
+}
+
+.my-32 {
+  margin-top: 8rem;
+  margin-bottom: 8rem;
+}
+
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.\!mt-4 {
+  margin-top: 1rem !important;
+}
+
+.-ml-3 {
+  margin-left: -0.75rem;
+}
+
+.-ml-\[12mm\] {
+  margin-left: -12mm;
+}
+
+.-mt-1 {
+  margin-top: -0.25rem;
+}
+
+.-mt-\[1px\] {
+  margin-top: -1px;
+}
+
+.mb-0 {
+  margin-bottom: 0px;
+}
+
+.mb-0\.5 {
+  margin-bottom: 0.125rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
+.mb-14 {
+  margin-bottom: 3.5rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-2\.5 {
+  margin-bottom: 0.625rem;
+}
+
+.mb-20 {
+  margin-bottom: 5rem;
+}
+
+.mb-24 {
+  margin-bottom: 6rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
+.mb-9 {
+  margin-bottom: 2.25rem;
+}
+
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.ml-10 {
+  margin-left: 2.5rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.ml-2\.5 {
+  margin-left: 0.625rem;
+}
+
+.ml-3 {
+  margin-left: 0.75rem;
+}
+
+.ml-3\.5 {
+  margin-left: 0.875rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.ml-5 {
+  margin-left: 1.25rem;
+}
+
+.ml-6 {
+  margin-left: 1.5rem;
+}
+
+.ml-8 {
+  margin-left: 2rem;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.mr-0 {
+  margin-right: 0px;
+}
+
+.mr-0\.5 {
+  margin-right: 0.125rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mr-2\.5 {
+  margin-right: 0.625rem;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.mr-5 {
+  margin-right: 1.25rem;
+}
+
+.mr-8 {
+  margin-right: 2rem;
+}
+
+.mt-0 {
+  margin-top: 0px;
+}
+
+.mt-0\.5 {
+  margin-top: 0.125rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-1\.5 {
+  margin-top: 0.375rem;
+}
+
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
+.mt-12 {
+  margin-top: 3rem;
+}
+
+.mt-14 {
+  margin-top: 3.5rem;
+}
+
+.mt-16 {
+  margin-top: 4rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-2\.5 {
+  margin-top: 0.625rem;
+}
+
+.mt-20 {
+  margin-top: 5rem;
+}
+
+.mt-28 {
+  margin-top: 7rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-48 {
+  margin-top: 12rem;
+}
+
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mt-7 {
+  margin-top: 1.75rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.mt-9 {
+  margin-top: 2.25rem;
+}
+
+.box-border {
+  box-sizing: border-box;
+}
+
+.line-clamp-1 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.line-clamp-3 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.table {
+  display: table;
+}
+
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
+.h-0 {
+  height: 0px;
+}
+
+.h-0\.5 {
+  height: 0.125rem;
+}
+
+.h-1 {
+  height: 0.25rem;
+}
+
+.h-1\.5 {
+  height: 0.375rem;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.h-14 {
+  height: 3.5rem;
+}
+
+.h-16 {
+  height: 4rem;
+}
+
+.h-2 {
+  height: 0.5rem;
+}
+
+.h-2\.5 {
+  height: 0.625rem;
+}
+
+.h-24 {
+  height: 6rem;
+}
+
+.h-3 {
+  height: 0.75rem;
+}
+
+.h-3\.5 {
+  height: 0.875rem;
+}
+
+.h-32 {
+  height: 8rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-40 {
+  height: 10rem;
+}
+
+.h-44 {
+  height: 11rem;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
+.h-52 {
+  height: 13rem;
+}
+
+.h-56 {
+  height: 14rem;
+}
+
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-60 {
+  height: 15rem;
+}
+
+.h-7 {
+  height: 1.75rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-9 {
+  height: 2.25rem;
+}
+
+.h-96 {
+  height: 24rem;
+}
+
+.h-\[200px\] {
+  height: 200px;
+}
+
+.h-\[24px\] {
+  height: 24px;
+}
+
+.h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-px {
+  height: 1px;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.max-h-32 {
+  max-height: 8rem;
+}
+
+.max-h-64 {
+  max-height: 16rem;
+}
+
+.max-h-\[90vh\] {
+  max-height: 90vh;
+}
+
+.max-h-full {
+  max-height: 100%;
+}
+
+.min-h-0 {
+  min-height: 0px;
+}
+
+.min-h-\[160px\] {
+  min-height: 160px;
+}
+
+.min-h-\[200px\] {
+  min-height: 200px;
+}
+
+.min-h-\[274mm\] {
+  min-height: 274mm;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.w-1 {
+  width: 0.25rem;
+}
+
+.w-1\.5 {
+  width: 0.375rem;
+}
+
+.w-1\/2 {
+  width: 50%;
+}
+
+.w-1\/6 {
+  width: 16.666667%;
+}
+
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-11\/12 {
+  width: 91.666667%;
+}
+
+.w-14 {
+  width: 3.5rem;
+}
+
+.w-16 {
+  width: 4rem;
+}
+
+.w-2 {
+  width: 0.5rem;
+}
+
+.w-2\.5 {
+  width: 0.625rem;
+}
+
+.w-2\/3 {
+  width: 66.666667%;
+}
+
+.w-2\/6 {
+  width: 33.333333%;
+}
+
+.w-20 {
+  width: 5rem;
+}
+
+.w-24 {
+  width: 6rem;
+}
+
+.w-28 {
+  width: 7rem;
+}
+
+.w-3 {
+  width: 0.75rem;
+}
+
+.w-3\.5 {
+  width: 0.875rem;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
+.w-36 {
+  width: 9rem;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
+.w-4\/5 {
+  width: 80%;
+}
+
+.w-4\/6 {
+  width: 66.666667%;
+}
+
+.w-40 {
+  width: 10rem;
+}
+
+.w-44 {
+  width: 11rem;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-5\/12 {
+  width: 41.666667%;
+}
+
+.w-52 {
+  width: 13rem;
+}
+
+.w-56 {
+  width: 14rem;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-60 {
+  width: 15rem;
+}
+
+.w-7 {
+  width: 1.75rem;
+}
+
+.w-7\/12 {
+  width: 58.333333%;
+}
+
+.w-72 {
+  width: 18rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
+.w-9 {
+  width: 2.25rem;
+}
+
+.w-96 {
+  width: 24rem;
+}
+
+.w-\[20px\] {
+  width: 20px;
+}
+
+.w-\[210mm\] {
+  width: 210mm;
+}
+
+.w-\[220mm\] {
+  width: 220mm;
+}
+
+.w-\[2px\] {
+  width: 2px;
+}
+
+.w-\[3px\] {
+  width: 3px;
+}
+
+.w-\[44px\] {
+  width: 44px;
+}
+
+.w-\[550px\] {
+  width: 550px;
+}
+
+.w-\[calc\(100\%-25px\)\] {
+  width: calc(100% - 25px);
+}
+
+.w-auto {
+  width: auto;
+}
+
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-px {
+  width: 1px;
+}
+
+.w-screen {
+  width: 100vw;
+}
+
+.min-w-\[410px\] {
+  min-width: 410px;
+}
+
+.max-w-2xl {
+  max-width: 42rem;
+}
+
+.max-w-3xl {
+  max-width: 48rem;
+}
+
+.max-w-4xl {
+  max-width: 56rem;
+}
+
+.max-w-5xl {
+  max-width: 64rem;
+}
+
+.max-w-\[260px\] {
+  max-width: 260px;
+}
+
+.max-w-\[70px\] {
+  max-width: 70px;
+}
+
+.max-w-full {
+  max-width: 100%;
+}
+
+.max-w-lg {
+  max-width: 32rem;
+}
+
+.max-w-max {
+  max-width: -moz-max-content;
+  max-width: max-content;
+}
+
+.max-w-md {
+  max-width: 28rem;
+}
+
+.max-w-sm {
+  max-width: 24rem;
+}
+
+.max-w-xl {
+  max-width: 36rem;
+}
+
+.max-w-xs {
+  max-width: 20rem;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.origin-bottom {
+  transform-origin: bottom;
+}
+
+.-translate-x-1 {
+  --tw-translate-x: -0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-x-1\.5 {
+  --tw-translate-x: -0.375rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-x-2\/4 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-x-full {
+  --tw-translate-x: -100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-1 {
+  --tw-translate-y: -0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-1\.5 {
+  --tw-translate-y: -0.375rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-0 {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-1\/2 {
+  --tw-translate-x: 50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-3 {
+  --tw-translate-x: 0.75rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-1 {
+  --tw-translate-y: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-3 {
+  --tw-translate-y: 0.75rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-3\/4 {
+  --tw-translate-y: 75%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-rotate-180 {
+  --tw-rotate: -180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-rotate-45 {
+  --tw-rotate: -45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-0 {
+  --tw-rotate: 0deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-45 {
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-90 {
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+@keyframes banner {
+  0% {
+    transform: translateY(0%);
+  }
+
+  11.11% {
+    transform: translateY(0%);
+  }
+
+  22.22% {
+    transform: translateY(0%);
+  }
+
+  33.33% {
+    transform: translateY(-33.33%);
+  }
+
+  44.44% {
+    transform: translateY(-33.33%);
+  }
+
+  55.55% {
+    transform: translateY(-33.33%);
+  }
+
+  66.66% {
+    transform: translateY(-66.66%);
+  }
+
+  77.77% {
+    transform: translateY(-66.66%);
+  }
+
+  88.88% {
+    transform: translateY(-66.66%);
+  }
+
+  100% {
+    transform: translateY(0%);
+  }
+}
+
+.animate-banner {
+  animation: banner 6s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
+.animate-bounce {
+  animation: bounce 1s infinite;
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.cursor-auto {
+  cursor: auto;
+}
+
+.cursor-default {
+  cursor: default;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-text {
+  cursor: text;
+}
+
+.touch-none {
+  touch-action: none;
+}
+
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.select-all {
+  -webkit-user-select: all;
+     -moz-user-select: all;
+          user-select: all;
+}
+
+.resize {
+  resize: both;
+}
+
+.list-outside {
+  list-style-position: outside;
+}
+
+.list-decimal {
+  list-style-type: decimal;
+}
+
+.list-disc {
+  list-style-type: disc;
+}
+
+.appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.break-after-page {
+  -moz-column-break-after: page;
+       break-after: page;
+}
+
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-baseline {
+  align-items: baseline;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-items-start {
+  justify-items: start;
+}
+
+.gap-10 {
+  gap: 2.5rem;
+}
+
+.gap-16 {
+  gap: 4rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-2\.5 {
+  gap: 0.625rem;
+}
+
+.gap-20 {
+  gap: 5rem;
+}
+
+.gap-36 {
+  gap: 9rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.gap-5 {
+  gap: 1.25rem;
+}
+
+.gap-6 {
+  gap: 1.5rem;
+}
+
+.gap-x-10 {
+  -moz-column-gap: 2.5rem;
+       column-gap: 2.5rem;
+}
+
+.gap-x-36 {
+  -moz-column-gap: 9rem;
+       column-gap: 9rem;
+}
+
+.gap-x-44 {
+  -moz-column-gap: 11rem;
+       column-gap: 11rem;
+}
+
+.gap-x-5 {
+  -moz-column-gap: 1.25rem;
+       column-gap: 1.25rem;
+}
+
+.gap-x-9 {
+  -moz-column-gap: 2.25rem;
+       column-gap: 2.25rem;
+}
+
+.gap-y-10 {
+  row-gap: 2.5rem;
+}
+
+.gap-y-12 {
+  row-gap: 3rem;
+}
+
+.gap-y-2 {
+  row-gap: 0.5rem;
+}
+
+.gap-y-20 {
+  row-gap: 5rem;
+}
+
+.gap-y-6 {
+  row-gap: 1.5rem;
+}
+
+.gap-y-8 {
+  row-gap: 2rem;
+}
+
+.gap-y-9 {
+  row-gap: 2.25rem;
+}
+
+.-space-y-20 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(-5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(-5rem * var(--tw-space-y-reverse));
+}
+
+.space-x-0 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0px * var(--tw-space-x-reverse));
+  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-0\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.125rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.375rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.375rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-14 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(3.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(3.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-2\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.625rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.625rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-20 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(5rem * var(--tw-space-x-reverse));
+  margin-left: calc(5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(2rem * var(--tw-space-x-reverse));
+  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-0 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0px * var(--tw-space-y-reverse));
+}
+
+.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
+}
+
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+
+.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
+}
+
+.space-y-10 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
+}
+
+.space-y-12 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
+}
+
+.space-y-16 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(4rem * var(--tw-space-y-reverse));
+}
+
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
+.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
+}
+
+.space-y-20 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(5rem * var(--tw-space-y-reverse));
+}
+
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.space-y-5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
+}
+
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
+.space-y-9 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2.25rem * var(--tw-space-y-reverse));
+}
+
+.divide-x > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(1px * var(--tw-divide-x-reverse));
+  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+}
+
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+
+.divide-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
+}
+
+.divide-dashed > :not([hidden]) ~ :not([hidden]) {
+  border-style: dashed;
+}
+
+.divide-black > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-divide-opacity));
+}
+
+.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(242 242 242 / var(--tw-divide-opacity));
+}
+
+.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(162 162 169 / var(--tw-divide-opacity));
+}
+
+.divide-gray-600 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(119 119 127 / var(--tw-divide-opacity));
+}
+
+.divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(95 100 110 / var(--tw-divide-opacity));
+}
+
+.divide-opacity-20 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 0.2;
+}
+
+.divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 0.5;
+}
+
+.place-self-center {
+  place-self: center;
+}
+
+.self-center {
+  align-self: center;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.overflow-x-visible {
+  overflow-x: visible;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.whitespace-pre {
+  white-space: pre;
+}
+
+.break-words {
+  overflow-wrap: break-word;
+}
+
+.break-all {
+  word-break: break-all;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
+
+.rounded-\[20px\] {
+  border-radius: 20px;
+}
+
+.rounded-\[40px\] {
+  border-radius: 40px;
+}
+
+.rounded-\[4px\] {
+  border-radius: 4px;
+}
+
+.rounded-\[inherit\] {
+  border-radius: inherit;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.rounded-b-2xl {
+  border-bottom-right-radius: 1rem;
+  border-bottom-left-radius: 1rem;
+}
+
+.rounded-b-3xl {
+  border-bottom-right-radius: 1.5rem;
+  border-bottom-left-radius: 1.5rem;
+}
+
+.rounded-l-3xl {
+  border-top-left-radius: 1.5rem;
+  border-bottom-left-radius: 1.5rem;
+}
+
+.rounded-l-\[20px\] {
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+}
+
+.rounded-r-2xl {
+  border-top-right-radius: 1rem;
+  border-bottom-right-radius: 1rem;
+}
+
+.rounded-r-3xl {
+  border-top-right-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+}
+
+.rounded-r-\[20px\] {
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+}
+
+.rounded-t-2xl {
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+}
+
+.rounded-t-3xl {
+  border-top-left-radius: 1.5rem;
+  border-top-right-radius: 1.5rem;
+}
+
+.rounded-bl-none {
+  border-bottom-left-radius: 0px;
+}
+
+.rounded-br-lg {
+  border-bottom-right-radius: 0.5rem;
+}
+
+.rounded-br-none {
+  border-bottom-right-radius: 0px;
+}
+
+.rounded-tl-lg {
+  border-top-left-radius: 0.5rem;
+}
+
+.rounded-tl-xl {
+  border-top-left-radius: 0.75rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.border-4 {
+  border-width: 4px;
+}
+
+.border-\[1\.5px\] {
+  border-width: 1.5px;
+}
+
+.border-\[3px\] {
+  border-width: 3px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-l {
+  border-left-width: 1px;
+}
+
+.border-l-0 {
+  border-left-width: 0px;
+}
+
+.border-l-2 {
+  border-left-width: 2px;
+}
+
+.border-l-4 {
+  border-left-width: 4px;
+}
+
+.border-l-\[3px\] {
+  border-left-width: 3px;
+}
+
+.border-l-\[5px\] {
+  border-left-width: 5px;
+}
+
+.border-r-0 {
+  border-right-width: 0px;
+}
+
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-t-0 {
+  border-top-width: 0px;
+}
+
+.border-solid {
+  border-style: solid;
+}
+
+.border-dashed {
+  border-style: dashed;
+}
+
+.border-dotted {
+  border-style: dotted;
+}
+
+.\!border-none {
+  border-style: none !important;
+}
+
+.border-none {
+  border-style: none;
+}
+
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
+.border-blue-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(30 199 255 / var(--tw-border-opacity));
+}
+
+.border-blue-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(1 173 241 / var(--tw-border-opacity));
+}
+
+.border-blue-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(27 114 245 / var(--tw-border-opacity));
+}
+
+.border-blue-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(1 94 235 / var(--tw-border-opacity));
+}
+
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(242 242 242 / var(--tw-border-opacity));
+}
+
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(232 232 232 / var(--tw-border-opacity));
+}
+
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(196 196 196 / var(--tw-border-opacity));
+}
+
+.border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(162 162 169 / var(--tw-border-opacity));
+}
+
+.border-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(119 119 127 / var(--tw-border-opacity));
+}
+
+.border-gray-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(95 100 110 / var(--tw-border-opacity));
+}
+
+.border-gray-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(53 55 62 / var(--tw-border-opacity));
+}
+
+.border-gray-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(21 21 21 / var(--tw-border-opacity));
+}
+
+.border-green-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(3 214 194 / var(--tw-border-opacity));
+}
+
+.border-green-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(2 159 144 / var(--tw-border-opacity));
+}
+
+.border-primary-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(26 197 255 / var(--tw-border-opacity));
+}
+
+.border-primary-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 191 255 / var(--tw-border-opacity));
+}
+
+.border-purple-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(132 81 252 / var(--tw-border-opacity));
+}
+
+.border-red-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(242 92 71 / var(--tw-border-opacity));
+}
+
+.border-red-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 71 46 / var(--tw-border-opacity));
+}
+
+.border-red-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(207 42 20 / var(--tw-border-opacity));
+}
+
+.border-red-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(194 23 1 / var(--tw-border-opacity));
+}
+
+.border-transparent {
+  border-color: transparent;
+}
+
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
+.border-yellow-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 196 83 / var(--tw-border-opacity));
+}
+
+.border-yellow-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(253 185 68 / var(--tw-border-opacity));
+}
+
+.border-yellow-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(251 173 53 / var(--tw-border-opacity));
+}
+
+.border-l-transparent {
+  border-left-color: transparent;
+}
+
+.border-t-transparent {
+  border-top-color: transparent;
+}
+
+.border-opacity-20 {
+  --tw-border-opacity: 0.2;
+}
+
+.\!bg-primary-700 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(0 153 204 / var(--tw-bg-opacity)) !important;
+}
+
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.bg-black\/40 {
+  background-color: rgb(0 0 0 / 0.4);
+}
+
+.bg-blue-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(153 230 255 / var(--tw-bg-opacity));
+}
+
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 191 255 / var(--tw-bg-opacity));
+}
+
+.bg-blue-500\/25 {
+  background-color: rgb(0 191 255 / 0.25);
+}
+
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(1 173 241 / var(--tw-bg-opacity));
+}
+
+.bg-blue-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 135 255 / var(--tw-bg-opacity));
+}
+
+.bg-blue-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(27 114 245 / var(--tw-bg-opacity));
+}
+
+.bg-blue-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(1 94 235 / var(--tw-bg-opacity));
+}
+
+.bg-border {
+  background-color: hsl(var(--border));
+}
+
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(242 242 242 / var(--tw-bg-opacity));
+}
+
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(232 232 232 / var(--tw-bg-opacity));
+}
+
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(196 196 196 / var(--tw-bg-opacity));
+}
+
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(162 162 169 / var(--tw-bg-opacity));
+}
+
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+.bg-gray-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(119 119 127 / var(--tw-bg-opacity));
+}
+
+.bg-gray-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(95 100 110 / var(--tw-bg-opacity));
+}
+
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(53 55 62 / var(--tw-bg-opacity));
+}
+
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(21 21 21 / var(--tw-bg-opacity));
+}
+
+.bg-green-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 231 209 / var(--tw-bg-opacity));
+}
+
+.bg-green-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 214 194 / var(--tw-bg-opacity));
+}
+
+.bg-pink-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 61 202 / var(--tw-bg-opacity));
+}
+
+.bg-primary-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(77 210 255 / var(--tw-bg-opacity));
+}
+
+.bg-primary-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 204 255 / var(--tw-bg-opacity));
+}
+
+.bg-primary-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(26 197 255 / var(--tw-bg-opacity));
+}
+
+.bg-primary-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 249 254 / var(--tw-bg-opacity));
+}
+
+.bg-primary-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 191 255 / var(--tw-bg-opacity));
+}
+
+.bg-primary-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 153 204 / var(--tw-bg-opacity));
+}
+
+.bg-purple-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(132 81 252 / var(--tw-bg-opacity));
+}
+
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 175 164 / var(--tw-bg-opacity));
+}
+
+.bg-red-100\/50 {
+  background-color: rgb(255 191 183 / 0.5);
+}
+
+.bg-red-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(242 92 71 / var(--tw-bg-opacity));
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 215 128 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 202 66 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 196 83 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-500\/50 {
+  background-color: rgb(255 196 83 / 0.5);
+}
+
+.bg-yellow-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 185 68 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 173 53 / var(--tw-bg-opacity));
+}
+
+.bg-yellow-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 150 24 / var(--tw-bg-opacity));
+}
+
+.bg-opacity-0 {
+  --tw-bg-opacity: 0;
+}
+
+.bg-opacity-10 {
+  --tw-bg-opacity: 0.1;
+}
+
+.bg-opacity-20 {
+  --tw-bg-opacity: 0.2;
+}
+
+.bg-opacity-30 {
+  --tw-bg-opacity: 0.3;
+}
+
+.bg-opacity-50 {
+  --tw-bg-opacity: 0.5;
+}
+
+.bg-opacity-75 {
+  --tw-bg-opacity: 0.75;
+}
+
+.bg-opacity-90 {
+  --tw-bg-opacity: 0.9;
+}
+
+.bg-\[url\(\'\/images\/bg-community-projects\.png\'\)\] {
+  background-image: url('/images/bg-community-projects.png');
+}
+
+.bg-gradient-repeat-to-br {
+  background-image: repeating-linear-gradient(-45deg, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-tl {
+  background-image: linear-gradient(to top left, var(--tw-gradient-stops));
+}
+
+.from-\[\#01BDFE\] {
+  --tw-gradient-from: #01BDFE var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(1 189 254 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-black {
+  --tw-gradient-from: #000 var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-blue-200 {
+  --tw-gradient-from: #99E6FF var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(153 230 255 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-blue-500 {
+  --tw-gradient-from: #00BFFF var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(0 191 255 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-gray-200 {
+  --tw-gradient-from: #F2F2F2 var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(242 242 242 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-gray-800 {
+  --tw-gradient-from: #35373E var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(53 55 62 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-green-200 {
+  --tw-gradient-from: #8CF9EF var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(140 249 239 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-green-400 {
+  --tw-gradient-from: #03E7D1 var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(3 231 209 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-green-500 {
+  --tw-gradient-from: #03E4CE var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(3 228 206 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-purple-600 {
+  --tw-gradient-from: #AE72FF var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(174 114 255 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-red-200 {
+  --tw-gradient-from: #FFAFA4 var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(255 175 164 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-red-1000 {
+  --tw-gradient-from: #FF6D59 var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(255 109 89 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-white {
+  --tw-gradient-from: #fff var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-yellow-200 {
+  --tw-gradient-from: #FFDD8D var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(255 221 141 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-yellow-500 {
+  --tw-gradient-from: #FFC453 var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(255 196 83 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.via-black {
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), #000 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-gray-300 {
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to: rgb(232 232 232 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), #E8E8E8 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-gray-800 {
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to: rgb(53 55 62 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), #35373E var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-white {
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.to-\[\#843DC0\] {
+  --tw-gradient-to: #843DC0 var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+}
+
+.to-black {
+  --tw-gradient-to: #000 var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+}
+
+.to-blue-500 {
+  --tw-gradient-to: #00BFFF var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+}
+
+.to-blue-600 {
+  --tw-gradient-to: #01ADF1 var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+}
+
+.to-blue-800 {
+  --tw-gradient-to: #1B72F5 var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+}
+
+.to-gray-900 {
+  --tw-gradient-to: #151515 var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+}
+
+.to-green-500 {
+  --tw-gradient-to: #03E4CE var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+}
+
+.to-green-800 {
+  --tw-gradient-to: #02AD9D var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+}
+
+.to-purple-600 {
+  --tw-gradient-to: #AE72FF var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+}
+
+.to-red-1000 {
+  --tw-gradient-to: #FF6D59 var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+}
+
+.to-red-800 {
+  --tw-gradient-to: #CF2A14 var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+}
+
+.to-yellow-400 {
+  --tw-gradient-to: #FFCA42 var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+}
+
+.to-yellow-500 {
+  --tw-gradient-to: #FFC453 var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+}
+
+.to-yellow-800 {
+  --tw-gradient-to: #F79618 var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+}
+
+.bg-contain {
+  background-size: contain;
+}
+
+.bg-cover {
+  background-size: cover;
+}
+
+.bg-clip-text {
+  -webkit-background-clip: text;
+          background-clip: text;
+}
+
+.bg-center {
+  background-position: center;
+}
+
+.bg-right {
+  background-position: right;
+}
+
+.bg-right-bottom {
+  background-position: right bottom;
+}
+
+.bg-no-repeat {
+  background-repeat: no-repeat;
+}
+
+.fill-current {
+  fill: currentColor;
+}
+
+.fill-none {
+  fill: none;
+}
+
+.stroke-current {
+  stroke: currentColor;
+}
+
+.stroke-2 {
+  stroke-width: 2;
+}
+
+.stroke-\[1\.5px\] {
+  stroke-width: 1.5px;
+}
+
+.\!p-0 {
+  padding: 0px !important;
+}
+
+.p-0 {
+  padding: 0px;
+}
+
+.p-0\.5 {
+  padding: 0.125rem;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-10 {
+  padding: 2.5rem;
+}
+
+.p-14 {
+  padding: 3.5rem;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-2\.5 {
+  padding: 0.625rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-5 {
+  padding: 1.25rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.p-8 {
+  padding: 2rem;
+}
+
+.p-9 {
+  padding: 2.25rem;
+}
+
+.p-\[10px\] {
+  padding: 10px;
+}
+
+.p-\[1px\] {
+  padding: 1px;
+}
+
+.\!px-5 {
+  padding-left: 1.25rem !important;
+  padding-right: 1.25rem !important;
+}
+
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+.px-0\.5 {
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
+}
+
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
+.px-14 {
+  padding-left: 3.5rem;
+  padding-right: 3.5rem;
+}
+
+.px-16 {
+  padding-left: 4rem;
+  padding-right: 4rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
+.px-20 {
+  padding-left: 5rem;
+  padding-right: 5rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.px-36 {
+  padding-left: 9rem;
+  padding-right: 9rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.px-7 {
+  padding-left: 1.75rem;
+  padding-right: 1.75rem;
+}
+
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.px-9 {
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
+}
+
+.px-\[10px\] {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.px-\[1px\] {
+  padding-left: 1px;
+  padding-right: 1px;
+}
+
+.px-\[8\.73mm\] {
+  padding-left: 8.73mm;
+  padding-right: 8.73mm;
+}
+
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
+.py-11 {
+  padding-top: 2.75rem;
+  padding-bottom: 2.75rem;
+}
+
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.py-14 {
+  padding-top: 3.5rem;
+  padding-bottom: 3.5rem;
+}
+
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+
+.py-24 {
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+}
+
+.py-28 {
+  padding-top: 7rem;
+  padding-bottom: 7rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.py-32 {
+  padding-top: 8rem;
+  padding-bottom: 8rem;
+}
+
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.py-7 {
+  padding-top: 1.75rem;
+  padding-bottom: 1.75rem;
+}
+
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.py-\[0\.5px\] {
+  padding-top: 0.5px;
+  padding-bottom: 0.5px;
+}
+
+.py-\[13\.49mm\] {
+  padding-top: 13.49mm;
+  padding-bottom: 13.49mm;
+}
+
+.py-px {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
+.pb-10 {
+  padding-bottom: 2.5rem;
+}
+
+.pb-16 {
+  padding-bottom: 4rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pb-2\.5 {
+  padding-bottom: 0.625rem;
+}
+
+.pb-20 {
+  padding-bottom: 5rem;
+}
+
+.pb-24 {
+  padding-bottom: 6rem;
+}
+
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
+.pb-5 {
+  padding-bottom: 1.25rem;
+}
+
+.pb-6 {
+  padding-bottom: 1.5rem;
+}
+
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
+.pl-0 {
+  padding-left: 0px;
+}
+
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
+.pl-10 {
+  padding-left: 2.5rem;
+}
+
+.pl-14 {
+  padding-left: 3.5rem;
+}
+
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
+.pl-2\.5 {
+  padding-left: 0.625rem;
+}
+
+.pl-20 {
+  padding-left: 5rem;
+}
+
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+
+.pl-5 {
+  padding-left: 1.25rem;
+}
+
+.pl-6 {
+  padding-left: 1.5rem;
+}
+
+.pl-8 {
+  padding-left: 2rem;
+}
+
+.pl-9 {
+  padding-left: 2.25rem;
+}
+
+.pr-0 {
+  padding-right: 0px;
+}
+
+.pr-1 {
+  padding-right: 0.25rem;
+}
+
+.pr-10 {
+  padding-right: 2.5rem;
+}
+
+.pr-12 {
+  padding-right: 3rem;
+}
+
+.pr-16 {
+  padding-right: 4rem;
+}
+
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
+.pr-2\.5 {
+  padding-right: 0.625rem;
+}
+
+.pr-20 {
+  padding-right: 5rem;
+}
+
+.pr-28 {
+  padding-right: 7rem;
+}
+
+.pr-3 {
+  padding-right: 0.75rem;
+}
+
+.pr-32 {
+  padding-right: 8rem;
+}
+
+.pr-4 {
+  padding-right: 1rem;
+}
+
+.pr-5 {
+  padding-right: 1.25rem;
+}
+
+.pr-6 {
+  padding-right: 1.5rem;
+}
+
+.pr-8 {
+  padding-right: 2rem;
+}
+
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
+.pt-1\.5 {
+  padding-top: 0.375rem;
+}
+
+.pt-10 {
+  padding-top: 2.5rem;
+}
+
+.pt-11 {
+  padding-top: 2.75rem;
+}
+
+.pt-12 {
+  padding-top: 3rem;
+}
+
+.pt-14 {
+  padding-top: 3.5rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.pt-24 {
+  padding-top: 6rem;
+}
+
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
+.pt-3\.5 {
+  padding-top: 0.875rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.pt-44 {
+  padding-top: 11rem;
+}
+
+.pt-5 {
+  padding-top: 1.25rem;
+}
+
+.pt-6 {
+  padding-top: 1.5rem;
+}
+
+.pt-7 {
+  padding-top: 1.75rem;
+}
+
+.pt-8 {
+  padding-top: 2rem;
+}
+
+.pt-px {
+  padding-top: 1px;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.align-baseline {
+  vertical-align: baseline;
+}
+
+.align-top {
+  vertical-align: top;
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
+.font-heading {
+  font-family: Poppins;
+}
+
+.font-sans {
+  font-family: Basier Circle, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.text-7xl {
+  font-size: 4.5rem;
+  line-height: 1;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.text-xxs {
+  font-size: 0.625rem;
+  line-height: 0.75rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.lowercase {
+  text-transform: lowercase;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.leading-10 {
+  line-height: 2.5rem;
+}
+
+.leading-4 {
+  line-height: 1rem;
+}
+
+.leading-5 {
+  line-height: 1.25rem;
+}
+
+.leading-6 {
+  line-height: 1.5rem;
+}
+
+.leading-8 {
+  line-height: 2rem;
+}
+
+.leading-none {
+  line-height: 1;
+}
+
+.leading-normal {
+  line-height: 1.5;
+}
+
+.leading-relaxed {
+  line-height: 1.625;
+}
+
+.leading-tight {
+  line-height: 1.25;
+}
+
+.tracking-wide {
+  letter-spacing: 0.025em;
+}
+
+.tracking-wider {
+  letter-spacing: 0.05em;
+}
+
+.tracking-widest {
+  letter-spacing: 0.1em;
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-blue-300 {
+  --tw-text-opacity: 1;
+  color: rgb(30 199 255 / var(--tw-text-opacity));
+}
+
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(0 191 255 / var(--tw-text-opacity));
+}
+
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(1 173 241 / var(--tw-text-opacity));
+}
+
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(196 196 196 / var(--tw-text-opacity));
+}
+
+.text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(162 162 169 / var(--tw-text-opacity));
+}
+
+.text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity));
+}
+
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(119 119 127 / var(--tw-text-opacity));
+}
+
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(95 100 110 / var(--tw-text-opacity));
+}
+
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(53 55 62 / var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(21 21 21 / var(--tw-text-opacity));
+}
+
+.text-green-400 {
+  --tw-text-opacity: 1;
+  color: rgb(3 231 209 / var(--tw-text-opacity));
+}
+
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(3 214 194 / var(--tw-text-opacity));
+}
+
+.text-primary-400 {
+  --tw-text-opacity: 1;
+  color: rgb(26 197 255 / var(--tw-text-opacity));
+}
+
+.text-primary-500 {
+  --tw-text-opacity: 1;
+  color: rgb(0 191 255 / var(--tw-text-opacity));
+}
+
+.text-primary-600 {
+  --tw-text-opacity: 1;
+  color: rgb(0 172 230 / var(--tw-text-opacity));
+}
+
+.text-purple-600 {
+  --tw-text-opacity: 1;
+  color: rgb(174 114 255 / var(--tw-text-opacity));
+}
+
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(242 92 71 / var(--tw-text-opacity));
+}
+
+.text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(255 71 46 / var(--tw-text-opacity));
+}
+
+.text-red-800 {
+  --tw-text-opacity: 1;
+  color: rgb(207 42 20 / var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-white\/40 {
+  color: rgb(255 255 255 / 0.4);
+}
+
+.text-yellow-300 {
+  --tw-text-opacity: 1;
+  color: rgb(255 215 128 / var(--tw-text-opacity));
+}
+
+.text-yellow-400 {
+  --tw-text-opacity: 1;
+  color: rgb(255 202 66 / var(--tw-text-opacity));
+}
+
+.text-yellow-500 {
+  --tw-text-opacity: 1;
+  color: rgb(255 196 83 / var(--tw-text-opacity));
+}
+
+.text-yellow-600 {
+  --tw-text-opacity: 1;
+  color: rgb(253 185 68 / var(--tw-text-opacity));
+}
+
+.text-yellow-700 {
+  --tw-text-opacity: 1;
+  color: rgb(251 173 53 / var(--tw-text-opacity));
+}
+
+.text-opacity-0 {
+  --tw-text-opacity: 0;
+}
+
+.text-opacity-100 {
+  --tw-text-opacity: 1;
+}
+
+.text-opacity-20 {
+  --tw-text-opacity: 0.2;
+}
+
+.text-opacity-50 {
+  --tw-text-opacity: 0.5;
+}
+
+.text-opacity-75 {
+  --tw-text-opacity: 0.75;
+}
+
+.underline {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
+.placeholder-gray-400::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(196 196 196 / var(--tw-placeholder-opacity));
+}
+
+.placeholder-gray-400:-ms-input-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(196 196 196 / var(--tw-placeholder-opacity));
+}
+
+.placeholder-gray-400::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(196 196 196 / var(--tw-placeholder-opacity));
+}
+
+.placeholder-opacity-50::-moz-placeholder {
+  --tw-placeholder-opacity: 0.5;
+}
+
+.placeholder-opacity-50:-ms-input-placeholder {
+  --tw-placeholder-opacity: 0.5;
+}
+
+.placeholder-opacity-50::placeholder {
+  --tw-placeholder-opacity: 0.5;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
+.opacity-20 {
+  opacity: 0.2;
+}
+
+.opacity-25 {
+  opacity: 0.25;
+}
+
+.opacity-30 {
+  opacity: 0.3;
+}
+
+.opacity-40 {
+  opacity: 0.4;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-60 {
+  opacity: 0.6;
+}
+
+.opacity-75 {
+  opacity: 0.75;
+}
+
+.opacity-80 {
+  opacity: 0.8;
+}
+
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.ring-0 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-2 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-inset {
+  --tw-ring-inset: inset;
+}
+
+.ring-gray-100 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(162 162 169 / var(--tw-ring-opacity));
+}
+
+.ring-gray-600 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(119 119 127 / var(--tw-ring-opacity));
+}
+
+.ring-primary-400 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(26 197 255 / var(--tw-ring-opacity));
+}
+
+.ring-primary-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(0 191 255 / var(--tw-ring-opacity));
+}
+
+.ring-red-600 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(242 92 71 / var(--tw-ring-opacity));
+}
+
+.ring-offset-8 {
+  --tw-ring-offset-width: 8px;
+}
+
+.ring-offset-gray-800 {
+  --tw-ring-offset-color: #35373E;
+}
+
+.ring-offset-primary-500 {
+  --tw-ring-offset-color: #00BFFF;
+}
+
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.drop-shadow-blue {
+  --tw-drop-shadow: drop-shadow(1px 0px 3px #00BFFF);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.transition {
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-colors {
+  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-none {
+  transition-property: none;
+}
+
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+/* We want a blur effect without having a high opacity background, but we still want the
+  background to be visible for the browsers that don't support backdrop-filter, so we double the
+  background opacity. This can be tested on Firefox. */
+
+.bg-blur {
+  --tw-bg-opacity: 0.4;
+}
+
+@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
+  .bg-blur {
+    --tw-bg-opacity: 0.2;
+    -webkit-backdrop-filter: blur(4px);
+            backdrop-filter: blur(4px);
+  }
+}
+
+.touch-action-none {
+  touch-action: none;
+}
+
+.fill-none {
+  fill: none;
+}
+
+.with-stripes {
+  /* `--tw-gradient-from` is the background color and `--tw-gradient-to` is the 1px stripe line */
+  --tw-gradient-stops: var(--tw-gradient-from),
+      var(--tw-gradient-from) 0.125rem, var(--tw-gradient-to) 0.125rem,
+      var(--tw-gradient-to) 0.1875rem;
+}
+
+.preserve-3d {
+  transform-style: preserve-3d;
+}
+
+/* PRINT */
+
+@media print {
+  body {
+    -webkit-print-color-adjust: exact;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+/* FLICKING */
+
+.flicking-viewport{
+  position:relative;
+  overflow:hidden
+}
+
+.flicking-viewport:not(.vertical){
+  width:100%;
+  height:100%
+}
+
+.flicking-camera{
+  width:100%;
+  height:100%;
+  position:relative;
+  z-index:1;
+  white-space:nowrap;
+  will-change:transform
+}
+
+.flicking-camera>*{
+  display:inline-block;
+  white-space:normal;
+  vertical-align:top
+}
+
+.flicking-viewport.vertical,.flicking-viewport.vertical>.flicking-camera{
+  display:inline-block
+}
+
+.flicking-viewport.vertical.middle>.flicking-camera>*{
+  vertical-align:middle
+}
+
+.flicking-viewport.vertical.bottom>.flicking-camera>*{
+  vertical-align:bottom
+}
+
+.flicking-viewport.vertical>.flicking-camera>*{
+  display:block
+}
+
+.flicking-viewport.flicking-hidden>.flicking-camera>*{
+  visibility:hidden
+}
+
+/* MAPBOX */
+
+.mapboxgl-map {
+  font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
+  overflow: hidden;
+  position: relative;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.mapboxgl-canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.mapboxgl-map:-webkit-full-screen {
+  width: 100%;
+  height: 100%;
+}
+
+.mapboxgl-canary {
+  background-color: salmon;
+}
+
+.mapboxgl-canvas-container.mapboxgl-interactive,
+.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
+  cursor: grab;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+   -ms-user-select: none;
+       user-select: none;
+}
+
+.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
+  cursor: pointer;
+}
+
+.mapboxgl-canvas-container.mapboxgl-interactive:active,
+.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
+  cursor: grabbing;
+}
+
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
+  touch-action: pan-x pan-y;
+}
+
+.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
+.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: pinch-zoom;
+}
+
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan
+  .mapboxgl-canvas {
+  touch-action: none;
+}
+
+.mapboxgl-ctrl-bottom-left,
+.mapboxgl-ctrl-bottom-right,
+.mapboxgl-ctrl-top-left,
+.mapboxgl-ctrl-top-right {
+  position: absolute;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.mapboxgl-ctrl-top-left {
+  top: 0;
+  left: 0;
+}
+
+.mapboxgl-ctrl-top-right {
+  top: 0;
+  right: 0;
+}
+
+.mapboxgl-ctrl-bottom-left {
+  bottom: 0;
+  left: 0;
+}
+
+.mapboxgl-ctrl-bottom-right {
+  right: 0;
+  bottom: 0;
+}
+
+.mapboxgl-ctrl {
+  clear: both;
+  pointer-events: auto;
+  transform: translate(0);
+}
+
+.mapboxgl-ctrl-top-left .mapboxgl-ctrl {
+  margin: 24px 0 0 24px;
+  float: left;
+}
+
+.mapboxgl-ctrl-top-right .mapboxgl-ctrl {
+  margin: 24px 24px 0 0;
+  float: right;
+}
+
+.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl {
+  margin: 0 0 24px 24px;
+  float: left;
+}
+
+.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl {
+  margin: 0 24px 24px 0;
+  float: right;
+}
+
+.mapboxgl-ctrl-group {
+  border-radius: 4px;
+  background: #fff;
+}
+
+.mapboxgl-ctrl-group:not(:empty) {
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+}
+
+@media (-ms-high-contrast: active) {
+  .mapboxgl-ctrl-group:not(:empty) {
+    box-shadow: 0 0 0 2px ButtonText;
+  }
+}
+
+.mapboxgl-ctrl-group button {
+  width: 29px;
+  height: 29px;
+  display: block;
+  padding: 0;
+  outline: none;
+  border: 0;
+  box-sizing: border-box;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.mapboxgl-ctrl-group button + button {
+  border-top: 1px solid #ddd;
+}
+
+.mapboxgl-ctrl button .mapboxgl-ctrl-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: 50%;
+}
+
+@media (-ms-high-contrast: active) {
+  .mapboxgl-ctrl-icon {
+    background-color: transparent;
+  }
+
+  .mapboxgl-ctrl-group button + button {
+    border-top: 1px solid ButtonText;
+  }
+}
+
+.mapboxgl-ctrl-attrib-button:focus,
+.mapboxgl-ctrl-group button:focus {
+  box-shadow: none;
+}
+
+.mapboxgl-ctrl button:disabled {
+  cursor: not-allowed;
+}
+
+.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
+  opacity: 0.25;
+}
+
+.mapboxgl-ctrl button:not(:disabled):hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.mapboxgl-ctrl-group button:focus:focus-visible {
+  box-shadow: 0 0 2px 2px #0096ff;
+}
+
+.mapboxgl-ctrl-group button:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.mapboxgl-ctrl-group button:focus:first-child {
+  border-radius: 4px 4px 0 0;
+}
+
+.mapboxgl-ctrl-group button:focus:last-child {
+  border-radius: 0 0 4px 4px;
+}
+
+.mapboxgl-ctrl-group button:focus:only-child {
+  border-radius: inherit;
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E");
+}
+
+@media (-ms-high-contrast: active) {
+  .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E");
+  }
+
+  .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E");
+  }
+}
+
+@media (-ms-high-contrast: black-on-white) {
+  .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E %3C/svg%3E");
+  }
+
+  .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E %3C/svg%3E");
+  }
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E");
+}
+
+@media (-ms-high-contrast: active) {
+  .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E");
+  }
+
+  .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E");
+  }
+}
+
+@media (-ms-high-contrast: black-on-white) {
+  .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E %3C/svg%3E");
+  }
+
+  .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E %3C/svg%3E");
+  }
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E %3C/svg%3E");
+}
+
+@media (-ms-high-contrast: active) {
+  .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23999'/%3E %3C/svg%3E");
+  }
+}
+
+@media (-ms-high-contrast: black-on-white) {
+  .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E %3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E %3C/svg%3E");
+  }
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl
+  button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active
+  .mapboxgl-ctrl-icon {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl
+  button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error
+  .mapboxgl-ctrl-icon {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl
+  button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background
+  .mapboxgl-ctrl-icon {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl
+  button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error
+  .mapboxgl-ctrl-icon {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E");
+}
+
+.mapboxgl-ctrl
+  button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting
+  .mapboxgl-ctrl-icon {
+  animation: mapboxgl-spin 2s linear infinite;
+}
+
+@media (-ms-high-contrast: active) {
+  .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E");
+  }
+
+  .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23999'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E");
+  }
+
+  .mapboxgl-ctrl
+    button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active
+    .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E");
+  }
+
+  .mapboxgl-ctrl
+    button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error
+    .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E");
+  }
+
+  .mapboxgl-ctrl
+    button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background
+    .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E");
+  }
+
+  .mapboxgl-ctrl
+    button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error
+    .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E");
+  }
+}
+
+@media (-ms-high-contrast: black-on-white) {
+  .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E %3C/svg%3E");
+  }
+
+  .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23666'%3E %3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E %3Ccircle id='dot' cx='10' cy='10' r='2'/%3E %3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E %3C/svg%3E");
+  }
+}
+
+@keyframes mapboxgl-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+a.mapboxgl-ctrl-logo {
+  width: 88px;
+  height: 23px;
+  margin: 0 0 -4px -4px;
+  display: block;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  overflow: hidden;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='0.9' fill='%23fff'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E");
+}
+
+a.mapboxgl-ctrl-logo.mapboxgl-compact {
+  width: 23px;
+}
+
+@media (-ms-high-contrast: active) {
+  a.mapboxgl-ctrl-logo {
+    background-color: transparent;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='1' stroke='%23000' stroke-width='3'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='1' fill='%23fff'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E");
+  }
+}
+
+@media (-ms-high-contrast: black-on-white) {
+  a.mapboxgl-ctrl-logo {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='1' stroke='%23fff' stroke-width='3' fill='%23fff'%3E %3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='1' fill='%23000'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E");
+  }
+}
+
+.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
+  padding: 0 5px;
+  background-color: hsla(0, 0%, 100%, 0.5);
+  margin: 0 24px 24px 0;
+}
+
+.map-report .mapboxgl-ctrl.mapboxgl-ctrl-attrib {
+  display: none;
+}
+
+@media screen {
+  .mapboxgl-ctrl-attrib.mapboxgl-compact {
+    min-height: 24px;
+    padding: 0px 24px 0px 0;
+    margin: 10px 24px 24px 10px;
+    position: relative;
+    background-color: #fff;
+    border-radius: 12px;
+  }
+
+  .mapboxgl-ctrl-attrib.mapboxgl-compact-show {
+    padding: 0px 24px 0px 8px;
+    visibility: visible;
+  }
+
+  .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact-show,
+  .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact-show {
+    padding: 2px 8px 2px 28px;
+    border-radius: 50%;
+  }
+
+  .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner {
+    display: none;
+  }
+
+  .mapboxgl-ctrl-attrib-button {
+    display: none;
+    cursor: pointer;
+    position: absolute;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E");
+    background-position: center;
+    background-color: #FFF;
+    width: 24px;
+    height: 24px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    outline: none;
+    top: 0;
+    right: 0;
+    border: 0;
+  }
+
+  .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button,
+  .mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button {
+    left: 0;
+  }
+
+  .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner,
+  .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button {
+    display: block;
+    padding: 2px 8px 2px 0;
+  }
+
+  .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-attrib.mapboxgl-compact:after {
+    bottom: 0;
+    right: 0;
+  }
+
+  .mapboxgl-ctrl-top-right > .mapboxgl-ctrl-attrib.mapboxgl-compact:after {
+    top: 0;
+    right: 0;
+  }
+
+  .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact:after {
+    top: 0;
+    left: 0;
+  }
+
+  .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact:after {
+    bottom: 0;
+    left: 0;
+  }
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .mapboxgl-ctrl-attrib.mapboxgl-compact:after {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' fill='%23fff'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E");
+  }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+  .mapboxgl-ctrl-attrib.mapboxgl-compact:after {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E %3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E %3C/svg%3E");
+  }
+}
+
+.mapboxgl-ctrl-attrib a {
+  color: rgba(0, 0, 0, 0.75);
+  text-decoration: none;
+}
+
+.mapboxgl-ctrl-attrib a:hover {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.mapboxgl-ctrl-attrib .mapbox-improve-map {
+  font-weight: 700;
+  margin-left: 2px;
+}
+
+.mapboxgl-attrib-empty {
+  display: none;
+}
+
+.mapboxgl-ctrl-scale {
+  background-color: hsla(0, 0%, 100%, 0.75);
+  font-size: 10px;
+  border: 2px solid #333;
+  border-top: #333;
+  padding: 0 5px;
+  color: #333;
+  box-sizing: border-box;
+}
+
+.mapboxgl-popup {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  will-change: transform;
+  pointer-events: none;
+}
+
+.mapboxgl-popup-anchor-top,
+.mapboxgl-popup-anchor-top-left,
+.mapboxgl-popup-anchor-top-right {
+  flex-direction: column;
+}
+
+.mapboxgl-popup-anchor-bottom,
+.mapboxgl-popup-anchor-bottom-left,
+.mapboxgl-popup-anchor-bottom-right {
+  flex-direction: column-reverse;
+}
+
+.mapboxgl-popup-anchor-left {
+  flex-direction: row;
+}
+
+.mapboxgl-popup-anchor-right {
+  flex-direction: row-reverse;
+}
+
+.mapboxgl-popup-tip {
+  width: 0;
+  height: 0;
+  border: 10px solid transparent;
+  z-index: 1;
+}
+
+.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
+  align-self: center;
+  border-top: none;
+  border-bottom-color: #fff;
+}
+
+.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
+  align-self: flex-start;
+  border-top: none;
+  border-left: none;
+  border-bottom-color: #fff;
+}
+
+.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
+  align-self: flex-end;
+  border-top: none;
+  border-right: none;
+  border-bottom-color: #fff;
+}
+
+.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
+  align-self: center;
+  border-bottom: none;
+  border-top-color: #fff;
+}
+
+.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
+  align-self: flex-start;
+  border-bottom: none;
+  border-left: none;
+  border-top-color: #fff;
+}
+
+.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
+  align-self: flex-end;
+  border-bottom: none;
+  border-right: none;
+  border-top-color: #fff;
+}
+
+.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
+  align-self: center;
+  border-left: none;
+  border-right-color: #fff;
+}
+
+.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
+  align-self: center;
+  border-right: none;
+  border-left-color: #fff;
+}
+
+.mapboxgl-popup-close-button {
+  position: absolute;
+  right: 0;
+  top: 0;
+  border: 0;
+  border-radius: 0 3px 0 0;
+  cursor: pointer;
+  background-color: transparent;
+}
+
+.mapboxgl-popup-close-button:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.mapboxgl-popup-content {
+  position: relative;
+  background: #fff;
+  border-radius: 3px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  padding: 10px 10px 15px;
+  pointer-events: auto;
+}
+
+.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content {
+  border-top-left-radius: 0;
+}
+
+.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content {
+  border-top-right-radius: 0;
+}
+
+.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content {
+  border-bottom-left-radius: 0;
+}
+
+.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content {
+  border-bottom-right-radius: 0;
+}
+
+.mapboxgl-popup-track-pointer {
+  display: none;
+}
+
+.mapboxgl-popup-track-pointer * {
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.mapboxgl-map:hover .mapboxgl-popup-track-pointer {
+  display: flex;
+}
+
+.mapboxgl-map:active .mapboxgl-popup-track-pointer {
+  display: none;
+}
+
+.mapboxgl-marker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  will-change: transform;
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+
+.mapboxgl-marker-occluded {
+  opacity: 0.2;
+}
+
+.mapboxgl-user-location-dot,
+.mapboxgl-user-location-dot:before {
+  background-color: #1da1f2;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+}
+
+.mapboxgl-user-location-dot:before {
+  content: '';
+  position: absolute;
+  animation: mapboxgl-user-location-dot-pulse 2s infinite;
+}
+
+.mapboxgl-user-location-dot:after {
+  border-radius: 50%;
+  border: 2px solid #fff;
+  content: '';
+  height: 19px;
+  left: -2px;
+  position: absolute;
+  top: -2px;
+  width: 19px;
+  box-sizing: border-box;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
+}
+
+@keyframes mapboxgl-user-location-dot-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  70% {
+    transform: scale(3);
+    opacity: 0;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+.mapboxgl-user-location-dot-stale {
+  background-color: #aaa;
+}
+
+.mapboxgl-user-location-dot-stale:after {
+  display: none;
+}
+
+.mapboxgl-user-location-accuracy-circle {
+  background-color: rgba(29, 161, 242, 0.2);
+  width: 1px;
+  height: 1px;
+  border-radius: 100%;
+}
+
+.mapboxgl-crosshair,
+.mapboxgl-crosshair .mapboxgl-interactive,
+.mapboxgl-crosshair .mapboxgl-interactive:active {
+  cursor: crosshair;
+}
+
+.mapboxgl-boxzoom {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  background: #fff;
+  border: 2px dotted #202020;
+  opacity: 0.5;
+}
+
+@media print {
+  .mapbox-improve-map {
+    display: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:container {
+    width: 100%;
+  }
+
+  @media (min-width: 0px) {
+    .md\:container {
+      max-width: 0px;
+    }
+  }
+
+  @media (min-width: 420px) {
+    .md\:container {
+      max-width: 420px;
+    }
+  }
+
+  @media (min-width: 640px) {
+    .md\:container {
+      max-width: 640px;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .md\:container {
+      max-width: 768px;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .md\:container {
+      max-width: 1024px;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .md\:container {
+      max-width: 1280px;
+    }
+  }
+
+  @media (min-width: 1536px) {
+    .md\:container {
+      max-width: 1536px;
+    }
+  }
+}
+
+.before\:pointer-events-none::before {
+  content: var(--tw-content);
+  pointer-events: none;
+}
+
+.before\:absolute::before {
+  content: var(--tw-content);
+  position: absolute;
+}
+
+.before\:-left-\[1px\]::before {
+  content: var(--tw-content);
+  left: -1px;
+}
+
+.before\:left-0::before {
+  content: var(--tw-content);
+  left: 0px;
+}
+
+.before\:top-0::before {
+  content: var(--tw-content);
+  top: 0px;
+}
+
+.before\:top-full::before {
+  content: var(--tw-content);
+  top: 100%;
+}
+
+.before\:z-10::before {
+  content: var(--tw-content);
+  z-index: 10;
+}
+
+.before\:block::before {
+  content: var(--tw-content);
+  display: block;
+}
+
+.before\:h-6::before {
+  content: var(--tw-content);
+  height: 1.5rem;
+}
+
+.before\:h-full::before {
+  content: var(--tw-content);
+  height: 100%;
+}
+
+.before\:w-\[3px\]::before {
+  content: var(--tw-content);
+  width: 3px;
+}
+
+.before\:w-full::before {
+  content: var(--tw-content);
+  width: 100%;
+}
+
+.before\:rounded-sm::before {
+  content: var(--tw-content);
+  border-radius: 0.125rem;
+}
+
+.before\:bg-blue-500::before {
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 191 255 / var(--tw-bg-opacity));
+}
+
+.before\:bg-blue-600::before {
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(1 173 241 / var(--tw-bg-opacity));
+}
+
+.before\:bg-gradient-to-b::before {
+  content: var(--tw-content);
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+
+.before\:from-black::before {
+  content: var(--tw-content);
+  --tw-gradient-from: #000 var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.before\:from-gray-800::before {
+  content: var(--tw-content);
+  --tw-gradient-from: #35373E var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(53 55 62 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.before\:via-black::before {
+  content: var(--tw-content);
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), #000 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.before\:via-gray-800::before {
+  content: var(--tw-content);
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to: rgb(53 55 62 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), #35373E var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.before\:drop-shadow-blue::before {
+  content: var(--tw-content);
+  --tw-drop-shadow: drop-shadow(1px 0px 3px #00BFFF);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.after\:pointer-events-none::after {
+  content: var(--tw-content);
+  pointer-events: none;
+}
+
+.after\:absolute::after {
+  content: var(--tw-content);
+  position: absolute;
+}
+
+.after\:-right-\[1px\]::after {
+  content: var(--tw-content);
+  right: -1px;
+}
+
+.after\:bottom-0::after {
+  content: var(--tw-content);
+  bottom: 0px;
+}
+
+.after\:left-0::after {
+  content: var(--tw-content);
+  left: 0px;
+}
+
+.after\:left-1\/2::after {
+  content: var(--tw-content);
+  left: 50%;
+}
+
+.after\:top-1\/2::after {
+  content: var(--tw-content);
+  top: 50%;
+}
+
+.after\:z-10::after {
+  content: var(--tw-content);
+  z-index: 10;
+}
+
+.after\:block::after {
+  content: var(--tw-content);
+  display: block;
+}
+
+.after\:flex::after {
+  content: var(--tw-content);
+  display: flex;
+}
+
+.after\:h-0::after {
+  content: var(--tw-content);
+  height: 0px;
+}
+
+.after\:h-0\.5::after {
+  content: var(--tw-content);
+  height: 0.125rem;
+}
+
+.after\:h-6::after {
+  content: var(--tw-content);
+  height: 1.5rem;
+}
+
+.after\:h-\[calc\(100\%-1px\)\]::after {
+  content: var(--tw-content);
+  height: calc(100% - 1px);
+}
+
+.after\:h-full::after {
+  content: var(--tw-content);
+  height: 100%;
+}
+
+.after\:w-0::after {
+  content: var(--tw-content);
+  width: 0px;
+}
+
+.after\:w-\[3px\]::after {
+  content: var(--tw-content);
+  width: 3px;
+}
+
+.after\:w-\[calc\(100\%-1px\)\]::after {
+  content: var(--tw-content);
+  width: calc(100% - 1px);
+}
+
+.after\:w-full::after {
+  content: var(--tw-content);
+  width: 100%;
+}
+
+.after\:-translate-x-1\/2::after {
+  content: var(--tw-content);
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.after\:-translate-y-1\/2::after {
+  content: var(--tw-content);
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.after\:transform::after {
+  content: var(--tw-content);
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.after\:rounded-full::after {
+  content: var(--tw-content);
+  border-radius: 9999px;
+}
+
+.after\:rounded-sm::after {
+  content: var(--tw-content);
+  border-radius: 0.125rem;
+}
+
+.after\:border::after {
+  content: var(--tw-content);
+  border-width: 1px;
+}
+
+.after\:border-transparent::after {
+  content: var(--tw-content);
+  border-color: transparent;
+}
+
+.after\:bg-blue-300::after {
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 199 255 / var(--tw-bg-opacity));
+}
+
+.after\:bg-blue-500::after {
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 191 255 / var(--tw-bg-opacity));
+}
+
+.after\:bg-gray-800::after {
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(53 55 62 / var(--tw-bg-opacity));
+}
+
+.after\:bg-primary-500::after {
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 191 255 / var(--tw-bg-opacity));
+}
+
+.after\:bg-gradient-to-t::after {
+  content: var(--tw-content);
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+
+.after\:from-black::after {
+  content: var(--tw-content);
+  --tw-gradient-from: #000 var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.after\:from-gray-800::after {
+  content: var(--tw-content);
+  --tw-gradient-from: #35373E var(--tw-gradient-from-position);
+  --tw-gradient-from-position:  ;
+  --tw-gradient-to: rgb(53 55 62 / 0)  var(--tw-gradient-from-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.after\:via-black::after {
+  content: var(--tw-content);
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), #000 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.after\:via-gray-800::after {
+  content: var(--tw-content);
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to: rgb(53 55 62 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-to-position:  ;
+  --tw-gradient-stops: var(--tw-gradient-from), #35373E var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.after\:drop-shadow-blue::after {
+  content: var(--tw-content);
+  --tw-drop-shadow: drop-shadow(1px 0px 3px #00BFFF);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.after\:transition-all::after {
+  content: var(--tw-content);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.first\:mt-2:first-child {
+  margin-top: 0.5rem;
+}
+
+.first\:border-t-0:first-child {
+  border-top-width: 0px;
+}
+
+.last\:rounded-b-2xl:last-child {
+  border-bottom-right-radius: 1rem;
+  border-bottom-left-radius: 1rem;
+}
+
+.last\:border-transparent:last-child {
+  border-color: transparent;
+}
+
+.checked\:bg-blue-500:checked {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 191 255 / var(--tw-bg-opacity));
+}
+
+.hover\:z-10:hover {
+  z-index: 10;
+}
+
+.hover\:border:hover {
+  border-width: 1px;
+}
+
+.hover\:border-2:hover {
+  border-width: 2px;
+}
+
+.hover\:border-gray-200:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(242 242 242 / var(--tw-border-opacity));
+}
+
+.hover\:border-gray-400:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(196 196 196 / var(--tw-border-opacity));
+}
+
+.hover\:border-gray-100:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(162 162 169 / var(--tw-border-opacity));
+}
+
+.hover\:border-primary-400:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(26 197 255 / var(--tw-border-opacity));
+}
+
+.hover\:border-primary-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 191 255 / var(--tw-border-opacity));
+}
+
+.hover\:border-red-600:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(242 92 71 / var(--tw-border-opacity));
+}
+
+.hover\:border-red-700:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 71 46 / var(--tw-border-opacity));
+}
+
+.hover\:border-white:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
+.hover\:bg-black:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-blue-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 240 255 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(242 242 242 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(162 162 169 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(119 119 127 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(53 55 62 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-900:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(21 21 21 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-primary-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(26 197 255 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-primary-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 191 255 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-red-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(207 42 20 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-transparent:hover {
+  background-color: transparent;
+}
+
+.hover\:bg-white:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-yellow-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 173 53 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-opacity-75:hover {
+  --tw-bg-opacity: 0.75;
+}
+
+.hover\:text-black:hover {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-100:hover {
+  --tw-text-opacity: 1;
+  color: rgb(162 162 169 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(119 119 127 / var(--tw-text-opacity));
+}
+
+.hover\:text-primary-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(51 204 255 / var(--tw-text-opacity));
+}
+
+.hover\:text-primary-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(0 191 255 / var(--tw-text-opacity));
+}
+
+.hover\:text-red-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(242 92 71 / var(--tw-text-opacity));
+}
+
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.hover\:text-opacity-75:hover {
+  --tw-text-opacity: 0.75;
+}
+
+.hover\:underline:hover {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
+.hover\:no-underline:hover {
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
+
+.hover\:opacity-100:hover {
+  opacity: 1;
+}
+
+.hover\:opacity-60:hover {
+  opacity: 0.6;
+}
+
+.hover\:opacity-90:hover {
+  opacity: 0.9;
+}
+
+.hover\:bg-blend-darken:hover {
+  background-blend-mode: darken;
+}
+
+.hover\:shadow-2xl:hover {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:ring-4:hover {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.hover\:ring-white:hover {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
+}
+
+.hover\:ring-opacity-40:hover {
+  --tw-ring-opacity: 0.4;
+}
+
+.hover\:after\:bg-transparent:hover::after {
+  content: var(--tw-content);
+  background-color: transparent;
+}
+
+.focus\:border-none:focus {
+  border-style: none;
+}
+
+.focus\:border-primary-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 191 255 / var(--tw-border-opacity));
+}
+
+.focus\:border-red-600:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(242 92 71 / var(--tw-border-opacity));
+}
+
+.focus\:border-white:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
+.focus\:bg-gray-200:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(242 242 242 / var(--tw-bg-opacity));
+}
+
+.focus\:bg-gray-800:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(53 55 62 / var(--tw-bg-opacity));
+}
+
+.focus\:bg-primary-300:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 204 255 / var(--tw-bg-opacity));
+}
+
+.focus\:bg-opacity-90:focus {
+  --tw-bg-opacity: 0.9;
+}
+
+.focus\:text-black:focus {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.focus\:text-gray-600:focus {
+  --tw-text-opacity: 1;
+  color: rgb(119 119 127 / var(--tw-text-opacity));
+}
+
+.focus\:opacity-100:focus {
+  opacity: 1;
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-1:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-blue-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(1 173 241 / var(--tw-ring-opacity));
+}
+
+.focus-visible\:outline-none:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus-visible\:ring-2:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus-visible\:ring-offset-2:focus-visible {
+  --tw-ring-offset-width: 2px;
+}
+
+.active\:border-gray-300:active {
+  --tw-border-opacity: 1;
+  border-color: rgb(232 232 232 / var(--tw-border-opacity));
+}
+
+.active\:border-gray-400:active {
+  --tw-border-opacity: 1;
+  border-color: rgb(196 196 196 / var(--tw-border-opacity));
+}
+
+.active\:border-primary-300:active {
+  --tw-border-opacity: 1;
+  border-color: rgb(51 204 255 / var(--tw-border-opacity));
+}
+
+.active\:border-red-600:active {
+  --tw-border-opacity: 1;
+  border-color: rgb(242 92 71 / var(--tw-border-opacity));
+}
+
+.active\:border-red-700:active {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 71 46 / var(--tw-border-opacity));
+}
+
+.active\:bg-gray-400:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(196 196 196 / var(--tw-bg-opacity));
+}
+
+.active\:bg-gray-700:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(95 100 110 / var(--tw-bg-opacity));
+}
+
+.active\:bg-primary-300:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 204 255 / var(--tw-bg-opacity));
+}
+
+.active\:bg-red-700:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 71 46 / var(--tw-bg-opacity));
+}
+
+.active\:bg-transparent:active {
+  background-color: transparent;
+}
+
+.active\:text-white:active {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.enabled\:hover\:bg-gray-600:hover:enabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(119 119 127 / var(--tw-bg-opacity));
+}
+
+.disabled\:pointer-events-none:disabled {
+  pointer-events: none;
+}
+
+.disabled\:cursor-default:disabled {
+  cursor: default;
+}
+
+.disabled\:cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
+
+.disabled\:text-gray-100:disabled {
+  --tw-text-opacity: 1;
+  color: rgb(162 162 169 / var(--tw-text-opacity));
+}
+
+.disabled\:opacity-50:disabled {
+  opacity: 0.5;
+}
+
+.group:hover .group-hover\:rotate-90 {
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:hover .group-hover\:border-gray-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(53 55 62 / var(--tw-border-opacity));
+}
+
+.group:hover .group-hover\:bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 191 255 / var(--tw-bg-opacity));
+}
+
+.group:hover .group-hover\:bg-primary-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 191 255 / var(--tw-bg-opacity));
+}
+
+.group:hover .group-hover\:bg-transparent {
+  background-color: transparent;
+}
+
+.group:hover .group-hover\:text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(196 196 196 / var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(162 162 169 / var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(95 100 110 / var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:text-primary-400 {
+  --tw-text-opacity: 1;
+  color: rgb(26 197 255 / var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:underline {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
+.group.bg-primary-400 .group-\[\.bg-primary-400\]\:text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(119 119 127 / var(--tw-text-opacity));
+}
+
+.peer:hover ~ .peer-hover\:text-primary-200 {
+  --tw-text-opacity: 1;
+  color: rgb(77 210 255 / var(--tw-text-opacity));
+}
+
+.data-\[state\=checked\]\:translate-x-5[data-state=checked] {
+  --tw-translate-x: 1.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked] {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.data-\[state\=checked\]\:bg-blue-600[data-state=checked] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(1 173 241 / var(--tw-bg-opacity));
+}
+
+@media (min-width: 420px) {
+  .xs\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .xs\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
+  }
+}
+
+@media (min-width: 640px) {
+  .sm\:mr-5 {
+    margin-right: 1.25rem;
+  }
+
+  .sm\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .sm\:mt-1 {
+    margin-top: 0.25rem;
+  }
+
+  .sm\:mt-12 {
+    margin-top: 3rem;
+  }
+
+  .sm\:block {
+    display: block;
+  }
+
+  .sm\:h-auto {
+    height: auto;
+  }
+
+  .sm\:w-10\/12 {
+    width: 83.333333%;
+  }
+
+  .sm\:w-4\/5 {
+    width: 80%;
+  }
+
+  .sm\:w-4\/6 {
+    width: 66.666667%;
+  }
+
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .sm\:pr-32 {
+    padding-right: 8rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:absolute {
+    position: absolute;
+  }
+
+  .md\:mb-10 {
+    margin-bottom: 2.5rem;
+  }
+
+  .md\:mb-16 {
+    margin-bottom: 4rem;
+  }
+
+  .md\:mb-48 {
+    margin-bottom: 12rem;
+  }
+
+  .md\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .md\:mt-52 {
+    margin-top: 13rem;
+  }
+
+  .md\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:grid {
+    display: grid;
+  }
+
+  .md\:h-40 {
+    height: 10rem;
+  }
+
+  .md\:h-screen {
+    height: 100vh;
+  }
+
+  .md\:max-h-12 {
+    max-height: 3rem;
+  }
+
+  .md\:w-1\/2 {
+    width: 50%;
+  }
+
+  .md\:w-1\/3 {
+    width: 33.333333%;
+  }
+
+  .md\:w-10\/12 {
+    width: 83.333333%;
+  }
+
+  .md\:w-2\/3 {
+    width: 66.666667%;
+  }
+
+  .md\:w-40 {
+    width: 10rem;
+  }
+
+  .md\:w-64 {
+    width: 16rem;
+  }
+
+  .md\:w-full {
+    width: 100%;
+  }
+
+  .md\:flex-grow {
+    flex-grow: 1;
+  }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .md\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:items-center {
+    align-items: center;
+  }
+
+  .md\:justify-center {
+    justify-content: center;
+  }
+
+  .md\:gap-20 {
+    gap: 5rem;
+  }
+
+  .md\:gap-x-20 {
+    -moz-column-gap: 5rem;
+         column-gap: 5rem;
+  }
+
+  .md\:gap-x-6 {
+    -moz-column-gap: 1.5rem;
+         column-gap: 1.5rem;
+  }
+
+  .md\:gap-y-0 {
+    row-gap: 0px;
+  }
+
+  .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(2rem * var(--tw-space-x-reverse));
+    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
+  }
+
+  .md\:space-y-20 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(5rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(5rem * var(--tw-space-y-reverse));
+  }
+
+  .md\:px-9 {
+    padding-left: 2.25rem;
+    padding-right: 2.25rem;
+  }
+
+  .md\:py-0 {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
+  .md\:py-14 {
+    padding-top: 3.5rem;
+    padding-bottom: 3.5rem;
+  }
+
+  .md\:py-32 {
+    padding-top: 8rem;
+    padding-bottom: 8rem;
+  }
+
+  .md\:py-44 {
+    padding-top: 11rem;
+    padding-bottom: 11rem;
+  }
+
+  .md\:pr-32 {
+    padding-right: 8rem;
+  }
+
+  .md\:pt-0 {
+    padding-top: 0px;
+  }
+
+  .md\:pt-12 {
+    padding-top: 3rem;
+  }
+
+  .md\:text-left {
+    text-align: left;
+  }
+
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .md\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
+  .md\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
+
+  .md\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
+
+  .md\:leading-10 {
+    line-height: 2.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:max-h-full {
+    max-height: 100%;
+  }
+
+  .lg\:w-10\/12 {
+    width: 83.333333%;
+  }
+
+  .lg\:w-5\/12 {
+    width: 41.666667%;
+  }
+
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .lg\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
+  .lg\:pr-80 {
+    padding-right: 20rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:w-1\/3 {
+    width: 33.333333%;
+  }
+
+  .xl\:w-2\/5 {
+    width: 40%;
+  }
+
+  .xl\:w-9\/12 {
+    width: 75%;
+  }
+
+  .xl\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .xl\:px-20 {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+}
+
+@media (min-width: 1536px) {
+  .\32xl\:w-6\/12 {
+    width: 50%;
+  }
+}
+
+.\[\&\>\*\:nth-child\(even\)\]\:bg-gray-100>*:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+.\[\&\>\*\]\:h-10>* {
+  height: 2.5rem;
+}
+
+.\[\&\>\*\]\:h-7>* {
+  height: 1.75rem;
+}
diff --git a/app/docs/install.stories.mdx b/app/docs/install.stories.mdx
index 5fc4d59434..688a89db4e 100644
--- a/app/docs/install.stories.mdx
+++ b/app/docs/install.stories.mdx
@@ -54,8 +54,8 @@ Once you installed all the dependencies and packages you will be able to run the
 "scripts": {
   "storybook:dev": "yarn storybook:styles:dev && start-storybook -p 6006 -s ./public -c .storybook",
   "storybook:build": "yarn storybook:styles:prod && build-storybook -s ./public -c .storybook",
-  "storybook:styles:dev": "NODE_ENV=development tailwind build ./styles/tailwind.css -o ./public/styles/tailwind.storybook.css",
-  "storybook:styles:prod": "NODE_ENV=production tailwind build ./styles/tailwind.css -o ./public/styles/tailwind.storybook.css"
+  "storybook:styles:dev": "NODE_ENV=development tailwind build ./styles/globals.css -o ./public/styles/tailwind.storybook.css",
+  "storybook:styles:prod": "NODE_ENV=production tailwind build ./styles/globals.css -o ./public/styles/tailwind.storybook.css"
 }
 ```
 
diff --git a/app/hooks/features/mock.ts b/app/hooks/features/mock.ts
index 27989fb724..8bedd54bf3 100644
--- a/app/hooks/features/mock.ts
+++ b/app/hooks/features/mock.ts
@@ -5,7 +5,7 @@ const ITEMS = [
     type: 'bioregional',
     description:
       'Donec est ad luctus dapibus sociosqu. Imperdiet platea viverra dui congue orci ad. Turpis a, dictumst eget. Justo potenti morbi iaculis habitasse justo aliquam tortor tellus nostra. Accumsan nunc lorem malesuada, eget sed magna habitasse laoreet rutrum non ante suscipit. Adipiscing quisque justo vel, et tellus suscipit purus. Mattis primis curae;, scelerisque parturient libero dictumst ad! Cras elit condimentum molestie sociis mauris. Pharetra tincidunt habitant imperdiet mauris vitae tempor sollicitudin pulvinar feugiat pharetra scelerisque? Purus erat penatibus adipiscing vestibulum fermentum et platea eros quis ad congue. Porta fringilla enim bibendum per tortor natoque ante suscipit. Congue.',
-    tags: [{ id: 1, name: 'Bioregional', className: 'text-black bg-green-300' }],
+    tags: [{ id: 1, name: 'Bioregional', className: 'text-black bg-green-400' }],
 
     splitOptions: [
       {
@@ -54,7 +54,7 @@ const ITEMS = [
     description:
       'Donec est ad luctus dapibus sociosqu. Imperdiet platea viverra dui congue orci ad. Turpis a, dictumst eget. Justo potenti morbi iaculis habitasse justo aliquam tortor tellus nostra. Accumsan nunc lorem malesuada, eget sed magna habitasse laoreet rutrum non ante suscipit. Adipiscing quisque justo vel, et tellus suscipit purus. Mattis primis curae;, scelerisque parturient libero dictumst ad! Cras elit condimentum molestie sociis mauris. Pharetra tincidunt habitant imperdiet mauris vitae tempor sollicitudin pulvinar feugiat pharetra scelerisque? Purus erat penatibus adipiscing vestibulum fermentum et platea eros quis ad congue. Porta fringilla enim bibendum per tortor natoque ante suscipit. Congue.',
     tags: [
-      { id: 3, name: 'Species', className: 'text-black bg-yellow-300' },
+      { id: 3, name: 'Species', className: 'text-black bg-yellow-400' },
       { id: 2, name: 'Source name' },
     ],
 
@@ -87,7 +87,7 @@ const ITEMS = [
     description:
       'Donec est ad luctus dapibus sociosqu. Imperdiet platea viverra dui congue orci ad.',
     tags: [
-      { id: 3, name: 'Species', className: 'text-black bg-yellow-300' },
+      { id: 3, name: 'Species', className: 'text-black bg-yellow-400' },
       { id: 2, name: 'Source name' },
     ],
     target: 75,
@@ -100,7 +100,7 @@ const ITEMS = [
     description:
       'Donec est ad luctus dapibus sociosqu. Imperdiet platea viverra dui congue orci ad.',
     tags: [
-      { id: 3, name: 'Species', className: 'text-black bg-yellow-300' },
+      { id: 3, name: 'Species', className: 'text-black bg-yellow-400' },
       { id: 2, name: 'Source name' },
     ],
   },
@@ -111,7 +111,7 @@ const ITEMS = [
     description:
       'Donec est ad luctus dapibus sociosqu. Imperdiet platea viverra dui congue orci ad.',
     tags: [
-      { id: 3, name: 'Species', className: 'text-black bg-yellow-300' },
+      { id: 3, name: 'Species', className: 'text-black bg-yellow-400' },
       { id: 2, name: 'Source name' },
     ],
   },
diff --git a/app/hooks/gap-analysis/mock.ts b/app/hooks/gap-analysis/mock.ts
index 27989fb724..8bedd54bf3 100644
--- a/app/hooks/gap-analysis/mock.ts
+++ b/app/hooks/gap-analysis/mock.ts
@@ -5,7 +5,7 @@ const ITEMS = [
     type: 'bioregional',
     description:
       'Donec est ad luctus dapibus sociosqu. Imperdiet platea viverra dui congue orci ad. Turpis a, dictumst eget. Justo potenti morbi iaculis habitasse justo aliquam tortor tellus nostra. Accumsan nunc lorem malesuada, eget sed magna habitasse laoreet rutrum non ante suscipit. Adipiscing quisque justo vel, et tellus suscipit purus. Mattis primis curae;, scelerisque parturient libero dictumst ad! Cras elit condimentum molestie sociis mauris. Pharetra tincidunt habitant imperdiet mauris vitae tempor sollicitudin pulvinar feugiat pharetra scelerisque? Purus erat penatibus adipiscing vestibulum fermentum et platea eros quis ad congue. Porta fringilla enim bibendum per tortor natoque ante suscipit. Congue.',
-    tags: [{ id: 1, name: 'Bioregional', className: 'text-black bg-green-300' }],
+    tags: [{ id: 1, name: 'Bioregional', className: 'text-black bg-green-400' }],
 
     splitOptions: [
       {
@@ -54,7 +54,7 @@ const ITEMS = [
     description:
       'Donec est ad luctus dapibus sociosqu. Imperdiet platea viverra dui congue orci ad. Turpis a, dictumst eget. Justo potenti morbi iaculis habitasse justo aliquam tortor tellus nostra. Accumsan nunc lorem malesuada, eget sed magna habitasse laoreet rutrum non ante suscipit. Adipiscing quisque justo vel, et tellus suscipit purus. Mattis primis curae;, scelerisque parturient libero dictumst ad! Cras elit condimentum molestie sociis mauris. Pharetra tincidunt habitant imperdiet mauris vitae tempor sollicitudin pulvinar feugiat pharetra scelerisque? Purus erat penatibus adipiscing vestibulum fermentum et platea eros quis ad congue. Porta fringilla enim bibendum per tortor natoque ante suscipit. Congue.',
     tags: [
-      { id: 3, name: 'Species', className: 'text-black bg-yellow-300' },
+      { id: 3, name: 'Species', className: 'text-black bg-yellow-400' },
       { id: 2, name: 'Source name' },
     ],
 
@@ -87,7 +87,7 @@ const ITEMS = [
     description:
       'Donec est ad luctus dapibus sociosqu. Imperdiet platea viverra dui congue orci ad.',
     tags: [
-      { id: 3, name: 'Species', className: 'text-black bg-yellow-300' },
+      { id: 3, name: 'Species', className: 'text-black bg-yellow-400' },
       { id: 2, name: 'Source name' },
     ],
     target: 75,
@@ -100,7 +100,7 @@ const ITEMS = [
     description:
       'Donec est ad luctus dapibus sociosqu. Imperdiet platea viverra dui congue orci ad.',
     tags: [
-      { id: 3, name: 'Species', className: 'text-black bg-yellow-300' },
+      { id: 3, name: 'Species', className: 'text-black bg-yellow-400' },
       { id: 2, name: 'Source name' },
     ],
   },
@@ -111,7 +111,7 @@ const ITEMS = [
     description:
       'Donec est ad luctus dapibus sociosqu. Imperdiet platea viverra dui congue orci ad.',
     tags: [
-      { id: 3, name: 'Species', className: 'text-black bg-yellow-300' },
+      { id: 3, name: 'Species', className: 'text-black bg-yellow-400' },
       { id: 2, name: 'Source name' },
     ],
   },
diff --git a/app/layout/admin/header/component.tsx b/app/layout/admin/header/component.tsx
index c4eacf25fa..9c3d58d90c 100644
--- a/app/layout/admin/header/component.tsx
+++ b/app/layout/admin/header/component.tsx
@@ -20,7 +20,7 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({
   return (
     <div className="mb-3 mt-10 space-y-5">
       <Link href={backToHref || '/admin'} className="group inline-flex items-center space-x-2">
-        <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border border-gray-200 group-hover:border-gray-700">
+        <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border border-gray-300 group-hover:border-gray-800">
           <Icon icon={ARROW_LEFT_SVG} className="relative -left-px h-3 w-3" />
         </div>
         <div className="flex-grow group-hover:underline">{backToName || 'Back to Admin Panel'}</div>
diff --git a/app/layout/beta/component.tsx b/app/layout/beta/component.tsx
index 92d620d644..bf91b4867f 100644
--- a/app/layout/beta/component.tsx
+++ b/app/layout/beta/component.tsx
@@ -20,9 +20,9 @@ export const HomeBeta: React.FC<HomeBetaProps> = () => {
 
   return (
     <>
-      <div className="relative z-10 w-full bg-yellow-500">
+      <div className="relative z-10 w-full bg-yellow-600">
         <Wrapper>
-          <div className="flex items-center space-x-5 py-2 text-sm text-gray-700">
+          <div className="flex items-center space-x-5 py-2 text-sm text-gray-800">
             <p>
               We note that this is <strong>a temporary site</strong> and your account and personal
               information <strong>will not be stored</strong> beyond the Beta stage, nor shared
@@ -46,7 +46,7 @@ export const HomeBeta: React.FC<HomeBetaProps> = () => {
           setCookie('beta', 'true', { path: '/' });
         }}
       >
-        <div className="space-y-2.5 overflow-y-auto overflow-x-hidden p-10 pb-2.5 text-gray-700">
+        <div className="space-y-2.5 overflow-y-auto overflow-x-hidden p-10 pb-2.5 text-gray-800">
           <h2 className="mb-5 text-2xl">Welcome to the Marxan Planning Platform (MaPP) - Beta!</h2>
           <p>
             While we put the finishing touches on development, we invite you to come inside and see
diff --git a/app/layout/community/component.tsx b/app/layout/community/component.tsx
index 058cd41c5f..3b6548e668 100644
--- a/app/layout/community/component.tsx
+++ b/app/layout/community/component.tsx
@@ -38,7 +38,7 @@ export const CommunityInfo: React.FC<CommunityInfoProps> = () => {
             <div className="flex w-96 flex-col">
               <h4 className="mb-2">Reach out with comments or suggestions.</h4>
               <a
-                className="text-left text-blue-500 hover:underline"
+                className="text-left text-blue-600 hover:underline"
                 href={`mailto:${process.env.NEXT_PUBLIC_CONTACT_EMAIL}`}
                 rel="noopener noreferrer"
                 target="_blank"
@@ -51,7 +51,7 @@ export const CommunityInfo: React.FC<CommunityInfoProps> = () => {
             <div className="flex w-96 flex-col">
               <h4 className="mb-2">Follow us on twitter and join in the conversation.</h4>
               <a
-                className="text-left text-blue-500 hover:underline"
+                className="text-left text-blue-600 hover:underline"
                 href="https://twitter.com/marxan_planning?"
                 rel="noopener noreferrer"
                 target="_blank"
diff --git a/app/layout/community/published-projects/detail/component.tsx b/app/layout/community/published-projects/detail/component.tsx
index 4cc6e015a8..1e554f723a 100644
--- a/app/layout/community/published-projects/detail/component.tsx
+++ b/app/layout/community/published-projects/detail/component.tsx
@@ -43,7 +43,7 @@ export const CommunityProjectsDetail: React.FC<CommunityProjectsDetailProps> = (
                 <div className="w-7/12 pr-12">
                   <h2 className="mb-12 mt-5 text-left font-heading text-4xl font-medium">{name}</h2>
 
-                  <p className="mb-10 text-sm leading-normal text-gray-400">{description}</p>
+                  <p className="mb-10 text-sm leading-normal text-gray-100">{description}</p>
 
                   <div className="mb-10 flex flex-row items-center">
                     <DuplicateButton exportId={exportId} name={name} theme="dark" />
@@ -159,7 +159,7 @@ export const CommunityProjectsDetail: React.FC<CommunityProjectsDetailProps> = (
         </div>
       </Wrapper>
       <Loading
-        className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-50 bg-opacity-90"
+        className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-100 bg-opacity-90"
         iconClassName="w-10 h-10 text-primary-500"
         visible={publishedProjectIsFetching && !publishedProjectIsFetched}
       />
diff --git a/app/layout/community/published-projects/list/table/item/component.tsx b/app/layout/community/published-projects/list/table/item/component.tsx
index 1d799bc399..2beaa4cd37 100644
--- a/app/layout/community/published-projects/list/table/item/component.tsx
+++ b/app/layout/community/published-projects/list/table/item/component.tsx
@@ -36,7 +36,7 @@ export const PublishedItem: React.FC<PublishedItemProps> = ({
         <Link href={`/community/projects/${id}`} className="pb-1 font-semibold hover:underline">
           {name}
         </Link>
-        <p className="line-clamp-2 text-sm leading-normal text-gray-400">{description}</p>
+        <p className="line-clamp-2 text-sm leading-normal text-gray-100">{description}</p>
       </td>
 
       <td className="py-5 pr-16">
diff --git a/app/layout/community/published-projects/list/table/item/duplicate-button/component.tsx b/app/layout/community/published-projects/list/table/item/duplicate-button/component.tsx
index 6712eaa0bb..5c13f7a84b 100644
--- a/app/layout/community/published-projects/list/table/item/duplicate-button/component.tsx
+++ b/app/layout/community/published-projects/list/table/item/duplicate-button/component.tsx
@@ -93,7 +93,7 @@ export const DuplicateButton: React.FC<DuplicateButtonProps> = ({
       placement="top"
       content={
         <div
-          className="rounded bg-white p-4 text-xs text-gray-500"
+          className="rounded bg-white p-4 text-xs text-gray-600"
           style={{
             boxShadow: '0 4px 20px rgba(0,0,0,0.25)',
             maxWidth: 200,
diff --git a/app/layout/footer/component.tsx b/app/layout/footer/component.tsx
index 2cc9176bb6..e3050f73f3 100644
--- a/app/layout/footer/component.tsx
+++ b/app/layout/footer/component.tsx
@@ -8,14 +8,12 @@ import Wrapper from 'layout/wrapper';
 
 import TWITTER_FILLED_SVG from 'svgs/social/twitter-filled.svg?sprite';
 
-export interface FooterProps {}
-
-export const Footer: React.FC<FooterProps> = () => {
+export const Footer = (): JSX.Element => {
   return (
     <>
       <div className="bg-primary-500">
         <Wrapper>
-          <div className="mx-auto flex w-full max-w-5xl flex-col space-y-18 py-24 font-heading">
+          <div className="mx-auto flex w-full max-w-5xl flex-col space-y-16 py-24 font-heading">
             <div className="text-3xl text-black md:text-6xl">
               <p>Want to know more</p>
               <p>about Marxan?</p>
@@ -39,7 +37,7 @@ export const Footer: React.FC<FooterProps> = () => {
         </Wrapper>
       </div>
 
-      <div className="bg-gray-700 py-24">
+      <div className="bg-gray-800 py-24">
         <Wrapper>
           <div className="mx-auto grid w-full max-w-5xl grid-cols-1 justify-between gap-36 pb-16 md:grid-cols-2">
             <div className="space-y-12">
diff --git a/app/layout/forgot-password/component.tsx b/app/layout/forgot-password/component.tsx
index a6ddaf4166..0c43b95dea 100644
--- a/app/layout/forgot-password/component.tsx
+++ b/app/layout/forgot-password/component.tsx
@@ -83,10 +83,10 @@ export const ForgotPassword: React.FC<ForgotPasswordProps> = () => {
               className="relative flex h-full items-center justify-center"
             >
               <div className="w-full max-w-xs">
-                <h2 className="mb-5 text-center font-heading text-lg font-medium text-gray-600">
+                <h2 className="mb-5 text-center font-heading text-lg font-medium text-gray-700">
                   Forgot Password
                 </h2>
-                <p className="mb-5 text-sm text-gray-500">
+                <p className="mb-5 text-sm text-gray-600">
                   Enter the email associated with your account and we’ll send and email with
                   instructions to reset your password.
                 </p>
@@ -133,19 +133,19 @@ export const ForgotPassword: React.FC<ForgotPasswordProps> = () => {
 
       {submitted && (
         <div className="relative flex h-full items-center justify-center">
-          <div className="w-full max-w-xs divide-y-2 divide-gray-100">
+          <div className="w-full max-w-xs divide-y-2 divide-gray-200">
             <div className="pb-5">
-              <h2 className="mb-5 text-center font-heading text-lg font-medium text-gray-600">
+              <h2 className="mb-5 text-center font-heading text-lg font-medium text-gray-700">
                 Check your email
               </h2>
-              <Icon icon={CHECK_EMAIL_SVG} className="mx-auto mb-5 h-16 w-16 text-gray-500" />
-              <p className="mx-auto text-center text-sm text-gray-400" style={{ maxWidth: 300 }}>
+              <Icon icon={CHECK_EMAIL_SVG} className="mx-auto mb-5 h-16 w-16 text-gray-600" />
+              <p className="mx-auto text-center text-sm text-gray-100" style={{ maxWidth: 300 }}>
                 We have sent password recovery instructions to your email...
               </p>
             </div>
             <div className="pt-5">
               <p
-                className="mx-auto mb-5 text-center text-sm text-gray-400"
+                className="mx-auto mb-5 text-center text-sm text-gray-100"
                 style={{ maxWidth: 300 }}
               >
                 Did not receive the email? Check your spam filter, or{' '}
@@ -158,7 +158,7 @@ export const ForgotPassword: React.FC<ForgotPasswordProps> = () => {
                 </span>
               </p>
               <p
-                className="mx-auto mb-5 text-center text-sm text-gray-400"
+                className="mx-auto mb-5 text-center text-sm text-gray-100"
                 style={{ maxWidth: 300 }}
               >
                 Please note that if you have not activated your account yet, by following the link
diff --git a/app/layout/guide-request/component.tsx b/app/layout/guide-request/component.tsx
index 775c3eced5..1fa6f5276b 100644
--- a/app/layout/guide-request/component.tsx
+++ b/app/layout/guide-request/component.tsx
@@ -29,13 +29,13 @@ export const GuideRequest: React.FC<GuideRequestProps> = ({ onDismiss }: GuideRe
 
   return (
     <div className="flex flex-col items-center justify-center space-y-6 py-10">
-      <h2 className="text-m text-center font-heading font-medium text-gray-600">
+      <h2 className="text-m text-center font-heading font-medium text-gray-700">
         First things first...
       </h2>
 
       <Icon icon={GUIDE_REQUEST_SVG} className="w-28" />
       <div className="w-72">
-        <p className="text-m text-center font-heading text-gray-600">
+        <p className="text-m text-center font-heading text-gray-700">
           Would you like to get some guidance on Marxan&apos;s workflow?
         </p>
       </div>
diff --git a/app/layout/header/index.tsx b/app/layout/header/index.tsx
index 0a76ea1763..d2e576cfa6 100644
--- a/app/layout/header/index.tsx
+++ b/app/layout/header/index.tsx
@@ -55,7 +55,7 @@ export const Header = ({
           [className]: true,
           'z-10 row-auto w-full': true,
           'bg-black text-white': theme === 'dark',
-          'bg-primary-50 text-gray-800': theme === 'light',
+          'bg-primary-50 text-gray-900': theme === 'light',
           'py-1.5': maintenance,
         })}
       >
@@ -79,10 +79,10 @@ export const Header = ({
                           className={cn({
                             [ICON_COMMON_CLASSES]: true,
                             'h-6 w-6': true,
-                            'text-white group-hover:text-gray-300': (
+                            'text-white group-hover:text-gray-400': (
                               ['dark', 'transparent'] as HeaderProps['theme'][]
                             ).includes(theme),
-                            'group-hover:text-gray-300': theme === 'light',
+                            'group-hover:text-gray-400': theme === 'light',
                           })}
                           icon={MENU_SVG}
                         />
@@ -90,7 +90,7 @@ export const Header = ({
                     </PopoverTrigger>
                     <PopoverContent
                       side="left"
-                      className="min-w-[410px] rounded-b-4xl rounded-tl-xl rounded-tr-4xl bg-white p-4"
+                      className="rounded-b-4xl rounded-tr-4xl min-w-[410px] rounded-tl-xl bg-white p-4"
                       collisionPadding={48}
                     >
                       <UserMenu />
diff --git a/app/layout/header/title/component.tsx b/app/layout/header/title/component.tsx
index 0481819f1a..86de7151b5 100644
--- a/app/layout/header/title/component.tsx
+++ b/app/layout/header/title/component.tsx
@@ -191,7 +191,7 @@ export const Title: React.FC<TitleProps> = () => {
                         placement="bottom"
                         disabled={meta.active}
                         content={
-                          <div className="rounded bg-white px-2 py-1 text-gray-500">
+                          <div className="rounded bg-white px-2 py-1 text-gray-600">
                             <span>Edit name</span>
                           </div>
                         }
@@ -204,7 +204,7 @@ export const Title: React.FC<TitleProps> = () => {
                           <input
                             {...input}
                             className={cx({
-                              'absolute left-0 top-0 h-full w-full cursor-pointer overflow-ellipsis border-none bg-transparent px-1.5 font-heading font-normal focus:bg-primary-300 focus:text-gray-500 focus:outline-none':
+                              'absolute left-0 top-0 h-full w-full cursor-pointer overflow-ellipsis border-none bg-transparent px-1.5 font-heading font-normal focus:bg-primary-300 focus:text-gray-600 focus:outline-none':
                                 true,
                             })}
                             value={`${input.value}`}
@@ -269,7 +269,7 @@ export const Title: React.FC<TitleProps> = () => {
                         placement="bottom"
                         disabled={meta.active}
                         content={
-                          <div className="rounded bg-white px-2 py-1 text-gray-500">
+                          <div className="rounded bg-white px-2 py-1 text-gray-600">
                             <span>Edit name</span>
                           </div>
                         }
@@ -278,7 +278,7 @@ export const Title: React.FC<TitleProps> = () => {
                           <input
                             {...input}
                             id="form-scenario-name"
-                            className="absolute left-0 top-0 h-full w-full overflow-ellipsis border-none bg-transparent px-1 font-sans font-normal leading-4 focus:bg-primary-300 focus:text-gray-500 focus:outline-none"
+                            className="absolute left-0 top-0 h-full w-full overflow-ellipsis border-none bg-transparent px-1 font-sans font-normal leading-4 focus:bg-primary-300 focus:text-gray-600 focus:outline-none"
                             value={`${input.value}`}
                             onBlur={() => {
                               input.onBlur();
diff --git a/app/layout/help/beacon/component.tsx b/app/layout/help/beacon/component.tsx
index ca59492efb..977f0ed4df 100644
--- a/app/layout/help/beacon/component.tsx
+++ b/app/layout/help/beacon/component.tsx
@@ -172,7 +172,7 @@ export const HelpBeacon: React.FC<HelpBeaconProps> = ({
                   aria-label="manage-visibility"
                   type="button"
                   className={cx({
-                    'beacon relative flex h-6 w-6 translate-y-3/4 transform items-center justify-center rounded-full border-2 border-gray-700 bg-primary-500 transition focus:outline-none':
+                    'beacon relative flex h-6 w-6 translate-y-3/4 transform items-center justify-center rounded-full border-2 border-gray-800 bg-primary-500 transition focus:outline-none':
                       true,
                   })}
                   onClick={() => {
diff --git a/app/layout/help/coming-soon/component.tsx b/app/layout/help/coming-soon/component.tsx
index ad1e3a3881..8472d7a460 100644
--- a/app/layout/help/coming-soon/component.tsx
+++ b/app/layout/help/coming-soon/component.tsx
@@ -6,11 +6,11 @@ import Tooltip from 'components/tooltip';
 
 const THEME = {
   dark: {
-    base: 'px-4 py-1.5 text-xs text-white bg-gray-500 rounded',
-    arrow: 'bg-gray-500',
+    base: 'px-4 py-1.5 text-xs text-white bg-gray-600 rounded',
+    arrow: 'bg-gray-600',
   },
   light: {
-    base: 'px-4 py-1.5 text-xs text-gray-500 bg-white rounded',
+    base: 'px-4 py-1.5 text-xs text-gray-600 bg-white rounded',
     arrow: 'bg-white',
   },
 };
diff --git a/app/layout/help/documentation/component.tsx b/app/layout/help/documentation/component.tsx
index 4369da7eab..b63a5a316d 100644
--- a/app/layout/help/documentation/component.tsx
+++ b/app/layout/help/documentation/component.tsx
@@ -16,14 +16,14 @@ export const DocumentationLink = () => {
       onMouseEnter={() => setIsHover(true)}
       onMouseLeave={() => setIsHover(false)}
     >
-      <div className="border-b border-gray-500 px-1 pb-5">
+      <div className="border-b border-gray-600 px-1 pb-5">
         <Icon
           className="h-6 w-6 flex-shrink-0"
           icon={isHover ? DOCUMENTATION_HOVER_SVG : DOCUMENTATION_SVG}
         />
       </div>
       {isHover && (
-        <div className="absolute right-12 top-2 z-60 rounded-xl bg-white px-2 py-px text-black">
+        <div className="z-60 absolute right-12 top-2 rounded-xl bg-white px-2 py-px text-black">
           <p className="whitespace-nowrap font-sans text-sm">Marxan&apos;s documentation</p>
         </div>
       )}
diff --git a/app/layout/help/tooltip/component.tsx b/app/layout/help/tooltip/component.tsx
index 187dee8628..c623063130 100644
--- a/app/layout/help/tooltip/component.tsx
+++ b/app/layout/help/tooltip/component.tsx
@@ -13,7 +13,7 @@ interface HelpTooltipProps {
 export const HelpTooltip = ({ title, subtitle, content }: HelpTooltipProps) => {
   return (
     <div
-      className="rounded-3xl bg-white px-6 py-5 text-gray-500"
+      className="rounded-3xl bg-white px-6 py-5 text-gray-600"
       style={{
         boxShadow: '0 4px 20px rgba(0,0,0,0.25)',
       }}
@@ -29,7 +29,7 @@ export const HelpTooltip = ({ title, subtitle, content }: HelpTooltipProps) => {
         </div>
       </header>
 
-      <div className="mt-5 text-sm text-gray-400" style={{ maxWidth: 330 }}>
+      <div className="mt-5 text-sm text-gray-100" style={{ maxWidth: 330 }}>
         {content}
       </div>
     </div>
diff --git a/app/layout/home/features/item/component.tsx b/app/layout/home/features/item/component.tsx
index 3d44418448..e5e3d60aa1 100644
--- a/app/layout/home/features/item/component.tsx
+++ b/app/layout/home/features/item/component.tsx
@@ -45,10 +45,10 @@ export const HomeFeaturesItem: React.FC<HomeFeaturesItemProps> = ({
     >
       <div key={`${id}`}>
         <Icon icon={icon} className="h-16 w-16" />
-        <h2 className="mb-2.5 mt-2.5 font-heading text-2xl font-medium text-gray-800 md:mb-10 md:mt-6">
+        <h2 className="mb-2.5 mt-2.5 font-heading text-2xl font-medium text-gray-900 md:mb-10 md:mt-6">
           {name}
         </h2>
-        <p className="text-gray-400">{description}</p>
+        <p className="text-gray-600">{description}</p>
       </div>
     </motion.div>
   );
diff --git a/app/layout/home/intro/component.tsx b/app/layout/home/intro/component.tsx
index 7d0bdbe80e..afb862d0ef 100644
--- a/app/layout/home/intro/component.tsx
+++ b/app/layout/home/intro/component.tsx
@@ -58,7 +58,7 @@ export const HomeIntro: React.FC = () => {
             </motion.p>
 
             <motion.div
-              className="mt-10 space-y-4 xs:flex xs:space-x-4 xs:space-y-0 md:mb-18 md:mt-18"
+              className="md:mb-18 md:mt-18 mt-10 flex space-y-4 xs:space-x-4 xs:space-y-0"
               initial={{ opacity: 0, y: 15 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{
diff --git a/app/layout/home/support/component.tsx b/app/layout/home/support/component.tsx
index 67c339576f..af90e5ce6e 100644
--- a/app/layout/home/support/component.tsx
+++ b/app/layout/home/support/component.tsx
@@ -23,7 +23,7 @@ export const HomeSupport: React.FC<HomeSupportProps> = () => {
   });
 
   return (
-    <div id="home-support-section" className="bg-gray-700">
+    <div id="home-support-section" className="bg-gray-800">
       <div className="relative mx-auto w-full max-w-5xl py-24 md:py-44">
         <Wrapper>
           <motion.div
diff --git a/app/layout/home/support/item/component.tsx b/app/layout/home/support/item/component.tsx
index b86a59a97e..75304aae48 100644
--- a/app/layout/home/support/item/component.tsx
+++ b/app/layout/home/support/item/component.tsx
@@ -34,7 +34,7 @@ export const HomeSupportItem: React.FC<HomeSupportItemProps> = ({
         }}
       >
         <div key={`${id}`} className="flex items-center space-x-6">
-          <img alt={text} className="w-26" src={image} />
+          <img alt={text} className="w-24" src={image} />
           <p className="text-lg text-white">{text}</p>
         </div>
       </motion.div>
diff --git a/app/layout/loading/component.tsx b/app/layout/loading/component.tsx
index b8a7905498..aeb9a747ec 100644
--- a/app/layout/loading/component.tsx
+++ b/app/layout/loading/component.tsx
@@ -22,12 +22,12 @@ export const Loading: React.FC<LoadingProps> = ({ loading }: LoadingProps) => {
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           className={cx({
-            'fixed z-60 h-full w-full': true,
+            'z-60 fixed h-full w-full': true,
           })}
         >
           <div
             className={cx({
-              'absolute left-0 top-0 h-1 w-full bg-gradient-to-r from-purple-500 to-blue-500 transition-transform':
+              'absolute left-0 top-0 h-1 w-full bg-gradient-to-r from-purple-600 to-blue-600 transition-transform':
                 true,
             })}
             style={{
diff --git a/app/layout/me/change-password/component.tsx b/app/layout/me/change-password/component.tsx
index f21ab4adac..8ccaaff416 100644
--- a/app/layout/me/change-password/component.tsx
+++ b/app/layout/me/change-password/component.tsx
@@ -84,7 +84,7 @@ export const ChangePassword: React.FC<ChangePasswordProps> = () => {
       {(props) => (
         <form onSubmit={props.handleSubmit} autoComplete="off" className="relative flex">
           <div className="w-full max-w-xl">
-            <h2 className="mb-5 font-heading text-lg font-medium text-gray-600">Change password</h2>
+            <h2 className="mb-5 font-heading text-lg font-medium text-gray-700">Change password</h2>
             <p className="text-sm">
               Choose a new password. Changing your password will sign you out. You will need to
               enter your new password.
diff --git a/app/layout/me/component.tsx b/app/layout/me/component.tsx
index 21c836326c..3493cb128d 100644
--- a/app/layout/me/component.tsx
+++ b/app/layout/me/component.tsx
@@ -12,8 +12,8 @@ export const Me: React.FC<MeProps> = () => {
       <div className="bg-white p-14 md:w-1/3">
         <Profile />
       </div>
-      <div className="bg-gray-100 py-24 md:w-2/3">
-        <div className="border-b border-gray-200 px-36 py-14">
+      <div className="bg-gray-200 py-24 md:w-2/3">
+        <div className="border-b border-gray-300 px-36 py-14">
           <ChangePassword />
         </div>
         <div className="px-36 py-14">
diff --git a/app/layout/me/delete-account/component.tsx b/app/layout/me/delete-account/component.tsx
index 569516acfc..642d47e297 100644
--- a/app/layout/me/delete-account/component.tsx
+++ b/app/layout/me/delete-account/component.tsx
@@ -53,7 +53,7 @@ export const DeleteAccount: React.FC<DeleteAccountProps> = () => {
 
   return (
     <div className="relative w-full max-w-2xl">
-      <h2 className="mb-5 font-heading text-lg font-medium text-gray-600">Delete account</h2>
+      <h2 className="mb-5 font-heading text-lg font-medium text-gray-700">Delete account</h2>
 
       <div className="inline-flex flex-col space-y-5 rounded-3xl bg-white px-10 py-8">
         <div>
diff --git a/app/layout/me/profile/avatar/component.tsx b/app/layout/me/profile/avatar/component.tsx
index 4c1064e084..3c7857a819 100644
--- a/app/layout/me/profile/avatar/component.tsx
+++ b/app/layout/me/profile/avatar/component.tsx
@@ -98,14 +98,14 @@ export const AvatarMe: React.FC<AvatarMeProps> = ({ value, onChange }: AvatarMeP
             }}
           >
             <Avatar
-              className="h-16 w-16 bg-blue-700 text-sm uppercase text-white"
+              className="h-16 w-16 bg-blue-800 text-sm uppercase text-white"
               bgImage={preview}
             >
               {!preview && (displayName || email).slice(0, 2)}
             </Avatar>
 
             <motion.div
-              className="absolute bottom-0 left-0 right-0 top-0 z-10 flex h-full w-full items-center justify-center rounded-full bg-blue-600"
+              className="absolute bottom-0 left-0 right-0 top-0 z-10 flex h-full w-full items-center justify-center rounded-full bg-blue-700"
               animate={hover ? 'enter' : 'exit'}
               initial={{ opacity: 0, y: '50%' }}
               transition={{
@@ -130,7 +130,7 @@ export const AvatarMe: React.FC<AvatarMeProps> = ({ value, onChange }: AvatarMeP
             <button
               aria-label="remove"
               type="button"
-              className="absolute right-1 top-1 -translate-y-1/2 translate-x-1/2 transform rounded-full bg-red-500 p-1"
+              className="absolute right-1 top-1 -translate-y-1/2 translate-x-1/2 transform rounded-full bg-red-600 p-1"
               onClickCapture={onRemove}
             >
               <Icon icon={CLOSE_SVG} className="h-2 w-2 text-white" />
diff --git a/app/layout/me/profile/component.tsx b/app/layout/me/profile/component.tsx
index b0aa134364..496d45977a 100644
--- a/app/layout/me/profile/component.tsx
+++ b/app/layout/me/profile/component.tsx
@@ -76,7 +76,7 @@ export const Profile: React.FC<MeProps> = () => {
       {(props) => (
         <form onSubmit={props.handleSubmit} autoComplete="off" className="relative flex">
           <div className="w-full max-w-xs">
-            <h2 className="mb-9 font-heading text-5xl font-medium text-gray-600">My Profile</h2>
+            <h2 className="mb-9 font-heading text-5xl font-medium text-gray-700">My Profile</h2>
 
             <Loading
               visible={submitting}
diff --git a/app/layout/me/reset-password/component.tsx b/app/layout/me/reset-password/component.tsx
index 8ce1879a97..ad9a09d575 100644
--- a/app/layout/me/reset-password/component.tsx
+++ b/app/layout/me/reset-password/component.tsx
@@ -93,10 +93,10 @@ export const ResetPasswordPassword: React.FC<ResetPasswordPasswordProps> = () =>
               className="relative flex h-full items-center justify-center"
             >
               <div className="w-full max-w-xs">
-                <h2 className="mb-5 text-center font-heading text-lg font-medium text-gray-600">
+                <h2 className="mb-5 text-center font-heading text-lg font-medium text-gray-700">
                   Create new password
                 </h2>
-                <p className="mb-12 text-sm text-gray-500">
+                <p className="mb-12 text-sm text-gray-600">
                   Your new password must be different from previous used passwords.
                 </p>
 
@@ -157,10 +157,10 @@ export const ResetPasswordPassword: React.FC<ResetPasswordPasswordProps> = () =>
         <div className="relative flex h-full items-center justify-center">
           <div className="w-full max-w-xs">
             <div className="pb-5">
-              <h2 className="mb-24 text-center font-heading text-lg font-medium text-gray-600">
+              <h2 className="mb-24 text-center font-heading text-lg font-medium text-gray-700">
                 You&apos;ve changed your password
               </h2>
-              <Icon icon={RECOVER_PASSWORD_SVG} className="mx-auto mb-5 h-56 w-56 text-gray-500" />
+              <Icon icon={RECOVER_PASSWORD_SVG} className="mx-auto mb-5 h-56 w-56 text-gray-600" />
             </div>
             <div className="mt-10">
               <Button
@@ -181,10 +181,10 @@ export const ResetPasswordPassword: React.FC<ResetPasswordPasswordProps> = () =>
         <div className="relative flex h-full items-center justify-center">
           <div className="w-full max-w-xs">
             <div className="flex flex-col items-center space-y-20 pb-5">
-              <h2 className="text-center font-heading text-lg font-medium text-gray-600">
+              <h2 className="text-center font-heading text-lg font-medium text-gray-700">
                 Sorry, you are not allowed to reset your password.
               </h2>
-              <p className="mb-12 text-sm text-gray-500">Please check your email inbox.</p>
+              <p className="mb-12 text-sm text-gray-600">Please check your email inbox.</p>
             </div>
           </div>
         </div>
diff --git a/app/layout/me/sign-up-confirmation/component.tsx b/app/layout/me/sign-up-confirmation/component.tsx
index 7f9ba691e8..e993a6a320 100644
--- a/app/layout/me/sign-up-confirmation/component.tsx
+++ b/app/layout/me/sign-up-confirmation/component.tsx
@@ -47,7 +47,7 @@ export const SignUpConfirmation: React.FC<SignUpConfirmationProps> = () => {
         <div className="relative flex h-full items-center justify-center">
           <div className="w-full max-w-xs">
             <div className="pb-5">
-              <h2 className="mb-24 text-center font-heading text-lg font-medium text-gray-600">
+              <h2 className="mb-24 text-center font-heading text-lg font-medium text-gray-700">
                 Welcome to Marxan!
                 <br />
                 You&apos;ve created an account
@@ -72,10 +72,10 @@ export const SignUpConfirmation: React.FC<SignUpConfirmationProps> = () => {
         <div className="relative flex h-full items-center justify-center">
           <div className="w-full max-w-xs">
             <div className="flex flex-col items-center space-y-20 pb-5">
-              <h2 className="text-center font-heading text-lg font-medium text-gray-600">
+              <h2 className="text-center font-heading text-lg font-medium text-gray-700">
                 Sorry, it seems that you have not created an account.
               </h2>
-              <p className="mb-12 text-sm text-gray-500">
+              <p className="mb-12 text-sm text-gray-600">
                 You can{' '}
                 <Link href="/auth/sign-up" className="text-black underline hover:no-underline">
                   create an account.
diff --git a/app/layout/pill/component.tsx b/app/layout/pill/component.tsx
index 8d098f663b..24fbeac9ec 100644
--- a/app/layout/pill/component.tsx
+++ b/app/layout/pill/component.tsx
@@ -11,8 +11,8 @@ export const Pill: React.FC<PillProps> = ({ children, selected }: PillProps) =>
   return (
     <div
       className={cx({
-        'rounded-4xl bg-gray-700': true,
-        'ring-1 ring-inset ring-gray-500 ring-offset-8 ring-offset-gray-700': selected,
+        'rounded-[40px] bg-gray-800': true,
+        'ring-1 ring-inset ring-gray-600 ring-offset-8 ring-offset-gray-800': selected,
         'flex flex-grow flex-col overflow-hidden': true,
       })}
     >
diff --git a/app/layout/project/navigation/breadcrumbs/index.tsx b/app/layout/project/navigation/breadcrumbs/index.tsx
index 9d9431672b..2ce6466824 100644
--- a/app/layout/project/navigation/breadcrumbs/index.tsx
+++ b/app/layout/project/navigation/breadcrumbs/index.tsx
@@ -9,7 +9,7 @@ import { cn } from 'utils/cn';
 
 import ARROW_RIGHT_SVG from 'svgs/ui/arrow-right.svg?sprite';
 
-const ICON_RIGHT_CLASS = 'h-3 w-3 flex-shrink-0 text-gray-400';
+const ICON_RIGHT_CLASS = 'h-3 w-3 flex-shrink-0 text-gray-600';
 
 export const Breadcrumbs = ({ className }: { className?: string }): JSX.Element => {
   const { query } = useRouter();
diff --git a/app/layout/project/navigation/constants.ts b/app/layout/project/navigation/constants.ts
index 668383cf43..907bbb7df2 100644
--- a/app/layout/project/navigation/constants.ts
+++ b/app/layout/project/navigation/constants.ts
@@ -46,5 +46,5 @@ export const MENU_ITEM_BUTTON_COMMON_CLASSES = 'flex p-[10px]';
 export const MENU_ITEM_BUTTON_DISABLED_CLASSES = 'cursor-default opacity-50';
 
 export const ICON_COMMON_CLASSES =
-  'h-5 w-5 text-gray-400 group-hover:text-white group-[.bg-primary-400]:text-gray-500';
-export const ICON_DISABLED_CLASSES = 'group-hover:text-gray-400';
+  'h-5 w-5 text-gray-600 group-hover:text-white group-[.bg-primary-400]:text-gray-700';
+export const ICON_DISABLED_CLASSES = 'group-hover:text-gray-100';
diff --git a/app/layout/project/navigation/index.tsx b/app/layout/project/navigation/index.tsx
index 7c19034809..53194abbca 100644
--- a/app/layout/project/navigation/index.tsx
+++ b/app/layout/project/navigation/index.tsx
@@ -48,7 +48,7 @@ import UserMenu from './user-menu';
 
 export const MenuTooltip = ({ children }: PropsWithChildren): JSX.Element => {
   return (
-    <div className="rounded-xl border border-gray-400 bg-gray-700 px-2 py-[0.5px] text-sm text-blue-300">
+    <div className="rounded-xl border border-gray-600 bg-gray-800 px-2 py-[0.5px] text-sm text-blue-300">
       {children}
     </div>
   );
@@ -163,12 +163,12 @@ export const Navigation = (): JSX.Element => {
   }, [runJob, queryClient, sid]);
 
   return (
-    <nav className="z-20 flex h-screen max-w-[70px] flex-col items-center justify-between bg-gray-700 px-2 py-8">
+    <nav className="z-20 flex h-screen max-w-[70px] flex-col items-center justify-between bg-gray-800 px-2 py-8">
       <div className="flex flex-col">
         <Link href="/">
           <Image alt="Marxan logo" width={55} height={7} src={WHITE_LOGO_SVG} />
         </Link>
-        <div className="space-y-2 divide-y divide-gray-600">
+        <div className="space-y-2 divide-y divide-gray-700">
           {/* // ? Common menu */}
           <div className="flex flex-col items-center">
             <ul className={MENU_COMMON_CLASSES}>
@@ -196,7 +196,7 @@ export const Navigation = (): JSX.Element => {
                     <PopoverContent
                       side="right"
                       sideOffset={20}
-                      className="min-w-[410px] rounded-b-4xl rounded-tl-xl rounded-tr-4xl bg-white p-4"
+                      className="rounded-b-4xl rounded-tr-4xl min-w-[410px] rounded-tl-xl bg-white p-4"
                       collisionPadding={48}
                       onInteractOutside={() => toggleSubmenu('user')}
                     >
@@ -363,12 +363,12 @@ export const Navigation = (): JSX.Element => {
         <div className="group flex flex-col-reverse items-center">
           <button
             type="button"
-            className="peer relative flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-tl from-[#01BDFE] to-[#843DC0] transition-colors after:absolute after:left-1/2 after:top-1/2 after:block after:h-[calc(100%-1px)] after:w-[calc(100%-1px)] after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:border after:border-transparent after:bg-gray-700 hover:after:bg-transparent"
+            className="peer relative flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-tl from-[#01BDFE] to-[#843DC0] transition-colors after:absolute after:left-1/2 after:top-1/2 after:block after:h-[calc(100%-1px)] after:w-[calc(100%-1px)] after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:border after:border-transparent after:bg-gray-800 hover:after:bg-transparent"
             onClick={handleRunScenario}
           >
             <Icon className="z-10 h-6 w-6" icon={RUN_SCENARIO_SVG} />
           </button>
-          <span className="mb-2 block text-center text-xs text-gray-400 transition-colors peer-hover:text-primary-200">
+          <span className="mb-2 block text-center text-xs text-gray-600 transition-colors peer-hover:text-primary-200">
             Run scenario
           </span>
         </div>
diff --git a/app/layout/project/navigation/submenu/index.tsx b/app/layout/project/navigation/submenu/index.tsx
index 052cbea826..88d3ac979c 100644
--- a/app/layout/project/navigation/submenu/index.tsx
+++ b/app/layout/project/navigation/submenu/index.tsx
@@ -1,9 +1,8 @@
 import Link from 'next/link';
 
-import { cn } from 'utils/cn';
-
 import Icon, { IconProps } from 'components/icon';
 import Tooltip from 'components/tooltip';
+import { cn } from 'utils/cn';
 
 import { MenuTooltip, TOOLTIP_OFFSET } from '../';
 
@@ -16,7 +15,7 @@ export interface SubMenuItem {
 
 export const SubMenu = ({ items }: { items: SubMenuItem[] }): JSX.Element => {
   return (
-    <ul className="space-y-5 rounded-xl border border-gray-400 py-4">
+    <ul className="space-y-5 rounded-xl border border-gray-600 py-4">
       {items.map((item) => (
         <Tooltip
           key={item.route}
@@ -29,7 +28,7 @@ export const SubMenu = ({ items }: { items: SubMenuItem[] }): JSX.Element => {
               href={item.route}
               className={cn({
                 'flex px-[10px]': true,
-                'relative overflow-hidden before:absolute before:-left-[1px] before:block before:h-full before:w-[3px] before:rounded-sm before:bg-blue-400 before:drop-shadow-blue after:absolute after:-right-[1px] after:block after:h-full after:w-[3px] after:rounded-sm after:bg-blue-400 after:drop-shadow-blue':
+                'relative overflow-hidden before:absolute before:-left-[1px] before:block before:h-full before:w-[3px] before:rounded-sm before:bg-blue-500 before:drop-shadow-blue after:absolute after:-right-[1px] after:block after:h-full after:w-[3px] after:rounded-sm after:bg-blue-500 after:drop-shadow-blue':
                   item.selected,
               })}
             >
diff --git a/app/layout/project/navigation/user-menu/constants.ts b/app/layout/project/navigation/user-menu/constants.ts
index 43a2adb403..fe11586f30 100644
--- a/app/layout/project/navigation/user-menu/constants.ts
+++ b/app/layout/project/navigation/user-menu/constants.ts
@@ -1,4 +1,4 @@
 export const ITEM_COMMON_CLASSES =
-  'flex items-center justify-between rounded-3xl bg-gray-50 p-4 hover:bg-blue-50 transition-colors';
+  'flex items-center justify-between rounded-3xl bg-gray-100 p-4 hover:bg-blue-100 transition-colors';
 export const ITEM_TITLE_COMMON_CLASSES = 'flex items-center space-x-2 font-medium text-black';
-export const ITEM_DESCRIPTION_COMMON_CLASSES = 'text-gray-400 leading-normal';
+export const ITEM_DESCRIPTION_COMMON_CLASSES = 'text-gray-600 leading-normal';
diff --git a/app/layout/project/navigation/user-menu/index.tsx b/app/layout/project/navigation/user-menu/index.tsx
index 8f4e309776..5c38ff5ede 100644
--- a/app/layout/project/navigation/user-menu/index.tsx
+++ b/app/layout/project/navigation/user-menu/index.tsx
@@ -31,7 +31,7 @@ import {
   ITEM_DESCRIPTION_COMMON_CLASSES,
 } from './constants';
 
-const BUTTON_CLASSES = 'flex items-center space-x-2 rounded-xl text-gray-500 hover:text-white';
+const BUTTON_CLASSES = 'flex items-center space-x-2 rounded-xl text-gray-600 hover:text-white';
 
 export const UserMenu = (): JSX.Element => {
   const { data: session } = useSession();
@@ -69,7 +69,7 @@ export const UserMenu = (): JSX.Element => {
   }, [active, onActive, plausible, user.id, user.email]);
 
   return (
-    <div className="flex flex-col divide-y divide-gray-100 text-gray-500">
+    <div className="flex flex-col divide-y divide-gray-200 text-gray-600">
       <div className="mb-3 flex space-x-4">
         <div>
           <Avatar
@@ -83,7 +83,7 @@ export const UserMenu = (): JSX.Element => {
         <div className="flex flex-col space-y-2">
           <div className="">
             <h2>{user.displayName}</h2>
-            <h3 className="text-sm text-gray-400">{user.email}</h3>
+            <h3 className="text-sm text-gray-600">{user.email}</h3>
           </div>
           <div className="flex space-x-2">
             <Button href="/me" theme="transparent-black" size="s" className={BUTTON_CLASSES}>
@@ -112,13 +112,13 @@ export const UserMenu = (): JSX.Element => {
                 'group items-start space-x-5 bg-transparent': true,
               })}
             >
-              <div className="rounded-xl bg-gray-50 p-2 group-hover:bg-blue-400">
+              <div className="rounded-xl bg-gray-100 p-2 group-hover:bg-blue-500">
                 <Icon icon={PROJECT_DASHBOARD_SVG} className="h-5 w-5 transition-none" />
               </div>
               <div className="space-y-1">
                 <h4 className={ITEM_TITLE_COMMON_CLASSES}>
                   <span>Projects dashboard</span>
-                  <span className="block rounded-[4px] border border-blue-300 bg-blue-100 px-1 text-xs font-semibold">
+                  <span className="block rounded-[4px] border border-blue-300 bg-blue-200 px-1 text-xs font-semibold">
                     {totalProjects}
                   </span>
                 </h4>
@@ -138,7 +138,7 @@ export const UserMenu = (): JSX.Element => {
               </div>
               <Switch
                 onCheckedChange={onToggleHelpGuide}
-                className="bg-gray-500 data-[state=checked]:bg-blue-500"
+                className="bg-gray-600 data-[state=checked]:bg-blue-600"
                 checked={active}
               />
             </div>
@@ -170,7 +170,7 @@ export const UserMenu = (): JSX.Element => {
               href="/community/projects"
               className="flex items-center space-x-2 rounded-3xl bg-black/40 bg-[url('/images/bg-community-projects.png')] bg-right-bottom p-4 hover:bg-blend-darken"
             >
-              <div className="rounded-xl bg-blue-400 p-2 text-white">
+              <div className="rounded-xl bg-blue-500 p-2 text-white">
                 <Icon icon={COMMUNITY_SVG} className="h-5 w-5" />
               </div>
               <h4
diff --git a/app/layout/project/sidebar/project/header/contributors/edit-dropdown/card/component.tsx b/app/layout/project/sidebar/project/header/contributors/edit-dropdown/card/component.tsx
index 21db2f5cd7..590b984c27 100644
--- a/app/layout/project/sidebar/project/header/contributors/edit-dropdown/card/component.tsx
+++ b/app/layout/project/sidebar/project/header/contributors/edit-dropdown/card/component.tsx
@@ -123,7 +123,7 @@ export const UserCard: React.FC<UserCardProps> = ({
   }, [deleteUserMutation, id, name, pid, addToast]);
 
   return (
-    <div className="box-border flex w-full flex-grow items-center justify-between space-x-3 rounded-3xl bg-gray-100 py-3 pl-3 pr-6">
+    <div className="box-border flex w-full flex-grow items-center justify-between space-x-3 rounded-3xl bg-gray-200 py-3 pl-3 pr-6">
       <Avatar
         className="flex-shrink-0 border-none !bg-primary-700 text-sm uppercase"
         bgImage={bgImage}
@@ -151,14 +151,14 @@ export const UserCard: React.FC<UserCardProps> = ({
             />
           )}
           {(!isOwner || (isOwner && id === meData.id)) && (
-            <p className="text-sm text-gray-500">{ROLES[roleName]}</p>
+            <p className="text-sm text-gray-600">{ROLES[roleName]}</p>
           )}
         </div>
       </div>
 
       <Button
         className={cx({
-          'group h-6 flex-shrink-0 bg-gray-600 py-2 text-sm': true,
+          'group h-6 flex-shrink-0 bg-gray-700 py-2 text-sm': true,
           invisible: !isOwner || (isOwner && id === meData.id),
         })}
         theme="secondary-alt"
@@ -166,7 +166,7 @@ export const UserCard: React.FC<UserCardProps> = ({
         disabled={!isOwner}
         onClick={() => setOpen(true)}
       >
-        <span className="text-white group-hover:text-gray-600">Remove</span>
+        <span className="text-white group-hover:text-gray-700">Remove</span>
       </Button>
 
       <ConfirmationPrompt
diff --git a/app/layout/project/sidebar/project/header/contributors/index.tsx b/app/layout/project/sidebar/project/header/contributors/index.tsx
index 5735d6bbcf..f4baa8c670 100644
--- a/app/layout/project/sidebar/project/header/contributors/index.tsx
+++ b/app/layout/project/sidebar/project/header/contributors/index.tsx
@@ -78,7 +78,7 @@ export const Contributors = (): JSX.Element => {
                     type="button"
                     className={cn({
                       'z-50 -ml-3 h-8 w-8 rounded-full': true,
-                      'bg-gray-500': !open,
+                      'bg-gray-600': !open,
                     })}
                     onClick={handleClick}
                   >
@@ -86,9 +86,9 @@ export const Contributors = (): JSX.Element => {
                       size="s"
                       className={cn({
                         'border-none': true,
-                        'bg-gray-500 text-white transition-colors hover:bg-white hover:text-gray-500':
+                        'bg-gray-600 text-white transition-colors hover:bg-white hover:text-gray-600':
                           !open,
-                        'bg-white text-gray-500': open,
+                        'bg-white text-gray-600': open,
                       })}
                     >
                       <Icon icon={ADD_USER_SVG} className="h-4 w-4" />
@@ -99,7 +99,7 @@ export const Contributors = (): JSX.Element => {
                   <PopoverContent
                     side="right"
                     sideOffset={20}
-                    className="!z-50 w-full rounded-2xl !border-none bg-gray-700 !p-0 font-sans text-xs"
+                    className="!z-50 w-full rounded-2xl !border-none bg-gray-800 !p-0 font-sans text-xs"
                     collisionPadding={48}
                     onInteractOutside={() => setOpen(false)}
                   >
diff --git a/app/layout/project/sidebar/project/header/project-button/index.tsx b/app/layout/project/sidebar/project/header/project-button/index.tsx
index 55ff27e82a..3db9ea773c 100644
--- a/app/layout/project/sidebar/project/header/project-button/index.tsx
+++ b/app/layout/project/sidebar/project/header/project-button/index.tsx
@@ -146,7 +146,7 @@ const ProjectButton = (): JSX.Element => {
       <Popover>
         <PopoverTrigger asChild>
           <button
-            className="flex h-8 w-8 items-center justify-center rounded-full border border-gray-400 hover:border-white"
+            className="flex h-8 w-8 items-center justify-center rounded-full border border-gray-600 hover:border-white"
             onClick={() => setContent(true)}
           >
             <Icon
@@ -161,20 +161,20 @@ const ProjectButton = (): JSX.Element => {
           <PopoverContent
             side="left"
             sideOffset={20}
-            className="w-fit rounded-2xl !border-none bg-gray-700 !p-0 font-sans text-sm"
+            className="w-fit rounded-2xl !border-none bg-gray-800 !p-0 font-sans text-sm"
             collisionPadding={48}
             onInteractOutside={() => setContent(false)}
           >
             {!isPublic && (
               <>
                 <button
-                  className="group flex w-full cursor-pointer items-center space-x-2 rounded-t-2xl px-4 py-2 hover:bg-gray-500 disabled:pointer-events-none disabled:opacity-50"
+                  className="group flex w-full cursor-pointer items-center space-x-2 rounded-t-2xl px-4 py-2 hover:bg-gray-700 disabled:pointer-events-none disabled:opacity-50"
                   disabled={!isOwner || !SCENARIOS_RUNNED}
                   onClick={() => setPublishModal(true)}
                 >
                   <Icon
                     icon={COMMUNITY_SVG}
-                    className="h-5 w-5 text-gray-400 group-hover:text-white"
+                    className="h-5 w-5 text-gray-100 group-hover:text-white"
                   />
                   <p>Publish</p>
                 </button>
@@ -198,13 +198,13 @@ const ProjectButton = (): JSX.Element => {
             {isPublic && (
               <>
                 <button
-                  className="group flex w-full cursor-pointer items-center space-x-2 rounded-t-2xl px-4 py-2 hover:bg-gray-500 disabled:pointer-events-none disabled:opacity-50"
+                  className="group flex w-full cursor-pointer items-center space-x-2 rounded-t-2xl px-4 py-2 hover:bg-gray-700 disabled:pointer-events-none disabled:opacity-50"
                   disabled={!isOwner}
                   onClick={() => setConfirmUnPublish(projectData)}
                 >
                   <Icon
                     icon={COMMUNITY_SVG}
-                    className="h-5 w-5 text-gray-400 group-hover:text-white"
+                    className="h-5 w-5 text-gray-100 group-hover:text-white"
                   />
                   <p>Unpublish</p>
                 </button>
@@ -220,12 +220,12 @@ const ProjectButton = (): JSX.Element => {
             )}
 
             <button
-              className="group flex w-full cursor-pointer items-center space-x-2 rounded-b-2xl px-4 py-2 hover:bg-gray-500"
+              className="group flex w-full cursor-pointer items-center space-x-2 rounded-b-2xl px-4 py-2 hover:bg-gray-700"
               onClick={() => setDownloadModal(true)}
             >
               <Icon
                 icon={DOWNLOAD_SVG}
-                className="h-4 w-4 stroke-current text-gray-400 group-hover:text-white"
+                className="h-4 w-4 stroke-current text-gray-100 group-hover:text-white"
               />
 
               <p>Download</p>
diff --git a/app/layout/project/sidebar/project/header/project-button/publish-modal/company-uploader/component.tsx b/app/layout/project/sidebar/project/header/project-button/publish-modal/company-uploader/component.tsx
index 6e746af676..bfb6820db7 100644
--- a/app/layout/project/sidebar/project/header/project-button/publish-modal/company-uploader/component.tsx
+++ b/app/layout/project/sidebar/project/header/project-button/publish-modal/company-uploader/component.tsx
@@ -120,11 +120,11 @@ export const CompanyUploader: React.FC<CompanyUploaderProps> = ({
         <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
           <div className="flex w-full flex-col space-y-6">
             <div className="flex items-center space-x-2">
-              <div className="bg-gray-50 p-2.5">
+              <div className="bg-gray-100 p-2.5">
                 <img src={input.value.logoDataUrl} alt={input.value.name} className="max-w-full" />
               </div>
               <label
-                className="rounded-3xl bg-blue-100 bg-opacity-10 px-3 py-1"
+                className="rounded-3xl bg-blue-200 bg-opacity-10 px-3 py-1"
                 htmlFor="cancel-shapefile-btn"
               >
                 <p className="text-sm text-primary-500">{input.value.name}</p>
@@ -188,7 +188,7 @@ export const CompanyUploader: React.FC<CompanyUploaderProps> = ({
                               </Label>
 
                               <div className="my-2.5 flex items-center space-x-3">
-                                <h5 className="text-xs text-gray-400">Supported formats</h5>
+                                <h5 className="text-xs text-gray-600">Supported formats</h5>
                                 <InfoButton size="s" theme="secondary">
                                   <span className="text-xs">
                                     {' '}
@@ -204,17 +204,17 @@ export const CompanyUploader: React.FC<CompanyUploaderProps> = ({
                                 {...props}
                                 {...getRootProps()}
                                 className={cx({
-                                  'relative w-full cursor-pointer border border-dotted border-gray-300 bg-gray-100 bg-opacity-20 py-10 hover:bg-gray-100':
+                                  'relative w-full cursor-pointer border border-dotted border-gray-400 bg-gray-200 bg-opacity-20 py-10 hover:bg-gray-200':
                                     true,
-                                  'bg-gray-500': isDragActive,
-                                  'border-green-800': isDragAccept,
-                                  'border-red-800':
+                                  'bg-gray-600': isDragActive,
+                                  'border-green-900': isDragAccept,
+                                  'border-red-900':
                                     isDragReject || (props?.meta?.error && props?.meta?.touched),
                                 })}
                               >
                                 <input {...getInputProps()} />
 
-                                <p className="text-center text-sm text-gray-500">
+                                <p className="text-center text-sm text-gray-600">
                                   Drag and drop your image
                                   <br />
                                   or <b>click here</b> to upload
@@ -245,7 +245,7 @@ export const CompanyUploader: React.FC<CompanyUploaderProps> = ({
                             <h5 className="text-xs uppercase text-black">Uploaded file:</h5>
                             <div className="flex items-center space-x-2">
                               <label
-                                className="rounded-3xl bg-gray-400 bg-opacity-10 px-3 py-1"
+                                className="rounded-3xl bg-gray-100 bg-opacity-10 px-3 py-1"
                                 htmlFor="cancel-shapefile-btn"
                               >
                                 <p className="text-sm text-black">{successFile.path}</p>
diff --git a/app/layout/project/sidebar/project/header/project-button/publish-modal/component.tsx b/app/layout/project/sidebar/project/header/project-button/publish-modal/component.tsx
index 1874712197..9af88cfd38 100644
--- a/app/layout/project/sidebar/project/header/project-button/publish-modal/component.tsx
+++ b/app/layout/project/sidebar/project/header/project-button/publish-modal/component.tsx
@@ -270,7 +270,7 @@ export const PublishProjectModal: React.FC<PublishProjectModalProps> = ({
                           {!user.avatarDataUrl && (user.displayName || '').slice(0, 2)}
                         </Avatar>
                         <div>
-                          <span className="text-gray-700">{user.displayName}</span>
+                          <span className="text-gray-800">{user.displayName}</span>
                         </div>
                       </div>
                     </div>
diff --git a/app/layout/project/sidebar/project/header/title/index.tsx b/app/layout/project/sidebar/project/header/title/index.tsx
index f76148178f..a610857cea 100644
--- a/app/layout/project/sidebar/project/header/title/index.tsx
+++ b/app/layout/project/sidebar/project/header/title/index.tsx
@@ -158,7 +158,7 @@ const ProjectTitle = (): JSX.Element => {
                               {...input}
                               id="form-title-show-project-input"
                               className={cn({
-                                'absolute left-0 top-0 h-full w-full cursor-pointer overflow-ellipsis border-none bg-transparent px-1.5 font-heading text-3xl focus:bg-primary-300 focus:text-gray-500 focus:outline-none':
+                                'absolute left-0 top-0 h-full w-full cursor-pointer overflow-ellipsis border-none bg-transparent px-1.5 font-heading text-3xl focus:bg-primary-300 focus:text-gray-600 focus:outline-none':
                                   true,
                               })}
                               disabled={!editting}
@@ -183,7 +183,7 @@ const ProjectTitle = (): JSX.Element => {
                           animate={{ y: 0, opacity: 1 }}
                           exit={{ y: -10, opacity: 0 }}
                           className={cn({
-                            'flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-gray-400 transition-colors hover:border-gray-300 focus:outline-none':
+                            'flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-gray-600 transition-colors hover:border-gray-400 focus:outline-none':
                               true,
                             'bg-white': editting,
                             'bg-transparent': !editting,
@@ -208,7 +208,7 @@ const ProjectTitle = (): JSX.Element => {
                           animate={{ y: 0, opacity: 1 }}
                           exit={{ y: -10, opacity: 0 }}
                           className={cn({
-                            'flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-gray-500 px-2 transition-colors hover:border-gray-300 focus:outline-none':
+                            'flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-gray-600 px-2 transition-colors hover:border-gray-400 focus:outline-none':
                               true,
                             'bg-white': editting,
                           })}
@@ -216,7 +216,7 @@ const ProjectTitle = (): JSX.Element => {
                           <Icon
                             icon={CHECKED_SVG}
                             className={cn({
-                              'h-4 w-4 text-green-500 transition-colors': true,
+                              'h-4 w-4 text-green-600 transition-colors': true,
                             })}
                           />
                         </motion.button>
@@ -230,7 +230,7 @@ const ProjectTitle = (): JSX.Element => {
                           animate={{ y: 0, opacity: 1 }}
                           exit={{ y: -10, opacity: 0 }}
                           className={cn({
-                            'flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-gray-500 px-2 transition-colors hover:border-gray-300 focus:outline-none':
+                            'flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-gray-600 px-2 transition-colors hover:border-gray-400 focus:outline-none':
                               true,
                             'bg-white': editting,
                           })}
@@ -239,7 +239,7 @@ const ProjectTitle = (): JSX.Element => {
                           <Icon
                             icon={CLOSE_SVG}
                             className={cn({
-                              'h-3 w-3 text-red-500 transition-colors': true,
+                              'h-3 w-3 text-red-600 transition-colors': true,
                             })}
                           />
                         </motion.button>
@@ -265,7 +265,7 @@ const ProjectTitle = (): JSX.Element => {
                               {...input}
                               ref={textRefArea}
                               id="form-description-show-project-input"
-                              className="absolute left-0 top-0 z-50 h-full w-full overflow-ellipsis border-none bg-transparent font-heading text-sm font-normal text-opacity-0 opacity-0 transition-colors focus:bg-primary-300 focus:text-gray-500 focus:opacity-100 focus:outline-none"
+                              className="absolute left-0 top-0 z-50 h-full w-full overflow-ellipsis border-none bg-transparent font-heading text-sm font-normal text-opacity-0 opacity-0 transition-colors focus:bg-primary-300 focus:text-gray-600 focus:opacity-100 focus:outline-none"
                               disabled={!editting}
                               value={`${input.value}`}
                               onChange={(v) => {
diff --git a/app/layout/project/sidebar/project/header/under-moderation/index.tsx b/app/layout/project/sidebar/project/header/under-moderation/index.tsx
index 3c57cc4095..7b56480d65 100644
--- a/app/layout/project/sidebar/project/header/under-moderation/index.tsx
+++ b/app/layout/project/sidebar/project/header/under-moderation/index.tsx
@@ -28,7 +28,7 @@ const UnderModeration: React.FC = () => {
           maxWidth={350}
           content={
             <div
-              className="space-y-2 rounded bg-white p-4 text-sm text-gray-500"
+              className="space-y-2 rounded bg-white p-4 text-sm text-gray-600"
               style={{
                 boxShadow: '0 4px 20px rgba(0,0,0,0.25)',
               }}
@@ -43,7 +43,7 @@ const UnderModeration: React.FC = () => {
         >
           <motion.div
             key="under-moderation"
-            className="inline-flex items-center justify-start space-x-2.5 rounded-lg bg-red-500 px-2.5 py-2"
+            className="inline-flex items-center justify-start space-x-2.5 rounded-lg bg-red-600 px-2.5 py-2"
             initial={{ y: -10, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
             exit={{ y: -10, opacity: 0 }}
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx
index 8d37654430..e9a05e0fc8 100644
--- a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx
@@ -28,7 +28,7 @@ const HeaderItem = ({ className, text, name, sorting, onClick }: HeaderItem): JS
     >
       <span
         className={cn({
-          'text-xs font-semibold uppercase leading-none text-gray-400': true,
+          'text-xs font-semibold uppercase leading-none text-gray-600': true,
           'text-white': isActive,
           [className]: !!className,
         })}
@@ -38,15 +38,15 @@ const HeaderItem = ({ className, text, name, sorting, onClick }: HeaderItem): JS
       {sortOrder === 'asc' && isActive ? (
         <HiArrowDown
           className={cn({
-            'h-5 w-5 text-gray-400': true,
-            'text-blue-400': isActive,
+            'h-5 w-5 text-gray-600': true,
+            'text-blue-500': isActive,
           })}
         />
       ) : (
         <HiArrowUp
           className={cn({
-            'h-5 w-5 text-gray-400': true,
-            'text-blue-400': isActive,
+            'h-5 w-5 text-gray-600': true,
+            'text-blue-500': isActive,
           })}
         />
       )}
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
index c180110849..8bec94292d 100644
--- a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
@@ -36,14 +36,14 @@ const InventoryTable = ({
       )}
       {noData && <div className="flex h-[200px] items-center justify-center">{noDataMessage}</div>}
       {!!data?.length && (
-        <table className="relative flex h-full w-full flex-col space-y-2 overflow-hidden after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-gray-700 after:via-gray-700">
-          <thead className="relative block text-left text-xs font-semibold uppercase before:pointer-events-none before:absolute before:left-0 before:top-full before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-gray-700 before:via-gray-700">
+        <table className="relative flex h-full w-full flex-col space-y-2 overflow-hidden after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-gray-800 after:via-gray-800">
+          <thead className="relative block text-left text-xs font-semibold uppercase before:pointer-events-none before:absolute before:left-0 before:top-full before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-gray-800 before:via-gray-800">
             <tr className="flex w-full items-center pl-1">
               <th>
                 <Checkbox
                   id="select-all"
                   theme="light"
-                  className="block h-4 w-4 checked:bg-blue-400"
+                  className="block h-4 w-4 checked:bg-blue-500"
                   onChange={onSelectAll}
                   disabled={noDataCustom}
                 />
@@ -69,7 +69,7 @@ const InventoryTable = ({
             </tr>
           </thead>
           <ScrollArea className="h-full">
-            <tbody className="block h-full divide-y divide-gray-400 pb-4 pl-1 align-baseline text-sm">
+            <tbody className="block h-full divide-y divide-gray-600 pb-4 pl-1 align-baseline text-sm">
               {data.map((item) => (
                 <RowItem
                   key={item.id}
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx
index 437cf1fee4..69070975c2 100644
--- a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx
@@ -25,7 +25,7 @@ const RowItem = ({
         <Checkbox
           id={`select-${id}`}
           theme="light"
-          className="block h-4 w-4 checked:bg-blue-400"
+          className="block h-4 w-4 checked:bg-blue-500"
           onChange={onSelectRow}
           value={id}
           checked={isCustom && selectedIds.includes(id)}
@@ -39,9 +39,9 @@ const RowItem = ({
         })}
       >
         <span className="inline-flex">{name}</span>
-        <div className="mt-1.5 text-xs text-gray-300">
+        <div className="mt-1.5 text-xs text-gray-400">
           Currently in use in
-          <span className="rounded bg-blue-500 bg-opacity-10 px-1 text-blue-500">
+          <span className="rounded bg-blue-600 bg-opacity-10 px-1 text-blue-600">
             {scenarios}
           </span>{' '}
           scenarios.
@@ -50,7 +50,7 @@ const RowItem = ({
       {tag && (
         <td className="w-28 px-6 pb-2 pt-5 text-xs">
           <div className="flex justify-center">
-            <span className="whitespace-nowrap rounded-full bg-yellow-600 bg-opacity-10 px-2 py-1 text-yellow-600">
+            <span className="whitespace-nowrap rounded-full bg-yellow-700 bg-opacity-10 px-2 py-1 text-yellow-700">
               {tag}
             </span>
           </div>
@@ -61,8 +61,8 @@ const RowItem = ({
           <button type="button" onClick={() => onToggleSeeOnMap(id)}>
             <Icon
               className={cn({
-                'h-5 w-5 text-gray-400': true,
-                'text-blue-400': isVisibleOnMap,
+                'h-5 w-5 text-gray-600': true,
+                'text-blue-500': isVisibleOnMap,
               })}
               icon={isVisibleOnMap ? SHOW_SVG : HIDE_SVG}
             />
diff --git a/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/actions-menu/index.tsx b/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/actions-menu/index.tsx
index b5e7754cb4..8ac414a858 100644
--- a/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/actions-menu/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/actions-menu/index.tsx
@@ -10,9 +10,9 @@ import DELETE_SVG from 'svgs/ui/new-layout/delete.svg?sprite';
 import TAG_SVG from 'svgs/ui/tag.svg?sprite';
 
 const BUTTON_CLASSES =
-  'flex items-center px-4 py-2 w-full text-sm cursor-pointer bg-gray-700 hover:bg-gray-500 transition transition-colors space-x-2 group';
+  'flex items-center px-4 py-2 w-full text-sm cursor-pointer bg-gray-800 hover:bg-gray-600 transition transition-colors space-x-2 group';
 
-const ICON_CLASSES = 'h-5 w-5 text-gray-400 group-hover:text-white';
+const ICON_CLASSES = 'h-5 w-5 text-gray-100 group-hover:text-white';
 
 const ActionsMenu = ({
   item,
@@ -38,7 +38,7 @@ const ActionsMenu = ({
   }, []);
 
   return (
-    <ul className="rounded-2xl border-gray-500">
+    <ul className="rounded-2xl border-gray-600">
       <li>
         <button
           type="button"
diff --git a/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/bulk-action-menu/index.tsx b/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/bulk-action-menu/index.tsx
index a196227b7e..ea23327779 100644
--- a/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/bulk-action-menu/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/bulk-action-menu/index.tsx
@@ -9,8 +9,8 @@ import { CostSurface } from 'types/api/cost-surface';
 import DELETE_SVG from 'svgs/ui/new-layout/delete.svg?sprite';
 
 const BUTTON_CLASSES =
-  'col-span-1 flex items-center space-x-2 rounded-lg bg-gray-700 px-4 text-xs text-gray-50';
-const ICON_CLASSES = 'h-5 w-5 transition-colors text-gray-400 group-hover:text-gray-50';
+  'col-span-1 flex items-center space-x-2 rounded-lg bg-gray-800 px-4 text-xs text-gray-100';
+const ICON_CLASSES = 'h-5 w-5 transition-colors text-gray-100 group-hover:text-gray-100';
 
 const CostSurfaceBulkActionMenu = ({
   selectedCostSurfacesIds,
@@ -28,12 +28,12 @@ const CostSurfaceBulkActionMenu = ({
 
   return (
     <>
-      <div className="grid w-full grid-cols-2 items-center space-x-2 rounded-xl bg-gray-500 p-1">
+      <div className="grid w-full grid-cols-2 items-center space-x-2 rounded-xl bg-gray-600 p-1">
         <span className="col-span-1 flex items-center justify-center space-x-2">
-          <span className="block w-[20px] rounded-[4px] bg-blue-400/25 px-1 text-center text-xs font-semibold text-blue-400">
+          <span className="block w-[20px] rounded-[4px] bg-blue-500/25 px-1 text-center text-xs font-semibold text-blue-500">
             {selectedCostSurfacesIds.length}
           </span>
-          <span className="text-xs text-gray-50">Selected</span>
+          <span className="text-xs text-gray-100">Selected</span>
         </span>
 
         <Button
diff --git a/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/modals/delete/index.tsx b/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/modals/delete/index.tsx
index 0fad5ab67a..c4f233af67 100644
--- a/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/modals/delete/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/modals/delete/index.tsx
@@ -103,8 +103,8 @@ const DeleteModal = ({
           </span>
         )}
       </p>
-      <div className="flex items-center space-x-1.5 rounded border-l-[5px] border-red-600 bg-red-50/50 px-1.5 py-4">
-        <Icon className="h-10 w-10 text-red-600" icon={ALERT_SVG} />
+      <div className="flex items-center space-x-1.5 rounded border-l-[5px] border-red-700 bg-red-100/50 px-1.5 py-4">
+        <Icon className="h-10 w-10 text-red-700" icon={ALERT_SVG} />
         <p className="font-sans text-xs font-medium text-black">
           A cost surface can be deleted ONLY if it&apos;s not being used by any scenario
         </p>
diff --git a/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/modals/edit/index.tsx b/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/modals/edit/index.tsx
index 966b16fee9..c6135de79b 100644
--- a/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/modals/edit/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/modals/edit/index.tsx
@@ -104,7 +104,7 @@ const EditModal = ({
 
                       <input
                         {...fprops.input}
-                        className="h-10 w-full rounded-md border border-gray-300 px-3 text-gray-800 focus:border-none focus:outline-none focus:ring-1 focus:ring-blue-500"
+                        className="h-10 w-full rounded-md border border-gray-400 px-3 text-gray-900 focus:border-none focus:outline-none focus:ring-1 focus:ring-blue-600"
                         placeholder="Type name..."
                         defaultValue={fprops.input.value}
                       />
diff --git a/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/modals/upload/index.tsx b/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/modals/upload/index.tsx
index 370c17b73e..d9ef0803be 100644
--- a/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/modals/upload/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/modals/upload/index.tsx
@@ -214,7 +214,7 @@ export const CostSurfaceUploadModal = ({
                   </InfoButton>
                 </div>
 
-                <p className="!mt-4 text-sm text-gray-400">
+                <p className="!mt-4 text-sm text-gray-100">
                   Please download and fill in the{' '}
                   <button
                     className="text-primary-500 underline hover:no-underline"
@@ -250,17 +250,17 @@ export const CostSurfaceUploadModal = ({
                             {...props}
                             {...getRootProps()}
                             className={cn({
-                              'relative w-full cursor-pointer rounded-lg border-[1.5px] border-dashed border-gray-300 bg-gray-100 bg-opacity-20 py-10 hover:bg-gray-100':
+                              'relative w-full cursor-pointer rounded-lg border-[1.5px] border-dashed border-gray-400 bg-gray-200 bg-opacity-20 py-10 hover:bg-gray-200':
                                 true,
-                              'bg-gray-500': isDragActive,
-                              'border-green-800': isDragAccept,
-                              'border-red-800':
+                              'bg-gray-600': isDragActive,
+                              'border-green-900': isDragAccept,
+                              'border-red-900':
                                 isDragReject || (props?.meta?.error && props?.meta?.touched),
                             })}
                           >
                             <input {...getInputProps()} />
 
-                            <p className="text-center text-sm text-gray-500">
+                            <p className="text-center text-sm text-gray-600">
                               Drag and drop your polygon data file
                               <br />
                               or <b>click here</b> to upload
@@ -272,13 +272,13 @@ export const CostSurfaceUploadModal = ({
 
                             <Loading
                               visible={loading}
-                              className="absolute left-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-600 bg-opacity-90"
+                              className="absolute left-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-700 bg-opacity-90"
                               iconClassName="w-5 h-5 text-primary-500"
                             />
                           </div>
 
                           <div className="mt-2.5 flex items-center space-x-3">
-                            <h5 className="text-xs text-gray-400">Supported formats</h5>
+                            <h5 className="text-xs text-gray-600">Supported formats</h5>
                             <InfoButton size="s" theme="secondary">
                               <span className="text-xs">
                                 {' '}
@@ -309,7 +309,7 @@ export const CostSurfaceUploadModal = ({
                       <h5 className="text-xs uppercase text-black">Uploaded file:</h5>
                       <div className="flex items-center space-x-2">
                         <label
-                          className="rounded-3xl bg-gray-400 bg-opacity-10 px-3 py-1"
+                          className="rounded-3xl bg-gray-100 bg-opacity-10 px-3 py-1"
                           htmlFor="cancel-shapefile-btn"
                         >
                           <p className="text-sm text-black">{successFile.name}</p>
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx
index ddc258b37b..c27929aa94 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx
@@ -11,13 +11,13 @@ import DELETE_SVG from 'svgs/ui/new-layout/delete.svg?sprite';
 import TAG_SVG from 'svgs/ui/tag.svg?sprite';
 
 const BUTTON_CLASSES =
-  'enabled:group flex w-full cursor-pointer items-center space-x-2 bg-gray-700 px-4 py-2 text-sm transition-colors enabled:hover:bg-gray-500';
+  'enabled:group flex w-full cursor-pointer items-center space-x-2 bg-gray-800 px-4 py-2 text-sm transition-colors enabled:hover:bg-gray-700';
 
-const BUTTON_DISABLED_CLASSES = 'disabled:cursor-default disabled:text-gray-400';
+const BUTTON_DISABLED_CLASSES = 'disabled:cursor-default disabled:text-gray-600';
 
-const ICON_CLASSES = 'h-5 w-5 text-gray-400 group-hover:text-white';
+const ICON_CLASSES = 'h-5 w-5 text-gray-100 group-hover:text-white';
 
-const ICON_DISABLED_CLASSES = 'text-gray-500';
+const ICON_DISABLED_CLASSES = 'text-gray-700';
 
 const ActionsMenu = ({ item }: { item: DataItem }): JSX.Element => {
   const isDeletable = !item.isCustom || !item.scenarios;
@@ -32,7 +32,7 @@ const ActionsMenu = ({ item }: { item: DataItem }): JSX.Element => {
   }, []);
 
   return (
-    <ul className="rounded-2xl border-gray-500">
+    <ul className="rounded-2xl border-gray-600">
       <li>
         <button
           type="button"
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/bulk-action-menu/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/bulk-action-menu/index.tsx
index ab35ef62c6..5ada9f6d71 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/bulk-action-menu/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/bulk-action-menu/index.tsx
@@ -11,8 +11,8 @@ import EDIT_SVG from 'svgs/ui/edit.svg?sprite';
 import DELETE_SVG from 'svgs/ui/new-layout/delete.svg?sprite';
 
 const BUTTON_CLASSES =
-  'col-span-1 flex items-center space-x-2 rounded-lg bg-gray-700 px-4 text-xs text-gray-50';
-const ICON_CLASSES = 'h-5 w-5 transition-colors text-gray-400 group-hover:text-gray-50';
+  'col-span-1 flex items-center space-x-2 rounded-lg bg-gray-800 px-4 text-xs text-gray-100';
+const ICON_CLASSES = 'h-5 w-5 transition-colors text-gray-100 group-hover:text-gray-100';
 
 const FeaturesBulkActionMenu = ({
   selectedFeaturesIds,
@@ -30,12 +30,12 @@ const FeaturesBulkActionMenu = ({
 
   return (
     <>
-      <div className="grid w-full grid-cols-3 items-center space-x-2 rounded-xl bg-gray-500 p-1">
+      <div className="grid w-full grid-cols-3 items-center space-x-2 rounded-xl bg-gray-600 p-1">
         <span className="col-span-1 flex items-center justify-center space-x-2">
-          <span className="block w-[20px] rounded-[4px] bg-blue-400/25 px-1 text-center text-xs font-semibold text-blue-400">
+          <span className="block w-[20px] rounded-[4px] bg-blue-500/25 px-1 text-center text-xs font-semibold text-blue-500">
             {selectedFeaturesIds.length}
           </span>
-          <span className="text-xs text-gray-50">Selected</span>
+          <span className="text-xs text-gray-100">Selected</span>
         </span>
         <Button
           theme="secondary"
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/modals/delete/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/modals/delete/index.tsx
index f220c70328..4073ca02f8 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/modals/delete/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/modals/delete/index.tsx
@@ -105,8 +105,8 @@ const DeleteModal = ({
           </span>
         )}
       </p>
-      <div className="flex items-center space-x-1.5 rounded border-l-[5px] border-red-600 bg-red-50/50 px-1.5 py-4">
-        <Icon className="h-10 w-10 text-red-600" icon={ALERT_SVG} />
+      <div className="flex items-center space-x-1.5 rounded border-l-[5px] border-red-700 bg-red-100/50 px-1.5 py-4">
+        <Icon className="h-10 w-10 text-red-700" icon={ALERT_SVG} />
         <p className="font-sans text-xs font-medium text-black">
           A feature can be deleted ONLY if it&apos;s not being used by any scenario
         </p>
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/modals/edit-bulk/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/modals/edit-bulk/index.tsx
index 33b30b7824..a7232b7521 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/modals/edit-bulk/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/modals/edit-bulk/index.tsx
@@ -174,7 +174,7 @@ const EditBulkModal = ({
                         <div className="space-y-2">
                           <input
                             {...fprops.input}
-                            className="h-10 w-full rounded-md border border-gray-300 px-3 text-gray-800 focus:border-none focus:outline-none focus:ring-1 focus:ring-blue-500"
+                            className="h-10 w-full rounded-md border border-gray-400 px-3 text-gray-900 focus:border-none focus:outline-none focus:ring-1 focus:ring-blue-600"
                             placeholder="Type to pick or create tag..."
                             value={fprops.input.value}
                             onFocus={() => {
@@ -185,26 +185,26 @@ const EditBulkModal = ({
                             onKeyDown={handleKeyPress}
                           />
                           {!tagsMenuOpen && (
-                            <p className="mt-1 font-sans text-xxs text-gray-300">
+                            <p className="mt-1 font-sans text-xxs text-gray-400">
                               * Changes to selected features will automatically update related
                               scenarios.
                             </p>
                           )}
 
                           {tagsMenuOpen && (
-                            <div className="w-full space-y-2.5 rounded-md bg-white p-4 font-sans text-gray-800 shadow-md">
-                              <div className="text-sm text-gray-800">Recent:</div>
+                            <div className="w-full space-y-2.5 rounded-md bg-white p-4 font-sans text-gray-900 shadow-md">
+                              <div className="text-sm text-gray-900">Recent:</div>
                               <div className="flex flex-wrap gap-2.5">
                                 {tagsQuery.data?.map((tag) => (
                                   <button
                                     key={tag}
-                                    className="inline-block rounded-2xl border border-yellow-600 bg-yellow-400/50 px-3 py-0.5"
+                                    className="inline-block rounded-2xl border border-yellow-700 bg-yellow-500/50 px-3 py-0.5"
                                     onClick={() => {
                                       form.change('tag', tag);
                                       setTagIsDone(true);
                                     }}
                                   >
-                                    <p className="text-sm text-gray-800">{tag}</p>
+                                    <p className="text-sm text-gray-900">{tag}</p>
                                   </button>
                                 ))}
                               </div>
@@ -215,11 +215,11 @@ const EditBulkModal = ({
 
                       {values.tag && tagIsDone && (
                         <div className="flex items-center space-x-1">
-                          <div className="inline-block items-center space-x-2 rounded-2xl border border-yellow-600 bg-yellow-400/50 px-3 py-0.5 hover:bg-yellow-600">
-                            <p className="text-sm text-gray-800">{values.tag}</p>
+                          <div className="inline-block items-center space-x-2 rounded-2xl border border-yellow-700 bg-yellow-500/50 px-3 py-0.5 hover:bg-yellow-700">
+                            <p className="text-sm text-gray-900">{values.tag}</p>
                           </div>
                           <button
-                            className="group flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-gray-300 hover:bg-gray-500"
+                            className="group flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-gray-400 hover:bg-gray-600"
                             onClick={() => {
                               form.change('tag', null);
                               setTagIsDone(false);
@@ -227,7 +227,7 @@ const EditBulkModal = ({
                           >
                             <Icon
                               icon={CLOSE_SVG}
-                              className="h-2 w-2 text-gray-400  group-hover:text-white"
+                              className="h-2 w-2 text-gray-100  group-hover:text-white"
                             />
                           </button>
                         </div>
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/modals/edit/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/modals/edit/index.tsx
index 2596baaf40..08d21a5298 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/modals/edit/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/modals/edit/index.tsx
@@ -176,7 +176,7 @@ const EditModal = ({
 
                       <input
                         {...fprops.input}
-                        className="h-10 w-full rounded-md border border-gray-300 px-3 text-gray-800 focus:border-none focus:outline-none focus:ring-1 focus:ring-blue-500"
+                        className="h-10 w-full rounded-md border border-gray-400 px-3 text-gray-900 focus:border-none focus:outline-none focus:ring-1 focus:ring-blue-600"
                         placeholder="Type name..."
                         defaultValue={fprops.input.value}
                       />
@@ -199,7 +199,7 @@ const EditModal = ({
                         <div className="space-y-2">
                           <input
                             {...fprops.input}
-                            className="h-10 w-full rounded-md border border-gray-300 px-3 text-gray-800 focus:border-none focus:outline-none focus:ring-1 focus:ring-blue-500"
+                            className="h-10 w-full rounded-md border border-gray-400 px-3 text-gray-900 focus:border-none focus:outline-none focus:ring-1 focus:ring-blue-600"
                             placeholder="Type to pick or create tag..."
                             value={fprops.input.value}
                             onFocus={() => {
@@ -211,19 +211,19 @@ const EditModal = ({
                           />
 
                           {tagsMenuOpen && (
-                            <div className="w-full space-y-2.5 rounded-md bg-white p-4 font-sans text-gray-800 shadow-md">
-                              <div className="text-sm text-gray-800">Recent:</div>
+                            <div className="w-full space-y-2.5 rounded-md bg-white p-4 font-sans text-gray-900 shadow-md">
+                              <div className="text-sm text-gray-900">Recent:</div>
                               <div className="flex flex-wrap gap-2.5">
                                 {tagsQuery.data?.map((tag) => (
                                   <button
                                     key={tag}
-                                    className="inline-block rounded-2xl border border-yellow-600 bg-yellow-400/50 px-3 py-0.5"
+                                    className="inline-block rounded-2xl border border-yellow-700 bg-yellow-500/50 px-3 py-0.5"
                                     onClick={() => {
                                       form.change('tag', tag);
                                       setTagIsDone(true);
                                     }}
                                   >
-                                    <p className="text-sm text-gray-800">{tag}</p>
+                                    <p className="text-sm text-gray-900">{tag}</p>
                                   </button>
                                 ))}
                               </div>
@@ -234,11 +234,11 @@ const EditModal = ({
 
                       {values.tag && tagIsDone && (
                         <div className="flex items-center space-x-1">
-                          <div className="inline-block items-center space-x-2 rounded-2xl border border-yellow-600 bg-yellow-400/50 px-3 py-0.5 hover:bg-yellow-600">
-                            <p className="text-sm text-gray-800">{values.tag}</p>
+                          <div className="inline-block items-center space-x-2 rounded-2xl border border-yellow-700 bg-yellow-500/50 px-3 py-0.5 hover:bg-yellow-700">
+                            <p className="text-sm text-gray-900">{values.tag}</p>
                           </div>
                           <button
-                            className="group flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-gray-300 hover:bg-gray-500"
+                            className="group flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-gray-400 hover:bg-gray-600"
                             onClick={() => {
                               form.change('tag', null);
                               setTagIsDone(false);
@@ -246,7 +246,7 @@ const EditModal = ({
                           >
                             <Icon
                               icon={CLOSE_SVG}
-                              className="h-2 w-2 text-gray-400 group-hover:text-white"
+                              className="h-2 w-2 text-gray-100 group-hover:text-white"
                             />
                           </button>
                         </div>
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/modals/upload/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/modals/upload/index.tsx
index c64e26aec5..a233151024 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/modals/upload/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/modals/upload/index.tsx
@@ -283,7 +283,7 @@ export const FeatureUploadModal = ({
 
                 <UploadTabs mode={uploadMode} onChange={(mode) => saveUploadMode(mode)} />
                 {uploadMode === 'csv' && (
-                  <p className="!mt-4 text-sm text-gray-400">
+                  <p className="!mt-4 text-sm text-gray-100">
                     Please download and fill in the{' '}
                     <button
                       className="text-primary-500 underline hover:no-underline"
@@ -326,7 +326,7 @@ export const FeatureUploadModal = ({
                             <div className="space-y-2">
                               <input
                                 {...fprops.input}
-                                className="h-10 w-full rounded-md border border-gray-500 px-3 text-gray-800 focus:border-none focus:outline-none focus:ring-1 focus:ring-blue-500"
+                                className="h-10 w-full rounded-md border border-gray-600 px-3 text-gray-900 focus:border-none focus:outline-none focus:ring-1 focus:ring-blue-600"
                                 placeholder="Type to pick or create tag..."
                                 value={fprops.input.value}
                                 onFocus={() => setTagsMenuOpen(true)}
@@ -335,19 +335,19 @@ export const FeatureUploadModal = ({
                               />
 
                               {tagsMenuOpen && (
-                                <div className="w-full space-y-2.5 rounded-md bg-white p-4 font-sans text-gray-800 shadow-md">
-                                  <div className="text-sm text-gray-800">Recent:</div>
+                                <div className="w-full space-y-2.5 rounded-md bg-white p-4 font-sans text-gray-900 shadow-md">
+                                  <div className="text-sm text-gray-900">Recent:</div>
                                   <div className="flex flex-wrap gap-2.5">
                                     {tagsQuery.data?.map((tag) => (
                                       <button
                                         key={tag}
-                                        className="inline-block rounded-2xl border border-yellow-600 bg-yellow-400/50 px-3 py-0.5"
+                                        className="inline-block rounded-2xl border border-yellow-700 bg-yellow-500/50 px-3 py-0.5"
                                         onClick={() => {
                                           form.change('tag', tag);
                                           setTagIsDone(true);
                                         }}
                                       >
-                                        <p className="text-sm text-gray-800">{tag}</p>
+                                        <p className="text-sm text-gray-900">{tag}</p>
                                       </button>
                                     ))}
                                   </div>
@@ -358,11 +358,11 @@ export const FeatureUploadModal = ({
 
                           {values.tag && tagIsDone && (
                             <div className="flex items-center space-x-1">
-                              <div className="inline-block items-center space-x-2 rounded-2xl border border-yellow-600 bg-yellow-400/50 px-3 py-0.5 hover:bg-yellow-600">
-                                <p className="text-sm text-gray-800">{values.tag}</p>
+                              <div className="inline-block items-center space-x-2 rounded-2xl border border-yellow-700 bg-yellow-500/50 px-3 py-0.5 hover:bg-yellow-700">
+                                <p className="text-sm text-gray-900">{values.tag}</p>
                               </div>
                               <button
-                                className="group flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-gray-300 hover:bg-gray-500"
+                                className="group flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-gray-400 hover:bg-gray-600"
                                 onClick={() => {
                                   form.change('tag', null);
                                   setTagIsDone(false);
@@ -370,7 +370,7 @@ export const FeatureUploadModal = ({
                               >
                                 <Icon
                                   icon={CLOSE_SVG}
-                                  className="h-2 w-2 text-gray-400  group-hover:text-white"
+                                  className="h-2 w-2 text-gray-100  group-hover:text-white"
                                 />
                               </button>
                             </div>
@@ -393,17 +393,17 @@ export const FeatureUploadModal = ({
                             {...props}
                             {...getRootProps()}
                             className={cn({
-                              'relative w-full cursor-pointer rounded-lg border-[1.5px] border-dashed border-gray-300 bg-gray-100 bg-opacity-20 py-10 hover:bg-gray-100':
+                              'relative w-full cursor-pointer rounded-lg border-[1.5px] border-dashed border-gray-400 bg-gray-200 bg-opacity-20 py-10 hover:bg-gray-200':
                                 true,
-                              'bg-gray-500': isDragActive,
-                              'border-green-800': isDragAccept,
-                              'border-red-800':
+                              'bg-gray-600': isDragActive,
+                              'border-green-900': isDragAccept,
+                              'border-red-900':
                                 isDragReject || (props?.meta?.error && props?.meta?.touched),
                             })}
                           >
                             <input {...getInputProps()} />
 
-                            <p className="text-center text-sm text-gray-500">
+                            <p className="text-center text-sm text-gray-600">
                               Drag and drop your{' '}
                               {uploadMode === 'shapefile' ? 'polygon data file' : 'feature file'}
                               <br />
@@ -416,13 +416,13 @@ export const FeatureUploadModal = ({
 
                             <Loading
                               visible={loading}
-                              className="absolute left-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-600 bg-opacity-90"
+                              className="absolute left-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-700 bg-opacity-90"
                               iconClassName="w-5 h-5 text-primary-500"
                             />
                           </div>
 
                           <div className="mt-2.5 flex items-center space-x-3">
-                            <h5 className="text-xs text-gray-400">Supported formats</h5>
+                            <h5 className="text-xs text-gray-600">Supported formats</h5>
                             <InfoButton size="s" theme="secondary">
                               <span className="text-xs">
                                 {' '}
@@ -453,7 +453,7 @@ export const FeatureUploadModal = ({
                       <h5 className="text-xs uppercase text-black">Uploaded file:</h5>
                       <div className="flex items-center space-x-2">
                         <label
-                          className="rounded-3xl bg-gray-400 bg-opacity-10 px-3 py-1"
+                          className="rounded-3xl bg-gray-100 bg-opacity-10 px-3 py-1"
                           htmlFor="cancel-shapefile-btn"
                         >
                           <p className="text-sm text-black">{successFile.name}</p>
diff --git a/app/layout/project/sidebar/project/inventory-panel/index.tsx b/app/layout/project/sidebar/project/inventory-panel/index.tsx
index 70ff809fca..08221580a4 100644
--- a/app/layout/project/sidebar/project/inventory-panel/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/index.tsx
@@ -65,7 +65,7 @@ const InventoryPanel = (): JSX.Element => {
     <Section className="relative flex flex-col space-y-2 overflow-hidden">
       <header className="flex items-center justify-between">
         <div className="space-y-1">
-          <span className="text-xs font-semibold text-blue-400">Inventory Panel</span>
+          <span className="text-xs font-semibold text-blue-500">Inventory Panel</span>
           <h3 className="flex items-center space-x-2">
             <span className="text-lg font-medium">{title}</span>
             {/* Not all panels have an InfoComponent */}
diff --git a/app/layout/project/sidebar/project/inventory-panel/wdpas/actions-menu/index.tsx b/app/layout/project/sidebar/project/inventory-panel/wdpas/actions-menu/index.tsx
index de307bc624..f4fcc3d820 100644
--- a/app/layout/project/sidebar/project/inventory-panel/wdpas/actions-menu/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/wdpas/actions-menu/index.tsx
@@ -10,9 +10,9 @@ import DELETE_SVG from 'svgs/ui/new-layout/delete.svg?sprite';
 import TAG_SVG from 'svgs/ui/tag.svg?sprite';
 
 const BUTTON_CLASSES =
-  'flex items-center px-4 py-2 w-full text-sm cursor-pointer bg-gray-700 hover:bg-gray-500 transition transition-colors space-x-2 group';
+  'flex items-center px-4 py-2 w-full text-sm cursor-pointer bg-gray-800 hover:bg-gray-600 transition transition-colors space-x-2 group';
 
-const ICON_CLASSES = 'h-5 w-5 text-gray-400 group-hover:text-white';
+const ICON_CLASSES = 'h-5 w-5 text-gray-100 group-hover:text-white';
 
 const ActionsMenu = ({
   item,
@@ -37,7 +37,7 @@ const ActionsMenu = ({
   }, []);
 
   return (
-    <ul className="rounded-2xl border-gray-500">
+    <ul className="rounded-2xl border-gray-600">
       <li>
         <button
           type="button"
diff --git a/app/layout/project/sidebar/project/inventory-panel/wdpas/bulk-action-menu/index.tsx b/app/layout/project/sidebar/project/inventory-panel/wdpas/bulk-action-menu/index.tsx
index 6442968dfd..d94376fa66 100644
--- a/app/layout/project/sidebar/project/inventory-panel/wdpas/bulk-action-menu/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/wdpas/bulk-action-menu/index.tsx
@@ -9,8 +9,8 @@ import { WDPA } from 'types/api/wdpa';
 import DELETE_SVG from 'svgs/ui/new-layout/delete.svg?sprite';
 
 const BUTTON_CLASSES =
-  'col-span-1 flex items-center space-x-2 rounded-lg bg-gray-700 px-4 text-xs text-gray-50';
-const ICON_CLASSES = 'h-5 w-5 transition-colors text-gray-400 group-hover:text-gray-50';
+  'col-span-1 flex items-center space-x-2 rounded-lg bg-gray-800 px-4 text-xs text-gray-100';
+const ICON_CLASSES = 'h-5 w-5 transition-colors text-gray-100 group-hover:text-gray-100';
 
 const WDPABulkActionMenu = ({
   selectedWDPAIds,
@@ -28,12 +28,12 @@ const WDPABulkActionMenu = ({
 
   return (
     <>
-      <div className="grid w-full grid-cols-2 items-center space-x-2 rounded-xl bg-gray-500 p-1">
+      <div className="grid w-full grid-cols-2 items-center space-x-2 rounded-xl bg-gray-600 p-1">
         <span className="col-span-1 flex items-center justify-center space-x-2">
-          <span className="block w-[20px] rounded-[4px] bg-blue-400/25 px-1 text-center text-xs font-semibold text-blue-400">
+          <span className="block w-[20px] rounded-[4px] bg-blue-500/25 px-1 text-center text-xs font-semibold text-blue-500">
             {selectedWDPAIds.length}
           </span>
-          <span className="text-xs text-gray-50">Selected</span>
+          <span className="text-xs text-gray-100">Selected</span>
         </span>
 
         <Button
diff --git a/app/layout/project/sidebar/project/inventory-panel/wdpas/footer/index.tsx b/app/layout/project/sidebar/project/inventory-panel/wdpas/footer/index.tsx
index 081684cc67..2b021b957c 100644
--- a/app/layout/project/sidebar/project/inventory-panel/wdpas/footer/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/wdpas/footer/index.tsx
@@ -1,7 +1,7 @@
 const ProtectedAreasFooter = (): JSX.Element => {
   return (
     <div className="mt-8 text-xs">
-      <p className="text-gray-300">
+      <p className="text-gray-400">
         UNEP-WCMC and IUCN (2022), Protected Planet: The World Database on Protected Areas (WDPA)
         [On-line], [05/2022], Cambridge, UK: UNEP-WCMC and IUCN.
       </p>
@@ -9,7 +9,7 @@ const ProtectedAreasFooter = (): JSX.Element => {
       <p className="mt-7">
         Available at:{' '}
         <a
-          className="text-blue-400"
+          className="text-blue-500"
           href="https://www.protectedplanet.net/"
           target="_blank"
           rel="noopener noreferrer"
diff --git a/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/delete/index.tsx b/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/delete/index.tsx
index f63007f188..2a43fa643a 100644
--- a/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/delete/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/delete/index.tsx
@@ -102,8 +102,8 @@ const DeleteModal = ({
           </span>
         )}
       </p>
-      <div className="flex items-center space-x-1.5 rounded border-l-[5px] border-red-600 bg-red-50/50 px-1.5 py-4">
-        <Icon className="h-10 w-10 text-red-600" icon={ALERT_SVG} />
+      <div className="flex items-center space-x-1.5 rounded border-l-[5px] border-red-700 bg-red-100/50 px-1.5 py-4">
+        <Icon className="h-10 w-10 text-red-700" icon={ALERT_SVG} />
         <p className="font-sans text-xs font-medium text-black">
           A protected area can be deleted ONLY if it&apos;s not being used by any scenario
         </p>
diff --git a/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/edit/index.tsx b/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/edit/index.tsx
index cf0aa3e7a7..5c0c22eeca 100644
--- a/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/edit/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/edit/index.tsx
@@ -104,7 +104,7 @@ const EditModal = ({
 
                       <input
                         {...fprops.input}
-                        className="h-10 w-full rounded-md border border-gray-300 px-3 text-gray-800 focus:border-none focus:outline-none focus:ring-1 focus:ring-blue-500"
+                        className="h-10 w-full rounded-md border border-gray-400 px-3 text-gray-900 focus:border-none focus:outline-none focus:ring-1 focus:ring-blue-600"
                         placeholder="Type name..."
                         defaultValue={fprops.input.value}
                       />
diff --git a/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/upload/index.tsx b/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/upload/index.tsx
index 64aa43c9ec..4ab0170987 100644
--- a/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/upload/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/wdpas/modals/upload/index.tsx
@@ -220,17 +220,17 @@ export const WDPAUploadModal = ({
                             {...props}
                             {...getRootProps()}
                             className={cn({
-                              'relative w-full cursor-pointer rounded-lg border-[1.5px] border-dashed border-gray-300 bg-gray-100 bg-opacity-20 py-10 hover:bg-gray-100':
+                              'relative w-full cursor-pointer rounded-lg border-[1.5px] border-dashed border-gray-400 bg-gray-200 bg-opacity-20 py-10 hover:bg-gray-200':
                                 true,
-                              'bg-gray-500': isDragActive,
-                              'border-green-800': isDragAccept,
-                              'border-red-800':
+                              'bg-gray-600': isDragActive,
+                              'border-green-900': isDragAccept,
+                              'border-red-900':
                                 isDragReject || (props?.meta?.error && props?.meta?.touched),
                             })}
                           >
                             <input {...getInputProps()} />
 
-                            <p className="text-center text-sm text-gray-500">
+                            <p className="text-center text-sm text-gray-600">
                               Drag and drop your polygon data file
                               <br />
                               or <b>click here</b> to upload
@@ -242,13 +242,13 @@ export const WDPAUploadModal = ({
 
                             <Loading
                               visible={loading}
-                              className="absolute left-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-600 bg-opacity-90"
+                              className="absolute left-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-700 bg-opacity-90"
                               iconClassName="w-5 h-5 text-primary-500"
                             />
                           </div>
 
                           <div className="mt-2.5 flex items-center space-x-3">
-                            <h5 className="text-xs text-gray-400">Supported formats</h5>
+                            <h5 className="text-xs text-gray-600">Supported formats</h5>
                             <InfoButton size="s" theme="secondary">
                               <span className="text-xs">
                                 {' '}
@@ -279,7 +279,7 @@ export const WDPAUploadModal = ({
                       <h5 className="text-xs uppercase text-black">Uploaded file:</h5>
                       <div className="flex items-center space-x-2">
                         <label
-                          className="rounded-3xl bg-gray-400 bg-opacity-10 px-3 py-1"
+                          className="rounded-3xl bg-gray-100 bg-opacity-10 px-3 py-1"
                           htmlFor="cancel-shapefile-btn"
                         >
                           <p className="text-sm text-black">{successFile.name}</p>
diff --git a/app/layout/project/sidebar/project/scenarios-list/index.tsx b/app/layout/project/sidebar/project/scenarios-list/index.tsx
index 7febd4d3c0..0f59a1fe33 100644
--- a/app/layout/project/sidebar/project/scenarios-list/index.tsx
+++ b/app/layout/project/sidebar/project/scenarios-list/index.tsx
@@ -296,13 +296,13 @@ export const ScenariosList: React.FC = () => {
                 initial={{ y: -10, opacity: 0 }}
                 animate={{ y: 0, opacity: 1 }}
                 exit={{ y: -10, opacity: 0 }}
-                className="flex flex-col items-center space-y-9 rounded-3xl bg-gray-700 bg-cover bg-right bg-no-repeat py-10"
+                className="flex flex-col items-center space-y-9 rounded-3xl bg-gray-800 bg-cover bg-right bg-no-repeat py-10"
                 style={{
                   backgroundImage: `url(${bgScenariosDashboard})`,
                 }}
               >
                 <div className="mx-12 mt-48 flex flex-col items-center">
-                  <p className="mt-1 text-center font-sans text-xs font-medium text-gray-300">
+                  <p className="mt-1 text-center font-sans text-xs font-medium text-gray-400">
                     Before we can show you any results, we&lsquo;ll need you to{' '}
                     <span className="text-white">
                       upload some features, protected areas or cost surface
@@ -312,17 +312,17 @@ export const ScenariosList: React.FC = () => {
                 </div>
                 <div className="mx-10 flex flex-wrap justify-center gap-2">
                   <Link href={`/projects/${pid}/?tab=protected-areas`}>
-                    <div className="inline-block rounded-xl bg-gray-500 px-2.5 py-1 text-sm text-white transition-colors hover:bg-gray-400">
+                    <div className="inline-block rounded-xl bg-gray-600 px-2.5 py-1 text-sm text-white transition-colors hover:bg-gray-100">
                       Upload Protected Areas
                     </div>
                   </Link>
                   <Link href={`/projects/${pid}/?tab=cost-surface`}>
-                    <div className="inline-block rounded-xl bg-gray-500 px-2.5 py-1 text-sm text-white transition-colors hover:bg-gray-400">
+                    <div className="inline-block rounded-xl bg-gray-600 px-2.5 py-1 text-sm text-white transition-colors hover:bg-gray-100">
                       Upload Cost Surface
                     </div>
                   </Link>
                   <Link href={`/projects/${pid}/?tab=features`}>
-                    <div className="inline-block rounded-xl bg-gray-500 px-2.5 py-1 text-sm text-white transition-colors hover:bg-gray-400">
+                    <div className="inline-block rounded-xl bg-gray-600 px-2.5 py-1 text-sm text-white transition-colors hover:bg-gray-100">
                       Upload Features
                     </div>
                   </Link>
@@ -334,7 +334,7 @@ export const ScenariosList: React.FC = () => {
                 initial={{ y: -10, opacity: 0 }}
                 animate={{ y: 0, opacity: 1 }}
                 exit={{ y: -10, opacity: 0 }}
-                className="h-fit flex items-center justify-center rounded-3xl bg-gray-700 py-6"
+                className="flex h-fit items-center justify-center rounded-3xl bg-gray-800 py-6"
               >
                 <Button
                   theme="primary"
@@ -362,7 +362,7 @@ export const ScenariosList: React.FC = () => {
                 >
                   <Loading
                     visible={solutionsReportLoader}
-                    className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-90"
+                    className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-900 bg-opacity-90"
                     iconClassName="w-10 h-10 text-primary-500"
                   />
                   {`Export scenario${scenariosData.length > 1 ? 's' : ''} data`}
diff --git a/app/layout/project/sidebar/project/scenarios-list/scenario-item/constants.tsx b/app/layout/project/sidebar/project/scenarios-list/scenario-item/constants.tsx
index f3fed18e1f..50270db840 100644
--- a/app/layout/project/sidebar/project/scenarios-list/scenario-item/constants.tsx
+++ b/app/layout/project/sidebar/project/scenarios-list/scenario-item/constants.tsx
@@ -5,11 +5,11 @@ export const SCENARIO_STATES = {
   },
   'run-failure': {
     text: 'Fail Running Scenario',
-    styles: 'text-red-500',
+    styles: 'text-red-600',
   },
   'run-done': {
     text: 'Run Scenario',
-    styles: 'text-blue-500',
+    styles: 'text-blue-600',
   },
   'calibration-running': {
     text: 'Running Calibration',
@@ -17,7 +17,7 @@ export const SCENARIO_STATES = {
   },
   'calibration-failure': {
     text: 'Fail Running Calibration',
-    styles: 'text-red-500',
+    styles: 'text-red-600',
   },
   'pa-running': {
     text: 'Running PA percentage',
@@ -25,7 +25,7 @@ export const SCENARIO_STATES = {
   },
   'pa-failure': {
     text: 'Fail PA percentage',
-    styles: 'text-red-500',
+    styles: 'text-red-600',
   },
   'pu-running': {
     text: 'Running PU inclusion',
@@ -33,7 +33,7 @@ export const SCENARIO_STATES = {
   },
   'pu-failure': {
     text: 'Fail PU inclusion',
-    styles: 'text-red-500',
+    styles: 'text-red-600',
   },
   'features-running': {
     text: 'Running Features',
@@ -41,7 +41,7 @@ export const SCENARIO_STATES = {
   },
   'features-failure': {
     text: 'Fail Features',
-    styles: 'text-red-500',
+    styles: 'text-red-600',
   },
   'clone-running': {
     text: 'Running cloning',
@@ -49,10 +49,10 @@ export const SCENARIO_STATES = {
   },
   'clone-failure': {
     text: 'Fail cloning scenario',
-    styles: 'text-red-500',
+    styles: 'text-red-600',
   },
   draft: {
     text: 'Edited',
-    styles: 'text-gray-400',
+    styles: 'text-gray-600',
   },
 };
diff --git a/app/layout/project/sidebar/project/scenarios-list/scenario-item/index.tsx b/app/layout/project/sidebar/project/scenarios-list/scenario-item/index.tsx
index 7803159822..9768fb8911 100644
--- a/app/layout/project/sidebar/project/scenarios-list/scenario-item/index.tsx
+++ b/app/layout/project/sidebar/project/scenarios-list/scenario-item/index.tsx
@@ -132,7 +132,7 @@ export const ScenarioItem: React.FC<ScenarioItemProps> = ({
       >
         <div
           className={cn({
-            'flex flex-grow flex-col rounded-l-[20px] bg-gray-700 pl-8': true,
+            'flex flex-grow flex-col rounded-l-[20px] bg-gray-800 pl-8': true,
             'rounded-bl-none': settings,
           })}
         >
@@ -142,7 +142,7 @@ export const ScenarioItem: React.FC<ScenarioItemProps> = ({
                 <div className="flex flex-row items-center">
                   {warnings && (
                     <div className="relative mr-5 flex h-10 w-10 items-center rounded-full border border-solid border-white">
-                      <div className="absolute -right-1 -top-1 h-4 w-4 rounded-full border-4 border-solid border-gray-700 bg-red-500" />
+                      <div className="absolute -right-1 -top-1 h-4 w-4 rounded-full border-4 border-solid border-gray-800 bg-red-600" />
                       <Icon className="h-10 w-10" icon={WARNING_SVG} />
                     </div>
                   )}
@@ -153,13 +153,13 @@ export const ScenarioItem: React.FC<ScenarioItemProps> = ({
                         arrow
                         placement="top"
                         content={
-                          <div className="rounded bg-white p-2 text-center text-xs text-gray-500">
+                          <div className="rounded bg-white p-2 text-center text-xs text-gray-600">
                             <div>{lock.displayName || lock.email}</div>
                             <div>is editing this scenario</div>
                           </div>
                         }
                       >
-                        <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gray-500">
+                        <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gray-700">
                           <Icon className="relative w-3 text-white" icon={LOCK_SVG} />
                         </div>
                       </Tooltip>
@@ -201,7 +201,7 @@ export const ScenarioItem: React.FC<ScenarioItemProps> = ({
                       className={cn({
                         'h-5 w-5 transition-colors': true,
                         'text-primary-500': settings,
-                        'text-gray-400': !settings,
+                        'text-gray-600': !settings,
                       })}
                       icon={TOGGLE_SCENARIO_SVG}
                     />
@@ -212,7 +212,7 @@ export const ScenarioItem: React.FC<ScenarioItemProps> = ({
               {status !== 'run-running' && (
                 <Popover>
                   <PopoverTrigger asChild>
-                    <button className="flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:bg-gray-500">
+                    <button className="flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:bg-gray-700">
                       <Icon
                         icon={DOTS_SVG}
                         className={cn({
@@ -224,27 +224,27 @@ export const ScenarioItem: React.FC<ScenarioItemProps> = ({
                   <PopoverContent
                     side="right"
                     sideOffset={20}
-                    className="w-32 rounded-2xl !border-none bg-gray-700 !p-0 font-sans text-xs"
+                    className="w-32 rounded-2xl !border-none bg-gray-800 !p-0 font-sans text-xs"
                     collisionPadding={50}
                   >
                     <button
-                      className="group flex w-full cursor-pointer items-center space-x-3 rounded-t-2xl px-2.5 py-2 hover:bg-gray-500"
+                      className="group flex w-full cursor-pointer items-center space-x-3 rounded-t-2xl px-2.5 py-2 hover:bg-gray-700"
                       disabled={!editable}
                       onClick={onDuplicate}
                     >
                       <Icon
-                        className="h-5 w-5 text-gray-500 transition-colors group-hover:text-white"
+                        className="h-5 w-5 text-gray-600 transition-colors group-hover:text-white"
                         icon={DUPLICATE_SVG}
                       />
                       <p>Duplicate</p>
                     </button>
                     <button
-                      className="group flex w-full cursor-pointer items-center space-x-3 rounded-b-2xl px-2.5 py-2 hover:bg-gray-500"
+                      className="group flex w-full cursor-pointer items-center space-x-3 rounded-b-2xl px-2.5 py-2 hover:bg-gray-700"
                       disabled={!editable}
                       onClick={onDelete}
                     >
                       <Icon
-                        className="h-5 w-5 text-gray-500 transition-colors group-hover:text-white"
+                        className="h-5 w-5 text-gray-600 transition-colors group-hover:text-white"
                         icon={DELETE_SVG}
                       />
                       <p>Delete</p>
@@ -267,7 +267,7 @@ export const ScenarioItem: React.FC<ScenarioItemProps> = ({
           type="button"
           onClick={onEdit}
           className={cn({
-            'flex-column flex h-full items-center rounded-r-[20px] bg-gray-700 px-8': true,
+            'flex-column flex h-full items-center rounded-r-[20px] bg-gray-800 px-8': true,
             'text-primary-500 transition-colors hover:bg-primary-500 hover:text-black focus:bg-primary-300 focus:text-black focus:outline-none':
               true,
             'rounded-br-none': settings,
diff --git a/app/layout/project/sidebar/project/scenarios-list/scenario-item/settings/index.tsx b/app/layout/project/sidebar/project/scenarios-list/scenario-item/settings/index.tsx
index 859ab9cb29..4620a65d3a 100644
--- a/app/layout/project/sidebar/project/scenarios-list/scenario-item/settings/index.tsx
+++ b/app/layout/project/sidebar/project/scenarios-list/scenario-item/settings/index.tsx
@@ -36,35 +36,35 @@ const ScenarioSettings = ({ id }: { id: Scenario['id'] }): JSX.Element => {
     return (
       <Loading
         visible
-        className="z-40 flex h-26 w-full items-center justify-center bg-transparent bg-opacity-90"
+        className="h-26 z-40 flex w-full items-center justify-center bg-transparent bg-opacity-90"
         iconClassName="w-10 h-10 text-primary-500"
       />
     );
   }
 
   return (
-    <dl className="grid w-full grid-cols-2 flex-col gap-x-10 gap-y-2 rounded-b-3xl bg-gray-700 px-8 pb-4 pt-6 text-xs">
+    <dl className="grid w-full grid-cols-2 flex-col gap-x-10 gap-y-2 rounded-b-3xl bg-gray-800 px-8 pb-4 pt-6 text-xs">
       <div className="flex space-x-2">
         <dt>Protected areas:</dt>
-        <dd className="rounded bg-blue-400 bg-opacity-30 px-1.5 text-sm text-blue-400">
+        <dd className="rounded bg-blue-500 bg-opacity-30 px-1.5 text-sm text-blue-500">
           {protectedAreas?.length || '-'}
         </dd>
       </div>
       <div className="flex space-x-2">
         <dt>Features:</dt>
-        <dd className="rounded bg-blue-400 bg-opacity-30 px-1.5 text-sm text-blue-400">
+        <dd className="rounded bg-blue-500 bg-opacity-30 px-1.5 text-sm text-blue-500">
           {selectedFeaturesData?.length || '-'}
         </dd>
       </div>
       <div className="flex space-x-2">
         <dt>Runs:</dt>
-        <dd className="rounded bg-blue-400 bg-opacity-30 px-1.5 text-sm text-blue-400">
+        <dd className="rounded bg-blue-500 bg-opacity-30 px-1.5 text-sm text-blue-500">
           {scenarioData?.numberOfRuns || '-'}
         </dd>
       </div>
       <div className="flex space-x-2">
         <dt>BLM:</dt>
-        <dd className="rounded bg-blue-400 bg-opacity-30 px-1.5 text-sm text-blue-400">
+        <dd className="rounded bg-blue-500 bg-opacity-30 px-1.5 text-sm text-blue-500">
           {scenarioData?.boundaryLengthModifier || '-'}
         </dd>
       </div>
diff --git a/app/layout/project/sidebar/project/scenarios-list/toolbar/index.tsx b/app/layout/project/sidebar/project/scenarios-list/toolbar/index.tsx
index 48fb5d58fd..cd15ae4a9e 100644
--- a/app/layout/project/sidebar/project/scenarios-list/toolbar/index.tsx
+++ b/app/layout/project/sidebar/project/scenarios-list/toolbar/index.tsx
@@ -82,7 +82,7 @@ export const ProjectScenariosToolbar = () => {
           Filters
           {!!FILTERS_LENGTH && (
             <span
-              className="absolute left-0 top-0 rounded-full bg-red-500 px-1 py-0.5 text-xxs leading-none text-white"
+              className="absolute left-0 top-0 rounded-full bg-red-600 px-1 py-0.5 text-xxs leading-none text-white"
               style={{ fontFamily: 'Arial' }}
             >
               {FILTERS_LENGTH}
diff --git a/app/layout/project/sidebar/project/scenarios-list/types/index.tsx b/app/layout/project/sidebar/project/scenarios-list/types/index.tsx
index a335d883fb..2ee36ac289 100644
--- a/app/layout/project/sidebar/project/scenarios-list/types/index.tsx
+++ b/app/layout/project/sidebar/project/scenarios-list/types/index.tsx
@@ -13,7 +13,7 @@ const ProjectScenariosType = () => {
   const { pid } = query as { pid: string };
 
   return (
-    <div className="px-10 py-5 text-gray-500">
+    <div className="px-10 py-5 text-gray-600">
       <h2 className="font-heading text-2xl font-medium">Choose scenario type:</h2>
 
       <ul className="-mx-5 my-5 grid grid-cols-3 gap-10">
@@ -22,14 +22,14 @@ const ProjectScenariosType = () => {
             <li
               key={`${s.id}`}
               className={cn({
-                'group cursor-pointer rounded-3xl border-2 border-transparent transition-all hover:border-gray-100 hover:shadow-2xl':
+                'group cursor-pointer rounded-3xl border-2 border-transparent transition-all hover:border-gray-200 hover:shadow-2xl':
                   true,
                 'pointer-events-none opacity-25': s.disabled,
               })}
             >
               <Link href={`/projects/${pid}${s.href}`} legacyBehavior>
                 <div className="h-full p-5">
-                  <div className="flex h-16 w-16 items-center justify-center rounded-3xl bg-gray-100 transition-all group-hover:bg-primary-500">
+                  <div className="flex h-16 w-16 items-center justify-center rounded-3xl bg-gray-200 transition-all group-hover:bg-primary-500">
                     <Icon icon={s.icon} style={s.iconStyles} />
                   </div>
 
@@ -39,7 +39,7 @@ const ProjectScenariosType = () => {
                   </div>
 
                   {s.disclaimer && (
-                    <div className="mt-20 text-sm text-gray-400">{s.disclaimer}</div>
+                    <div className="mt-20 text-sm text-gray-100">{s.disclaimer}</div>
                   )}
                 </div>
               </Link>
diff --git a/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/chart/component.tsx b/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/chart/component.tsx
index f30277eb7d..445df8fec9 100644
--- a/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/chart/component.tsx
+++ b/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/chart/component.tsx
@@ -207,23 +207,23 @@ export const BlmChart: React.FC<BlmChartProps> = ({ data, selected, onChange }:
                     <div className="flex flex-col rounded-md bg-white p-2">
                       <div className="flex justify-between space-x-2 text-xs">
                         <div>
-                          <span className="text-gray-600">Boundary Length:</span>
+                          <span className="text-gray-700">Boundary Length:</span>
                         </div>
-                        <div className="text-xs text-gray-700">
+                        <div className="text-xs text-gray-800">
                           {`${blmFormat(boundaryLength)}`}
                         </div>
                       </div>
                       <div className="flex justify-between space-x-2 text-xs">
                         <div>
-                          <span className="text-gray-600">Cost:</span>
+                          <span className="text-gray-700">Cost:</span>
                         </div>
-                        <div className="text-xs text-gray-700">{`${blmFormat(cost)}`}</div>
+                        <div className="text-xs text-gray-800">{`${blmFormat(cost)}`}</div>
                       </div>
                       <div className="flex justify-between space-x-2 text-xs">
                         <div>
-                          <span className="text-gray-600">BLM:</span>
+                          <span className="text-gray-700">BLM:</span>
                         </div>
-                        <div className="text-xs text-gray-700">{`${blmFormat(blmValue)}`}</div>
+                        <div className="text-xs text-gray-800">{`${blmFormat(blmValue)}`}</div>
                       </div>
                     </div>
                   }
@@ -231,9 +231,9 @@ export const BlmChart: React.FC<BlmChartProps> = ({ data, selected, onChange }:
                   <div
                     aria-hidden="true"
                     className={classnames({
-                      'h-3 w-3 cursor-pointer rounded-full border-2 border-blue-500 bg-black hover:border-2 hover:bg-primary-500':
+                      'h-3 w-3 cursor-pointer rounded-full border-2 border-blue-600 bg-black hover:border-2 hover:bg-primary-500':
                         true,
-                      'bg-blue-500': blmValue === selected,
+                      'bg-blue-600': blmValue === selected,
                     })}
                     onClick={() => {
                       onChange(blmValue);
diff --git a/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/component.tsx b/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/component.tsx
index f86a985466..a936078925 100644
--- a/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/component.tsx
+++ b/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/component.tsx
@@ -111,13 +111,13 @@ export const ScenariosBLMCalibration = (): JSX.Element => {
     >
       <Section className="flex w-full flex-col overflow-hidden">
         <div className="space-y-1">
-          <span className="text-xs font-semibold text-blue-400">Advanced Settings</span>
+          <span className="text-xs font-semibold text-blue-500">Advanced Settings</span>
           <div className="flex items-center space-x-2">
             <h3 className="text-lg font-medium">BLM Calibration</h3>
           </div>
         </div>
 
-        <ScrollArea className="relative h-full before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-gray-700 before:via-gray-700 after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-gray-700 after:via-gray-700">
+        <ScrollArea className="relative h-full before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-gray-800 before:via-gray-800 after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-gray-800 after:via-gray-800">
           <div className="py-6 pr-3">
             {editable && (
               <div className="flex items-center space-x-3">
@@ -137,14 +137,14 @@ export const ScenariosBLMCalibration = (): JSX.Element => {
                 <FormRFF initialValues={INITIAL_VALUES} onSubmit={onSaveBlmRange}>
                   {({ handleSubmit, values }) => (
                     <form
-                      className="relative mt-5 flex w-full flex-col text-gray-500"
+                      className="relative mt-5 flex w-full flex-col text-gray-600"
                       autoComplete="off"
                       noValidate
                       onSubmit={handleSubmit}
                     >
                       <Loading
                         visible={loading}
-                        className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-700 bg-opacity-90"
+                        className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-90"
                         iconClassName="w-10 h-10 text-primary-500"
                       />
 
diff --git a/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/results/card/component.tsx b/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/results/card/component.tsx
index 8715b2cc46..646468a583 100644
--- a/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/results/card/component.tsx
+++ b/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/results/card/component.tsx
@@ -82,7 +82,7 @@ export const ScenariosBlmResultsCard: React.FC<ScenariosBlmResultsCardProps> = (
       <dl
         className={cx({
           'space-y-0.5 p-2': true,
-          'bg-gray-500': !selected,
+          'bg-gray-700': !selected,
           'bg-primary-500': selected,
         })}
       >
@@ -90,7 +90,7 @@ export const ScenariosBlmResultsCard: React.FC<ScenariosBlmResultsCardProps> = (
           <dt
             className={cx({
               'text-xs uppercase': true,
-              'text-gray-700': selected,
+              'text-gray-800': selected,
             })}
           >
             BLM
@@ -99,7 +99,7 @@ export const ScenariosBlmResultsCard: React.FC<ScenariosBlmResultsCardProps> = (
             className={cx({
               'text-xs': true,
               'text-primary-500': !selected,
-              'text-gray-700': selected,
+              'text-gray-800': selected,
             })}
           >
             {blmFormat(blmValue)}
@@ -109,7 +109,7 @@ export const ScenariosBlmResultsCard: React.FC<ScenariosBlmResultsCardProps> = (
           <dt
             className={cx({
               'text-xs uppercase': true,
-              'text-gray-700': selected,
+              'text-gray-800': selected,
             })}
           >
             Cost
@@ -118,7 +118,7 @@ export const ScenariosBlmResultsCard: React.FC<ScenariosBlmResultsCardProps> = (
             className={cx({
               'text-xs': true,
               'text-primary-500': !selected,
-              'text-gray-700': selected,
+              'text-gray-800': selected,
             })}
           >
             {cost}
@@ -130,7 +130,7 @@ export const ScenariosBlmResultsCard: React.FC<ScenariosBlmResultsCardProps> = (
         {!pngData && (
           <Loading
             visible
-            className="flex h-full w-full items-center justify-center bg-gray-700 bg-opacity-90"
+            className="flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-90"
             iconClassName="w-10 h-10 text-primary-500"
           />
         )}
diff --git a/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/results/component.tsx b/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/results/component.tsx
index ffedc6fb3d..4deeff52a3 100644
--- a/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/results/component.tsx
+++ b/app/layout/project/sidebar/scenario/advanced-settings/blm-calibration/results/component.tsx
@@ -145,7 +145,7 @@ export const ScenariosBlmResults: React.FC<ScenariosBlmResultsProps> = ({
                 <form
                   className={cx({
                     'relative flex flex-grow flex-col overflow-hidden pt-10 text-white': true,
-                    'border-t border-gray-500': editable,
+                    'border-t border-gray-600': editable,
                   })}
                   autoComplete="off"
                   noValidate
@@ -256,7 +256,7 @@ export const ScenariosBlmResults: React.FC<ScenariosBlmResultsProps> = ({
 
                   <Loading
                     visible={submitting}
-                    className="absolute left-0 top-0 z-10 flex h-full w-full items-center justify-center bg-gray-700 bg-opacity-90 text-white"
+                    className="absolute left-0 top-0 z-10 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-90 text-white"
                     iconClassName="w-10 h-10"
                   />
                 </form>
diff --git a/app/layout/project/sidebar/scenario/advanced-settings/overview/component.tsx b/app/layout/project/sidebar/scenario/advanced-settings/overview/component.tsx
index 1ab6c157ce..a84c482fa8 100644
--- a/app/layout/project/sidebar/scenario/advanced-settings/overview/component.tsx
+++ b/app/layout/project/sidebar/scenario/advanced-settings/overview/component.tsx
@@ -115,7 +115,7 @@ export const ScenariosAdvancedSettings = (): JSX.Element => {
       <Section className="h-full w-full overflow-hidden">
         <div className="flex h-full flex-col space-y-1">
           <div className="space-y-1">
-            <span className="text-xs font-semibold text-blue-400">Advanced Settings</span>
+            <span className="text-xs font-semibold text-blue-500">Advanced Settings</span>
             <div className="flex items-center space-x-2">
               <h3 className="text-lg font-medium">Overview</h3>
             </div>
@@ -130,7 +130,7 @@ export const ScenariosAdvancedSettings = (): JSX.Element => {
                   onSubmit={handleSubmit}
                   className="relative flex h-full flex-col"
                 >
-                  <div className="relative flex h-full flex-col overflow-hidden before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-gray-700 before:via-gray-700 after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-gray-700 after:via-gray-700">
+                  <div className="relative flex h-full flex-col overflow-hidden before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-gray-800 before:via-gray-800 after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-gray-800 after:via-gray-800">
                     <ScrollArea className="h-full pr-4">
                       <div className="space-y-10 py-5">
                         {FIELDS.map((f) => (
diff --git a/app/layout/project/sidebar/scenario/grid-setup/cost-surface/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/cost-surface/index.tsx
index 9a58473a78..ea16954a94 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/cost-surface/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/cost-surface/index.tsx
@@ -197,10 +197,10 @@ export const GridSetupCostSurface = (): JSX.Element => {
     >
       <Section>
         <div className="space-y-1">
-          <span className="text-xs font-semibold text-blue-400">Grid Setup</span>
+          <span className="text-xs font-semibold text-blue-500">Grid Setup</span>
           <div className="flex items-center space-x-2">
             <h3 className="text-lg font-medium">Cost surface</h3>
-            <InfoButton theme="primary" className="bg-gray-300">
+            <InfoButton theme="primary" className="bg-gray-400">
               <div>
                 <h4 className="mb-2.5 font-heading text-lg">What is a Cost Surface?</h4>
                 <div className="space-y-2">
@@ -273,7 +273,7 @@ export const GridSetupCostSurface = (): JSX.Element => {
                                   {(props) => (
                                     <div>
                                       <div className="mb-2.5 flex items-center space-x-3">
-                                        <h5 className="text-xs text-gray-400">Supported formats</h5>
+                                        <h5 className="text-xs text-gray-600">Supported formats</h5>
                                         <InfoButton size="s" theme="secondary">
                                           <span className="text-xs">
                                             {' '}
@@ -293,18 +293,18 @@ export const GridSetupCostSurface = (): JSX.Element => {
                                         {...props}
                                         {...getRootProps()}
                                         className={cn({
-                                          'relative w-full cursor-pointer border border-dotted border-gray-300 bg-gray-100 bg-opacity-20 py-10 hover:bg-gray-100':
+                                          'relative w-full cursor-pointer border border-dotted border-gray-400 bg-gray-200 bg-opacity-20 py-10 hover:bg-gray-200':
                                             true,
-                                          'bg-gray-500': isDragActive,
-                                          'border-green-800': isDragAccept,
-                                          'border-red-800':
+                                          'bg-gray-600': isDragActive,
+                                          'border-green-900': isDragAccept,
+                                          'border-red-900':
                                             isDragReject ||
                                             (props?.meta?.error && props?.meta?.touched),
                                         })}
                                       >
                                         <input {...getInputProps()} />
 
-                                        <p className="text-center text-sm text-gray-500">
+                                        <p className="text-center text-sm text-gray-600">
                                           Drag and drop your polygon data file
                                           <br />
                                           or <b>click here</b> to upload
@@ -316,7 +316,7 @@ export const GridSetupCostSurface = (): JSX.Element => {
 
                                         <Loading
                                           visible={loading}
-                                          className="absolute left-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-600 bg-opacity-90"
+                                          className="absolute left-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-700 bg-opacity-90"
                                           iconClassName="w-5 h-5 text-primary-500"
                                         />
                                       </div>
@@ -335,7 +335,7 @@ export const GridSetupCostSurface = (): JSX.Element => {
                                     <h5 className="text-xs uppercase text-black">Uploaded file:</h5>
                                     <div className="flex items-center space-x-2">
                                       <label
-                                        className="rounded-3xl bg-gray-400 bg-opacity-10 px-3 py-1"
+                                        className="rounded-3xl bg-gray-100 bg-opacity-10 px-3 py-1"
                                         htmlFor="cancel-shapefile-btn"
                                       >
                                         <p className="text-sm text-black">{successFile.name}</p>
@@ -386,7 +386,7 @@ export const GridSetupCostSurface = (): JSX.Element => {
                     <div className="flex w-full cursor-pointer flex-col space-y-6">
                       <div className="flex items-center space-x-2">
                         <label
-                          className="rounded-3xl bg-blue-100 bg-opacity-10 px-3 py-1"
+                          className="rounded-3xl bg-blue-200 bg-opacity-10 px-3 py-1"
                           htmlFor="cancel-shapefile-btn"
                         >
                           <p className="text-sm text-primary-500">{successFile.name}</p>
@@ -399,7 +399,7 @@ export const GridSetupCostSurface = (): JSX.Element => {
                         >
                           {editable && (
                             <Icon
-                              className="h-1.5 w-4.5 text-white group-hover:text-white"
+                              className="w-4.5 h-1.5 text-white group-hover:text-white"
                               icon={CLOSE_SVG}
                             />
                           )}
diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/list/component.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/list/component.tsx
index 1175c240af..cff55d6293 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/list/component.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/list/component.tsx
@@ -107,7 +107,7 @@ export const ScenariosFeaturesAddList: React.FC<ScenariosFeaturesAddListProps> =
             true,
         })}
       >
-        <div className="bg-gray-200 py-1">Loading more...</div>
+        <div className="bg-gray-300 py-1">Loading more...</div>
         <div className="h-6 w-full bg-white" />
       </div>
     </div>
diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/toolbar/component.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/toolbar/component.tsx
index 74f4d54a2f..1913127a5e 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/toolbar/component.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/toolbar/component.tsx
@@ -81,7 +81,7 @@ export const ScenarioFeaturesAddToolbar: React.FC<ScenarioFeaturesAddToolbarProp
             Filters
             {!!FILTERS_LENGTH && (
               <span
-                className="absolute left-0 top-0 rounded-full bg-red-500 px-1 py-0.5 text-xxs leading-none text-white"
+                className="absolute left-0 top-0 rounded-full bg-red-600 px-1 py-0.5 text-xxs leading-none text-white"
                 style={{ fontFamily: 'Arial' }}
               >
                 {FILTERS_LENGTH}
diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/uploader/component.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/uploader/component.tsx
index 45ca8ae7df..0bfd86ca5d 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/uploader/component.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/features/add/add-modal/uploader/component.tsx
@@ -213,17 +213,17 @@ export const ScenariosFeaturesAddUploader = (): JSX.Element => {
                             {...props}
                             {...getRootProps()}
                             className={cn({
-                              'relative w-full cursor-pointer border border-dotted border-gray-300 bg-gray-100 bg-opacity-20 py-10 hover:bg-gray-100':
+                              'relative w-full cursor-pointer border border-dotted border-gray-400 bg-gray-200 bg-opacity-20 py-10 hover:bg-gray-200':
                                 true,
-                              'bg-gray-500': isDragActive,
-                              'border-green-800': isDragAccept,
-                              'border-red-800':
+                              'bg-gray-600': isDragActive,
+                              'border-green-900': isDragAccept,
+                              'border-red-900':
                                 isDragReject || (props?.meta?.error && props?.meta?.touched),
                             })}
                           >
                             <input {...getInputProps()} />
 
-                            <p className="text-center text-sm text-gray-500">
+                            <p className="text-center text-sm text-gray-600">
                               Drag and drop your polygon data file
                               <br />
                               or <b>click here</b> to upload
@@ -235,13 +235,13 @@ export const ScenariosFeaturesAddUploader = (): JSX.Element => {
 
                             <Loading
                               visible={loading}
-                              className="absolute left-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-600 bg-opacity-90"
+                              className="absolute left-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-700 bg-opacity-90"
                               iconClassName="w-5 h-5 text-primary-500"
                             />
                           </div>
 
                           <div className="mt-2.5 flex items-center space-x-3">
-                            <h5 className="text-xs text-gray-400">Supported formats</h5>
+                            <h5 className="text-xs text-gray-600">Supported formats</h5>
                             <InfoButton size="s" theme="secondary">
                               <span className="text-xs">
                                 {' '}
@@ -272,7 +272,7 @@ export const ScenariosFeaturesAddUploader = (): JSX.Element => {
                       <h5 className="text-xs uppercase text-black">Uploaded file:</h5>
                       <div className="flex items-center space-x-2">
                         <label
-                          className="rounded-3xl bg-gray-400 bg-opacity-10 px-3 py-1"
+                          className="rounded-3xl bg-gray-100 bg-opacity-10 px-3 py-1"
                           htmlFor="cancel-shapefile-btn"
                         >
                           <p className="text-sm text-black">{successFile.name}</p>
diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/add/component.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/add/component.tsx
index 85d589bed1..765cf277e5 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/features/add/component.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/features/add/component.tsx
@@ -24,10 +24,10 @@ export const ScenariosSidebarEditFeatures = ({ onContinue }): JSX.Element => {
         <Section className="flex flex-col overflow-hidden">
           <div className="flex items-center justify-between">
             <div className="space-y-1">
-              <span className="text-xs font-semibold text-blue-400">Grid Setup</span>
+              <span className="text-xs font-semibold text-blue-500">Grid Setup</span>
               <div className="flex items-center space-x-2">
                 <h3 className="text-lg font-medium">Features</h3>
-                <InfoButton theme="primary" className="bg-gray-300">
+                <InfoButton theme="primary" className="bg-gray-400">
                   <>
                     <h4 className="mb-2.5 font-heading text-lg">What are features?</h4>
                     <div className="space-y-2">
diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/add/intersect/list/component.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/add/intersect/list/component.tsx
index 7f48723270..fee1b53bdd 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/features/add/intersect/list/component.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/features/add/intersect/list/component.tsx
@@ -133,7 +133,7 @@ export const ScenariosFeaturesIntersectList: React.FC<ScenariosFeaturesIntersect
             true,
         })}
       >
-        <div className="bg-gray-200 py-1">Loading more...</div>
+        <div className="bg-gray-300 py-1">Loading more...</div>
         <div className="h-6 w-full bg-white" />
       </div>
     </div>
diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/add/list/component.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/add/list/component.tsx
index 1d793145c8..1bde670361 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/features/add/list/component.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/features/add/list/component.tsx
@@ -299,12 +299,12 @@ export const ScenariosFeaturesList = ({ onContinue }): JSX.Element => {
 
           <Loading
             visible={submitting || selectedFeaturesIsFetching}
-            className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-700 bg-opacity-90"
+            className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-90"
             iconClassName="w-10 h-10 text-white"
           />
 
           {!!selectedFeaturesData && !!selectedFeaturesData.length && (
-            <div className="relative flex h-full min-h-0 flex-grow flex-col overflow-hidden before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-gray-700 before:via-gray-700 after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-gray-700 after:via-gray-700">
+            <div className="relative flex h-full min-h-0 flex-grow flex-col overflow-hidden before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-gray-800 before:via-gray-800 after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-gray-800 after:via-gray-800">
               <ScrollArea className="h-full">
                 <div className="relative max-h-full px-0.5">
                   <FieldRFF name="features">
diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/targets/component.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/targets/component.tsx
index 9782fa5d9b..05b7780319 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/features/targets/component.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/features/targets/component.tsx
@@ -56,11 +56,11 @@ export const ScenariosSidebarEditFeatures = ({ onGoBack }): JSX.Element => {
             </div>
 
             <div className="mt-2 flex items-center space-x-2">
-              <Icon icon={FEATURES_SVG} className="h-4 w-4 text-gray-400" />
+              <Icon icon={FEATURES_SVG} className="h-4 w-4 text-gray-100" />
               <div className="font-heading text-xs uppercase">
                 Features:{' '}
                 {selectedFeaturesData && (
-                  <span className="ml-1 text-gray-400">{selectedFeaturesData.length}</span>
+                  <span className="ml-1 text-gray-100">{selectedFeaturesData.length}</span>
                 )}
               </div>
             </div>
diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/targets/list/component.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/targets/list/component.tsx
index 9850019624..1a49ef8dab 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/features/targets/list/component.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/features/targets/list/component.tsx
@@ -261,7 +261,7 @@ export const ScenariosFeaturesTargets = ({ onGoBack }: { onGoBack: () => void })
         >
           <Loading
             visible={submitting || targetedFeaturesIsFetching}
-            className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-700 bg-opacity-90"
+            className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-90"
             iconClassName="w-10 h-10 text-white"
           />
 
@@ -269,7 +269,7 @@ export const ScenariosFeaturesTargets = ({ onGoBack }: { onGoBack: () => void })
 
           {!!targetedFeaturesData && !!targetedFeaturesData.length && (
             <div className="relative flex flex-grow flex-col overflow-hidden">
-              <div className="pointer-events-none absolute left-0 top-0 z-10 h-6 w-full bg-gradient-to-b from-gray-700 via-gray-700" />
+              <div className="pointer-events-none absolute left-0 top-0 z-10 h-6 w-full bg-gradient-to-b from-gray-800 via-gray-800" />
               <div className="relative h-full overflow-y-auto overflow-x-visible px-0.5">
                 <FieldRFF name="features">
                   {({ input }) => (
@@ -342,7 +342,7 @@ export const ScenariosFeaturesTargets = ({ onGoBack }: { onGoBack: () => void })
                   )}
                 </FieldRFF>
               </div>
-              <div className="pointer-events-none absolute bottom-0 left-0 z-10 h-6 w-full bg-gradient-to-t from-gray-700 via-gray-700" />
+              <div className="pointer-events-none absolute bottom-0 left-0 z-10 h-6 w-full bg-gradient-to-t from-gray-800 via-gray-800" />
             </div>
           )}
 
diff --git a/app/layout/project/sidebar/scenario/grid-setup/gap-analysis/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/gap-analysis/index.tsx
index 7b7274f996..d6da96cf63 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/gap-analysis/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/gap-analysis/index.tsx
@@ -26,10 +26,10 @@ export const GridSetupGAPAnalysis = (): JSX.Element => {
     >
       <Section className="flex flex-col space-y-2 overflow-hidden">
         <div className="space-y-1">
-          <span className="text-xs font-semibold text-blue-400">Grid Setup</span>
+          <span className="text-xs font-semibold text-blue-500">Grid Setup</span>
           <div className="flex items-center space-x-2">
             <h3 className="text-lg font-medium">Gap Analysis</h3>
-            <InfoButton theme="primary" className="bg-gray-300">
+            <InfoButton theme="primary" className="bg-gray-400">
               <>
                 <h4 className="mb-2.5 font-heading text-lg">What is a Gap Analysis?</h4>
                 <div className="space-y-2">
@@ -60,7 +60,7 @@ export const GridSetupGAPAnalysis = (): JSX.Element => {
 
         <Toolbar search={search} onSearch={onSearch} />
 
-        <div className="relative flex h-full flex-col overflow-hidden before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-gray-700 before:via-gray-700 after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-gray-700 after:via-gray-700">
+        <div className="relative flex h-full flex-col overflow-hidden before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-gray-800 before:via-gray-800 after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-gray-800 after:via-gray-800">
           <ScrollArea className="h-full pr-3">
             <List search={search} />
           </ScrollArea>
diff --git a/app/layout/project/sidebar/scenario/grid-setup/gap-analysis/list/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/gap-analysis/list/index.tsx
index d7af718585..03d6887510 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/gap-analysis/list/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/gap-analysis/list/index.tsx
@@ -77,16 +77,16 @@ export const ScenariosPreGapAnalysisList = ({ search }: { search?: string }) =>
 
   return (
     <div className="relative flex flex-grow flex-col">
-      <div className="absolute -top-1 left-0 z-10 h-6 w-full bg-gradient-to-b from-gray-700 via-gray-700" />
+      <div className="absolute -top-1 left-0 z-10 h-6 w-full bg-gradient-to-b from-gray-800 via-gray-800" />
 
       <div
         ref={scrollRef}
         className={cn({
-          'divide-y divide-dashed divide-black divide-opacity-20 bg-gray-700': true,
+          'divide-y divide-dashed divide-black divide-opacity-20 bg-gray-800': true,
         })}
       >
         {allFeaturesIsFetching && !allFeaturesIsFetched && (
-          <div className="absolute left-0 top-0 z-10 flex h-full w-full flex-col items-center justify-center bg-gray-700 bg-opacity-90">
+          <div className="absolute left-0 top-0 z-10 flex h-full w-full flex-col items-center justify-center bg-gray-800 bg-opacity-90">
             <Loading
               visible
               className="z-40 flex w-full items-center justify-center "
@@ -120,7 +120,7 @@ export const ScenariosPreGapAnalysisList = ({ search }: { search?: string }) =>
         </ul>
       </div>
 
-      <div className="pointer-events-none absolute bottom-0 left-0 z-10 h-6 w-full bg-gradient-to-t from-gray-700 via-gray-700" />
+      <div className="pointer-events-none absolute bottom-0 left-0 z-10 h-6 w-full bg-gradient-to-t from-gray-800 via-gray-800" />
 
       <div
         className={cx({
@@ -129,8 +129,8 @@ export const ScenariosPreGapAnalysisList = ({ search }: { search?: string }) =>
             true,
         })}
       >
-        <div className="bg-gray-700 py-1">Loading more...</div>
-        <div className="h-6 w-full bg-gray-700" />
+        <div className="bg-gray-800 py-1">Loading more...</div>
+        <div className="h-6 w-full bg-gray-800" />
       </div>
     </div>
   );
diff --git a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/index.tsx
index 6e4cb2ea9e..69b2e56e24 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/index.tsx
@@ -179,20 +179,20 @@ export const ActionsSummary = ({
   );
 
   return (
-    <div className="flex flex-col divide-y-2 divide-gray-500">
+    <div className="flex flex-col divide-y-2 divide-gray-700">
       {/* // ? Included areas  */}
       <div className="flex flex-col space-y-3 py-3">
         <div className="flex">
           <span className="flex flex-1 items-center space-x-2">
             <Icon
               icon={HEXAGON_SVG}
-              className="fill-none h-5 w-5 stroke-current stroke-[1.5px] text-green-300"
+              className="h-5 w-5 fill-none stroke-current stroke-[1.5px] text-green-400"
             />
             <span className="text-sm text-white">Included areas</span>
           </span>
           <span
             className={cn('flex flex-1 items-center justify-center text-sm text-white', {
-              'text-green-300': puAction === 'include',
+              'text-green-400': puAction === 'include',
             })}
           >
             {puTmpIncludedValue.length + puIncludedValue.length} PU
@@ -225,13 +225,13 @@ export const ActionsSummary = ({
           <span className="flex flex-1 items-center space-x-2">
             <Icon
               icon={HEXAGON_SVG}
-              className="fill-none h-5 w-5 stroke-current stroke-[1.5px] text-red-600"
+              className="h-5 w-5 fill-none stroke-current stroke-[1.5px] text-red-700"
             />
             <span className="text-sm text-white">Excluded areas</span>
           </span>
           <span
             className={cn('flex flex-1 items-center justify-center text-sm text-white', {
-              'text-red-600': puAction === 'exclude',
+              'text-red-700': puAction === 'exclude',
             })}
           >
             {puTmpExcludedValue.length + puExcludedValue.length} PU
@@ -264,13 +264,13 @@ export const ActionsSummary = ({
           <span className="flex flex-1 items-center space-x-2">
             <Icon
               icon={HEXAGON_SVG}
-              className="fill-none h-5 w-5 stroke-current stroke-[1.5px] text-yellow-300"
+              className="h-5 w-5 fill-none stroke-current stroke-[1.5px] text-yellow-400"
             />
             <span className="text-sm text-white">Available areas</span>
           </span>
           <span
             className={cn('flex flex-1 items-center justify-center text-sm text-white', {
-              'text-yellow-300': puAction === 'available',
+              'text-yellow-400': puAction === 'available',
             })}
           >
             {puTmpAvailableValue.length + puAvailableValue.length} PU
diff --git a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/draw/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/draw/index.tsx
index a1ac516e9d..cc3556da25 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/draw/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/draw/index.tsx
@@ -24,7 +24,7 @@ export const DrawPUMethod = (): JSX.Element => {
   }, []);
 
   return (
-    <span className="text-sm text-gray-400">
+    <span className="text-sm text-gray-100">
       Click over the map and draw a shape to include them it the analysis
     </span>
   );
diff --git a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/select/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/select/index.tsx
index b86067d55b..a8e447315b 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/select/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/select/index.tsx
@@ -28,7 +28,7 @@ export const SelectPUMethod = (): JSX.Element => {
   }, []);
 
   return (
-    <span className="text-sm text-gray-400">
+    <span className="text-sm text-gray-100">
       Select cells on the map to include them on the analysis
     </span>
   );
diff --git a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/upload/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/upload/index.tsx
index 15b6e45c8b..e7911d7624 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/upload/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/upload/index.tsx
@@ -176,17 +176,17 @@ export const UploadPUMethod = (): JSX.Element => {
       <div
         {...getRootProps()}
         className={cn({
-          'relative flex w-full cursor-pointer rounded-xl border border-dashed p-8 hover:bg-gray-500':
+          'relative flex w-full cursor-pointer rounded-xl border border-dashed p-8 hover:bg-gray-600':
             true,
-          'bg-gray-500': isDragActive,
-          'border-green-800': isDragAccept,
-          'border-red-800': isDragReject,
+          'bg-gray-600': isDragActive,
+          'border-green-900': isDragAccept,
+          'border-red-900': isDragReject,
         })}
       >
         <input {...getInputProps()} />
 
         <div className="flex w-full flex-col items-center justify-center space-y-4">
-          <HiOutlineArrowUpOnSquareStack className="h-6 w-6 stroke-current text-gray-400" />
+          <HiOutlineArrowUpOnSquareStack className="h-6 w-6 stroke-current text-gray-100" />
 
           <p className="text-center text-sm font-medium text-white">
             Drag and drop your polygon data file <br /> or click here to upload
@@ -198,15 +198,15 @@ export const UploadPUMethod = (): JSX.Element => {
         </div>
         <Loading
           visible={loading}
-          className="absolute left-0 top-0 z-40 flex h-full w-full items-center justify-center rounded-xl bg-gray-600 bg-opacity-90"
+          className="absolute left-0 top-0 z-40 flex h-full w-full items-center justify-center rounded-xl bg-gray-700 bg-opacity-90"
           iconClassName="w-10 h-5 text-primary-500"
         />
       </div>
 
-      <p className="mt-2.5 flex items-center space-x-2 text-xs text-gray-300">
-        <span className="text-xs text-gray-400">Supported formats and size</span>
+      <p className="mt-2.5 flex items-center space-x-2 text-xs text-gray-400">
+        <span className="text-xs text-gray-600">Supported formats and size</span>
 
-        <InfoButton theme="primary" className="bg-gray-300">
+        <InfoButton theme="primary" className="bg-gray-400">
           <div className="text-sm">
             <h3 className="font-semibold">List of supported file formats:</h3>
             <ul className="mt-2 list-outside list-disc space-y-1 pl-4">
@@ -223,10 +223,10 @@ export const UploadPUMethod = (): JSX.Element => {
           <div className="flex w-full cursor-pointer items-center space-x-8 py-5">
             <div className="flex items-center space-x-2 ">
               <label
-                className="rounded-3xl bg-blue-500 bg-opacity-10 px-2.5 py-px"
+                className="rounded-3xl bg-blue-600 bg-opacity-10 px-2.5 py-px"
                 htmlFor="cancel-shapefile-btn"
               >
-                <p className="text-sm text-blue-500">{successFile.name}</p>
+                <p className="text-sm text-blue-600">{successFile.name}</p>
               </label>
               <button
                 id="cancel-shapefile-btn"
diff --git a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/index.tsx
index 71e7a2861b..f2eff3a170 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/index.tsx
@@ -63,10 +63,10 @@ export const GridSetupPlanningUnits = (): JSX.Element => {
     >
       <Section className="w-full">
         <div className="space-y-1">
-          <span className="text-xs font-semibold text-blue-400">Grid Setup</span>
+          <span className="text-xs font-semibold text-blue-500">Grid Setup</span>
           <div className="flex items-center space-x-2">
             <h3 className="text-lg font-medium">Planning Unit Status</h3>
-            <InfoButton theme="primary" className="bg-gray-300">
+            <InfoButton theme="primary" className="bg-gray-500">
               <>
                 <h4 className="mb-2.5 font-heading text-lg">
                   Locked-in and locked-out planning units
@@ -102,7 +102,7 @@ export const GridSetupPlanningUnits = (): JSX.Element => {
           </div>
         </div>
 
-        <div className="mt-2.5 flex w-full items-center justify-between border-b border-gray-500">
+        <div className="mt-2.5 flex w-full items-center justify-between border-b border-gray-700">
           <Tabs type={puAction as PUAction} onChange={onChangeTab} />
         </div>
 
diff --git a/app/layout/project/sidebar/scenario/grid-setup/protected-areas/categories/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/protected-areas/categories/index.tsx
index 2951be4a0d..f3fa8e6002 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/protected-areas/categories/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/protected-areas/categories/index.tsx
@@ -193,7 +193,7 @@ export const WDPACategories = ({ onContinue }): JSX.Element => {
   return (
     <Section className="flex h-full flex-col overflow-hidden">
       <div className="space-y-1">
-        <span className="text-xs font-semibold text-blue-400">Grid Setup</span>
+        <span className="text-xs font-semibold text-blue-500">Grid Setup</span>
         <h3 className="flex items-center space-x-2">
           <span className="text-lg font-medium">Protected Areas</span>
         </h3>
@@ -236,11 +236,11 @@ export const WDPACategories = ({ onContinue }): JSX.Element => {
             >
               <Loading
                 visible={submitting}
-                className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-700 bg-opacity-90"
+                className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-90"
                 iconClassName="w-10 h-10 text-white"
               />
 
-              <ScrollArea className="relative h-full pr-3 before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-gray-700 before:via-gray-700 after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-gray-700 after:via-gray-700">
+              <ScrollArea className="relative h-full pr-3 before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-gray-800 before:via-gray-800 after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-gray-800 after:via-gray-800">
                 <div className="relative flex flex-grow flex-col">
                   <div className="relative overflow-x-visible px-0.5">
                     <div className="py-6">
diff --git a/app/layout/project/sidebar/scenario/grid-setup/protected-areas/categories/pa-uploader/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/protected-areas/categories/pa-uploader/index.tsx
index 69e86bea4d..39412ecabc 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/protected-areas/categories/pa-uploader/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/protected-areas/categories/pa-uploader/index.tsx
@@ -244,17 +244,17 @@ export const ProtectedAreaUploader: React.FC<ProtectedAreaUploaderProps> = ({
                           {...props}
                           {...getRootProps()}
                           className={cn({
-                            'relative w-full cursor-pointer border border-dotted border-gray-300 bg-gray-100 bg-opacity-20 py-10 hover:bg-gray-100':
+                            'relative w-full cursor-pointer border border-dotted border-gray-400 bg-gray-200 bg-opacity-20 py-10 hover:bg-gray-200':
                               true,
-                            'bg-gray-500': isDragActive,
-                            'border-green-800': isDragAccept,
-                            'border-red-800':
+                            'bg-gray-600': isDragActive,
+                            'border-green-900': isDragAccept,
+                            'border-red-900':
                               isDragReject || (props?.meta?.error && props?.meta?.touched),
                           })}
                         >
                           <input {...getInputProps()} />
 
-                          <p className="text-center text-sm text-gray-500">
+                          <p className="text-center text-sm text-gray-600">
                             Drag and drop your polygon data file
                             <br />
                             or <b>click here</b> to upload
@@ -266,7 +266,7 @@ export const ProtectedAreaUploader: React.FC<ProtectedAreaUploaderProps> = ({
 
                           <Loading
                             visible={loading}
-                            className="absolute left-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-600 bg-opacity-90"
+                            className="absolute left-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-700 bg-opacity-90"
                             iconClassName="w-5 h-5 text-primary-500"
                           />
                         </div>
@@ -285,7 +285,7 @@ export const ProtectedAreaUploader: React.FC<ProtectedAreaUploaderProps> = ({
                       <h5 className="text-xs uppercase text-black">Uploaded file:</h5>
                       <div className="flex items-center space-x-2">
                         <label
-                          className="rounded-3xl bg-gray-400 bg-opacity-10 px-3 py-1"
+                          className="rounded-3xl bg-gray-100 bg-opacity-10 px-3 py-1"
                           htmlFor="cancel-shapefile-btn"
                         >
                           <p className="text-sm text-black">{successFile.name}</p>
@@ -312,7 +312,7 @@ export const ProtectedAreaUploader: React.FC<ProtectedAreaUploaderProps> = ({
                 )}
 
                 <div className="mb-2.5 flex items-center space-x-3">
-                  <h5 className="text-xs text-gray-400">Supported formats</h5>
+                  <h5 className="text-xs text-gray-600">Supported formats</h5>
                   <InfoButton size="s" theme="secondary">
                     <span className="text-xs">
                       {' '}
diff --git a/app/layout/project/sidebar/scenario/grid-setup/protected-areas/pa-selected/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/protected-areas/pa-selected/index.tsx
index 5743e205ab..56cc347caf 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/protected-areas/pa-selected/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/protected-areas/pa-selected/index.tsx
@@ -39,7 +39,7 @@ export const ProtectedAreasSelected: React.FC<ProtectedAreasSelectedProps> = ({
 
           return (
             <div key={`${wdpa.value}`} className="mb-2.5 mr-5 flex">
-              <span className="mr-1 inline-flex h-6 items-center rounded-3xl bg-blue-400 bg-opacity-20 px-2.5 text-sm text-blue-400">
+              <span className="mr-1 inline-flex h-6 items-center rounded-3xl bg-blue-500 bg-opacity-20 px-2.5 text-sm text-blue-500">
                 {wdpa.label.length > 25 ? `${wdpa.label.substring(0, 25 - 3)}...` : wdpa.label}
               </span>
 
@@ -47,7 +47,7 @@ export const ProtectedAreasSelected: React.FC<ProtectedAreasSelectedProps> = ({
                 <button
                   aria-label="remove"
                   type="button"
-                  className="flex h-6 w-6 items-center justify-center rounded-full border border-gray-400 bg-transparent transition hover:bg-gray-400"
+                  className="flex h-6 w-6 items-center justify-center rounded-full border border-gray-600 bg-transparent transition hover:bg-gray-600"
                   onClick={() => {
                     form.mutators.removeWDPAFilter(wdpa.value, wdpaIucnCategories);
                   }}
diff --git a/app/layout/project/sidebar/scenario/grid-setup/protected-areas/threshold/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/protected-areas/threshold/index.tsx
index c9d4d2b474..3a1ebe4723 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/protected-areas/threshold/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/protected-areas/threshold/index.tsx
@@ -196,7 +196,7 @@ export const WDPAThreshold = ({ onGoBack }): JSX.Element => {
   return (
     <Section>
       <div className="space-y-1">
-        <span className="text-xs font-semibold text-blue-400">Grid Setup</span>
+        <span className="text-xs font-semibold text-blue-500">Grid Setup</span>
         <h3 className="flex items-center space-x-2">
           <span className="text-lg font-medium">Protected Areas Treshold</span>
         </h3>
@@ -210,7 +210,7 @@ export const WDPAThreshold = ({ onGoBack }): JSX.Element => {
           >
             <Loading
               visible={submitting}
-              className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-700 bg-opacity-90"
+              className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-90"
               iconClassName="w-10 h-10 text-white"
             />
 
@@ -250,7 +250,7 @@ export const WDPAThreshold = ({ onGoBack }): JSX.Element => {
                             </InfoButton>
                           </div>
 
-                          <p className="mb-3 text-sm text-gray-300">
+                          <p className="mb-3 text-sm text-gray-400">
                             Refers to what percentage of a planning unit must be covered by a
                             protected area to be considered “protected”.
                           </p>
diff --git a/app/layout/project/sidebar/scenario/solutions/index.tsx b/app/layout/project/sidebar/scenario/solutions/index.tsx
index e10db253df..ebe971ca7b 100644
--- a/app/layout/project/sidebar/scenario/solutions/index.tsx
+++ b/app/layout/project/sidebar/scenario/solutions/index.tsx
@@ -68,7 +68,7 @@ export const ScenariosSidebarShowSolutions = (): JSX.Element => {
           <span>Run number {s.runId}</span>
 
           {s.id === bestSolutionData?.id && (
-            <Icon icon={STAR_SVG} className="ml-3 h-2.5 w-2.5 text-blue-400" />
+            <Icon icon={STAR_SVG} className="ml-3 h-2.5 w-2.5 text-blue-500" />
           )}
         </div>
       ),
@@ -151,7 +151,7 @@ export const ScenariosSidebarShowSolutions = (): JSX.Element => {
               </header>
 
               <div className="relative flex min-h-0 flex-grow flex-col overflow-hidden">
-                <div className="absolute left-0 top-0 z-10 h-6 w-full bg-gradient-to-b from-gray-700 via-gray-700" />
+                <div className="absolute left-0 top-0 z-10 h-6 w-full bg-gradient-to-b from-gray-800 via-gray-800" />
                 <div className="flex flex-grow flex-col overflow-y-auto overflow-x-hidden">
                   {!subtab && <SolutionsDetails key="solutions-overview" />}
 
@@ -177,7 +177,7 @@ export const ScenariosSidebarShowSolutions = (): JSX.Element => {
                     <TargetAchievement key="post-gap-analysis" />
                   )}
                 </div>
-                <div className="absolute bottom-0 left-0 z-10 h-6 w-full bg-gradient-to-t from-gray-700 via-gray-700" />
+                <div className="absolute bottom-0 left-0 z-10 h-6 w-full bg-gradient-to-t from-gray-800 via-gray-800" />
               </div>
             </Pill>
           </AnimatePresence>
diff --git a/app/layout/project/sidebar/scenario/solutions/overview/index.tsx b/app/layout/project/sidebar/scenario/solutions/overview/index.tsx
index 131e500a1a..8cc63effa8 100644
--- a/app/layout/project/sidebar/scenario/solutions/overview/index.tsx
+++ b/app/layout/project/sidebar/scenario/solutions/overview/index.tsx
@@ -145,7 +145,7 @@ export const SolutionsOverview = (): JSX.Element => {
     >
       <Section className="flex flex-col overflow-hidden">
         <div className="space-y-1">
-          <span className="text-xs font-semibold text-blue-400">Solutions</span>
+          <span className="text-xs font-semibold text-blue-500">Solutions</span>
           <div className="flex items-center space-x-2">
             <h3 className="text-lg font-medium">Overview</h3>
           </div>
@@ -155,7 +155,7 @@ export const SolutionsOverview = (): JSX.Element => {
             <div className="relative flex w-full flex-col space-y-4 text-sm">
               <Loading
                 visible={solutionIsLoading}
-                className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-700 bg-opacity-90"
+                className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-90"
                 iconClassName="w-10 h-10 text-primary-500"
               />
 
@@ -165,7 +165,7 @@ export const SolutionsOverview = (): JSX.Element => {
                 cost, and whether targets have been met.
               </p>
 
-              <div className="w-full border-t border-gray-600 py-6">
+              <div className="w-full border-t border-gray-700 py-6">
                 <SolutionSelected
                   best={isBestSolution}
                   values={selectedSolutionData || bestSolutionData}
@@ -183,7 +183,7 @@ export const SolutionsOverview = (): JSX.Element => {
               >
                 <Loading
                   visible={PDFLoader}
-                  className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-90"
+                  className="absolute bottom-0 left-0 right-0 top-0 z-40 flex h-full w-full items-center justify-center bg-gray-900 bg-opacity-90"
                   iconClassName="w-10 h-10 text-primary-500"
                 />
                 Download report
@@ -212,7 +212,7 @@ export const SolutionsOverview = (): JSX.Element => {
               </Modal>
             </div>
 
-            {/* <div className="w-full p-6 mt-12 border-t border-gray-600">
+            {/* <div className="w-full p-6 mt-12 border-t border-gray-700">
             <SolutionFrequency
               values={frequencyLegendValues}
               onChangeVisibility={() => onChangeVisibility('frequency')}
diff --git a/app/layout/project/sidebar/scenario/solutions/overview/table/cells/best/component.tsx b/app/layout/project/sidebar/scenario/solutions/overview/table/cells/best/component.tsx
index 9be9bef22c..b296a68804 100644
--- a/app/layout/project/sidebar/scenario/solutions/overview/table/cells/best/component.tsx
+++ b/app/layout/project/sidebar/scenario/solutions/overview/table/cells/best/component.tsx
@@ -7,7 +7,7 @@ import STAR_SVG from 'svgs/ui/star.svg?sprite';
 import { BestCellProps } from './types';
 
 export const BestCell: React.FC<BestCellProps> = (isTheBest) => {
-  return <>{isTheBest && <Icon className="h-3 w-3 text-gray-500" icon={STAR_SVG} />}</>;
+  return <>{isTheBest && <Icon className="h-3 w-3 text-gray-600" icon={STAR_SVG} />}</>;
 };
 
 export default BestCell;
diff --git a/app/layout/project/sidebar/scenario/solutions/overview/table/table-form/component.tsx b/app/layout/project/sidebar/scenario/solutions/overview/table/table-form/component.tsx
index f6d0097015..54478afd89 100644
--- a/app/layout/project/sidebar/scenario/solutions/overview/table/table-form/component.tsx
+++ b/app/layout/project/sidebar/scenario/solutions/overview/table/table-form/component.tsx
@@ -114,7 +114,7 @@ export const SolutionsTableForm: React.FC<SolutionsTableFormProps> = ({
   }, [sid, downloadSolutionsMutation, addToast]);
 
   return (
-    <div className="relative mt-8 flex flex-grow flex-col overflow-hidden text-gray-800">
+    <div className="relative mt-8 flex flex-grow flex-col overflow-hidden text-gray-900">
       <div
         ref={scrollRef}
         className="relative flex flex-grow flex-col overflow-hidden overflow-y-auto overflow-x-hidden"
@@ -170,12 +170,12 @@ export const SolutionsTableForm: React.FC<SolutionsTableFormProps> = ({
                 <Checkbox
                   theme="light"
                   id="checkbox-5-dif-solutions"
-                  className="form-checkbox-dark block h-4 w-4 text-green-300"
+                  className="form-checkbox-dark block h-4 w-4 text-green-400"
                   onChange={(event) => setMostDifSolutions(event.target.checked)}
                 />
                 <Label
                   id="checkbox-5-dif-solutions"
-                  className="mx-2 cursor-pointer text-sm text-gray-700 hover:underline"
+                  className="mx-2 cursor-pointer text-sm text-gray-800 hover:underline"
                 >
                   View 5 most different solutions
                 </Label>
diff --git a/app/layout/project/sidebar/scenario/solutions/schedule/component.tsx b/app/layout/project/sidebar/scenario/solutions/schedule/component.tsx
index 1ba9d4c630..119f7581ba 100644
--- a/app/layout/project/sidebar/scenario/solutions/schedule/component.tsx
+++ b/app/layout/project/sidebar/scenario/solutions/schedule/component.tsx
@@ -54,7 +54,7 @@ export const ScenariosSolutionsSchedule: React.FC<ScenariosSolutionsScheduleProp
             <div className="flex flex-col justify-center">
               Schedule scenario
               {numberOfSchedules > 0 && (
-                <span className="text-xxs text-blue-400">
+                <span className="text-xxs text-blue-500">
                   {`${numberOfSchedules} schedule${numberOfSchedules > 1 ? 's' : ''}`}
                 </span>
               )}
diff --git a/app/layout/project/sidebar/scenario/solutions/target-achievement/index.tsx b/app/layout/project/sidebar/scenario/solutions/target-achievement/index.tsx
index b47abd9dd5..b54eaf0f28 100644
--- a/app/layout/project/sidebar/scenario/solutions/target-achievement/index.tsx
+++ b/app/layout/project/sidebar/scenario/solutions/target-achievement/index.tsx
@@ -27,10 +27,10 @@ export const SolutionsTargetAchievements = (): JSX.Element => {
       >
         <Section className="flex w-full flex-col overflow-hidden">
           <div className="space-y-1">
-            <span className="text-xs font-semibold text-blue-400">Solutions</span>
+            <span className="text-xs font-semibold text-blue-500">Solutions</span>
             <div className="flex items-center space-x-2">
               <h3 className="text-lg font-medium">Target Achievement</h3>
-              <InfoButton theme="primary" className="bg-gray-300">
+              <InfoButton theme="primary" className="bg-gray-400">
                 <div>
                   <h4 className="mb-2.5 font-heading text-lg">
                     What is the Solutions Target Achievement?
@@ -54,7 +54,7 @@ export const SolutionsTargetAchievements = (): JSX.Element => {
 
           <div className="flex w-full flex-grow flex-col space-y-2 overflow-hidden">
             <Toolbar search={search} onSearch={onSearch} />
-            <div className="relative flex h-full flex-grow flex-col overflow-hidden before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-gray-700 before:via-gray-700 after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-gray-700 after:via-gray-700">
+            <div className="relative flex h-full flex-grow flex-col overflow-hidden before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-gray-800 before:via-gray-800 after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-gray-800 after:via-gray-800">
               <ScrollArea className="h-full pr-3">
                 <List search={search} />
               </ScrollArea>
diff --git a/app/layout/project/sidebar/scenario/solutions/target-achievement/list/index.tsx b/app/layout/project/sidebar/scenario/solutions/target-achievement/list/index.tsx
index 416c2bc1b6..edff3a7806 100644
--- a/app/layout/project/sidebar/scenario/solutions/target-achievement/list/index.tsx
+++ b/app/layout/project/sidebar/scenario/solutions/target-achievement/list/index.tsx
@@ -84,17 +84,17 @@ export const TargetAchievementList = ({ search }: { search?: string }): JSX.Elem
 
   return (
     <div className="relative flex flex-grow flex-col overflow-hidden" style={{ minHeight: 200 }}>
-      <div className="absolute -top-1 left-0 z-10 h-6 w-full bg-gradient-to-b from-gray-700 via-gray-700" />
+      <div className="absolute -top-1 left-0 z-10 h-6 w-full bg-gradient-to-b from-gray-800 via-gray-800" />
 
       <div
         ref={scrollRef}
         className={cn({
-          'divide-y divide-dashed divide-black divide-opacity-20 overflow-y-auto overflow-x-hidden bg-gray-700':
+          'divide-y divide-dashed divide-black divide-opacity-20 overflow-y-auto overflow-x-hidden bg-gray-800':
             true,
         })}
       >
         {allFeaturesIsFetching && !allFeaturesIsFetched && (
-          <div className="absolute left-0 top-0 z-10 flex h-full w-full flex-col items-center justify-center bg-gray-700 bg-opacity-90">
+          <div className="absolute left-0 top-0 z-10 flex h-full w-full flex-col items-center justify-center bg-gray-800 bg-opacity-90">
             <Loading
               visible
               className="z-40 flex w-full items-center justify-center "
@@ -128,7 +128,7 @@ export const TargetAchievementList = ({ search }: { search?: string }): JSX.Elem
         )}
       </div>
 
-      <div className="pointer-events-none absolute bottom-0 left-0 z-10 h-6 w-full bg-gradient-to-t from-gray-700 via-gray-700" />
+      <div className="pointer-events-none absolute bottom-0 left-0 z-10 h-6 w-full bg-gradient-to-t from-gray-800 via-gray-800" />
 
       <div
         className={cn({
@@ -137,8 +137,8 @@ export const TargetAchievementList = ({ search }: { search?: string }): JSX.Elem
             true,
         })}
       >
-        <div className="bg-gray-700 py-1">Loading more...</div>
-        <div className="h-6 w-full bg-gray-700" />
+        <div className="bg-gray-800 py-1">Loading more...</div>
+        <div className="h-6 w-full bg-gray-800" />
       </div>
     </div>
   );
diff --git a/app/layout/projects/all/list/item/component.tsx b/app/layout/projects/all/list/item/component.tsx
index c50ddfd31e..86d84f5185 100644
--- a/app/layout/projects/all/list/item/component.tsx
+++ b/app/layout/projects/all/list/item/component.tsx
@@ -105,7 +105,7 @@ export const Item: React.FC<ItemProps> = ({
         role="presentation"
         style={style}
         className={cx({
-          'relative flex cursor-pointer flex-col rounded-4xl bg-gray-800 px-7 py-8 text-left text-white':
+          'relative flex cursor-pointer flex-col rounded-[40px] bg-gray-900 px-7 py-8 text-left text-white':
             true,
           [className]: !!className,
         })}
@@ -125,13 +125,13 @@ export const Item: React.FC<ItemProps> = ({
                 className={cx({
                   'rounded-3xl px-2.5 py-1 text-sm opacity-0 transition-opacity': true,
                   'opacity-100': !!ROLES[projectRole],
-                  'bg-yellow-500 bg-opacity-20': isOwner,
-                  'border border-gray-500': !isOwner,
+                  'bg-yellow-600 bg-opacity-20': isOwner,
+                  'border border-gray-600': !isOwner,
                 })}
               >
                 <p
                   className={cx({
-                    'text-yellow-500': isOwner,
+                    'text-yellow-600': isOwner,
                     'text-white': !isOwner,
                   })}
                 >
diff --git a/app/layout/projects/all/toolbar/upload-btn/component.tsx b/app/layout/projects/all/toolbar/upload-btn/component.tsx
index 2e394ff3fe..c0000ab85e 100644
--- a/app/layout/projects/all/toolbar/upload-btn/component.tsx
+++ b/app/layout/projects/all/toolbar/upload-btn/component.tsx
@@ -80,7 +80,7 @@ export const ProjectsUploadBtn = (): JSX.Element => {
         onDismiss={onDismiss}
       >
         {!uploadMode && (
-          <div className="px-10 py-5 text-gray-500">
+          <div className="px-10 py-5 text-gray-600">
             <h2 className="font-heading text-2xl font-medium">Choose upload mode:</h2>
             <ul className="-mx-5 my-5 grid grid-cols-2 gap-10">
               {UPLOAD_PROJECT_TYPES.map((u) => {
@@ -88,14 +88,14 @@ export const ProjectsUploadBtn = (): JSX.Element => {
                   <li
                     key={`${u.id}`}
                     className={cn({
-                      'group cursor-pointer rounded-3xl border-2 border-transparent transition-all hover:border-gray-100 hover:shadow-2xl':
+                      'group cursor-pointer rounded-3xl border-2 border-transparent transition-all hover:border-gray-200 hover:shadow-2xl':
                         true,
                       'pointer-events-none opacity-25': u.disabled,
                     })}
                   >
                     <button type="button" onClick={() => onSetUploadMode(u.id)}>
                       <div className="h-full p-5">
-                        <div className="flex h-16 w-16 items-center justify-center rounded-3xl bg-gray-100 transition-all group-hover:bg-primary-500">
+                        <div className="flex h-16 w-16 items-center justify-center rounded-3xl bg-gray-200 transition-all group-hover:bg-primary-500">
                           <Icon icon={u.icon} style={u.iconStyles} />
                         </div>
 
@@ -105,7 +105,7 @@ export const ProjectsUploadBtn = (): JSX.Element => {
                         </div>
 
                         {u.disclaimer && (
-                          <div className="mt-20 text-sm text-gray-400">{u.disclaimer}</div>
+                          <div className="mt-20 text-sm text-gray-100">{u.disclaimer}</div>
                         )}
                       </div>
                     </button>
diff --git a/app/layout/projects/all/toolbar/upload-btn/legacy-upload-modal/upload-files/component.tsx b/app/layout/projects/all/toolbar/upload-btn/legacy-upload-modal/upload-files/component.tsx
index 026f586086..e80e30be52 100644
--- a/app/layout/projects/all/toolbar/upload-btn/legacy-upload-modal/upload-files/component.tsx
+++ b/app/layout/projects/all/toolbar/upload-btn/legacy-upload-modal/upload-files/component.tsx
@@ -273,7 +273,7 @@ export const UploadFiles: React.FC<UploadFilesProps> = ({
                 {importLegacyErrors && !!importLegacyErrors.length && (
                   <div className="mb-6 flex flex-col space-y-2">
                     {importLegacyErrors.map((e) => (
-                      <p key={e} className="text-xs text-red-500">
+                      <p key={e} className="text-xs text-red-600">
                         {e}
                       </p>
                     ))}
@@ -332,7 +332,7 @@ export const UploadFiles: React.FC<UploadFilesProps> = ({
                   >
                     Back
                   </Button>
-                  <div className="before:absolute before:bg-blue-500 after:flex after:bg-blue-300" />
+                  <div className="before:absolute before:bg-blue-600 after:flex after:bg-blue-300" />
 
                   <Button theme="primary" size="xl" type="submit">
                     Save
diff --git a/app/layout/projects/all/toolbar/upload-btn/legacy-upload-modal/upload-files/upload-item/component.tsx b/app/layout/projects/all/toolbar/upload-btn/legacy-upload-modal/upload-files/upload-item/component.tsx
index 977c54509d..86b312f2ae 100644
--- a/app/layout/projects/all/toolbar/upload-btn/legacy-upload-modal/upload-files/upload-item/component.tsx
+++ b/app/layout/projects/all/toolbar/upload-btn/legacy-upload-modal/upload-files/upload-item/component.tsx
@@ -155,16 +155,16 @@ export const UploadItem: React.FC<UploadItemProps> = ({ f, input, ...fprops }: U
             {...fprops}
             {...getRootProps()}
             className={cx({
-              'relative w-full cursor-pointer border border-dotted border-gray-300 bg-gray-100 bg-opacity-20 py-10 hover:bg-gray-100':
+              'relative w-full cursor-pointer border border-dotted border-gray-400 bg-gray-200 bg-opacity-20 py-10 hover:bg-gray-200':
                 true,
-              'bg-gray-500': isDragActive,
-              'border-green-800': isDragAccept,
-              'border-red-800': isDragReject || (fprops?.meta?.error && fprops?.meta?.touched),
+              'bg-gray-600': isDragActive,
+              'border-green-900': isDragAccept,
+              'border-red-900': isDragReject || (fprops?.meta?.error && fprops?.meta?.touched),
             })}
           >
             <input {...getInputProps()} />
 
-            <p className="text-center text-sm text-gray-500">
+            <p className="text-center text-sm text-gray-600">
               {`Drag and drop your project ${f.format}`}
               <br />
               or <b>click here</b> to upload
@@ -183,7 +183,7 @@ export const UploadItem: React.FC<UploadItemProps> = ({ f, input, ...fprops }: U
             <h5 className="text-xs uppercase text-black">Uploaded {f.label}</h5>
             <div className="flex items-center space-x-2">
               <label
-                className="rounded-3xl bg-gray-400 bg-opacity-10 px-3 py-1"
+                className="rounded-3xl bg-gray-100 bg-opacity-10 px-3 py-1"
                 htmlFor="cancel-shapefile-btn"
               >
                 <p className="text-sm text-black">{successFile.path}</p>
diff --git a/app/layout/projects/all/toolbar/upload-btn/upload-modal/component.tsx b/app/layout/projects/all/toolbar/upload-btn/upload-modal/component.tsx
index 9b8d9e57b8..af17a997d9 100644
--- a/app/layout/projects/all/toolbar/upload-btn/upload-modal/component.tsx
+++ b/app/layout/projects/all/toolbar/upload-btn/upload-modal/component.tsx
@@ -173,7 +173,7 @@ export const UploadModal: React.FC<UploadModalProps> = ({ onDismiss }: UploadMod
                           </Label>
 
                           <div className="my-2.5 flex items-center space-x-3">
-                            <h5 className="text-xs text-gray-400">Supported formats</h5>
+                            <h5 className="text-xs text-gray-600">Supported formats</h5>
                             <InfoButton size="s" theme="secondary">
                               <span className="text-xs">
                                 {' '}
@@ -189,17 +189,17 @@ export const UploadModal: React.FC<UploadModalProps> = ({ onDismiss }: UploadMod
                             {...props}
                             {...getRootProps()}
                             className={cx({
-                              'relative w-full cursor-pointer border border-dotted border-gray-300 bg-gray-100 bg-opacity-20 py-10 hover:bg-gray-100':
+                              'relative w-full cursor-pointer border border-dotted border-gray-400 bg-gray-200 bg-opacity-20 py-10 hover:bg-gray-200':
                                 true,
-                              'bg-gray-500': isDragActive,
-                              'border-green-800': isDragAccept,
-                              'border-red-800':
+                              'bg-gray-600': isDragActive,
+                              'border-green-900': isDragAccept,
+                              'border-red-900':
                                 isDragReject || (props?.meta?.error && props?.meta?.touched),
                             })}
                           >
                             <input {...getInputProps()} />
 
-                            <p className="text-center text-sm text-gray-500">
+                            <p className="text-center text-sm text-gray-600">
                               Drag and drop your project .zip
                               <br />
                               or <b>click here</b> to upload
@@ -224,7 +224,7 @@ export const UploadModal: React.FC<UploadModalProps> = ({ onDismiss }: UploadMod
                         <h5 className="text-xs uppercase text-black">Uploaded file:</h5>
                         <div className="flex items-center space-x-2">
                           <label
-                            className="rounded-3xl bg-gray-400 bg-opacity-10 px-3 py-1"
+                            className="rounded-3xl bg-gray-100 bg-opacity-10 px-3 py-1"
                             htmlFor="cancel-shapefile-btn"
                           >
                             <p className="text-sm text-black">{successFile.path}</p>
diff --git a/app/layout/projects/common/download-modal/component.tsx b/app/layout/projects/common/download-modal/component.tsx
index 15e268ff27..03b8c8cabc 100644
--- a/app/layout/projects/common/download-modal/component.tsx
+++ b/app/layout/projects/common/download-modal/component.tsx
@@ -173,7 +173,7 @@ export const DownloadProjectModal: React.FC<DownloadProjectModalProps> = ({
 
       <h1 className="mb-5 text-xl font-medium text-black">{`Download "${name}"`}</h1>
 
-      <div className="mb-5 space-y-1 text-sm text-gray-500">
+      <div className="mb-5 space-y-1 text-sm text-gray-600">
         <p>The last 5 exported .zips will be available for download.</p>
         <p>
           {`
@@ -189,9 +189,9 @@ export const DownloadProjectModal: React.FC<DownloadProjectModalProps> = ({
             return (
               <li
                 key={e.exportId}
-                className="flex items-center justify-between border-t border-gray-100 py-2"
+                className="flex items-center justify-between border-t border-gray-200 py-2"
               >
-                <span className="text-sm text-gray-700">
+                <span className="text-sm text-gray-800">
                   {format(new Date(e.createdAt), 'MM/dd/yyyy hh:mm a')}
                 </span>
 
@@ -214,7 +214,7 @@ export const DownloadProjectModal: React.FC<DownloadProjectModalProps> = ({
 
       <div className="mt-5 space-y-1">
         {JOBS_RUNNING && (
-          <p className="text-center text-xs text-red-500">
+          <p className="text-center text-xs text-red-600">
             {`You can't generate a new export
               while there are running jobs.`}
           </p>
diff --git a/app/layout/projects/new/form/planning-area-grid-uploader/component.tsx b/app/layout/projects/new/form/planning-area-grid-uploader/component.tsx
index dcc8cebf29..df0a05e213 100644
--- a/app/layout/projects/new/form/planning-area-grid-uploader/component.tsx
+++ b/app/layout/projects/new/form/planning-area-grid-uploader/component.tsx
@@ -171,7 +171,7 @@ export const PlanningAreaGridUploader: React.FC<PlanningAreaGridUploaderProps> =
           <div className="flex w-full cursor-pointer flex-col space-y-6">
             <div className="flex items-center space-x-2">
               <label
-                className="rounded-3xl bg-blue-100 bg-opacity-10 px-3 py-1"
+                className="rounded-3xl bg-blue-200 bg-opacity-10 px-3 py-1"
                 htmlFor="cancel-shapefile-btn"
               >
                 <p className="text-sm text-primary-500">{successFile.name}</p>
@@ -210,7 +210,7 @@ export const PlanningAreaGridUploader: React.FC<PlanningAreaGridUploaderProps> =
                         {(props) => (
                           <div>
                             <div className="mb-2.5 flex items-center space-x-3">
-                              <h5 className="text-xs text-gray-400">Supported formats</h5>
+                              <h5 className="text-xs text-gray-600">Supported formats</h5>
                               <InfoButton size="s" theme="secondary">
                                 <span className="text-xs">
                                   {' '}
@@ -230,17 +230,17 @@ export const PlanningAreaGridUploader: React.FC<PlanningAreaGridUploaderProps> =
                               {...props}
                               {...getRootProps()}
                               className={cx({
-                                'relative w-full cursor-pointer border border-dotted border-gray-300 bg-gray-100 bg-opacity-20 py-10 hover:bg-gray-100':
+                                'relative w-full cursor-pointer border border-dotted border-gray-400 bg-gray-200 bg-opacity-20 py-10 hover:bg-gray-200':
                                   true,
-                                'bg-gray-500': isDragActive,
-                                'border-green-800': isDragAccept,
-                                'border-red-800':
+                                'bg-gray-600': isDragActive,
+                                'border-green-900': isDragAccept,
+                                'border-red-900':
                                   isDragReject || (props?.meta?.error && props?.meta?.touched),
                               })}
                             >
                               <input {...getInputProps()} />
 
-                              <p className="text-center text-sm text-gray-500">
+                              <p className="text-center text-sm text-gray-600">
                                 Drag and drop your planning unit shapefile
                                 <br />
                                 or <b>click here</b> to upload
@@ -267,7 +267,7 @@ export const PlanningAreaGridUploader: React.FC<PlanningAreaGridUploaderProps> =
                           <h5 className="text-xs uppercase text-black">Uploaded file:</h5>
                           <div className="flex items-center space-x-2">
                             <label
-                              className="rounded-3xl bg-gray-400 bg-opacity-10 px-3 py-1"
+                              className="rounded-3xl bg-gray-100 bg-opacity-10 px-3 py-1"
                               htmlFor="cancel-shapefile-btn"
                             >
                               <p className="text-sm text-black">{successFile.name}</p>
diff --git a/app/layout/projects/new/form/planning-area-uploader/component.tsx b/app/layout/projects/new/form/planning-area-uploader/component.tsx
index 642a44b9ff..05205c7ec0 100644
--- a/app/layout/projects/new/form/planning-area-uploader/component.tsx
+++ b/app/layout/projects/new/form/planning-area-uploader/component.tsx
@@ -171,7 +171,7 @@ export const PlanningAreUploader: React.FC<PlanningAreUploaderProps> = ({
           <div className="flex w-full cursor-pointer flex-col space-y-6">
             <div className="flex items-center space-x-2">
               <label
-                className="rounded-3xl bg-blue-100 bg-opacity-10 px-3 py-1"
+                className="rounded-3xl bg-blue-200 bg-opacity-10 px-3 py-1"
                 htmlFor="cancel-shapefile-btn"
               >
                 <p className="text-sm text-primary-500">{successFile.name}</p>
@@ -213,7 +213,7 @@ export const PlanningAreUploader: React.FC<PlanningAreUploaderProps> = ({
                         {(props) => (
                           <div>
                             <div className="mb-2.5 flex items-center space-x-3">
-                              <h5 className="text-xs text-gray-400">Supported formats</h5>
+                              <h5 className="text-xs text-gray-600">Supported formats</h5>
                               <InfoButton size="s" theme="secondary">
                                 <span className="text-xs">
                                   {' '}
@@ -233,17 +233,17 @@ export const PlanningAreUploader: React.FC<PlanningAreUploaderProps> = ({
                               {...props}
                               {...getRootProps()}
                               className={cx({
-                                'relative w-full cursor-pointer border border-dotted border-gray-300 bg-gray-100 bg-opacity-20 py-10 hover:bg-gray-100':
+                                'relative w-full cursor-pointer border border-dotted border-gray-400 bg-gray-200 bg-opacity-20 py-10 hover:bg-gray-200':
                                   true,
-                                'bg-gray-500': isDragActive,
-                                'border-green-800': isDragAccept,
-                                'border-red-800':
+                                'bg-gray-600': isDragActive,
+                                'border-green-900': isDragAccept,
+                                'border-red-900':
                                   isDragReject || (props?.meta?.error && props?.meta?.touched),
                               })}
                             >
                               <input {...getInputProps()} />
 
-                              <p className="text-center text-sm text-gray-500">
+                              <p className="text-center text-sm text-gray-600">
                                 Drag and drop your planning region shapefile
                                 <br />
                                 or <b>click here</b> to upload
@@ -274,7 +274,7 @@ export const PlanningAreUploader: React.FC<PlanningAreUploaderProps> = ({
                           <h5 className="text-xs uppercase text-black">Uploaded file:</h5>
                           <div className="flex items-center space-x-2">
                             <label
-                              className="rounded-3xl bg-gray-400 bg-opacity-10 px-3 py-1"
+                              className="rounded-3xl bg-gray-100 bg-opacity-10 px-3 py-1"
                               htmlFor="cancel-shapefile-btn"
                             >
                               <p className="text-sm text-black">{successFile.name}</p>
diff --git a/app/layout/projects/show/map/index.tsx b/app/layout/projects/show/map/index.tsx
index 0cebf0fff1..822fc2f43d 100644
--- a/app/layout/projects/show/map/index.tsx
+++ b/app/layout/projects/show/map/index.tsx
@@ -536,14 +536,14 @@ export const ProjectMap = (): JSX.Element => {
                       />
                     )}
                     {type === 'basic' && (
-                      <LegendTypeBasic className="text-sm text-gray-300" items={items} />
+                      <LegendTypeBasic className="text-sm text-gray-400" items={items} />
                     )}
                     {type === 'choropleth' && (
-                      <LegendTypeChoropleth className="text-sm text-gray-300" items={items} />
+                      <LegendTypeChoropleth className="text-sm text-gray-400" items={items} />
                     )}
                     {type === 'gradient' && (
                       <LegendTypeGradient
-                        className={{ box: 'text-sm text-gray-300' }}
+                        className={{ box: 'text-sm text-gray-400' }}
                         items={items}
                       />
                     )}
diff --git a/app/layout/projects/show/scenarios/component.tsx b/app/layout/projects/show/scenarios/component.tsx
index d42e34d6df..c294d18efb 100644
--- a/app/layout/projects/show/scenarios/component.tsx
+++ b/app/layout/projects/show/scenarios/component.tsx
@@ -284,7 +284,7 @@ export const ProjectScenarios: React.FC<ProjectScenariosProps> = () => {
                   true,
               })}
             >
-              <div className="bg-gray-200 py-1">Loading more...</div>
+              <div className="bg-gray-300 py-1">Loading more...</div>
               <div className="h-6 w-full bg-white" />
             </div>
           </div>
@@ -295,7 +295,7 @@ export const ProjectScenarios: React.FC<ProjectScenariosProps> = () => {
               initial={{ y: -10, opacity: 0 }}
               animate={{ y: 0, opacity: 1 }}
               exit={{ y: -10, opacity: 0 }}
-              className="flex h-full items-center rounded-4xl bg-gray-700 bg-contain bg-right bg-no-repeat pl-20"
+              className="flex h-full items-center rounded-[40px] bg-gray-800 bg-contain bg-right bg-no-repeat pl-20"
               style={{
                 backgroundImage: `url(${bgScenariosDashboard})`,
               }}
@@ -316,7 +316,7 @@ export const ProjectScenarios: React.FC<ProjectScenariosProps> = () => {
                     </span>
                   </InfoButton>
                 </div>
-                <h3 className="mt-1 font-heading text-lg font-medium text-gray-300">
+                <h3 className="mt-1 font-heading text-lg font-medium text-gray-400">
                   Get started by creating a scenario
                 </h3>
 
@@ -338,7 +338,7 @@ export const ProjectScenarios: React.FC<ProjectScenariosProps> = () => {
             <button
               type="button"
               className={cx({
-                'group flex h-16 w-full flex-shrink-0 items-center justify-center space-x-3 rounded-3xl bg-gray-700 px-8 text-sm text-primary-500 transition hover:bg-gray-800':
+                'group flex h-16 w-full flex-shrink-0 items-center justify-center space-x-3 rounded-3xl bg-gray-800 px-8 text-sm text-primary-500 transition hover:bg-gray-900':
                   true,
                 'pointer-events-none opacity-50': !editable,
               })}
diff --git a/app/layout/projects/show/scenarios/settings/component.tsx b/app/layout/projects/show/scenarios/settings/component.tsx
index 303dc3b8e8..1ff5b90ab7 100644
--- a/app/layout/projects/show/scenarios/settings/component.tsx
+++ b/app/layout/projects/show/scenarios/settings/component.tsx
@@ -41,7 +41,7 @@ export const ProjectScenariosSettings: React.FC<ProjectScenariosSettingsProps> =
     return (
       <Loading
         visible
-        className="z-40 flex h-26 w-full items-center justify-center bg-transparent bg-opacity-90"
+        className="h-26 z-40 flex w-full items-center justify-center bg-transparent bg-opacity-90"
         iconClassName="w-10 h-10 text-primary-500"
       />
     );
@@ -53,25 +53,25 @@ export const ProjectScenariosSettings: React.FC<ProjectScenariosSettingsProps> =
     <dl className="flex flex-col space-y-2">
       <div className="flex space-x-2 text-sm">
         <dt>Protected areas:</dt>
-        <dd className="rounded bg-blue-400 bg-opacity-30 px-1.5 text-blue-400">
+        <dd className="rounded bg-blue-500 bg-opacity-30 px-1.5 text-blue-500">
           {protectedAreas?.length || '-'}
         </dd>
       </div>
       <div className="flex space-x-2 text-sm">
         <dt>Features:</dt>
-        <dd className="rounded bg-blue-400 bg-opacity-30 px-1.5 text-blue-400">
+        <dd className="rounded bg-blue-500 bg-opacity-30 px-1.5 text-blue-500">
           {selectedFeaturesData?.length || '-'}
         </dd>
       </div>
       <div className="flex space-x-2 text-sm">
         <dt>Runs:</dt>
-        <dd className="rounded bg-blue-400 bg-opacity-30 px-1.5 text-blue-400">
+        <dd className="rounded bg-blue-500 bg-opacity-30 px-1.5 text-blue-500">
           {numberOfRuns || '-'}
         </dd>
       </div>
       <div className="flex space-x-2 text-sm">
         <dt>BLM:</dt>
-        <dd className="rounded bg-blue-400 bg-opacity-30 px-1.5 text-blue-400">
+        <dd className="rounded bg-blue-500 bg-opacity-30 px-1.5 text-blue-500">
           {boundaryLengthModifier || '-'}
         </dd>
       </div>
diff --git a/app/layout/projects/show/scenarios/toolbar/component.tsx b/app/layout/projects/show/scenarios/toolbar/component.tsx
index d07eb3bf03..d69c78aae9 100644
--- a/app/layout/projects/show/scenarios/toolbar/component.tsx
+++ b/app/layout/projects/show/scenarios/toolbar/component.tsx
@@ -83,7 +83,7 @@ export const ProjectScenariosToolbar: React.FC<ProjectScenariosToolbarProps> = (
           Filters
           {!!FILTERS_LENGTH && (
             <span
-              className="absolute left-0 top-0 rounded-full bg-red-500 px-1 py-0.5 text-xxs leading-none text-white"
+              className="absolute left-0 top-0 rounded-full bg-red-600 px-1 py-0.5 text-xxs leading-none text-white"
               style={{ fontFamily: 'Arial' }}
             >
               {FILTERS_LENGTH}
diff --git a/app/layout/projects/show/scenarios/types/component.tsx b/app/layout/projects/show/scenarios/types/component.tsx
index 04417df87f..0071189993 100644
--- a/app/layout/projects/show/scenarios/types/component.tsx
+++ b/app/layout/projects/show/scenarios/types/component.tsx
@@ -16,7 +16,7 @@ export const ProjectScenariosType: React.FC<ProjectScenariosTypeProps> = () => {
   const { pid } = query;
 
   return (
-    <div className="px-10 py-5 text-gray-500">
+    <div className="px-10 py-5 text-gray-600">
       <h2 className="font-heading text-2xl font-medium">Choose scenario type:</h2>
 
       <ul className="-mx-5 my-5 grid grid-cols-3 gap-10">
@@ -25,14 +25,14 @@ export const ProjectScenariosType: React.FC<ProjectScenariosTypeProps> = () => {
             <li
               key={`${s.id}`}
               className={cx({
-                'group cursor-pointer rounded-3xl border-2 border-transparent transition-all hover:border-gray-100 hover:shadow-2xl':
+                'group cursor-pointer rounded-3xl border-2 border-transparent transition-all hover:border-gray-200 hover:shadow-2xl':
                   true,
                 'pointer-events-none opacity-25': s.disabled,
               })}
             >
               <Link href={`/projects/${pid}${s.href}`} legacyBehavior>
                 <div className="h-full p-5">
-                  <div className="flex h-16 w-16 items-center justify-center rounded-3xl bg-gray-100 transition-all group-hover:bg-primary-500">
+                  <div className="flex h-16 w-16 items-center justify-center rounded-3xl bg-gray-200 transition-all group-hover:bg-primary-500">
                     <Icon icon={s.icon} style={s.iconStyles} />
                   </div>
 
@@ -42,7 +42,7 @@ export const ProjectScenariosType: React.FC<ProjectScenariosTypeProps> = () => {
                   </div>
 
                   {s.disclaimer && (
-                    <div className="mt-20 text-sm text-gray-400">{s.disclaimer}</div>
+                    <div className="mt-20 text-sm text-gray-100">{s.disclaimer}</div>
                   )}
                 </div>
               </Link>
diff --git a/app/layout/projects/show/status/component.tsx b/app/layout/projects/show/status/component.tsx
index 0400eeab60..dd8c60c95e 100644
--- a/app/layout/projects/show/status/component.tsx
+++ b/app/layout/projects/show/status/component.tsx
@@ -125,7 +125,7 @@ export const ProjectStatus = (): JSX.Element => {
           <div className="w-full max-w-md space-y-5 p-10 text-center">
             <Icon
               icon={CLOSE_SVG}
-              className="m-auto text-red-500"
+              className="m-auto text-red-600"
               style={{ width: 20, height: 20 }}
             />
 
diff --git a/app/layout/scenarios/edit/map/component.tsx b/app/layout/scenarios/edit/map/component.tsx
index 8f479f98f2..db6beea1c0 100644
--- a/app/layout/scenarios/edit/map/component.tsx
+++ b/app/layout/scenarios/edit/map/component.tsx
@@ -714,13 +714,13 @@ export const ScenariosEditMap = (): JSX.Element => {
                   />
                 )}
                 {type === 'basic' && (
-                  <LegendTypeBasic className="text-sm text-gray-300" items={items} />
+                  <LegendTypeBasic className="text-sm text-gray-400" items={items} />
                 )}
                 {type === 'choropleth' && (
-                  <LegendTypeChoropleth className="text-sm text-gray-300" items={items} />
+                  <LegendTypeChoropleth className="text-sm text-gray-400" items={items} />
                 )}
                 {type === 'gradient' && (
-                  <LegendTypeGradient className={{ box: 'text-sm text-gray-300' }} items={items} />
+                  <LegendTypeGradient className={{ box: 'text-sm text-gray-400' }} items={items} />
                 )}
               </LegendItem>
             );
diff --git a/app/layout/scenarios/edit/status/component.tsx b/app/layout/scenarios/edit/status/component.tsx
index 108f9180ec..7aa8ce6c00 100644
--- a/app/layout/scenarios/edit/status/component.tsx
+++ b/app/layout/scenarios/edit/status/component.tsx
@@ -137,7 +137,7 @@ export const ScenarioStatus: React.FC<ScenarioStatusProps> = () => {
           <div className="w-full max-w-md space-y-5 p-10 text-center">
             <Icon
               icon={CLOSE_SVG}
-              className="m-auto text-red-500"
+              className="m-auto text-red-600"
               style={{ width: 20, height: 20 }}
             />
 
diff --git a/app/layout/scenarios/edit/tabs/component.tsx b/app/layout/scenarios/edit/tabs/component.tsx
index 65a7688400..1807f50089 100644
--- a/app/layout/scenarios/edit/tabs/component.tsx
+++ b/app/layout/scenarios/edit/tabs/component.tsx
@@ -105,7 +105,7 @@ export const ScenariosSidebarTabs: React.FC<ScenariosSidebarTabsProps> = () => {
       >
         <div
           className={cx({
-            'rounded-4xl bg-gray-700': true,
+            'rounded-[40px] bg-gray-800': true,
             'flex flex-grow flex-col': true,
           })}
         >
diff --git a/app/layout/scenarios/edit/tabs/recalculate/component.tsx b/app/layout/scenarios/edit/tabs/recalculate/component.tsx
index 8484a92460..23c8875095 100644
--- a/app/layout/scenarios/edit/tabs/recalculate/component.tsx
+++ b/app/layout/scenarios/edit/tabs/recalculate/component.tsx
@@ -15,9 +15,9 @@ export const Recalculate: React.FC<RecalculateProps> = ({
     <>
       {visible && (
         <>
-          <div className="mt-4 h-px w-full bg-gradient-to-r from-black via-gray-200 to-black opacity-20" />
+          <div className="mt-4 h-px w-full bg-gradient-to-r from-black via-gray-300 to-black opacity-20" />
           <div className="flex w-full items-center justify-between pt-4">
-            <p className="font-heading text-xs font-medium uppercase text-red-500">
+            <p className="font-heading text-xs font-medium uppercase text-red-600">
               Your information and solutions are outdated
             </p>
             <Button theme="primary" size="xs" onClick={onRecalculate}>
diff --git a/app/layout/scenarios/new/map/component.tsx b/app/layout/scenarios/new/map/component.tsx
index dfc93f2bc1..be8fd96116 100644
--- a/app/layout/scenarios/new/map/component.tsx
+++ b/app/layout/scenarios/new/map/component.tsx
@@ -201,13 +201,13 @@ export const ScenarioNewMap = (): JSX.Element => {
                   />
                 )}
                 {type === 'basic' && (
-                  <LegendTypeBasic className="text-sm text-gray-300" items={items} />
+                  <LegendTypeBasic className="text-sm text-gray-400" items={items} />
                 )}
                 {type === 'choropleth' && (
-                  <LegendTypeChoropleth className="text-sm text-gray-300" items={items} />
+                  <LegendTypeChoropleth className="text-sm text-gray-400" items={items} />
                 )}
                 {type === 'gradient' && (
-                  <LegendTypeGradient className={{ box: 'text-sm text-gray-300' }} items={items} />
+                  <LegendTypeGradient className={{ box: 'text-sm text-gray-400' }} items={items} />
                 )}
               </LegendItem>
             );
diff --git a/app/layout/scenarios/reports/solutions/advanced-settings/index.tsx b/app/layout/scenarios/reports/solutions/advanced-settings/index.tsx
index c268c8e927..8368729ab3 100644
--- a/app/layout/scenarios/reports/solutions/advanced-settings/index.tsx
+++ b/app/layout/scenarios/reports/solutions/advanced-settings/index.tsx
@@ -80,7 +80,7 @@ export const AdvancedSettingsPage = (): JSX.Element => {
       <div className="flex w-5/12 flex-col space-y-2">
         {calibrationResultsQuery.data?.map((cr) => {
           return (
-            <div key={cr.scenarioId} className="flex space-x-3 bg-gray-500">
+            <div key={cr.scenarioId} className="flex space-x-3 bg-gray-600">
               <Image src={cr.pngData} alt="Blm Image" width={115} height={115} />
               <div className="flex flex-col space-y-2 py-2 text-sm">
                 <div>
diff --git a/app/layout/scenarios/reports/solutions/cost-surface/index.tsx b/app/layout/scenarios/reports/solutions/cost-surface/index.tsx
index c933d6a688..059e9de74f 100644
--- a/app/layout/scenarios/reports/solutions/cost-surface/index.tsx
+++ b/app/layout/scenarios/reports/solutions/cost-surface/index.tsx
@@ -23,7 +23,7 @@ export const CostSurfaceReport = (): JSX.Element => {
   }, [costSurfaceQuery.data]);
 
   return (
-    <div className="flex space-x-6 bg-gray-50 px-10 py-3">
+    <div className="flex space-x-6 bg-gray-100 px-10 py-3">
       <CostSurfaceReportMap id="report-map-cost-surface" />
       <div className="w-2/6 py-5">
         <LegendItem {...LEGEND} key="cost" theme="light" className="text-left font-semibold" />
diff --git a/app/layout/scenarios/reports/solutions/different-solutions/first/index.tsx b/app/layout/scenarios/reports/solutions/different-solutions/first/index.tsx
index 1ae17fa50d..c1807b588f 100644
--- a/app/layout/scenarios/reports/solutions/different-solutions/first/index.tsx
+++ b/app/layout/scenarios/reports/solutions/different-solutions/first/index.tsx
@@ -26,7 +26,7 @@ export const DifferentSolutionsPage = (): JSX.Element => {
       <div className="flex flex-col space-y-3">
         {mostDifSolutionsQuery.data?.slice(0, 2).map((solution) => {
           return (
-            <div key={solution.id} className="flex space-x-6 bg-gray-50 px-5 py-3">
+            <div key={solution.id} className="flex space-x-6 bg-gray-100 px-5 py-3">
               <DifferentSolutionReportMap id="report-map-3" runId={solution.runId} />
               <div className="flex flex-col space-y-4">
                 <div className="flex items-center space-x-6">
diff --git a/app/layout/scenarios/reports/solutions/different-solutions/second/index.tsx b/app/layout/scenarios/reports/solutions/different-solutions/second/index.tsx
index 43d0a33a1d..ef6bb6aa30 100644
--- a/app/layout/scenarios/reports/solutions/different-solutions/second/index.tsx
+++ b/app/layout/scenarios/reports/solutions/different-solutions/second/index.tsx
@@ -24,7 +24,7 @@ export const DifferentSolutionsPage = (): JSX.Element => {
     <div className="flex flex-col space-y-3">
       {mostDifSolutionsQuery.data.slice(2, 5)?.map((solution) => {
         return (
-          <div key={solution.id} className="flex space-x-6 bg-gray-50 px-5 py-3">
+          <div key={solution.id} className="flex space-x-6 bg-gray-100 px-5 py-3">
             <DifferentSolutionReportMap id="report-map-3" runId={solution.runId} />
             <div className="flex flex-col space-y-4">
               <div className="flex items-center space-x-6">
diff --git a/app/layout/scenarios/reports/solutions/gap-analysis/index.tsx b/app/layout/scenarios/reports/solutions/gap-analysis/index.tsx
index 159fa057c6..24c9444d54 100644
--- a/app/layout/scenarios/reports/solutions/gap-analysis/index.tsx
+++ b/app/layout/scenarios/reports/solutions/gap-analysis/index.tsx
@@ -43,8 +43,8 @@ export const GapAnalysisPage = (): JSX.Element => {
                     <div
                       className={cn({
                         'flex w-9 items-center justify-center rounded-2xl bg-opacity-10': true,
-                        'bg-green-500 text-green-500': feature.onTarget,
-                        'bg-red-500 text-red-500': !feature.onTarget,
+                        'bg-green-600 text-green-600': feature.onTarget,
+                        'bg-red-600 text-red-600': !feature.onTarget,
                       })}
                     >
                       {feature.onTarget ? 'Yes' : 'No'}
diff --git a/app/layout/scenarios/reports/solutions/header/index.tsx b/app/layout/scenarios/reports/solutions/header/index.tsx
index 00275246fc..fbfb9955e8 100644
--- a/app/layout/scenarios/reports/solutions/header/index.tsx
+++ b/app/layout/scenarios/reports/solutions/header/index.tsx
@@ -28,7 +28,7 @@ export const ReportHeader = (): JSX.Element => {
     reportDataIsFetched && (
       <header className="flex w-full items-start justify-between pb-4">
         <div className="flex w-full flex-col space-y-6">
-          <div className="border-b border-gray-100 pb-4">
+          <div className="border-b border-gray-200 pb-4">
             <h1 className="text-xl font-medium">{projectQuery.data?.name}</h1>
 
             <div className="flex items-center space-x-6 text-lg">
@@ -41,12 +41,12 @@ export const ReportHeader = (): JSX.Element => {
               <p className="font-medium uppercase">Created by:</p>
               <p className="capitalize">{projectOwner?.displayName || projectOwner?.email}</p>
             </div>
-            <div className="h-5 w-[2px] bg-gray-100" />
+            <div className="h-5 w-[2px] bg-gray-200" />
             <div className="flex space-x-2">
               <p className="font-medium uppercase">Marxan platform version:</p>
               <p> V.0.0.1</p>
             </div>
-            <div className="h-5 w-[2px] bg-gray-100" />
+            <div className="h-5 w-[2px] bg-gray-200" />
             <div className="flex space-x-2">
               <p className="font-medium uppercase">Date:</p>
               <p>{format(new Date().getTime(), 'MM/dd/yyyy')}</p>
diff --git a/app/layout/scenarios/reports/solutions/pu-status/index.tsx b/app/layout/scenarios/reports/solutions/pu-status/index.tsx
index 42efcd1fad..08c1a5c85a 100644
--- a/app/layout/scenarios/reports/solutions/pu-status/index.tsx
+++ b/app/layout/scenarios/reports/solutions/pu-status/index.tsx
@@ -15,12 +15,12 @@ export const PUStatusReport = (): JSX.Element => {
   const PU_LEGEND_CONTAINER_CLASSES = 'flex items-center space-x-2 whitespace-nowrap';
   const PU_LEGEND_BOX_CLASSES = 'h-3.5 w-3.5 border-[3px]';
   return (
-    <div className="flex space-x-6 bg-gray-50 px-10 py-3">
+    <div className="flex space-x-6 bg-gray-100 px-10 py-3">
       <PUStatusReportMap id="report-map-cost-surface" />
       <div className="flex w-2/6 flex-col space-y-3 py-5 text-sm">
         <p className="font-semibold">Locked in/out areas</p>
         <div className={PU_LEGEND_CONTAINER_CLASSES}>
-          <div className={`${PU_LEGEND_BOX_CLASSES} border-blue-800 bg-blue-800`} />
+          <div className={`${PU_LEGEND_BOX_CLASSES} border-blue-900 bg-blue-900`} />
           <p>Protected areas </p>
         </div>
         <div className={PU_LEGEND_CONTAINER_CLASSES}>
@@ -28,22 +28,22 @@ export const PUStatusReport = (): JSX.Element => {
           <p>Planning unit grid </p>
         </div>
         <div className={PU_LEGEND_CONTAINER_CLASSES}>
-          <div className={`${PU_LEGEND_BOX_CLASSES} border-yellow-500`} />
+          <div className={`${PU_LEGEND_BOX_CLASSES} border-yellow-600`} />
           <p>Available areas </p>
-          <div className="rounded-xl bg-yellow-500 px-2">
+          <div className="rounded-xl bg-yellow-600 px-2">
             {PUDataQuery.data?.available.length} PU
           </div>
         </div>
         <div className={PU_LEGEND_CONTAINER_CLASSES}>
-          <div className={`${PU_LEGEND_BOX_CLASSES} border-green-500`} />
+          <div className={`${PU_LEGEND_BOX_CLASSES} border-green-600`} />
           <p>Included areas </p>
-          <div className="rounded-xl bg-green-500 px-2">{PUDataQuery.data?.included.length} PU</div>
+          <div className="rounded-xl bg-green-600 px-2">{PUDataQuery.data?.included.length} PU</div>
         </div>
 
         <div className={PU_LEGEND_CONTAINER_CLASSES}>
-          <div className={`${PU_LEGEND_BOX_CLASSES} border-red-500`} />
+          <div className={`${PU_LEGEND_BOX_CLASSES} border-red-600`} />
           <p>Excluded areas </p>
-          <div className="rounded-xl bg-red-500 px-2">{PUDataQuery.data?.excluded.length} PU</div>
+          <div className="rounded-xl bg-red-600 px-2">{PUDataQuery.data?.excluded.length} PU</div>
         </div>
       </div>
     </div>
diff --git a/app/layout/scenarios/reports/solutions/resume/index.tsx b/app/layout/scenarios/reports/solutions/resume/index.tsx
index 7ef182586e..f5fdd0bffa 100644
--- a/app/layout/scenarios/reports/solutions/resume/index.tsx
+++ b/app/layout/scenarios/reports/solutions/resume/index.tsx
@@ -20,7 +20,7 @@ export const ResumePage = (): JSX.Element => {
   const TEXT_CLASSES = 'text-sm leading-4';
 
   return (
-    <div className="flex flex-col border-t border-gray-100">
+    <div className="flex flex-col border-t border-gray-200">
       {scenarioQuery.data?.description && (
         <div className="pt-10">
           <div>
diff --git a/app/layout/scenarios/reports/solutions/solutions-table/index.tsx b/app/layout/scenarios/reports/solutions/solutions-table/index.tsx
index 5b6663e6c9..a973f7093c 100644
--- a/app/layout/scenarios/reports/solutions/solutions-table/index.tsx
+++ b/app/layout/scenarios/reports/solutions/solutions-table/index.tsx
@@ -31,7 +31,7 @@ export const SolutionsTablePage = (): JSX.Element => {
             <th>Missing values</th>
           </tr>
         </thead>
-        <tbody className="[&>*:nth-child(even)]:bg-gray-50 [&>*]:h-10">
+        <tbody className="[&>*:nth-child(even)]:bg-gray-100 [&>*]:h-10">
           {solutionsQuery.data.map((solution) => {
             return (
               <tr key={solution.id}>
diff --git a/app/layout/scenarios/reports/solutions/target-achievement/index.tsx b/app/layout/scenarios/reports/solutions/target-achievement/index.tsx
index 918d165535..8e0870c362 100644
--- a/app/layout/scenarios/reports/solutions/target-achievement/index.tsx
+++ b/app/layout/scenarios/reports/solutions/target-achievement/index.tsx
@@ -51,8 +51,8 @@ export const TargetAchievementPage = (): JSX.Element => {
                     <div
                       className={cn({
                         'flex w-9 items-center justify-center rounded-2xl bg-opacity-10': true,
-                        'bg-green-500 text-green-500': feature.onTarget,
-                        'bg-red-500 text-red-500': !feature.onTarget,
+                        'bg-green-600 text-green-600': feature.onTarget,
+                        'bg-red-600 text-red-600': !feature.onTarget,
                       })}
                     >
                       {feature.onTarget ? 'Yes' : 'No'}
diff --git a/app/layout/section/index.tsx b/app/layout/section/index.tsx
index b2c6ba6f91..d79fd2f318 100644
--- a/app/layout/section/index.tsx
+++ b/app/layout/section/index.tsx
@@ -9,7 +9,7 @@ const Section = ({
   return (
     <section
       className={cn({
-        'space-y-2 rounded-[20px] bg-gray-700 p-6': true,
+        'space-y-2 rounded-[20px] bg-gray-800 p-6': true,
         [className]: Boolean(className),
       })}
     >
diff --git a/app/layout/sections/component.tsx b/app/layout/sections/component.tsx
index ad7ad7370e..876f6f25ee 100644
--- a/app/layout/sections/component.tsx
+++ b/app/layout/sections/component.tsx
@@ -33,11 +33,11 @@ export const ScenariosSidebarAnalysisSections: React.FC<ScenariosSidebarAnalysis
       exit={{ opacity: 0 }}
     >
       {scrollable && (
-        <div className="absolute left-0 top-0 z-10 h-6 w-full bg-gradient-to-b from-gray-700 via-gray-700" />
+        <div className="absolute left-0 top-0 z-10 h-6 w-full bg-gradient-to-b from-gray-800 via-gray-800" />
       )}
       <div
         className={cx({
-          'divide-y divide-gray-600 divide-opacity-50': true,
+          'divide-y divide-gray-700 divide-opacity-50': true,
           'overflow-y-auto overflow-x-hidden': scrollable,
         })}
       >
@@ -46,7 +46,7 @@ export const ScenariosSidebarAnalysisSections: React.FC<ScenariosSidebarAnalysis
         ))}
       </div>
       {scrollable && (
-        <div className="absolute bottom-0 left-0 z-10 h-6 w-full bg-gradient-to-t from-gray-700 via-gray-700" />
+        <div className="absolute bottom-0 left-0 z-10 h-6 w-full bg-gradient-to-t from-gray-800 via-gray-800" />
       )}
     </motion.div>
   );
diff --git a/app/layout/sections/item/component.tsx b/app/layout/sections/item/component.tsx
index 2e2766e9ab..6d63bde84f 100644
--- a/app/layout/sections/item/component.tsx
+++ b/app/layout/sections/item/component.tsx
@@ -45,7 +45,7 @@ export const ScenariosSidebarAnalysisSection: React.FC<ScenariosSidebarAnalysisS
       </h4>
       <p
         className={cx({
-          'mt-1 text-sm text-gray-300': true,
+          'mt-1 text-sm text-gray-400': true,
           'opacity-30': disabled,
         })}
       >
diff --git a/app/layout/sign-in/component.tsx b/app/layout/sign-in/component.tsx
index 5a735ea0f5..9da97f12d8 100644
--- a/app/layout/sign-in/component.tsx
+++ b/app/layout/sign-in/component.tsx
@@ -73,7 +73,7 @@ export const SignIn: React.FC<SignInProps> = () => {
             className="relative flex h-full items-center justify-center"
           >
             <div className="w-full max-w-xs">
-              <h2 className="mb-5 text-center font-heading text-lg font-medium text-gray-600">
+              <h2 className="mb-5 text-center font-heading text-lg font-medium text-gray-700">
                 Start planning!
               </h2>
 
@@ -112,7 +112,7 @@ export const SignIn: React.FC<SignInProps> = () => {
 
                       <Link
                         href="/auth/forgot-password"
-                        className="mt-2 inline-block text-sm text-gray-500 underline"
+                        className="mt-2 inline-block text-sm text-gray-600 underline"
                       >
                         Forgot password?
                       </Link>
diff --git a/app/layout/sign-up/component.tsx b/app/layout/sign-up/component.tsx
index 410b09ae42..186fb1f3b0 100644
--- a/app/layout/sign-up/component.tsx
+++ b/app/layout/sign-up/component.tsx
@@ -102,7 +102,7 @@ export const SignUp: React.FC<SignUpProps> = () => {
               className="relative flex h-full items-center justify-center"
             >
               <div className="w-full max-w-xs">
-                <h2 className="mb-5 text-center font-heading text-lg font-medium text-gray-600">
+                <h2 className="mb-5 text-center font-heading text-lg font-medium text-gray-700">
                   Get Started!
                 </h2>
 
diff --git a/app/layout/sign-up/confirm/component.tsx b/app/layout/sign-up/confirm/component.tsx
index c4f8fbc775..f345c5b877 100644
--- a/app/layout/sign-up/confirm/component.tsx
+++ b/app/layout/sign-up/confirm/component.tsx
@@ -13,20 +13,20 @@ export const ConfirmSignUp: React.FC<ConfirmSignUpProps> = ({ setConfirm }: Conf
   return (
     <Wrapper>
       <div className="my-auto flex flex-col items-center justify-center space-y-12">
-        <h2 className="text-center font-heading text-lg font-medium text-gray-600">
+        <h2 className="text-center font-heading text-lg font-medium text-gray-700">
           Check your email
         </h2>
 
         <Icon icon={CHECK_EMAIL_SVG} className="w-28" />
 
         <div className="w-72">
-          <p className="text-center font-heading text-lg text-gray-600">
+          <p className="text-center font-heading text-lg text-gray-700">
             We have sent a link to your email to confirm your account...
           </p>
         </div>
 
-        <div className="flex w-72 space-x-4 border-t border-gray-200 pt-10">
-          <p className="text-center font-heading text-base text-gray-300">
+        <div className="flex w-72 space-x-4 border-t border-gray-300 pt-10">
+          <p className="text-center font-heading text-base text-gray-400">
             Did not receive the email? Check your spam filter, or{' '}
             <span
               role="presentation"
diff --git a/app/layout/sign-up/password-strenght/component.tsx b/app/layout/sign-up/password-strenght/component.tsx
index 9ca1bfc01c..e05fa9f675 100644
--- a/app/layout/sign-up/password-strenght/component.tsx
+++ b/app/layout/sign-up/password-strenght/component.tsx
@@ -29,13 +29,13 @@ export const PaasswordStrength: React.FC<PaasswordStrengthProps> = ({
 
   return (
     <div className="mt-1 h-4 space-y-0.5">
-      <div className="h-1 w-full rounded-md bg-gray-100 text-sm">
+      <div className="h-1 w-full rounded-md bg-gray-200 text-sm">
         <div
           className={cx({
             'h-full rounded-md': true,
-            'bg-green-500': STRENGTH === 'strong',
-            'bg-yellow-700': STRENGTH === 'medium',
-            'bg-red-500': STRENGTH === 'weak',
+            'bg-green-600': STRENGTH === 'strong',
+            'bg-yellow-800': STRENGTH === 'medium',
+            'bg-red-600': STRENGTH === 'weak',
           })}
           style={{
             width: `${ENTROPY}%`,
@@ -44,7 +44,7 @@ export const PaasswordStrength: React.FC<PaasswordStrengthProps> = ({
       </div>
 
       {!!password && (
-        <div className="text-right text-xxs text-gray-500">
+        <div className="text-right text-xxs text-gray-600">
           Strength: <span>{STRENGTH}</span>
         </div>
       )}
diff --git a/app/layout/solutions/frequency/component.tsx b/app/layout/solutions/frequency/component.tsx
index cc11d388e1..ae0cf7a3a8 100644
--- a/app/layout/solutions/frequency/component.tsx
+++ b/app/layout/solutions/frequency/component.tsx
@@ -49,7 +49,7 @@ export const SolutionFrequency: React.FC<SolutionFrequencyProps> = ({
         </div>
         <button
           type="button"
-          className="flex flex-shrink-0 items-center justify-between rounded-4xl border border-transparent px-2 py-1 text-xs text-white focus:border-white"
+          className="flex flex-shrink-0 items-center justify-between rounded-[40px] border border-transparent px-2 py-1 text-xs text-white focus:border-white"
           onClick={onChangeVisibility}
         >
           {visibility ? 'View on map' : 'Hide from map'}
@@ -59,7 +59,7 @@ export const SolutionFrequency: React.FC<SolutionFrequencyProps> = ({
       <LegendTypeGradient
         className={{
           bar: 'h-3 rounded-lg',
-          labels: 'text-sm text-gray-300',
+          labels: 'text-sm text-gray-400',
         }}
         items={values}
       />
diff --git a/app/layout/solutions/selected/component.tsx b/app/layout/solutions/selected/component.tsx
index 3ef37f0cce..1a4c1bc145 100644
--- a/app/layout/solutions/selected/component.tsx
+++ b/app/layout/solutions/selected/component.tsx
@@ -45,26 +45,26 @@ export const SelectedSolution: React.FC<SelectedSolutionProps> = ({
           )}
           {best && (
             <div className="flex items-center">
-              <p className="text-sm text-blue-400">Best solution</p>
-              <Icon icon={STAR_SVG} className="ml-3 h-3 w-3 text-blue-400" />
+              <p className="text-sm text-blue-500">Best solution</p>
+              <Icon icon={STAR_SVG} className="ml-3 h-3 w-3 text-blue-500" />
             </div>
           )}
         </div>
       </div>
       <div className="grid grid-cols-2 gap-x-5 gap-y-6 pr-32 pt-5 text-sm text-white">
-        <div className="flex space-x-2 border-l-2 border-blue-700 pl-2.5 text-white">
+        <div className="flex space-x-2 border-l-2 border-blue-800 pl-2.5 text-white">
           <p>Score:</p>
           <p className="text-left font-semibold">{scoreValue}</p>
         </div>
-        <div className="flex space-x-2 border-l-2 border-blue-700 pl-2.5 text-white">
+        <div className="flex space-x-2 border-l-2 border-blue-800 pl-2.5 text-white">
           <p>Cost:</p>
           <p className="text-left font-semibold">{costValue}</p>
         </div>
-        <div className="flex space-x-2 border-l-2 border-blue-700 pl-2.5 text-white">
+        <div className="flex space-x-2 border-l-2 border-blue-800 pl-2.5 text-white">
           <p>Missing:</p>
           <p className="text-left font-semibold">{missingValues}</p>
         </div>
-        <div className="flex space-x-2 border-l-2 border-blue-700 pl-2.5 text-white">
+        <div className="flex space-x-2 border-l-2 border-blue-800 pl-2.5 text-white">
           <p>Planning:</p>
           <p className="text-left font-semibold">{planningUnits}</p>
         </div>
diff --git a/app/layout/statics/button-link/component.tsx b/app/layout/statics/button-link/component.tsx
index e7037da187..69c804a92b 100644
--- a/app/layout/statics/button-link/component.tsx
+++ b/app/layout/statics/button-link/component.tsx
@@ -26,7 +26,7 @@ export const StaticButtonLink: React.FC<StaticButtonLinkProps> = ({
       <p
         className={classnames({
           'mr-4 text-lg underline': true,
-          'text-gray-600': theme === 'dark',
+          'text-gray-700': theme === 'dark',
           'text-white': theme === 'light',
         })}
       >
@@ -35,7 +35,7 @@ export const StaticButtonLink: React.FC<StaticButtonLinkProps> = ({
       <div
         className={classnames({
           'flex h-7 w-7 items-center justify-center rounded-full border bg-transparent': true,
-          'border-gray-600': theme === 'dark',
+          'border-gray-700': theme === 'dark',
           'border-white': theme === 'light',
         })}
       >
@@ -43,7 +43,7 @@ export const StaticButtonLink: React.FC<StaticButtonLinkProps> = ({
           icon={ARROW_RIGHT_2_SVG}
           className={classnames({
             'h-3 w-3': true,
-            'text-gray-600': theme === 'dark',
+            'text-gray-700': theme === 'dark',
             'text-white': theme === 'light',
           })}
         />
diff --git a/app/package.json b/app/package.json
index bde65e9dcf..2a19f9c70d 100644
--- a/app/package.json
+++ b/app/package.json
@@ -10,8 +10,8 @@
     "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
     "e2e:ui": "playwright test --ui",
     "e2e": "playwright test",
-    "storybook:styles:dev": "NODE_ENV=development tailwind build -i ./styles/tailwind.css -o ./public/styles/tailwind.storybook.css",
-    "storybook:styles:prod": "NODE_ENV=production tailwind build -i ./styles/tailwind.css -o ./public/styles/tailwind.storybook.css",
+    "storybook:styles:dev": "NODE_ENV=development tailwind build -i ./styles/globals.css -o ./public/styles/tailwind.storybook.css",
+    "storybook:styles:prod": "NODE_ENV=production tailwind build -i ./styles/globals.css -o ./public/styles/tailwind.storybook.css",
     "storybook:dev": "yarn storybook:styles:dev && start-storybook -p 6006 -s ./public -c .storybook",
     "storybook:build": "yarn storybook:styles:prod && build-storybook -s ./public -c .storybook"
   },
diff --git a/app/pages/404.tsx b/app/pages/404.tsx
index d5978b91d2..b50982366f 100644
--- a/app/pages/404.tsx
+++ b/app/pages/404.tsx
@@ -16,7 +16,7 @@ const Custom404: React.FC = () => {
 
         <div className="flex h-full flex-col md:flex-grow">
           <div className="flex h-full items-center justify-center bg-white py-10">
-            <h1 className="font-heading text-2xl text-gray-500">404 - Page Not Found</h1>
+            <h1 className="font-heading text-2xl text-gray-600">404 - Page Not Found</h1>
           </div>
         </div>
       </main>
diff --git a/app/pages/500.tsx b/app/pages/500.tsx
index 0e69fa6dfb..1509dcfe2f 100644
--- a/app/pages/500.tsx
+++ b/app/pages/500.tsx
@@ -16,7 +16,7 @@ const ErrorPage: React.FC = () => {
 
         <div className="flex h-full flex-col md:flex-grow">
           <div className="flex h-full items-center justify-center bg-white py-10">
-            <h1 className="font-heading text-2xl text-gray-500">
+            <h1 className="font-heading text-2xl text-gray-600">
               500 - Server-side error occurred
             </h1>
           </div>
diff --git a/app/pages/_app.tsx b/app/pages/_app.tsx
index 7c8c6c6aff..c3f4599680 100644
--- a/app/pages/_app.tsx
+++ b/app/pages/_app.tsx
@@ -22,7 +22,7 @@ import Loading from 'layout/loading';
 import { MediaContextProvider } from 'layout/media';
 import store from 'store';
 
-import 'styles/tailwind.css';
+import 'styles/globals.css';
 
 const MarxanApp = ({ Component, pageProps }: AppProps) => {
   const [routeLoading, setRouteLoading] = useState({
diff --git a/app/pages/_error.tsx b/app/pages/_error.tsx
index 0e69fa6dfb..1509dcfe2f 100644
--- a/app/pages/_error.tsx
+++ b/app/pages/_error.tsx
@@ -16,7 +16,7 @@ const ErrorPage: React.FC = () => {
 
         <div className="flex h-full flex-col md:flex-grow">
           <div className="flex h-full items-center justify-center bg-white py-10">
-            <h1 className="font-heading text-2xl text-gray-500">
+            <h1 className="font-heading text-2xl text-gray-600">
               500 - Server-side error occurred
             </h1>
           </div>
diff --git a/app/pages/admin/index.tsx b/app/pages/admin/index.tsx
index 989b2005f7..91e52ac162 100644
--- a/app/pages/admin/index.tsx
+++ b/app/pages/admin/index.tsx
@@ -23,7 +23,7 @@ const AdminPage: React.FC = () => {
       <Protected>
         <MetaIcons />
 
-        <main className="min-h-screen bg-gray-50 text-black">
+        <main className="min-h-screen bg-gray-100 text-black">
           <Header size="base" />
 
           <Wrapper>
@@ -34,7 +34,7 @@ const AdminPage: React.FC = () => {
                 href="/admin/published-projects"
                 className="group block space-y-3 rounded-xl bg-white p-8 leading-none"
               >
-                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gray-100 text-gray-500 transition-all group-hover:bg-primary-500">
+                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gray-200 text-gray-600 transition-all group-hover:bg-primary-500">
                   <Icon icon={PUBLISHED_PROJECTS_SVG} className="h-7 w-7" />
                 </div>
                 <div className="font-heading text-xl font-medium">Published Projects</div>
@@ -43,7 +43,7 @@ const AdminPage: React.FC = () => {
                 href="/admin/users"
                 className="group block space-y-3 rounded-xl bg-white p-8 leading-none"
               >
-                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gray-100 text-gray-500 transition-all group-hover:bg-primary-500">
+                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gray-200 text-gray-600 transition-all group-hover:bg-primary-500">
                   <Icon icon={USERS_SVG} className="h-7 w-7" />
                 </div>
                 <div className="font-heading text-xl font-medium">Users</div>
diff --git a/app/pages/admin/published-projects/index.tsx b/app/pages/admin/published-projects/index.tsx
index 7b5b33fad0..65464a0aeb 100644
--- a/app/pages/admin/published-projects/index.tsx
+++ b/app/pages/admin/published-projects/index.tsx
@@ -17,7 +17,7 @@ const AdminPublishedProjectsPage: React.FC = () => {
       <Protected>
         <MetaIcons />
 
-        <main className="min-h-screen bg-gray-50 text-black">
+        <main className="min-h-screen bg-gray-100 text-black">
           <Header size="base" />
 
           <AdminPublishedProjects />
diff --git a/app/pages/admin/users/index.tsx b/app/pages/admin/users/index.tsx
index 808c360805..18d859cfed 100644
--- a/app/pages/admin/users/index.tsx
+++ b/app/pages/admin/users/index.tsx
@@ -17,7 +17,7 @@ const AdminUsersPage: React.FC = () => {
       <Protected>
         <MetaIcons />
 
-        <main className="min-h-screen bg-gray-50 text-black">
+        <main className="min-h-screen bg-gray-100 text-black">
           <Header size="base" />
 
           <AdminUsers />
diff --git a/app/pages/me.tsx b/app/pages/me.tsx
index 37c007218c..03c8fe6221 100644
--- a/app/pages/me.tsx
+++ b/app/pages/me.tsx
@@ -20,7 +20,7 @@ const MePage: React.FC = () => {
       <main className="flex h-screen w-screen flex-col">
         <Header size="base" />
 
-        <div className="flex items-center justify-center bg-white text-gray-600">
+        <div className="flex items-center justify-center bg-white text-gray-700">
           <Me />
         </div>
       </main>
diff --git a/app/pages/reports/[pid]/[sid]/compare/[sid2]/comparison-map.tsx b/app/pages/reports/[pid]/[sid]/compare/[sid2]/comparison-map.tsx
index f876366ab2..1bc9fd48ba 100644
--- a/app/pages/reports/[pid]/[sid]/compare/[sid2]/comparison-map.tsx
+++ b/app/pages/reports/[pid]/[sid]/compare/[sid2]/comparison-map.tsx
@@ -78,7 +78,7 @@ const ComparisonScreenshot = (): JSX.Element => {
 
                 <div className="flex items-center space-x-6 text-lg">
                   <h2>{scenario1Query.data?.name}</h2>
-                  <div className="h-5 w-[3px] bg-gray-100" />
+                  <div className="h-5 w-[3px] bg-gray-200" />
                   <h2>{scenario2Query.data?.name}</h2>
                 </div>
               </div>
@@ -88,12 +88,12 @@ const ComparisonScreenshot = (): JSX.Element => {
                   <p className="font-medium uppercase">Created by:</p>
                   <p className="capitalize">{projectOwner?.displayName || projectOwner?.email}</p>
                 </div>
-                <div className="h-5 w-[2px] bg-gray-100" />
+                <div className="h-5 w-[2px] bg-gray-200" />
                 <div className="flex space-x-2">
                   <p className="font-medium uppercase">Marxan platform version:</p>
                   <p> V.0.0.1</p>
                 </div>
-                <div className="h-5 w-[2px] bg-gray-100" />
+                <div className="h-5 w-[2px] bg-gray-200" />
                 <div className="flex space-x-2">
                   <p className="font-medium uppercase">Date:</p>
                   <p>{format(new Date().getTime(), 'MM/dd/yyyy')}</p>
@@ -106,7 +106,7 @@ const ComparisonScreenshot = (): JSX.Element => {
           <ScreenshotMap id="comparison-map-1" />
         </div>
         {reportDataIsFetched && (
-          <div className="flex items-start justify-between space-x-14 bg-gray-50 px-16 py-7">
+          <div className="flex items-start justify-between space-x-14 bg-gray-100 px-16 py-7">
             <div className="flex flex-col space-y-8 text-sm text-black">
               <p className="font-semibold"> Solutions Distribution:</p>
               <ul className="flex w-full flex-col space-y-2">
@@ -152,7 +152,7 @@ const ComparisonScreenshot = (): JSX.Element => {
                       className="absolute flex h-px items-center space-x-1 leading-none"
                       style={{ bottom: `${(100 / 11) * 2}%` }}
                     >
-                      <span className="relative top-px block h-px w-1 bg-gray-300" />
+                      <span className="relative top-px block h-px w-1 bg-gray-400" />
                       <span className="relative block -rotate-45 transform">
                         <span>10</span>
                       </span>
@@ -161,7 +161,7 @@ const ComparisonScreenshot = (): JSX.Element => {
                       className="absolute flex h-px items-center space-x-1 leading-none"
                       style={{ bottom: `${(100 / 11) * 6}%` }}
                     >
-                      <span className="relative top-px block h-px w-1 bg-gray-300" />
+                      <span className="relative top-px block h-px w-1 bg-gray-400" />
                       <span className="relative block -rotate-45 transform">
                         <span>50</span>
                       </span>
@@ -170,7 +170,7 @@ const ComparisonScreenshot = (): JSX.Element => {
                       className="absolute flex h-px items-center space-x-1 leading-none"
                       style={{ bottom: '100%' }}
                     >
-                      <span className="relative top-px block h-px w-1 bg-gray-300" />
+                      <span className="relative top-px block h-px w-1 bg-gray-400" />
                       <span className="relative block -rotate-45 transform">
                         <span>100</span>
                       </span>
@@ -182,7 +182,7 @@ const ComparisonScreenshot = (): JSX.Element => {
                       className="absolute flex h-px transform items-center space-x-1 leading-none"
                       style={{ bottom: `${100 - (100 / 11) * 2}%` }}
                     >
-                      <span className="relative top-px block h-px w-1 bg-gray-300" />
+                      <span className="relative top-px block h-px w-1 bg-gray-400" />
                       <span className="relative block -rotate-180 transform">
                         <span className="relative block rotate-45 transform">10</span>
                       </span>
@@ -191,7 +191,7 @@ const ComparisonScreenshot = (): JSX.Element => {
                       className="absolute flex h-px transform items-center space-x-1 leading-none"
                       style={{ bottom: `${100 - (100 / 11) * 6}%` }}
                     >
-                      <span className="relative top-px block h-px w-1 bg-gray-300" />
+                      <span className="relative top-px block h-px w-1 bg-gray-400" />
                       <span className="relative block -rotate-180 transform">
                         <span className="relative block rotate-45 transform">50</span>
                       </span>
@@ -200,7 +200,7 @@ const ComparisonScreenshot = (): JSX.Element => {
                       className="absolute flex h-px transform items-center space-x-1 leading-none"
                       style={{ bottom: '0%' }}
                     >
-                      <span className="relative top-px block h-px w-1 bg-gray-300" />
+                      <span className="relative top-px block h-px w-1 bg-gray-400" />
                       <span className="relative block -rotate-180 transform">
                         <span className="relative block rotate-45 transform">100</span>
                       </span>
diff --git a/app/public/styles/tailwind.storybook.css b/app/public/styles/tailwind.storybook.css
index 837bd99a63..faecf4ce9a 100644
--- a/app/public/styles/tailwind.storybook.css
+++ b/app/public/styles/tailwind.storybook.css
@@ -2605,17 +2605,17 @@ input[data-autocompleted] {
   border-color: rgb(0 0 0 / var(--tw-divide-opacity));
 }
 
-.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
+.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(232 232 232 / var(--tw-divide-opacity));
 }
 
-.divide-gray-500 > :not([hidden]) ~ :not([hidden]) {
+.divide-gray-600 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(54 55 62 / var(--tw-divide-opacity));
 }
 
-.divide-gray-600 > :not([hidden]) ~ :not([hidden]) {
+.divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(55 57 61 / var(--tw-divide-opacity));
 }
@@ -2841,62 +2841,62 @@ input[data-autocompleted] {
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
-.border-blue-500 {
+.border-blue-600 {
   --tw-border-opacity: 1;
   border-color: rgb(1 173 241 / var(--tw-border-opacity));
 }
 
-.border-blue-700 {
+.border-blue-800 {
   --tw-border-opacity: 1;
   border-color: rgb(27 114 245 / var(--tw-border-opacity));
 }
 
-.border-gray-100 {
+.border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(232 232 232 / var(--tw-border-opacity));
 }
 
-.border-gray-200 {
+.border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(196 196 196 / var(--tw-border-opacity));
 }
 
-.border-gray-300 {
+.border-gray-400 {
   --tw-border-opacity: 1;
   border-color: rgb(162 162 169 / var(--tw-border-opacity));
 }
 
-.border-gray-400 {
+.border-gray-100 {
   --tw-border-opacity: 1;
   border-color: rgb(95 100 110 / var(--tw-border-opacity));
 }
 
-.border-gray-500 {
+.border-gray-600 {
   --tw-border-opacity: 1;
   border-color: rgb(54 55 62 / var(--tw-border-opacity));
 }
 
-.border-gray-600 {
+.border-gray-700 {
   --tw-border-opacity: 1;
   border-color: rgb(55 57 61 / var(--tw-border-opacity));
 }
 
-.border-gray-700 {
+.border-gray-800 {
   --tw-border-opacity: 1;
   border-color: rgb(21 21 21 / var(--tw-border-opacity));
 }
 
-.border-gray-800 {
+.border-gray-900 {
   --tw-border-opacity: 1;
   border-color: rgb(17 17 17 / var(--tw-border-opacity));
 }
 
-.border-green-500 {
+.border-green-600 {
   --tw-border-opacity: 1;
   border-color: rgb(3 214 194 / var(--tw-border-opacity));
 }
 
-.border-green-800 {
+.border-green-900 {
   --tw-border-opacity: 1;
   border-color: rgb(2 159 144 / var(--tw-border-opacity));
 }
@@ -2906,22 +2906,22 @@ input[data-autocompleted] {
   border-color: rgb(0 191 255 / var(--tw-border-opacity));
 }
 
-.border-purple-700 {
+.border-purple-800 {
   --tw-border-opacity: 1;
   border-color: rgb(103 75 253 / var(--tw-border-opacity));
 }
 
-.border-red-500 {
+.border-red-600 {
   --tw-border-opacity: 1;
   border-color: rgb(242 92 71 / var(--tw-border-opacity));
 }
 
-.border-red-700 {
+.border-red-800 {
   --tw-border-opacity: 1;
   border-color: rgb(207 42 20 / var(--tw-border-opacity));
 }
 
-.border-red-800 {
+.border-red-900 {
   --tw-border-opacity: 1;
   border-color: rgb(194 23 1 / var(--tw-border-opacity));
 }
@@ -2935,7 +2935,7 @@ input[data-autocompleted] {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
-.border-yellow-400 {
+.border-yellow-500 {
   --tw-border-opacity: 1;
   border-color: rgb(255 196 83 / var(--tw-border-opacity));
 }
@@ -2953,87 +2953,87 @@ input[data-autocompleted] {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.bg-blue-100 {
+.bg-blue-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(153 230 255 / var(--tw-bg-opacity));
 }
 
-.bg-blue-400 {
+.bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(0 191 255 / var(--tw-bg-opacity));
 }
 
-.bg-blue-500 {
+.bg-blue-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(1 173 241 / var(--tw-bg-opacity));
 }
 
-.bg-blue-600 {
+.bg-blue-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(55 135 255 / var(--tw-bg-opacity));
 }
 
-.bg-blue-700 {
+.bg-blue-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(27 114 245 / var(--tw-bg-opacity));
 }
 
-.bg-gray-100 {
+.bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(232 232 232 / var(--tw-bg-opacity));
 }
 
-.bg-gray-200 {
+.bg-gray-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(196 196 196 / var(--tw-bg-opacity));
 }
 
-.bg-gray-300 {
+.bg-gray-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(162 162 169 / var(--tw-bg-opacity));
 }
 
-.bg-gray-400 {
+.bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(95 100 110 / var(--tw-bg-opacity));
 }
 
-.bg-gray-50 {
+.bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(242 242 242 / var(--tw-bg-opacity));
 }
 
-.bg-gray-500 {
+.bg-gray-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(54 55 62 / var(--tw-bg-opacity));
 }
 
-.bg-gray-600 {
+.bg-gray-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(55 57 61 / var(--tw-bg-opacity));
 }
 
-.bg-gray-700 {
+.bg-gray-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(21 21 21 / var(--tw-bg-opacity));
 }
 
-.bg-gray-800 {
+.bg-gray-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(17 17 17 / var(--tw-bg-opacity));
 }
 
-.bg-green-300 {
+.bg-green-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(3 231 209 / var(--tw-bg-opacity));
 }
 
-.bg-green-500 {
+.bg-green-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(3 214 194 / var(--tw-bg-opacity));
 }
 
-.bg-pink-500 {
+.bg-pink-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(245 49 179 / var(--tw-bg-opacity));
 }
@@ -3063,22 +3063,22 @@ input[data-autocompleted] {
   background-color: rgb(0 153 204 / var(--tw-bg-opacity));
 }
 
-.bg-purple-700 {
+.bg-purple-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(103 75 253 / var(--tw-bg-opacity));
 }
 
-.bg-red-100 {
+.bg-red-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 175 164 / var(--tw-bg-opacity));
 }
 
-.bg-red-500 {
+.bg-red-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(242 92 71 / var(--tw-bg-opacity));
 }
 
-.bg-red-700 {
+.bg-red-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(207 42 20 / var(--tw-bg-opacity));
 }
@@ -3092,27 +3092,27 @@ input[data-autocompleted] {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-yellow-200 {
+.bg-yellow-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 215 128 / var(--tw-bg-opacity));
 }
 
-.bg-yellow-300 {
+.bg-yellow-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 202 66 / var(--tw-bg-opacity));
 }
 
-.bg-yellow-400 {
+.bg-yellow-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 196 83 / var(--tw-bg-opacity));
 }
 
-.bg-yellow-500 {
+.bg-yellow-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(253 185 68 / var(--tw-bg-opacity));
 }
 
-.bg-yellow-700 {
+.bg-yellow-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(247 150 24 / var(--tw-bg-opacity));
 }
@@ -3173,7 +3173,7 @@ input[data-autocompleted] {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-blue-100 {
+.from-blue-200 {
   --tw-gradient-from: #99E6FF var(--tw-gradient-from-position);
   --tw-gradient-from-position:  ;
   --tw-gradient-to: rgb(153 230 255 / 0)  var(--tw-gradient-from-position);
@@ -3181,7 +3181,7 @@ input[data-autocompleted] {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-blue-400 {
+.from-blue-500 {
   --tw-gradient-from: #00BFFF var(--tw-gradient-from-position);
   --tw-gradient-from-position:  ;
   --tw-gradient-to: rgb(0 191 255 / 0)  var(--tw-gradient-from-position);
@@ -3189,7 +3189,7 @@ input[data-autocompleted] {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-gray-100 {
+.from-gray-200 {
   --tw-gradient-from: #E8E8E8 var(--tw-gradient-from-position);
   --tw-gradient-from-position:  ;
   --tw-gradient-to: rgb(232 232 232 / 0)  var(--tw-gradient-from-position);
@@ -3197,7 +3197,7 @@ input[data-autocompleted] {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-gray-700 {
+.from-gray-800 {
   --tw-gradient-from: #151515 var(--tw-gradient-from-position);
   --tw-gradient-from-position:  ;
   --tw-gradient-to: rgb(21 21 21 / 0)  var(--tw-gradient-from-position);
@@ -3205,7 +3205,7 @@ input[data-autocompleted] {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-green-100 {
+.from-green-200 {
   --tw-gradient-from: #8CF9EF var(--tw-gradient-from-position);
   --tw-gradient-from-position:  ;
   --tw-gradient-to: rgb(140 249 239 / 0)  var(--tw-gradient-from-position);
@@ -3213,7 +3213,7 @@ input[data-autocompleted] {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-green-300 {
+.from-green-400 {
   --tw-gradient-from: #03E7D1 var(--tw-gradient-from-position);
   --tw-gradient-from-position:  ;
   --tw-gradient-to: rgb(3 231 209 / 0)  var(--tw-gradient-from-position);
@@ -3221,7 +3221,7 @@ input[data-autocompleted] {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-green-400 {
+.from-green-500 {
   --tw-gradient-from: #03E4CE var(--tw-gradient-from-position);
   --tw-gradient-from-position:  ;
   --tw-gradient-to: rgb(3 228 206 / 0)  var(--tw-gradient-from-position);
@@ -3229,7 +3229,7 @@ input[data-autocompleted] {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-purple-500 {
+.from-purple-600 {
   --tw-gradient-from: #9962FD var(--tw-gradient-from-position);
   --tw-gradient-from-position:  ;
   --tw-gradient-to: rgb(153 98 253 / 0)  var(--tw-gradient-from-position);
@@ -3237,7 +3237,7 @@ input[data-autocompleted] {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-red-100 {
+.from-red-200 {
   --tw-gradient-from: #FFAFA4 var(--tw-gradient-from-position);
   --tw-gradient-from-position:  ;
   --tw-gradient-to: rgb(255 175 164 / 0)  var(--tw-gradient-from-position);
@@ -3245,7 +3245,7 @@ input[data-autocompleted] {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-red-400 {
+.from-red-1000 {
   --tw-gradient-from: #FF6D59 var(--tw-gradient-from-position);
   --tw-gradient-from-position:  ;
   --tw-gradient-to: rgb(255 109 89 / 0)  var(--tw-gradient-from-position);
@@ -3261,7 +3261,7 @@ input[data-autocompleted] {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-yellow-100 {
+.from-yellow-200 {
   --tw-gradient-from: #FFDD8D var(--tw-gradient-from-position);
   --tw-gradient-from-position:  ;
   --tw-gradient-to: rgb(255 221 141 / 0)  var(--tw-gradient-from-position);
@@ -3269,7 +3269,7 @@ input[data-autocompleted] {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-yellow-400 {
+.from-yellow-500 {
   --tw-gradient-from: #FFC453 var(--tw-gradient-from-position);
   --tw-gradient-from-position:  ;
   --tw-gradient-to: rgb(255 196 83 / 0)  var(--tw-gradient-from-position);
@@ -3284,14 +3284,14 @@ input[data-autocompleted] {
   --tw-gradient-stops: var(--tw-gradient-from), #000 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-.via-gray-200 {
+.via-gray-300 {
   --tw-gradient-via-position:  ;
   --tw-gradient-to: rgb(196 196 196 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-to-position:  ;
   --tw-gradient-stops: var(--tw-gradient-from), #C4C4C4 var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-.via-gray-700 {
+.via-gray-800 {
   --tw-gradient-via-position:  ;
   --tw-gradient-to: rgb(21 21 21 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-to-position:  ;
@@ -3310,62 +3310,62 @@ input[data-autocompleted] {
   --tw-gradient-to-position:  ;
 }
 
-.to-blue-400 {
+.to-blue-500 {
   --tw-gradient-to: #00BFFF var(--tw-gradient-to-position);
   --tw-gradient-to-position:  ;
 }
 
-.to-blue-500 {
+.to-blue-600 {
   --tw-gradient-to: #01ADF1 var(--tw-gradient-to-position);
   --tw-gradient-to-position:  ;
 }
 
-.to-blue-700 {
+.to-blue-800 {
   --tw-gradient-to: #1B72F5 var(--tw-gradient-to-position);
   --tw-gradient-to-position:  ;
 }
 
-.to-gray-800 {
+.to-gray-900 {
   --tw-gradient-to: #111111 var(--tw-gradient-to-position);
   --tw-gradient-to-position:  ;
 }
 
-.to-green-400 {
+.to-green-500 {
   --tw-gradient-to: #03E4CE var(--tw-gradient-to-position);
   --tw-gradient-to-position:  ;
 }
 
-.to-green-700 {
+.to-green-800 {
   --tw-gradient-to: #02AD9D var(--tw-gradient-to-position);
   --tw-gradient-to-position:  ;
 }
 
-.to-purple-500 {
+.to-purple-600 {
   --tw-gradient-to: #9962FD var(--tw-gradient-to-position);
   --tw-gradient-to-position:  ;
 }
 
-.to-red-400 {
+.to-red-1000 {
   --tw-gradient-to: #FF6D59 var(--tw-gradient-to-position);
   --tw-gradient-to-position:  ;
 }
 
-.to-red-700 {
+.to-red-800 {
   --tw-gradient-to: #CF2A14 var(--tw-gradient-to-position);
   --tw-gradient-to-position:  ;
 }
 
-.to-yellow-300 {
+.to-yellow-400 {
   --tw-gradient-to: #FFCA42 var(--tw-gradient-to-position);
   --tw-gradient-to-position:  ;
 }
 
-.to-yellow-400 {
+.to-yellow-500 {
   --tw-gradient-to: #FFC453 var(--tw-gradient-to-position);
   --tw-gradient-to-position:  ;
 }
 
-.to-yellow-700 {
+.to-yellow-800 {
   --tw-gradient-to: #F79618 var(--tw-gradient-to-position);
   --tw-gradient-to-position:  ;
 }
@@ -4072,57 +4072,57 @@ input[data-autocompleted] {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
-.text-blue-400 {
+.text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(0 191 255 / var(--tw-text-opacity));
 }
 
-.text-blue-500 {
+.text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(1 173 241 / var(--tw-text-opacity));
 }
 
-.text-gray-200 {
+.text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(196 196 196 / var(--tw-text-opacity));
 }
 
-.text-gray-300 {
+.text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(162 162 169 / var(--tw-text-opacity));
 }
 
-.text-gray-400 {
+.text-gray-100 {
   --tw-text-opacity: 1;
   color: rgb(95 100 110 / var(--tw-text-opacity));
 }
 
-.text-gray-500 {
+.text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(54 55 62 / var(--tw-text-opacity));
 }
 
-.text-gray-600 {
+.text-gray-700 {
   --tw-text-opacity: 1;
   color: rgb(55 57 61 / var(--tw-text-opacity));
 }
 
-.text-gray-700 {
+.text-gray-800 {
   --tw-text-opacity: 1;
   color: rgb(21 21 21 / var(--tw-text-opacity));
 }
 
-.text-gray-800 {
+.text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 17 17 / var(--tw-text-opacity));
 }
 
-.text-green-300 {
+.text-green-400 {
   --tw-text-opacity: 1;
   color: rgb(3 231 209 / var(--tw-text-opacity));
 }
 
-.text-green-500 {
+.text-green-600 {
   --tw-text-opacity: 1;
   color: rgb(3 214 194 / var(--tw-text-opacity));
 }
@@ -4137,17 +4137,17 @@ input[data-autocompleted] {
   color: rgb(0 172 230 / var(--tw-text-opacity));
 }
 
-.text-purple-500 {
+.text-purple-600 {
   --tw-text-opacity: 1;
   color: rgb(153 98 253 / var(--tw-text-opacity));
 }
 
-.text-red-500 {
+.text-red-600 {
   --tw-text-opacity: 1;
   color: rgb(242 92 71 / var(--tw-text-opacity));
 }
 
-.text-red-700 {
+.text-red-800 {
   --tw-text-opacity: 1;
   color: rgb(207 42 20 / var(--tw-text-opacity));
 }
@@ -4157,22 +4157,22 @@ input[data-autocompleted] {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-yellow-200 {
+.text-yellow-300 {
   --tw-text-opacity: 1;
   color: rgb(255 215 128 / var(--tw-text-opacity));
 }
 
-.text-yellow-300 {
+.text-yellow-400 {
   --tw-text-opacity: 1;
   color: rgb(255 202 66 / var(--tw-text-opacity));
 }
 
-.text-yellow-400 {
+.text-yellow-500 {
   --tw-text-opacity: 1;
   color: rgb(255 196 83 / var(--tw-text-opacity));
 }
 
-.text-yellow-500 {
+.text-yellow-600 {
   --tw-text-opacity: 1;
   color: rgb(253 185 68 / var(--tw-text-opacity));
 }
@@ -4212,17 +4212,17 @@ input[data-autocompleted] {
           text-decoration-line: line-through;
 }
 
-.placeholder-gray-300::-moz-placeholder {
+.placeholder-gray-400::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(162 162 169 / var(--tw-placeholder-opacity));
 }
 
-.placeholder-gray-300:-ms-input-placeholder {
+.placeholder-gray-400:-ms-input-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(162 162 169 / var(--tw-placeholder-opacity));
 }
 
-.placeholder-gray-300::placeholder {
+.placeholder-gray-400::placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(162 162 169 / var(--tw-placeholder-opacity));
 }
@@ -4334,12 +4334,12 @@ input[data-autocompleted] {
   --tw-ring-inset: inset;
 }
 
-.ring-gray-400 {
+.ring-gray-100 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(95 100 110 / var(--tw-ring-opacity));
 }
 
-.ring-gray-500 {
+.ring-gray-600 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(54 55 62 / var(--tw-ring-opacity));
 }
@@ -4354,7 +4354,7 @@ input[data-autocompleted] {
   --tw-ring-color: rgb(0 191 255 / var(--tw-ring-opacity));
 }
 
-.ring-red-500 {
+.ring-red-600 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(242 92 71 / var(--tw-ring-opacity));
 }
@@ -4363,7 +4363,7 @@ input[data-autocompleted] {
   --tw-ring-offset-width: 8px;
 }
 
-.ring-offset-gray-700 {
+.ring-offset-gray-800 {
   --tw-ring-offset-color: #151515;
 }
 
@@ -5335,7 +5335,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   position: absolute;
 }
 
-.before\:bg-blue-500::before {
+.before\:bg-blue-600::before {
   content: var(--tw-content);
   --tw-bg-opacity: 1;
   background-color: rgb(1 173 241 / var(--tw-bg-opacity));
@@ -5372,17 +5372,17 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   border-width: 2px;
 }
 
-.hover\:border-gray-100:hover {
+.hover\:border-gray-200:hover {
   --tw-border-opacity: 1;
   border-color: rgb(232 232 232 / var(--tw-border-opacity));
 }
 
-.hover\:border-gray-300:hover {
+.hover\:border-gray-400:hover {
   --tw-border-opacity: 1;
   border-color: rgb(162 162 169 / var(--tw-border-opacity));
 }
 
-.hover\:border-gray-400:hover {
+.hover\:border-gray-100:hover {
   --tw-border-opacity: 1;
   border-color: rgb(95 100 110 / var(--tw-border-opacity));
 }
@@ -5397,12 +5397,12 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   border-color: rgb(0 191 255 / var(--tw-border-opacity));
 }
 
-.hover\:border-red-600:hover {
+.hover\:border-red-700:hover {
   --tw-border-opacity: 1;
   border-color: rgb(255 71 46 / var(--tw-border-opacity));
 }
 
-.hover\:border-red-700:hover {
+.hover\:border-red-800:hover {
   --tw-border-opacity: 1;
   border-color: rgb(207 42 20 / var(--tw-border-opacity));
 }
@@ -5417,27 +5417,27 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-100:hover {
+.hover\:bg-gray-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(232 232 232 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-400:hover {
+.hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(95 100 110 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-500:hover {
+.hover\:bg-gray-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(54 55 62 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-700:hover {
+.hover\:bg-gray-800:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(21 21 21 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-800:hover {
+.hover\:bg-gray-900:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(17 17 17 / var(--tw-bg-opacity));
 }
@@ -5452,7 +5452,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   background-color: rgb(0 191 255 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-red-700:hover {
+.hover\:bg-red-800:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(207 42 20 / var(--tw-bg-opacity));
 }
@@ -5475,7 +5475,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
-.hover\:text-gray-400:hover {
+.hover\:text-gray-100:hover {
   --tw-text-opacity: 1;
   color: rgb(95 100 110 / var(--tw-text-opacity));
 }
@@ -5485,7 +5485,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   color: rgb(51 204 255 / var(--tw-text-opacity));
 }
 
-.hover\:text-red-700:hover {
+.hover\:text-red-800:hover {
   --tw-text-opacity: 1;
   color: rgb(207 42 20 / var(--tw-text-opacity));
 }
@@ -5547,7 +5547,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   border-color: rgb(0 191 255 / var(--tw-border-opacity));
 }
 
-.focus\:border-red-500:focus {
+.focus\:border-red-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(242 92 71 / var(--tw-border-opacity));
 }
@@ -5557,12 +5557,12 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
-.focus\:bg-gray-100:focus {
+.focus\:bg-gray-200:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(232 232 232 / var(--tw-bg-opacity));
 }
 
-.focus\:bg-gray-700:focus {
+.focus\:bg-gray-800:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(21 21 21 / var(--tw-bg-opacity));
 }
@@ -5581,7 +5581,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
-.focus\:text-gray-500:focus {
+.focus\:text-gray-600:focus {
   --tw-text-opacity: 1;
   color: rgb(54 55 62 / var(--tw-text-opacity));
 }
@@ -5595,12 +5595,12 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   outline-offset: 2px;
 }
 
-.active\:border-gray-200:active {
+.active\:border-gray-300:active {
   --tw-border-opacity: 1;
   border-color: rgb(196 196 196 / var(--tw-border-opacity));
 }
 
-.active\:border-gray-300:active {
+.active\:border-gray-400:active {
   --tw-border-opacity: 1;
   border-color: rgb(162 162 169 / var(--tw-border-opacity));
 }
@@ -5610,17 +5610,17 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   border-color: rgb(51 204 255 / var(--tw-border-opacity));
 }
 
-.active\:border-red-500:active {
+.active\:border-red-600:active {
   --tw-border-opacity: 1;
   border-color: rgb(242 92 71 / var(--tw-border-opacity));
 }
 
-.active\:bg-gray-300:active {
+.active\:bg-gray-400:active {
   --tw-bg-opacity: 1;
   background-color: rgb(162 162 169 / var(--tw-bg-opacity));
 }
 
-.active\:bg-gray-600:active {
+.active\:bg-gray-700:active {
   --tw-bg-opacity: 1;
   background-color: rgb(55 57 61 / var(--tw-bg-opacity));
 }
@@ -5630,7 +5630,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   background-color: rgb(51 204 255 / var(--tw-bg-opacity));
 }
 
-.active\:bg-red-600:active {
+.active\:bg-red-700:active {
   --tw-bg-opacity: 1;
   background-color: rgb(255 71 46 / var(--tw-bg-opacity));
 }
@@ -5649,7 +5649,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.group:hover .group-hover\:border-gray-700 {
+.group:hover .group-hover\:border-gray-800 {
   --tw-border-opacity: 1;
   border-color: rgb(21 21 21 / var(--tw-border-opacity));
 }
@@ -5668,7 +5668,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
-.group:hover .group-hover\:text-gray-600 {
+.group:hover .group-hover\:text-gray-700 {
   --tw-text-opacity: 1;
   color: rgb(55 57 61 / var(--tw-text-opacity));
 }
diff --git a/app/styles/tailwind.css b/app/styles/globals.css
similarity index 100%
rename from app/styles/tailwind.css
rename to app/styles/globals.css
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
index 6e1d62f680..a57cc370bd 100644
--- a/app/tailwind.config.js
+++ b/app/tailwind.config.js
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
+const defaultTheme = require('tailwindcss/defaultTheme');
 const forms = require('@tailwindcss/forms')({
   strategy: 'class',
 });
@@ -11,1025 +12,160 @@ const SCREENS = require('./utils/media');
  */
 module.exports = {
   content: ['./components/**/*.@(tsx|ts)', './layout/**/*.@(tsx|ts)', './pages/**/*.tsx'],
-  presets: [],
   theme: {
     extend: {
-      outline: {
-        blue: '2px dotted #00ace6',
-      },
-    },
-    forms: (theme) => ({
-      default: {
-        checkbox: {
-          borderRadius: 'rounded-sm',
-        },
-      },
-      dark: {
-        checkbox: {
-          icon: (iconColor) =>
-            `<svg fill="${iconColor}" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" ><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z"/></svg>`,
-          iconColor: theme('colors.gray.800'),
-        },
-        radio: {
-          icon: (iconColor) =>
-            `icon: '<svg fill="${iconColor}" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>'`,
-          iconColor: theme('colors.gray.800'),
-        },
-      },
-    }),
-    screens: Object.keys(SCREENS).reduce((acc, k) => {
-      const SCREEN_TEXT = `${SCREENS[k]}px`;
-      return {
-        ...acc,
-        [k]: SCREEN_TEXT,
-      };
-    }, {}),
-    colors: {
-      border: 'hsl(var(--border))',
-      transparent: 'transparent',
-      current: 'currentColor',
-      primary: {
-        50: '#F1F9FE',
-        200: '#4dd2ff',
-        300: '#33ccff',
-        400: '#1ac5ff',
-        500: '#00BFFF',
-        600: '#00ace6',
-        700: '#0099cc',
-        800: '#0086b3',
-      },
-      black: colors.black,
-      white: colors.white,
-      gray: {
-        50: '#F2F2F2',
-        100: '#E8E8E8',
-        200: '#C4C4C4',
-        300: '#A2A2A9',
-        400: '#5F646E',
-        500: '#36373E',
-        600: '#37393d',
-        700: '#151515',
-        800: '#111111',
-      },
-      red: {
-        50: '#FFBFB7',
-        100: '#FFAFA4',
-        200: '#FF9D90',
-        300: '#FF7E6C',
-        400: '#FF6D59',
-        500: '#F25C47',
-        600: '#FF472E',
-        700: '#CF2A14',
-        800: '#C21701',
-      },
-      yellow: {
-        50: '#FFE39D',
-        100: '#FFDD8D',
-        200: '#FFD780',
-        300: '#FFCA42',
-        400: '#FFC453',
-        500: '#FDB944',
-        600: '#FBAD35',
-        700: '#F79618',
-        800: '#F38401',
-      },
-      green: {
-        50: '#B1FEF7',
-        100: '#8CF9EF',
-        200: '#66F4E7',
-        300: '#03E7D1',
-        400: '#03E4CE',
-        500: '#03D6C2',
-        600: '#02BBA9',
-        700: '#02AD9D',
-        800: '#029F90',
-      },
-      blue: {
-        50: '#BFF0FF',
-        100: '#99E6FF',
-        200: '#6DDBFF',
-        300: '#1EC7FF',
-        400: '#00BFFF',
-        500: '#01ADF1',
-        600: '#3787FF',
-        700: '#1B72F5',
-        800: '#015EEB',
-      },
-      purple: {
-        50: '#E3CEFF',
-        100: '#D8BAFF',
-        200: '#CEA8FF',
-        300: '#C496FF',
-        400: '#AE72FF',
-        500: '#9962FD',
-        600: '#8451FC',
-        700: '#674BFD',
-        800: '#401EF8',
-      },
-      pink: {
-        50: '#FFDDF6',
-        100: '#FFBAEC',
-        200: '#FF9AE4',
-        300: '#FF7CDB',
-        400: '#FF3DCA',
-        500: '#F531B3',
-        600: '#EB269D',
-        700: '#E11A87',
-        800: '#BC0166',
-      },
-    },
-    spacing: {
-      px: '1px',
-      0: '0px',
-      0.5: '0.125rem',
-      1: '0.25rem',
-      1.5: '0.375rem',
-      2: '0.5rem',
-      2.5: '0.625rem',
-      3: '0.75rem',
-      3.5: '0.875rem',
-      4: '1rem',
-      4.5: '1.125rem',
-      5: '1.25rem',
-      6: '1.5rem',
-      7: '1.75rem',
-      8: '2rem',
-      9: '2.25rem',
-      10: '2.5rem',
-      11: '2.75rem',
-      12: '3rem',
-      14: '3.5rem',
-      16: '4rem',
-      18: '4.5rem',
-      20: '5rem',
-      24: '6rem',
-      26: '6.5rem',
-      28: '7rem',
-      32: '8rem',
-      36: '9rem',
-      40: '10rem',
-      44: '11rem',
-      48: '12rem',
-      52: '13rem',
-      56: '14rem',
-      60: '15rem',
-      64: '16rem',
-      72: '18rem',
-      80: '20rem',
-      96: '24rem',
-    },
-    animation: {
-      none: 'none',
-      spin: 'spin 1s linear infinite',
-      ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
-      pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-      bounce: 'bounce 0.75s infinite',
-      banner: 'banner 6s cubic-bezier(0, 0, 0.2, 1) infinite',
-    },
-    backgroundColor: (theme) => theme('colors'),
-    backgroundImage: {
-      none: 'none',
-      'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
-      'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
-      'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
-      'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
-      'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
-      'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
-      'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
-      'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
-      // Repeating linear gradients
-      // Notice `-45deg` is not the same as `to bottom right`
-      'gradient-repeat-to-br': 'repeating-linear-gradient(-45deg, var(--tw-gradient-stops))',
-    },
-    backgroundOpacity: (theme) => theme('opacity'),
-    backgroundPosition: {
-      bottom: 'bottom',
-      center: 'center',
-      left: 'left',
-      'left-bottom': 'left bottom',
-      'left-top': 'left top',
-      right: 'right',
-      'right-bottom': 'right bottom',
-      'right-top': 'right top',
-      top: 'top',
-    },
-    backgroundSize: {
-      auto: 'auto',
-      cover: 'cover',
-      contain: 'contain',
-    },
-    borderColor: (theme) => ({
-      ...theme('colors'),
-      DEFAULT: theme('colors.gray.200', 'currentColor'),
-    }),
-    borderOpacity: (theme) => theme('opacity'),
-    borderRadius: {
-      none: '0px',
-      sm: '0.125rem',
-      DEFAULT: '0.25rem',
-      md: '0.375rem',
-      lg: '0.5rem',
-      xl: '0.75rem',
-      '2xl': '1rem',
-      '3xl': '1.5rem',
-      '4xl': '40px',
-      full: '9999px',
-    },
-    borderWidth: {
-      DEFAULT: '1px',
-      0: '0px',
-      2: '2px',
-      4: '4px',
-      8: '8px',
-    },
-    boxShadow: {
-      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-      DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
-      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
-      none: 'none',
-    },
-    container: {},
-    cursor: {
-      auto: 'auto',
-      default: 'default',
-      pointer: 'pointer',
-      wait: 'wait',
-      text: 'text',
-      move: 'move',
-      'not-allowed': 'not-allowed',
-    },
-    divideColor: (theme) => theme('borderColor'),
-    divideOpacity: (theme) => theme('borderOpacity'),
-    divideWidth: (theme) => theme('borderWidth'),
-    fill: { current: 'currentColor' },
-    flex: {
-      1: '1 1 0%',
-      auto: '1 1 auto',
-      initial: '0 1 auto',
-      none: 'none',
-    },
-    flexGrow: {
-      0: '0',
-      DEFAULT: '1',
-    },
-    flexShrink: {
-      0: '0',
-      DEFAULT: '1',
-    },
-    fontFamily: {
-      heading: 'Poppins',
-      sans: [
-        'Basier Circle',
-        'ui-sans-serif',
-        'system-ui',
-        '-apple-system',
-        'BlinkMacSystemFont',
-        '"Segoe UI"',
-        'Roboto',
-        '"Helvetica Neue"',
-        'Arial',
-        '"Noto Sans"',
-        'sans-serif',
-        '"Apple Color Emoji"',
-        '"Segoe UI Emoji"',
-        '"Segoe UI Symbol"',
-        '"Noto Color Emoji"',
-      ],
-      serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
-      mono: [
-        'ui-monospace',
-        'SFMono-Regular',
-        'Menlo',
-        'Monaco',
-        'Consolas',
-        '"Liberation Mono"',
-        '"Courier New"',
-        'monospace',
-      ],
-    },
-    fontSize: {
-      xxs: ['0.625rem', { lineHeight: '0.75rem' }],
-      xs: ['0.75rem', { lineHeight: '1rem' }],
-      sm: ['0.875rem', { lineHeight: '1.25rem' }],
-      base: ['1rem', { lineHeight: '1.5rem' }],
-      lg: ['1.125rem', { lineHeight: '1.75rem' }],
-      xl: ['1.25rem', { lineHeight: '1.75rem' }],
-      '2xl': ['1.5rem', { lineHeight: '2rem' }],
-      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
-      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
-      '5xl': ['3rem', { lineHeight: '1' }],
-      '6xl': ['3.75rem', { lineHeight: '1' }],
-      '7xl': ['4.5rem', { lineHeight: '1' }],
-      '8xl': ['6rem', { lineHeight: '1' }],
-      '9xl': ['8rem', { lineHeight: '1' }],
-    },
-    fontWeight: {
-      thin: '100',
-      extralight: '200',
-      light: '300',
-      normal: '400',
-      medium: '500',
-      semibold: '600',
-      bold: '700',
-      extrabold: '800',
-      black: '900',
-    },
-    gap: (theme) => theme('spacing'),
-    gradientColorStops: (theme) => theme('colors'),
-    gridAutoColumns: {
-      auto: 'auto',
-      min: 'min-content',
-      max: 'max-content',
-      fr: 'minmax(0, 1fr)',
-    },
-    gridAutoRows: {
-      auto: 'auto',
-      min: 'min-content',
-      max: 'max-content',
-      fr: 'minmax(0, 1fr)',
-    },
-    gridColumn: {
-      auto: 'auto',
-      'span-1': 'span 1 / span 1',
-      'span-2': 'span 2 / span 2',
-      'span-3': 'span 3 / span 3',
-      'span-4': 'span 4 / span 4',
-      'span-5': 'span 5 / span 5',
-      'span-6': 'span 6 / span 6',
-      'span-7': 'span 7 / span 7',
-      'span-8': 'span 8 / span 8',
-      'span-9': 'span 9 / span 9',
-      'span-10': 'span 10 / span 10',
-      'span-11': 'span 11 / span 11',
-      'span-12': 'span 12 / span 12',
-      'span-full': '1 / -1',
-    },
-    gridColumnEnd: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-      8: '8',
-      9: '9',
-      10: '10',
-      11: '11',
-      12: '12',
-      13: '13',
-    },
-    gridColumnStart: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-      8: '8',
-      9: '9',
-      10: '10',
-      11: '11',
-      12: '12',
-      13: '13',
-    },
-    gridRow: {
-      auto: 'auto',
-      'span-1': 'span 1 / span 1',
-      'span-2': 'span 2 / span 2',
-      'span-3': 'span 3 / span 3',
-      'span-4': 'span 4 / span 4',
-      'span-5': 'span 5 / span 5',
-      'span-6': 'span 6 / span 6',
-      'span-full': '1 / -1',
-    },
-    gridRowStart: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-    },
-    gridRowEnd: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-    },
-    transformOrigin: {
-      center: 'center',
-      top: 'top',
-      'top-right': 'top right',
-      right: 'right',
-      'bottom-right': 'bottom right',
-      bottom: 'bottom',
-      'bottom-left': 'bottom left',
-      left: 'left',
-      'top-left': 'top left',
-    },
-    gridTemplateColumns: {
-      none: 'none',
-      1: 'repeat(1, minmax(0, 1fr))',
-      2: 'repeat(2, minmax(0, 1fr))',
-      3: 'repeat(3, minmax(0, 1fr))',
-      4: 'repeat(4, minmax(0, 1fr))',
-      5: 'repeat(5, minmax(0, 1fr))',
-      6: 'repeat(6, minmax(0, 1fr))',
-      7: 'repeat(7, minmax(0, 1fr))',
-      8: 'repeat(8, minmax(0, 1fr))',
-      9: 'repeat(9, minmax(0, 1fr))',
-      10: 'repeat(10, minmax(0, 1fr))',
-      11: 'repeat(11, minmax(0, 1fr))',
-      12: 'repeat(12, minmax(0, 1fr))',
-    },
-    gridTemplateRows: {
-      none: 'none',
-      1: 'repeat(1, minmax(0, 1fr))',
-      2: 'repeat(2, minmax(0, 1fr))',
-      3: 'repeat(3, minmax(0, 1fr))',
-      4: 'repeat(4, minmax(0, 1fr))',
-      5: 'repeat(5, minmax(0, 1fr))',
-      6: 'repeat(6, minmax(0, 1fr))',
-    },
-    height: (theme) => ({
-      auto: 'auto',
-      ...theme('spacing'),
-      '1/2': '50%',
-      '1/3': '33.333333%',
-      '2/3': '66.666667%',
-      '1/4': '25%',
-      '2/4': '50%',
-      '3/4': '75%',
-      '1/5': '20%',
-      '2/5': '40%',
-      '3/5': '60%',
-      '4/5': '80%',
-      '1/6': '16.666667%',
-      '2/6': '33.333333%',
-      '3/6': '50%',
-      '4/6': '66.666667%',
-      '5/6': '83.333333%',
-      full: '100%',
-      screen: '100vh',
-    }),
-    inset: (theme, { negative }) => ({
-      auto: 'auto',
-      ...theme('spacing'),
-      ...negative(theme('spacing')),
-      '1/2': '50%',
-      '1/3': '33.333333%',
-      '2/3': '66.666667%',
-      '1/4': '25%',
-      '2/4': '50%',
-      '3/4': '75%',
-      full: '100%',
-      '-1/2': '-50%',
-      '-1/3': '-33.333333%',
-      '-2/3': '-66.666667%',
-      '-1/4': '-25%',
-      '-2/4': '-50%',
-      '-3/4': '-75%',
-      '-full': '-100%',
-    }),
-    keyframes: {
-      spin: {
-        to: {
-          transform: 'rotate(360deg)',
+      animation: {
+        banner: 'banner 6s cubic-bezier(0, 0, 0.2, 1) infinite',
+      },
+      backgroundImage: {
+        'gradient-repeat-to-br': 'repeating-linear-gradient(-45deg, var(--tw-gradient-stops))',
+      },
+      colors: {
+        gray: {
+          100: '#F2F2F2',
+          200: '#E8E8E8',
+          300: '#C4C4C4',
+          400: '#A2A2A9',
+          500: '#77777F',
+          600: '#5F646E',
+          700: '#35373E',
+          800: '#151515',
+          900: '#111111',
+        },
+        red: {
+          100: '#FFBFB7',
+          200: '#FFAFA4',
+          300: '#FF9D90',
+          400: '#FF7E6C',
+          500: '#FF6D59',
+          600: '#F25C47',
+          700: '#FF472E',
+          800: '#CF2A14',
+          900: '#C21701',
+        },
+        yellow: {
+          50: '#FFF4D9',
+          100: '#FFE39D',
+          200: '#FFDD8D',
+          300: '#FFD780',
+          400: '#FFCA42',
+          500: '#FFC453',
+          600: '#FDB944',
+          700: '#FBAD35',
+          800: '#F79618',
+          900: '#F38401',
+        },
+        green: {
+          50: '#B1FEF7',
+          100: '#B1FEF7',
+          200: '#8CF9EF',
+          300: '#66F4E7',
+          400: '#03E7D1',
+          500: '#03E4CE',
+          600: '#03D6C2',
+          700: '#02BBA9',
+          800: '#02AD9D',
+          900: '#029F90',
+        },
+        pink: {
+          100: '#FFDDF6',
+          200: '#FFBAEC',
+          300: '#FF9AE4',
+          400: '#FF7CDB',
+          500: '#FF3DCA',
+          600: '#F531B3',
+          700: '#EB269D',
+          800: '#E11A87',
+          900: '#BC0166',
+        },
+        purple: {
+          200: '#E3CEFF',
+          300: '#CEA8FF',
+          400: '#C496FF',
+          500: '#AE72FF',
+          600: '#9962FD',
+          700: '#8451FC',
+          800: '#674BFD',
+          900: '#401EF8',
+        },
+        blue: {
+          50: '#D4F4FF',
+          100: '#BFF0FF',
+          200: '#99E6FF',
+          300: '#6DDBFF',
+          400: '#1EC7FF',
+          500: '#00BFFF',
+          600: '#01ADF1',
+          700: '#3787FF',
+          800: '#1B72F5',
+          900: '#015EEB',
+        },
+        primary: {
+          50: '#F1F9FE',
+          200: '#4dd2ff',
+          300: '#33ccff',
+          400: '#1ac5ff',
+          500: '#00BFFF',
+          600: '#00ace6',
+          700: '#0099cc',
+          800: '#0086b3',
+        },
+      },
+      dropShadow: {
+        blue: '1px 0px 3px #00BFFF',
+      },
+      fontFamily: {
+        heading: 'Poppins',
+        sans: ['Basier Circle', ...defaultTheme.fontFamily.sans],
+      },
+      fontSize: {
+        xxs: ['0.625rem', { lineHeight: '0.75rem' }],
+      },
+      keyframes: {
+        banner: {
+          '0%': {
+            transform: 'translateY(0%)',
+          },
+          '11.11%': {
+            transform: 'translateY(0%)',
+          },
+          '22.22%': {
+            transform: 'translateY(0%)',
+          },
+          '33.33%': {
+            transform: 'translateY(-33.33%)',
+          },
+          '44.44%': {
+            transform: 'translateY(-33.33%)',
+          },
+          '55.55%': {
+            transform: 'translateY(-33.33%)',
+          },
+          '66.66%': {
+            transform: 'translateY(-66.66%)',
+          },
+          '77.77%': {
+            transform: 'translateY(-66.66%)',
+          },
+          '88.88%': {
+            transform: 'translateY(-66.66%)',
+          },
+          '100%': {
+            transform: 'translateY(0%)',
+          },
         },
       },
-      ping: {
-        '75%, 100%': {
-          transform: 'scale(2)',
-          opacity: '0',
-        },
-      },
-      pulse: {
-        '0%': {
-          transform: 'scale(0.75)',
-          boxShadow: '0 0 0 0 rgba(0, 191, 255, 0)',
-          opacity: 1,
-        },
-        '100%': {
-          transform: 'scale(1.25)',
-          boxShadow: '0 0 0 10px rgba(0, 191, 255, 0.9)',
-          opacity: 0,
-        },
-      },
-      bounce: {
-        '0%, 100%': {
-          transform: 'translateY(-25%)',
-          animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
-        },
-        '50%': {
-          transform: 'none',
-          animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
-        },
-      },
-      banner: {
-        '0%': {
-          transform: 'translateY(0%)',
-        },
-        '11.11%': {
-          transform: 'translateY(0%)',
-        },
-        '22.22%': {
-          transform: 'translateY(0%)',
-        },
-        '33.33%': {
-          transform: 'translateY(-33.33%)',
-        },
-        '44.44%': {
-          transform: 'translateY(-33.33%)',
-        },
-        '55.55%': {
-          transform: 'translateY(-33.33%)',
-        },
-        '66.66%': {
-          transform: 'translateY(-66.66%)',
-        },
-        '77.77%': {
-          transform: 'translateY(-66.66%)',
-        },
-        '88.88%': {
-          transform: 'translateY(-66.66%)',
-        },
-        '100%': {
-          transform: 'translateY(0%)',
-        },
+      outline: {
+        blue: '2px dotted #00ace6',
       },
+      screens: Object.keys(SCREENS).reduce((acc, k) => {
+        const SCREEN_TEXT = `${SCREENS[k]}px`;
+        return {
+          ...acc,
+          [k]: SCREEN_TEXT,
+        };
+      }, {}),
     },
-    letterSpacing: {
-      tighter: '-0.05em',
-      tight: '-0.025em',
-      normal: '0em',
-      wide: '0.025em',
-      wider: '0.05em',
-      widest: '0.1em',
-    },
-    lineHeight: {
-      none: '1',
-      tight: '1.25',
-      snug: '1.375',
-      normal: '1.5',
-      relaxed: '1.625',
-      loose: '2',
-      3: '.75rem',
-      4: '1rem',
-      5: '1.25rem',
-      6: '1.5rem',
-      7: '1.75rem',
-      8: '2rem',
-      9: '2.25rem',
-      10: '2.5rem',
-    },
-    listStyleType: {
-      none: 'none',
-      disc: 'disc',
-      decimal: 'decimal',
-    },
-    margin: (theme, { negative }) => ({
-      auto: 'auto',
-      ...theme('spacing'),
-      ...negative(theme('spacing')),
-    }),
-    maxHeight: (theme) => ({
-      ...theme('spacing'),
-      full: '100%',
-      screen: '100vh',
-    }),
-    maxWidth: (theme, { breakpoints }) => ({
-      none: 'none',
-      0: '0rem',
-      xs: '20rem',
-      sm: '24rem',
-      md: '28rem',
-      lg: '32rem',
-      xl: '36rem',
-      '2xl': '42rem',
-      '3xl': '48rem',
-      '4xl': '56rem',
-      '5xl': '64rem',
-      '6xl': '72rem',
-      '7xl': '80rem',
-      full: '100%',
-      min: 'min-content',
-      max: 'max-content',
-      prose: '65ch',
-      ...breakpoints(theme('screens')),
-    }),
-    minHeight: {
-      0: '0px',
-      full: '100%',
-      screen: '100vh',
-    },
-    minWidth: {
-      0: '0px',
-      full: '100%',
-      min: 'min-content',
-      max: 'max-content',
-    },
-    objectPosition: {
-      bottom: 'bottom',
-      center: 'center',
-      left: 'left',
-      'left-bottom': 'left bottom',
-      'left-top': 'left top',
-      right: 'right',
-      'right-bottom': 'right bottom',
-      'right-top': 'right top',
-      top: 'top',
-    },
-    opacity: {
-      0: '0',
-      5: '0.05',
-      10: '0.1',
-      20: '0.2',
-      25: '0.25',
-      30: '0.3',
-      40: '0.4',
-      50: '0.5',
-      60: '0.6',
-      70: '0.7',
-      75: '0.75',
-      80: '0.8',
-      90: '0.9',
-      95: '0.95',
-      100: '1',
-    },
-    order: {
-      first: '-9999',
-      last: '9999',
-      none: '0',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-      8: '8',
-      9: '9',
-      10: '10',
-      11: '11',
-      12: '12',
-    },
-    outline: {
-      none: ['2px solid transparent', '2px'],
-      white: ['2px dotted white', '2px'],
-      black: ['2px dotted black', '2px'],
-    },
-    padding: (theme) => theme('spacing'),
-    placeholderColor: (theme) => theme('colors'),
-    placeholderOpacity: (theme) => theme('opacity'),
-    ringColor: (theme) => ({
-      DEFAULT: theme('colors.blue.500', '#3b82f6'),
-      ...theme('colors'),
-    }),
-    ringOffsetColor: (theme) => theme('colors'),
-    ringOffsetWidth: {
-      0: '0px',
-      1: '1px',
-      2: '2px',
-      4: '4px',
-      8: '8px',
-    },
-    ringOpacity: (theme) => ({
-      DEFAULT: '0.5',
-      ...theme('opacity'),
-    }),
-    ringWidth: {
-      DEFAULT: '3px',
-      0: '0px',
-      1: '1px',
-      2: '2px',
-      4: '4px',
-      8: '8px',
-    },
-    rotate: {
-      '-180': '-180deg',
-      '-90': '-90deg',
-      '-45': '-45deg',
-      '-12': '-12deg',
-      '-6': '-6deg',
-      '-3': '-3deg',
-      '-2': '-2deg',
-      '-1': '-1deg',
-      0: '0deg',
-      1: '1deg',
-      2: '2deg',
-      3: '3deg',
-      6: '6deg',
-      12: '12deg',
-      45: '45deg',
-      90: '90deg',
-      180: '180deg',
-    },
-    scale: {
-      0: '0',
-      50: '.5',
-      75: '.75',
-      90: '.9',
-      95: '.95',
-      100: '1',
-      105: '1.05',
-      110: '1.1',
-      125: '1.25',
-      150: '1.5',
-    },
-    skew: {
-      '-12': '-12deg',
-      '-6': '-6deg',
-      '-3': '-3deg',
-      '-2': '-2deg',
-      '-1': '-1deg',
-      0: '0deg',
-      1: '1deg',
-      2: '2deg',
-      3: '3deg',
-      6: '6deg',
-      12: '12deg',
-    },
-    space: (theme, { negative }) => ({
-      ...theme('spacing'),
-      ...negative(theme('spacing')),
-    }),
-    stroke: {
-      current: 'currentColor',
-    },
-    strokeWidth: {
-      0: '0',
-      1: '1',
-      2: '2',
-    },
-    textColor: (theme) => theme('colors'),
-    textOpacity: (theme) => theme('opacity'),
-    transitionDuration: {
-      DEFAULT: '150ms',
-      75: '75ms',
-      100: '100ms',
-      150: '150ms',
-      200: '200ms',
-      300: '300ms',
-      500: '500ms',
-      700: '700ms',
-      1000: '1000ms',
-    },
-    transitionDelay: {
-      75: '75ms',
-      100: '100ms',
-      150: '150ms',
-      200: '200ms',
-      300: '300ms',
-      500: '500ms',
-      700: '700ms',
-      1000: '1000ms',
-    },
-    transitionProperty: {
-      none: 'none',
-      all: 'all',
-      DEFAULT:
-        'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
-      colors: 'background-color, border-color, color, fill, stroke',
-      opacity: 'opacity',
-      shadow: 'box-shadow',
-      transform: 'transform',
-    },
-    transitionTimingFunction: {
-      DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
-      linear: 'linear',
-      in: 'cubic-bezier(0.4, 0, 1, 1)',
-      out: 'cubic-bezier(0, 0, 0.2, 1)',
-      'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
-    },
-    translate: (theme, { negative }) => ({
-      ...theme('spacing'),
-      ...negative(theme('spacing')),
-      '1/2': '50%',
-      '1/3': '33.333333%',
-      '2/3': '66.666667%',
-      '1/4': '25%',
-      '2/4': '50%',
-      '3/4': '75%',
-      full: '100%',
-      '-1/2': '-50%',
-      '-1/3': '-33.333333%',
-      '-2/3': '-66.666667%',
-      '-1/4': '-25%',
-      '-2/4': '-50%',
-      '-3/4': '-75%',
-      '-full': '-100%',
-    }),
-    width: (theme) => ({
-      auto: 'auto',
-      ...theme('spacing'),
-      '1/2': '50%',
-      '1/3': '33.333333%',
-      '2/3': '66.666667%',
-      '1/4': '25%',
-      '2/4': '50%',
-      '3/4': '75%',
-      '1/5': '20%',
-      '2/5': '40%',
-      '3/5': '60%',
-      '4/5': '80%',
-      '1/6': '16.666667%',
-      '2/6': '33.333333%',
-      '3/6': '50%',
-      '4/6': '66.666667%',
-      '5/6': '83.333333%',
-      '1/12': '8.333333%',
-      '2/12': '16.666667%',
-      '3/12': '25%',
-      '4/12': '33.333333%',
-      '5/12': '41.666667%',
-      '6/12': '50%',
-      '7/12': '58.333333%',
-      '8/12': '66.666667%',
-      '9/12': '75%',
-      '10/12': '83.333333%',
-      '11/12': '91.666667%',
-      full: '100%',
-      screen: '100vw',
-      min: 'min-content',
-      max: 'max-content',
-    }),
-    zIndex: {
-      auto: 'auto',
-      0: '0',
-      10: '10',
-      20: '20',
-      30: '30',
-      40: '40',
-      50: '50',
-      60: '60',
-      70: '70',
-    },
-    lineClamp: {
-      1: 1,
-      2: 2,
-      3: 3,
-    },
-    dropShadow: {
-      blue: '1px 0px 3px #00BFFF',
-    },
-  },
-  variantOrder: [
-    'first',
-    'last',
-    'odd',
-    'even',
-    'visited',
-    'checked',
-    'group-hover',
-    'group-focus',
-    'focus-within',
-    'hover',
-    'focus',
-    'focus-visible',
-    'active',
-    'disabled',
-  ],
-  variants: {
-    accessibility: ['responsive', 'focus-within', 'focus'],
-    alignContent: ['responsive'],
-    alignItems: ['responsive'],
-    alignSelf: ['responsive'],
-    animation: ['responsive'],
-    appearance: ['responsive'],
-    backgroundAttachment: ['responsive'],
-    backgroundClip: ['responsive'],
-    backgroundColor: [
-      'responsive',
-      'dark',
-      'group-hover',
-      'focus-within',
-      'hover',
-      'focus',
-      'active',
-    ],
-    backgroundImage: ['responsive'],
-    backgroundOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    backgroundPosition: ['responsive'],
-    backgroundRepeat: ['responsive'],
-    backgroundSize: ['responsive'],
-    borderCollapse: ['responsive'],
-    borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus', 'last'],
-    borderOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    borderRadius: ['responsive'],
-    borderStyle: ['responsive'],
-    borderWidth: ['responsive', 'hover', 'first'],
-    boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    boxSizing: ['responsive'],
-    clear: ['responsive'],
-    container: ['responsive'],
-    cursor: ['responsive'],
-    display: ['responsive'],
-    divideColor: ['responsive', 'dark'],
-    divideOpacity: ['responsive'],
-    divideStyle: ['responsive'],
-    divideWidth: ['responsive'],
-    fill: ['responsive'],
-    flex: ['responsive'],
-    flexDirection: ['responsive'],
-    flexGrow: ['responsive'],
-    flexShrink: ['responsive'],
-    flexWrap: ['responsive'],
-    float: ['responsive'],
-    fontFamily: ['responsive'],
-    fontSize: ['responsive'],
-    fontSmoothing: ['responsive'],
-    fontStyle: ['responsive'],
-    fontVariantNumeric: ['responsive'],
-    fontWeight: ['responsive'],
-    gap: ['responsive'],
-    gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],
-    gridAutoColumns: ['responsive'],
-    gridAutoFlow: ['responsive'],
-    gridAutoRows: ['responsive'],
-    gridColumn: ['responsive'],
-    gridColumnEnd: ['responsive'],
-    gridColumnStart: ['responsive'],
-    gridRow: ['responsive'],
-    gridRowEnd: ['responsive'],
-    gridRowStart: ['responsive'],
-    gridTemplateColumns: ['responsive'],
-    gridTemplateRows: ['responsive'],
-    height: ['responsive'],
-    inset: ['responsive'],
-    justifyContent: ['responsive'],
-    justifyItems: ['responsive'],
-    justifySelf: ['responsive'],
-    letterSpacing: ['responsive'],
-    lineHeight: ['responsive'],
-    listStylePosition: ['responsive'],
-    listStyleType: ['responsive'],
-    margin: ['responsive'],
-    maxHeight: ['responsive'],
-    maxWidth: ['responsive'],
-    minHeight: ['responsive'],
-    minWidth: ['responsive'],
-    objectFit: ['responsive'],
-    objectPosition: ['responsive'],
-    opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    order: ['responsive'],
-    outline: ['responsive', 'focus-within', 'focus'],
-    overflow: ['responsive'],
-    overscrollBehavior: ['responsive'],
-    padding: ['responsive'],
-    placeContent: ['responsive'],
-    placeItems: ['responsive'],
-    placeSelf: ['responsive'],
-    placeholderColor: ['responsive', 'dark', 'focus'],
-    placeholderOpacity: ['responsive', 'focus'],
-    pointerEvents: ['responsive'],
-    position: ['responsive'],
-    resize: ['responsive'],
-    ringColor: ['responsive', 'dark', 'focus-within', 'focus', 'hover'],
-    ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus', 'hover'],
-    ringOffsetWidth: ['responsive', 'focus-within', 'focus', 'hover'],
-    ringOpacity: ['responsive', 'focus-within', 'focus', 'hover'],
-    ringWidth: ['responsive', 'focus-within', 'focus', 'hover'],
-    rotate: ['responsive', 'hover', 'focus', 'group-hover'],
-    scale: ['responsive', 'hover', 'focus'],
-    skew: ['responsive', 'hover', 'focus'],
-    space: ['responsive'],
-    stroke: ['responsive'],
-    strokeWidth: ['responsive'],
-    tableLayout: ['responsive'],
-    textAlign: ['responsive'],
-    textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
-    textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    textOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
-    textOverflow: ['responsive'],
-    textTransform: ['responsive'],
-    transform: ['responsive'],
-    transformOrigin: ['responsive'],
-    transitionDelay: ['responsive'],
-    transitionDuration: ['responsive'],
-    transitionProperty: ['responsive'],
-    transitionTimingFunction: ['responsive'],
-    translate: ['responsive', 'hover', 'focus'],
-    userSelect: ['responsive'],
-    verticalAlign: ['responsive'],
-    visibility: ['responsive'],
-    whitespace: ['responsive'],
-    width: ['responsive'],
-    wordBreak: ['responsive'],
-    zIndex: ['responsive', 'focus-within', 'focus', 'hover'],
   },
   plugins: [forms],
 };