diff --git a/resources/css/front/front.css b/resources/css/front/front.css
index f6c84616..0fe90a9e 100644
--- a/resources/css/front/front.css
+++ b/resources/css/front/front.css
@@ -66,9 +66,3 @@ a.anchor-link {
 .show-input-number-buttons::-webkit-outer-spin-button {
     opacity: 1;
 }
-
-svg,
-.wallpaper img,
-.is-postcard-without-caption img {
-    filter: grayscale(1);
-}
diff --git a/resources/css/front/utilities/gradient.css b/resources/css/front/utilities/gradient.css
index c1c625f2..27a82524 100644
--- a/resources/css/front/utilities/gradient.css
+++ b/resources/css/front/utilities/gradient.css
@@ -10,40 +10,32 @@
 
 .gradient-green {
     --gradient-angle: 120deg;
-    --gradient-from: #242424;
-    --gradient-to: #171e1a;
+    --gradient-from: #21b989;
+    --gradient-to: #82d8af;
 
     @apply bg-green;
 }
 
 .gradient-pink {
     --gradient-angle: 120deg;
-    --gradient-from: #242424;
-    --gradient-to: #171e1a;
+    --gradient-from: #ddaeb4;
+    --gradient-to: #dd9099;
 
     @apply bg-pink;
 }
 
 .gradient-blue {
     --gradient-angle: 120deg;
-    --gradient-from: #f3efea;
-    --gradient-to: #e1ded9;
+    --gradient-from: #cae1e8;
+    --gradient-to: #e2f1f3;
 
     @apply bg-blue-lightest;
 }
 
-.gradient-gray {
-    --gradient-angle: 120deg;
-    --gradient-from: #f3efea;
-    --gradient-to: #e1ded9;
-
-    @apply bg-gray-lighter;
-}
-
 .gradient-dark {
     --gradient-angle: 120deg;
-    --gradient-from: #242424;
-    --gradient-to: #171e1a;
+    --gradient-from: #31302f;
+    --gradient-to: #172a3d;
 
     @apply bg-gray-dark;
 }
diff --git a/resources/svg/logo.svg b/resources/svg/logo.svg
index dc209d3f..34499be0 100644
--- a/resources/svg/logo.svg
+++ b/resources/svg/logo.svg
@@ -1 +1 @@
-<svg class="w-auto h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 595.28 255.12"><defs><style>.fill-current text-blue{fill:#172a3d;}.fill-current text-white{fill:#FFFFFF;}</style></defs><title>SPATIE</title>    <g><path class="fill-current text-black" d="M0,9.77A10,10,0,0,1,10.26,0H585a10,10,0,0,1,10.28,9.77V245.36A10,10,0,0,1,585,255.12H10.26A10,10,0,0,1,0,245.36V9.77Z"></path></g><g><path d="M95.6,156.66l10.87-14.84c6.46,5.32,13.82,8.95,21.52,8.95,5.44,0,8.27-2.38,8.27-5.78v-0.11c0-3.17-2.38-5.1-11.67-8.38-14.95-5.1-25.48-10.53-25.48-24.92v-0.34c0-14.38,11-24.46,28.31-24.46,10.65,0,20,2.94,28.31,9.63l-10.31,15.17c-5.44-4.19-12-7.25-18.46-7.25-4.64,0-7.25,2.27-7.25,5.21v0.11c0,3.51,2.49,5.32,12.57,9.06,15.06,4.87,24.46,11,24.46,24.46v0.23c0,15.4-11.89,24.92-28.88,24.92A48.26,48.26,0,0,1,95.6,156.66Z" class="fill-current text-white"></path><path d="M175.67,87.92H204c18.69,0,30.92,9.74,30.92,27.52v0.45c0,19-13.82,28.09-31.14,28.31h-7.81v23H175.67V87.92Zm27.41,39.64c7.13,0,11.44-4.19,11.44-10.87v-0.34c0-7.25-4.19-11-11.55-11h-7v22.2h7.13Z" class="fill-current text-white"></path><path d="M267.17,87.47h20.61l28,79.73h-21.4l-4.64-14.27H264.8l-4.53,14.27h-21Zm17.44,49.15-7.36-23.22-7.36,23.22h14.72Z" class="fill-current text-white"></path><path d="M338.64,106.27H319V87.92h59.57v18.35H359V167.2H338.64V106.27Z" class="fill-current text-white"></path><path d="M396.17,87.92h20.39V167.2H396.17V87.92Z" class="fill-current text-white"></path><path d="M444.64,87.92h54.59v17.89H464.8v13h31v16.88h-31V149.3h34.88V167.2h-55V87.92Z" class="fill-current text-white"></path></g></svg>
+<svg class="w-auto h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 595.28 255.12"><defs><style>.fill-current text-blue{fill:#197593;}.fill-current text-white{fill:#FFFFFF;}</style></defs><title>SPATIE</title> <g><path class="fill-current text-blue" d="M0,9.77A10,10,0,0,1,10.26,0H585a10,10,0,0,1,10.28,9.77V245.36A10,10,0,0,1,585,255.12H10.26A10,10,0,0,1,0,245.36V9.77Z"></path></g><g><path d="M95.6,156.66l10.87-14.84c6.46,5.32,13.82,8.95,21.52,8.95,5.44,0,8.27-2.38,8.27-5.78v-0.11c0-3.17-2.38-5.1-11.67-8.38-14.95-5.1-25.48-10.53-25.48-24.92v-0.34c0-14.38,11-24.46,28.31-24.46,10.65,0,20,2.94,28.31,9.63l-10.31,15.17c-5.44-4.19-12-7.25-18.46-7.25-4.64,0-7.25,2.27-7.25,5.21v0.11c0,3.51,2.49,5.32,12.57,9.06,15.06,4.87,24.46,11,24.46,24.46v0.23c0,15.4-11.89,24.92-28.88,24.92A48.26,48.26,0,0,1,95.6,156.66Z" class="fill-current text-white"></path><path d="M175.67,87.92H204c18.69,0,30.92,9.74,30.92,27.52v0.45c0,19-13.82,28.09-31.14,28.31h-7.81v23H175.67V87.92Zm27.41,39.64c7.13,0,11.44-4.19,11.44-10.87v-0.34c0-7.25-4.19-11-11.55-11h-7v22.2h7.13Z" class="fill-current text-white"></path><path d="M267.17,87.47h20.61l28,79.73h-21.4l-4.64-14.27H264.8l-4.53,14.27h-21Zm17.44,49.15-7.36-23.22-7.36,23.22h14.72Z" class="fill-current text-white"></path><path d="M338.64,106.27H319V87.92h59.57v18.35H359V167.2H338.64V106.27Z" class="fill-current text-white"></path><path d="M396.17,87.92h20.39V167.2H396.17V87.92Z" class="fill-current text-white"></path><path d="M444.64,87.92h54.59v17.89H464.8v13h31v16.88h-31V149.3h34.88V167.2h-55V87.92Z" class="fill-current text-white"></path></g></svg>
diff --git a/resources/views/components/button.blade.php b/resources/views/components/button.blade.php
index a5fb9165..1b562dab 100644
--- a/resources/views/components/button.blade.php
+++ b/resources/views/components/button.blade.php
@@ -1,10 +1,10 @@
 <button class="cursor-pointer
-bg-yellow hover:bg-opacity-75 rounded-sm
-border-2 border-transparent
-justify-center flex items-center
-{{ $attributes['large'] ? 'px-4 min-h-12 text-xl shadow-lg' : 'px-6 min-h-10' }}
-font-sans-bold text-black
-transition-bg duration-300
-focus:outline-none focus:border-blue-light whitespace-no-wrap">
-    {{ $slot }}
+ bg-green-dark bg-opacity-75 hover:bg-opacity-100 rounded-sm
+ border-2 border-transparent
+ justify-center flex items-center
+ {{ $attributes['large'] ? 'px-4 min-h-12 text-xl shadow-lg' : 'px-6 min-h-10' }}
+ font-sans-bold text-white
+ transition-bg duration-300
+ focus:outline-none focus:border-blue-light whitespace-no-wrap">
+     {{ $slot }}
 </button>
diff --git a/resources/views/front/pages/home/index.blade.php b/resources/views/front/pages/home/index.blade.php
index a3291309..956cb22f 100644
--- a/resources/views/front/pages/home/index.blade.php
+++ b/resources/views/front/pages/home/index.blade.php
@@ -1,6 +1,6 @@
 <x-page
         title="Websites & webapplications in Laravel"
-        background="">
+        background="/backgrounds/home-2020.jpg">
     <x-slot name="description">
         Spatie is a digital allrounder: we design solid websites & web applications using Laravel & Vue. No frills, just
         proven expertise. From Antwerp, Belgium
diff --git a/resources/views/front/pages/home/partials/banner.blade.php b/resources/views/front/pages/home/partials/banner.blade.php
index 59c215c9..009aca99 100644
--- a/resources/views/front/pages/home/partials/banner.blade.php
+++ b/resources/views/front/pages/home/partials/banner.blade.php
@@ -1,46 +1,10 @@
-<section id="banner" class="banner bg-trueblack mb-32" role="banner">
-    <div class="wrap">
-        <a href="{{ route('products.index') }}" class="block w-3/5">
-            @include('front.pages.home.partials.black-friday-banner')
-        </a>
-
-        <div class="my-8">
-            @php
-                $expirationDate = \Carbon\Carbon::createFromFormat('Y-m-d H:i', '2022-11-28 23:59' );
-            @endphp
-
-            <a href="{{ route('products.index') }}"
-               class="flex bg-trueblack text-white banner-intro">
-                <div class="py-2 ">
-                    <div>
-                        ⚡️ <strong>Get 30% off</strong> on all our products
-                        <br>in the next
-                        <x-countdown class="inline-block" :expires="$expirationDate">
-                        <span>
-                            <span class="font-semibold font-mono" x-text="timer.days">{{ $component->days()
-                                }}</span><span class="text-white">d</span>
-                        </span>
-                            <span class="ml-1">
-                            <span class="font-semibold font-mono" x-text="timer.hours">{{ $component->hours()
-                                }}</span><span class="text-white">h</span>
-                        </span>
-                            <span class="ml-1">
-                            <span class="font-semibold font-mono" x-text="timer.minutes">{{ $component->minutes()
-                                }}</span><span class="text-white">m</span>
-                        </span>
-                            <span class="ml-1">
-                            <span class="font-semibold font-mono" x-text="timer.seconds">{{ $component->seconds()
-                                }}</span><span class="text-white">s</span>
-                        </span>
-                        </x-countdown>
-                    </div>
-                </div>
-            </a>
-        </div>
-
-        <a href="{{ route('products.index') }}"
-           class=" text-xl text-black font-bold hover:bg-gray-lighter transition transition-color  font-sans px-4 py-2 bg-white rounded-full">
-            Grab your promotion
-        </a>
+<section id="banner" class="banner" role="banner">
+     <div class="wrap">
+         <h1 class="banner-slogan">
+             Solid expertise <br>in Laravel
+         </h1>
+         <p class="banner-intro">
+             We craft web applications, software, courses  <br>&amp; open source packages in the Laravel ecosystem
+         </p>
     </div>
 </section>
diff --git a/resources/views/front/pages/products/index.blade.php b/resources/views/front/pages/products/index.blade.php
index c0220153..07bf5fad 100644
--- a/resources/views/front/pages/products/index.blade.php
+++ b/resources/views/front/pages/products/index.blade.php
@@ -4,135 +4,70 @@
     background="/backgrounds/product.jpg"
     description="Welcome in our store, by artisans for artisans. Get access to our paid products, courses and ebooks"
 >
-    <section id="banner" class="banner bg-trueblack " role="banner">
-        <div class="wrap text-white">
-
-            <h1 class="banner-slogan">
-                Our annual <br><span class="no-underline text-yellow">Black Friday</span> sale
-            </h1>
-
-
-            {{--
-            <h1 class="banner-slogan">
-                Our products
-            </h1>
-            --}}
-
-            <p class="banner-intro pt-4">
-                ⚡️ <strong>Get 30% off</strong> on all our applications and courses.
+    <section id="banner" class="banner" role="banner">
+         <div class="wrap">
+             <h1 class="banner-slogan">
+                 Welcome in <br>our store
+             </h1>
+
+            <!--
+            <p class="banner-intro">
+                Applications and digital courses built for modern developers
             </p>
-
-
-            <div class="mt-2">
-                @php
-                    $expirationDate = \Carbon\Carbon::createFromFormat('Y-m-d H:i', '2023-11-26 23:59' );
-
-                @endphp
-
-                <div
-                    class="flex bg-trueblack text-white text-base banner-intro">
-
-                    Offer ends in&nbsp;
-                    <x-countdown class="inline-block" :expires="$expirationDate">
-                            <span>
-                                <span class="font-semibold  font-mono" x-text="timer.days">{{ $component->days()
-                                    }}</span><span class="text-white">d</span>
-                            </span>
-                        <span>
-                                <span class="font-semibold font-mono" x-text="timer.hours">{{ $component->hours()
-                                    }}</span><span class="text-white">h</span>
-                            </span>
-                        <span>
-                                <span class="font-semibold font-mono" x-text="timer.minutes">{{ $component->minutes()
-                                    }}</span><span class="text-white">m</span>
-                            </span>
-                        <span>
-                                <span class="font-semibold font-mono" x-text="timer.seconds">{{ $component->seconds()
-                                    }}</span><span class="text-white">s</span>
-                            </span>
-                    </x-countdown>
-                </div>
-            </div>
-
-            <div class="underline text-base mt-4">
-                <a href="/bf23">Watch our promo movie</a>
-            </div>
-
-            @once
-                @push('scripts')
-                    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
-                @endpush
-            @endonce
-
-        </div>
-
-        <!--
-        <p class="banner-intro">
-            Applications and digital courses built for modern developers
-        </p>
-        -->
+            -->
         </div>
     </section>
 
-    {{-- @include('front.pages.products.partials.ctaLaraconEU') --}}
+   {{-- @include('front.pages.products.partials.ctaLaraconEU') --}}
 
     <div class="section section-group">
 
 
-        <section class="section overflow-visible">
+    <section class="section overflow-visible">
             @if (count($bundles))
-                <div class="wrap">
-                    <h2 class="title line-after mb-12">All of our products</h2>
-                </div>
+            <div class="wrap">
+                <h2 class="title line-after mb-12">All of our products</h2>
+            </div>
             @endif
             <div class="wrap">
                 <div class="grid col-gap-24 row-gap-24 | sm:grid-cols-2 items-stretch">
                     @foreach ($products as $product)
                         <div class="my-6">
                             @if($product->external && $product->action_url)
-                                <a target="_blank" rel="nofollow noreferrer noopener" href="{{ $product->action_url }}"
-                                   class="group">
-                                    @else
-                                        <a href="{{ route('products.show', $product) }}" class="group">
-                                            @endif
-                                            <div
-                                                class="-mt-8 pb-6 transition-transform transform ease-in-out group-hover:-translate-y-2 duration-200">
-                                                <div
-                                                    class="shadow-md group-hover:shadow-lg">{{ $product->getFirstMedia('product-image') }}</div>
-                                            </div>
-
-                                            <h2 class="title-sm link-black link-underline-hover">{{ $product->title }}</h2>
-                                            @if(! $product->visible && current_user()?->hasAccessToUnReleasedProducts())
-                                                <p class="mt-2 text-orange text-sm">This product is currently set to
-                                                    non-visible, it is visible to users that have access to unreleased
-                                                    products.</p>
-                                            @endif
-                                        </a>
-
-                                        <p class="my-4 flex items-center space-x-4">
-                                            @if($product->external && $product->action_url)
-                                                <a target="_blank" rel="nofollow noreferrer noopener"
-                                                   href="{{ $product->action_url }}">
-                                                    <x-button>{{ $product->action_label }}</x-button>
-                                                </a>
-                                            @else
-                                                <a href="{{ route('products.show', $product) }}">
-                                                    <x-button>{{ $product->action_label }}</x-button>
-                                                </a>
-                                            @endif
-                                        </p>
-
-                                        @if ($purchasable = $product->purchasableWithDiscount())
-                                            <p class="mt-4">
-                                                Now at <b>-{{ $purchasable->displayableDiscountPercentage() }}%</b>
-                                            </p>
-                                        @endif
-
-
-
-                                        <p class="mt-4">{{ $product->formattedDescription }}</p>
+                            <a target="_blank" rel="nofollow noreferrer noopener" href="{{ $product->action_url }}" class="group">
+                            @else
+                            <a href="{{ route('products.show', $product) }}" class="group">
+                            @endif
+                                <div class="-mt-8 pb-6 transition-transform transform ease-in-out group-hover:-translate-y-2 duration-200">
+                                    <div class="shadow-md group-hover:shadow-lg">{{ $product->getFirstMedia('product-image') }}</div>
+                                </div>
+
+                                <h2 class="title-sm link-black link-underline-hover">{{ $product->title }}</h2>
+                                @if(! $product->visible && current_user()?->hasAccessToUnReleasedProducts())<p class="mt-2 text-orange text-sm">This product is currently set to non-visible, it is visible to users that have access to unreleased products.</p>@endif
+                            </a>
+
+                            <p class="my-4 flex items-center space-x-4">
+                                @if($product->external && $product->action_url)
+                                    <a target="_blank" rel="nofollow noreferrer noopener" href="{{ $product->action_url }}">
+                                        <x-button>{{ $product->action_label }}</x-button>
+                                    </a>
+                                @else
+                                    <a href="{{ route('products.show', $product) }}">
+                                        <x-button>{{ $product->action_label }}</x-button>
+                                    </a>
+                                @endif
+                            </p>
+
+                            @if ($purchasable = $product->purchasableWithDiscount())
+                                <p class="mt-4">
+                                    Now at <b>-{{ $purchasable->displayableDiscountPercentage() }}%</b>
+                                </p>
+                            @endif
+
 
 
+                            <p class="mt-4">{{ $product->formattedDescription }}</p>
+
                         </div>
                     @endforeach
                 </div>
@@ -140,37 +75,35 @@ class="shadow-md group-hover:shadow-lg">{{ $product->getFirstMedia('product-imag
         </section>
 
         @if (count($bundles))
-            <section class="section overflow-visible">
-                <div class="wrap">
-                    <h2 class="title line-after mb-12">Check our bundle promotions!</h2>
-                </div>
-                <div class="wrap">
-                    <div class="grid col-gap-24 row-gap-24 | sm:grid-cols-2 items-stretch">
-                        @foreach ($bundles as $bundle)
-                            <div class="my-6">
-                                <a href="{{ route('bundles.show', $bundle) }}" class="group">
-                                    <div
-                                        class="-mt-8 pb-6 transition-transform transform ease-in-out group-hover:-translate-y-2 duration-200">
-                                        <div
-                                            class="shadow-md group-hover:shadow-lg">{{ $bundle->getFirstMedia('image') }}</div>
-                                    </div>
-                                    <h2 class="title-sm link-black link-underline-hover">{{ $bundle->title }}</h2>
+        <section class="section overflow-visible">
+            <div class="wrap">
+                <h2 class="title line-after mb-12">Check our bundle promotions!</h2>
+            </div>
+            <div class="wrap">
+                <div class="grid col-gap-24 row-gap-24 | sm:grid-cols-2 items-stretch">
+                    @foreach ($bundles as $bundle)
+                        <div class="my-6">
+                            <a href="{{ route('bundles.show', $bundle) }}" class="group">
+                                <div class="-mt-8 pb-6 transition-transform transform ease-in-out group-hover:-translate-y-2 duration-200">
+                                    <div class="shadow-md group-hover:shadow-lg">{{ $bundle->getFirstMedia('image') }}</div>
+                                </div>
+                                <h2 class="title-sm link-black link-underline-hover">{{ $bundle->title }}</h2>
+                            </a>
+
+                            <p class="my-4 flex items-center space-x-4">
+                                <a href="{{ route('bundles.show', $bundle) }}">
+                                    <x-button>Buy Bundle</x-button>
                                 </a>
+                            </p>
 
-                                <p class="my-4 flex items-center space-x-4">
-                                    <a href="{{ route('bundles.show', $bundle) }}">
-                                        <x-button>Buy Bundle</x-button>
-                                    </a>
-                                </p>
+                             <p class="mt-4">{{ $bundle->formattedDescription }}</p>
 
-                                <p class="mt-4">{{ $bundle->formattedDescription }}</p>
-
-                            </div>
-                        @endforeach
-                    </div>
+                        </div>
+                    @endforeach
                 </div>
-            </section>
-        @endif
-    </div>
+            </div>
+        </section>
+    @endif
+        </div>
 
 </x-page>
diff --git a/resources/views/layout/default.blade.php b/resources/views/layout/default.blade.php
index 6cc61ba6..f2a3885c 100755
--- a/resources/views/layout/default.blade.php
+++ b/resources/views/layout/default.blade.php
@@ -34,7 +34,7 @@
     <script>/* Empty script tag because Firefox has a FOUC */</script>
     @include('layout.partials.wallpaper')
 
-    @include('layout.partials.cta')
+    {{-- @include('layout.partials.cta') --}}
 
     {{-- @include('layout.partials.header-alert') --}}
     @include('layout.partials.header')
diff --git a/resources/views/layout/partials/header.blade.php b/resources/views/layout/partials/header.blade.php
index 3cfeeaf0..c1af1c03 100644
--- a/resources/views/layout/partials/header.blade.php
+++ b/resources/views/layout/partials/header.blade.php
@@ -1,18 +1,18 @@
-<header class="pt-8 flex-none z-10 | bg-trueblack md:shadow-light md:py-8 | print:bg-transparent print:shadow-none">
-    <div class="wrap leading-loose | md:leading-none md:flex md:items-stretch">
-        <a class="flex-shrink-0 logo h-8 w-20 mr-16 mb-8 block | md:mb-0 md:w-48 md:h-auto" href="/" title="Home">
-            <span class="absolute h-full w-auto">
-            @svg('logo-white')
-            </span>
-        </a>
-        <div class="grid grid-cols-2  items-start col-gap-8 | md:grid-cols-1 md:row-gap-6 md:justify-end md:justify-items-end md:ml-auto">
-            <nav class="flex links links-white | md:row-start-2">
-                @include('layout.partials.menu')
-            </nav>
-            <nav class="grid links links-white | md:opacity-75 md:row-start-1 md:grid-flow-col md:items-center md:gap-6 md:text-xs | print:hidden">
-                @include('layout.partials.service')
-            </nav>
-        </div>
+<header class="pt-8 flex-none z-10 | md:bg-white md:shadow-light md:py-8 | print:bg-transparent print:shadow-none">
+     <div class="wrap leading-loose | md:leading-none md:flex md:items-stretch">
+         <a class="flex-shrink-0 logo h-8 w-20 mr-16 mb-8 block | md:mb-0 md:w-48 md:h-auto" href="/" title="Home">
+             <span class="absolute h-full w-auto">
+             @svg('logo')
+             </span>
+         </a>
+         <div class="grid grid-cols-2 items-start col-gap-8 | md:grid-cols-1 md:row-gap-6 md:justify-end md:justify-items-end md:ml-auto">
+             <nav class="flex links links-black | md:row-start-2">
+                 @include('layout.partials.menu')
+             </nav>
+             <nav class="grid links links-black | md:opacity-75 md:row-start-1 md:grid-flow-col md:items-center md:gap-6 md:text-xs | print:hidden">
+                 @include('layout.partials.service')
+             </nav>
+         </div>
     </div>
     <div class="wrap | md:hidden | print:hidden">
         <hr class="mt-8 h-2px opacity-25 rounded text-gray">
diff --git a/tailwind.config.js b/tailwind.config.js
index 7435457f..a98c5425 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -25,15 +25,14 @@ module.exports = {
         colors: {
             transparent: 'transparent',
             black: '#172a3d',
-            trueblack: '#000000',
             white: '#ffffff',
 
             paper: 'rgba(249, 248, 248, 0.5)',
             opaque: 'rgba(255, 255, 255, 0.5)',
 
-            'gold-lightest': '#f8f8f8',
-            gold: '#767575',
-            'gold-darkest': '#171e1a',
+            'gold-lightest': '#eee8d6',
+            gold: '#a89f81',
+            'gold-darkest': '#51492c',
 
             'gray-50': '#f8f8f8',
             'gray-lightest': '#f3efea',
@@ -44,35 +43,33 @@ module.exports = {
             'gray-darker': '#4c534f',
             'gray-darkest': '#171e1a',
 
-            'blue-50': '#f8f8f8',
-            'blue-lightest': '#f3efea',
-            'blue-lighter': '#cbd2ce',
-            'blue-light': '#b8bfbb',
-            blue: '#767575',
-            'blue-dark': '#686666',
-            'blue-darker': '#4c534f',
-            'blue-darkest': '#171e1a',
-
-            orange: '#767575',
-            'orange-dark': '#686666',
-            'orange-darker': '#171e1a',
-
-            red: '#767575',
-            'red-dark': '#686666',
-
-            'pink-lightest': '#f3efea',
-            pink: '#767575',
-            'pink-dark': '#686666',
-
-            'green-lightest': '#f3efea',
-            'green-lighter': '#cbd2ce',
-            'green-light': '#b8bfbb',
-            green: '#767575',
-            'green-dark': '#686666',
-
-            purple: '#767575',
-
-            yellow: '#FFCE00'
+            'blue-50': '#f7fbfc',
+            'blue-lightest': '#cae1e8',
+            'blue-lighter': '#22a4c9',
+            'blue-light': '#22a4c9',
+            blue: '#197593',
+            'blue-dark': '#004966',
+            'blue-darker': '#172a3d',
+            'blue-darkest': '#0f1c29',
+
+            orange: '#ffa200',
+            'orange-dark': '#e89158',
+            'orange-darker': '#944600',
+
+            red: '#ef0732',
+            'red-dark': '#c81839',
+
+            'pink-lightest': '#f2d8db',
+            pink: '#dd9099',
+            'pink-dark': '#8d3b44',
+
+            'green-lightest': '#daefe8',
+            'green-lighter': '#94dac4',
+            'green-light': '#57c9a5',
+            green: '#21b989',
+            'green-dark': '#0a8867',
+
+            purple: '#885de3',
         },
 
         screens: {
@@ -123,16 +120,12 @@ module.exports = {
             loose: 2,
         },
 
-
-
         letterSpacing: {
             tight: '-0.05em',
             normal: '0',
             wide: '0.05em',
         },
 
-
-
         boxShadow: {
             default: '0 2px 4px 0 rgba(76, 55, 55, 0.12)',
             light: '0 2px 4px 0 rgba(76, 55, 55, 0.04)',
@@ -147,27 +140,12 @@ module.exports = {
             fontSize: {
                 xxs: '.55rem', // small!
                 '6xl': '5rem', // large!
-                '7xl': '0rem', // xlarge!
-            },
-
-
-            opacity: {
-                '5': '0.05',
             },
 
             width: {
                 '2px': '2px',
             },
 
-            scale: {
-                '15': '.15',
-                '25': '.25',
-                '135': '1.35',
-                '120': '1.2',
-                '145': '1.45'
-
-            },
-
             height: {
                 '2px': '2px',
                 '18': '4.5rem',
@@ -182,47 +160,11 @@ module.exports = {
                 popin: {
                     '0%': { transform: 'scale(0) translate(-50%, -4rem)' },
                     '100%': { transform: 'scale(1) translate(-50%, -4rem)' },
-                },
-
-                slidein: {
-                    '0%': { transform: 'scale(0.15, 1.45)  translateX(0)', opacity: 0.05 },
-                    '100%': { transform: 'scale(0.8, 0.8) translateX(-33rem)', opacity: 1 },
-                },
-
-                fadein1: {
-                    '0%': { opacity: 0.00 },
-                    '65%': { opacity: 0.00 },
-                    '66%': { opacity: 0.75 },
-                    '100%': { opacity: 0.75 },
-                },
-                fadein2: {
-                    '0%': { opacity: 0.00 },
-                    '50%': { opacity: 0.00 },
-                    '51%': { opacity: 0.5 },
-                    '100%': { opacity: 0.5 },
-                },
-                fadein3: {
-                    '0%': { opacity: 0.00 },
-                    '40%': { opacity: 0.00 },
-                    '41%': { opacity: 0.25 },
-                    '100%': { opacity: 0.25 },
-                },
-                fadein4: {
-                    '0%': { opacity: 0.00 },
-                    '20%': { opacity: 0.00 },
-                    '21%': { opacity: 0.05 },
-                    '100%': { opacity: 0.05 },
                 }
-
             },
             animation: {
                 wiggle: 'wiggle 0.15s ease-in-out infinite',
                 popin: 'popin 0.2s 1 ease-in-out forwards',
-                slidein: 'slidein 1s 1 ease-in-out forwards',
-                fadein1: 'fadein1 1s 1 ease-in-out forwards',
-                fadein2: 'fadein2 1s 1 ease-in-out forwards',
-                fadein3: 'fadein3 1s 1 ease-in-out forwards',
-                fadein4: 'fadein4 1s 1 ease-in-out forwards',
             },
 
             maxWidth: {
@@ -258,13 +200,7 @@ module.exports = {
 
             inset: {
                 full: '100%',
-                '1/2': '50%',
-                '8': '2rem',
-            },
-
-            translate: {
-                '28': '7rem',
-                '18': '4.5rem',
+                '1/2': '50%'
             },
 
             gridTemplateColumns: {