From 1dca7aad213eb54118f9cea4537042cd9f67d17c Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Wed, 1 Apr 2026 11:44:10 +0530
Subject: [PATCH 1/2] Revert "Feat green day"

---
 src/app.css                                   |  35 +-
 src/app.html                                  |   9 +-
 src/lib/components/BlogCta.svelte             |   2 +-
 src/lib/components/FooterNav.svelte           |  21 +-
 src/lib/components/PreFooter.svelte           |   4 -
 src/lib/components/PromptBanner.svelte        |   6 +-
 src/lib/components/fancy/gradient-text.svelte |   6 +-
 src/lib/components/layout/site-footer.svelte  |  27 +-
 .../marketing/open-source-alternative.svelte  |  12 +-
 src/lib/components/marketing/platforms.svelte |   2 +-
 src/lib/components/product-pages/hero.svelte  |  44 +-
 .../product-pages/product-cards.svelte        |  14 +-
 .../components/ui/icon/sprite/sprite.svelte   |   8 -
 src/lib/components/ui/icon/types.ts           |   1 -
 src/lib/layouts/Docs.svelte                   |  34 +-
 src/lib/layouts/Main.svelte                   |  35 +-
 src/markdoc/layouts/Post.svelte               |   4 +-
 .../(marketing)/(components)/hero.svelte      |  12 +-
 .../(marketing)/(components)/map.svelte       |  18 +-
 .../(marketing)/(components)/pricing.svelte   |   9 +-
 src/routes/(marketing)/+page.svelte           |  74 +-
 src/routes/+layout.svelte                     | 178 -----
 src/routes/blog/[[page]]/+page.svelte         |   2 +-
 src/routes/docs/+layout.svelte                |   4 +-
 src/routes/pricing/+page.svelte               | 682 +++++++++---------
 .../products/auth/(components)/Hero.svelte    |  39 +-
 .../auth/(components)/OpenSource.svelte       |  12 +-
 .../functions/(components)/Hero.svelte        |  36 +-
 .../functions/(components)/OpenSource.svelte  |  12 +-
 .../products/sites/(components)/hero.svelte   |  45 +-
 .../sites/offer-300/(components)/hero.svelte  |  45 +-
 .../(components)/hero.svelte                  |  45 +-
 .../storage/(components)/OpenSource.svelte    |  14 +-
 .../storage/(components)/ProductShot.svelte   |   9 +-
 src/routes/products/storage/+page.svelte      |  37 +-
 src/scss/1-css-variables/_colors.scss         |  37 +-
 src/scss/6-elements/_badges.scss              |  20 +-
 src/scss/6-elements/_button.scss              |  60 +-
 src/scss/6-elements/_card.scss                |  12 +-
 src/scss/6-elements/_hero-banner-button.scss  |   4 +-
 src/scss/7-components/_side-nav.scss          |  19 +-
 src/scss/abstract/mixins/_checked-badge.scss  |   9 +-
 static/images/logos/appwrite-green.svg        |  13 -
 static/images/logos/appwrite-light-green.svg  |  13 -
 static/images/logos/logo-green.svg            |   8 -
 45 files changed, 489 insertions(+), 1243 deletions(-)
 delete mode 100644 static/images/logos/appwrite-green.svg
 delete mode 100644 static/images/logos/appwrite-light-green.svg
 delete mode 100644 static/images/logos/logo-green.svg

diff --git a/src/app.css b/src/app.css
index a99b1a8624..b5856796e4 100644
--- a/src/app.css
+++ b/src/app.css
@@ -451,10 +451,9 @@
     /* pink polyfills */
     --transition: 0.2s;
 
-    /* color hues (pink by default) */
+    /* color hues */
     --color-pink-hue: 343;
     --color-secondary-hue: 351;
-    --brand-accent-rgb: 253 54 110;
     --color-red-hue: 3;
     --color-orange-hue: 18;
     --color-mint-hue: 177;
@@ -479,38 +478,6 @@
     --color-subtle: var(--color-greyscale-850);
 }
 
-body.brand-green {
-    --color-pink-hue: 151;
-    --color-secondary-hue: 165;
-    --color-pink-500: hsl(151 72% 38%);
-    --color-pink-600: hsl(151 66% 32%);
-    --color-accent: var(--color-pink-500);
-    --color-accent-darker: var(--color-pink-600);
-    --brand-accent-rgb: 15 166 95;
-}
-
-body.brand-green .light {
-    --color-pink-hue: 151;
-    --color-secondary-hue: 165;
-    --color-pink-500: hsl(151 72% 38%);
-    --color-pink-600: hsl(151 66% 32%);
-    --color-accent: var(--color-pink-500);
-    --color-accent-darker: var(--color-pink-600);
-    --brand-accent-rgb: 15 166 95;
-}
-
-body.brand-pink {
-    --color-pink-hue: 343;
-    --color-secondary-hue: 351;
-    --brand-accent-rgb: 253 54 110;
-}
-
-body.brand-pink .light {
-    --color-pink-hue: 343;
-    --color-secondary-hue: 351;
-    --brand-accent-rgb: 253 54 110;
-}
-
 .dark {
     --color-primary: var(--color-greyscale-100);
     --color-secondary: var(--color-greyscale-300);
diff --git a/src/app.html b/src/app.html
index 32bd894f5c..362d674ba4 100644
--- a/src/app.html
+++ b/src/app.html
@@ -42,7 +42,7 @@
         />
         %sveltekit.head%
     </head>
-    <body class="dark brand-green group/body antialiased" data-sveltekit-preload-data="hover">
+    <body class="dark group/body antialiased" data-sveltekit-preload-data="hover">
         <script>
             // Theme
             const isDocs = window.location.pathname.startsWith('/docs');
@@ -64,13 +64,6 @@
                 }
             }
 
-            // Brand theme
-            var brandTheme = localStorage.getItem('brand-theme');
-            if (brandTheme === 'pink' || brandTheme === 'green') {
-                document.body.classList.remove('brand-pink', 'brand-green');
-                document.body.classList.add('brand-' + brandTheme);
-            }
-
             // Progressive enhancement
             document.body.dataset.jsEnabled = '';
 
diff --git a/src/lib/components/BlogCta.svelte b/src/lib/components/BlogCta.svelte
index fb8bb574da..f4fed20019 100644
--- a/src/lib/components/BlogCta.svelte
+++ b/src/lib/components/BlogCta.svelte
@@ -39,7 +39,7 @@
             z-index: -1;
             background-image: radial-gradient(
                 ellipse at center,
-                hsl(var(--web-color-pink-500) / 0.09),
+                rgba(253, 54, 110, 0.09),
                 transparent 85%
             );
         }
diff --git a/src/lib/components/FooterNav.svelte b/src/lib/components/FooterNav.svelte
index bbed50aae0..d9b2f60fde 100644
--- a/src/lib/components/FooterNav.svelte
+++ b/src/lib/components/FooterNav.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
     import { slide } from 'svelte/transition';
-    import { onMount } from 'svelte';
     import { trackEvent } from '$lib/actions/analytics';
     import { createAccordion, melt } from '@melt-ui/svelte';
 
     export let noBorder = false;
-    let logoSrc = '/images/logos/appwrite.svg';
 
     const {
         elements: { content, heading, item, root, trigger },
@@ -109,23 +107,6 @@
                 { label: 'Security', href: '/docs/advanced/security' }
             ]
         };
-
-    const syncBrandLogo = () => {
-        logoSrc = document.body.classList.contains('brand-pink')
-            ? '/images/logos/appwrite.svg'
-            : '/images/logos/appwrite-green.svg';
-    };
-
-    onMount(() => {
-        syncBrandLogo();
-
-        const brandObserver = new MutationObserver(syncBrandLogo);
-        brandObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
-
-        return () => {
-            brandObserver.disconnect();
-        };
-    });
 </script>
 
 <nav
@@ -133,7 +114,7 @@
     class="web-footer-nav relative mt-24"
     class:web-u-sep-block-start={!noBorder}
 >
-    <img class="web-logo" src={logoSrc} alt="appwrite" height="24" width="130" />
+    <img class="web-logo" src="/images/logos/appwrite.svg" alt="appwrite" height="24" width="130" />
     <ul class="web-footer-nav-main-list" use:melt={$root}>
         {#each Object.entries(links) as [title, items]}
             <li class="web-footer-nav-main-item web-is-not-mobile">
diff --git a/src/lib/components/PreFooter.svelte b/src/lib/components/PreFooter.svelte
index f9c903d619..388cfd9bc2 100644
--- a/src/lib/components/PreFooter.svelte
+++ b/src/lib/components/PreFooter.svelte
@@ -162,8 +162,4 @@
         max-block-size: unset;
         filter: blur(100px);
     }
-
-    :global(body.brand-green .web-pre-footer-bg) {
-        filter: blur(100px) var(--web-color-image-background-filter);
-    }
 </style>
diff --git a/src/lib/components/PromptBanner.svelte b/src/lib/components/PromptBanner.svelte
index 60284cf9b7..37e19a435a 100644
--- a/src/lib/components/PromptBanner.svelte
+++ b/src/lib/components/PromptBanner.svelte
@@ -83,7 +83,7 @@
     <div class="ai-banner">
         <div class="ai-banner_content">
             <div class="ai-banner_title">
-                <AiPromptIcon class="ai-banner-prompt-icon text-primary" aria-hidden="true" />
+                <AiPromptIcon class="text-primary" aria-hidden="true" />
                 <span class="text-primary text-sub-body"
                     >Use this pre-built prompt to get started faster</span
                 >
@@ -313,8 +313,4 @@
         padding-right: 10px;
         gap: 4px;
     }
-
-    :global(body.brand-green .ai-banner .ai-banner-prompt-icon) {
-        filter: var(--web-color-image-accent-filter);
-    }
 </style>
diff --git a/src/lib/components/fancy/gradient-text.svelte b/src/lib/components/fancy/gradient-text.svelte
index f93ed76125..59e7a58cd5 100644
--- a/src/lib/components/fancy/gradient-text.svelte
+++ b/src/lib/components/fancy/gradient-text.svelte
@@ -12,8 +12,10 @@
 </script>
 
 <span
-    class={cn('-mb-1 block bg-clip-text pb-1 text-transparent', className)}
-    style="background-image: linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 62%, transparent) 0%, #fff 50%);"
+    class={cn(
+        '-mb-1 block bg-linear-145 from-[#f8a1ba] to-white to-50% bg-clip-text pb-1 text-transparent',
+        className
+    )}
     {...rest}
 >
     {@render children()}
diff --git a/src/lib/components/layout/site-footer.svelte b/src/lib/components/layout/site-footer.svelte
index 9c58f8738a..26d6625ced 100644
--- a/src/lib/components/layout/site-footer.svelte
+++ b/src/lib/components/layout/site-footer.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
     import { createAccordion, melt } from '@melt-ui/svelte';
-    import { onMount } from 'svelte';
     import { slide } from 'svelte/transition';
 
     export let noBorder = false;
-    let logoSrc = '/images/logos/appwrite.svg';
 
     const {
         elements: { content, heading, item, root, trigger },
@@ -93,23 +91,6 @@
                 { label: 'Assets', href: '/assets' }
             ]
         };
-
-    const syncBrandLogo = () => {
-        logoSrc = document.body.classList.contains('brand-pink')
-            ? '/images/logos/appwrite.svg'
-            : '/images/logos/appwrite-green.svg';
-    };
-
-    onMount(() => {
-        syncBrandLogo();
-
-        const brandObserver = new MutationObserver(syncBrandLogo);
-        brandObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
-
-        return () => {
-            brandObserver.disconnect();
-        };
-    });
 </script>
 
 <nav
@@ -118,7 +99,13 @@
     class:web-u-sep-block-start={!noBorder}
 >
     <div class="web-footer-nav container">
-        <img class="web-logo" src={logoSrc} alt="appwrite" height="24" width="130" />
+        <img
+            class="web-logo"
+            src="/images/logos/appwrite.svg"
+            alt="appwrite"
+            height="24"
+            width="130"
+        />
         <ul class="web-footer-nav-main-list" use:melt={$root}>
             {#each Object.entries(links) as [title, items], i (i)}
                 <li class="web-footer-nav-main-item web-is-not-mobile">
diff --git a/src/lib/components/marketing/open-source-alternative.svelte b/src/lib/components/marketing/open-source-alternative.svelte
index 84fcea2e4f..41f29eee86 100644
--- a/src/lib/components/marketing/open-source-alternative.svelte
+++ b/src/lib/components/marketing/open-source-alternative.svelte
@@ -95,11 +95,7 @@
                 <div
                     class="border-smooth py-10 text-center font-medium last-of-type:border-0 md:border-r md:px-10 md:py-0"
                 >
-                    <img
-                        src={item.icon}
-                        alt={item.title}
-                        class="open-source-alternative-icon mx-auto"
-                    />
+                    <img src={item.icon} alt={item.title} class="mx-auto" />
                     <h3 class="text-sub-body text-primary mt-4 font-medium">{item.title}</h3>
                     <p class="text-sub-body text-secondary mt-2 font-normal">{item.copy}</p>
                 </div>
@@ -107,9 +103,3 @@
         </div>
     </div>
 </div>
-
-<style>
-    :global(body.brand-green .open-source-alternative-icon) {
-        filter: var(--web-color-image-accent-filter);
-    }
-</style>
diff --git a/src/lib/components/marketing/platforms.svelte b/src/lib/components/marketing/platforms.svelte
index 5ee763a9b5..4d573d3082 100644
--- a/src/lib/components/marketing/platforms.svelte
+++ b/src/lib/components/marketing/platforms.svelte
@@ -122,7 +122,7 @@
                                         <img
                                             src={platform.icon}
                                             alt={platform.name}
-                                            class="no-brand-filter h-8 w-auto grayscale transition-all duration-500 group-hover:grayscale-0"
+                                            class="h-8 w-auto grayscale transition-all duration-500 group-hover:grayscale-0"
                                         />
 
                                         <div
diff --git a/src/lib/components/product-pages/hero.svelte b/src/lib/components/product-pages/hero.svelte
index fb8a1c558d..11158b5c91 100644
--- a/src/lib/components/product-pages/hero.svelte
+++ b/src/lib/components/product-pages/hero.svelte
@@ -37,7 +37,7 @@
 </script>
 
 <div
-    class="product-page-hero-bg border-smooth box-content flex items-center border-b px-5 py-12 md:pt-32 md:pb-40 lg:px-8 xl:px-16"
+    class="border-smooth box-content flex items-center border-b bg-[url(/images/bgs/mobile-hero.png)] bg-cover bg-bottom px-5 py-12 md:bg-[url(/images/bgs/hero.png)] md:bg-center md:pt-32 md:pb-40 lg:px-8 xl:px-16"
 >
     <div class="mx-auto grid max-w-[75rem] items-center gap-16 md:grid-cols-2">
         <div class="space-y-8">
@@ -76,47 +76,9 @@
                 {/if}
             </div>
         </div>
-        <img
-            class={cn('no-brand-filter', { 'hidden md:block': mobileImage })}
-            src={image.url}
-            alt={image.alt ?? ''}
-        />
+        <img class={cn({ 'hidden md:block': mobileImage })} src={image.url} alt={image.alt ?? ''} />
         {#if mobileImage}
-            <img
-                class="no-brand-filter block md:hidden"
-                src={mobileImage.url}
-                alt={mobileImage.alt ?? ''}
-            />
+            <img class="block md:hidden" src={mobileImage.url} alt={mobileImage.alt ?? ''} />
         {/if}
     </div>
 </div>
-
-<style>
-    .product-page-hero-bg {
-        position: relative;
-        isolation: isolate;
-    }
-
-    .product-page-hero-bg::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        z-index: -1;
-        pointer-events: none;
-        background-image: url('/images/bgs/mobile-hero.png');
-        background-size: cover;
-        background-position: bottom;
-        background-repeat: no-repeat;
-    }
-
-    @media (min-width: 48rem) {
-        .product-page-hero-bg::before {
-            background-image: url('/images/bgs/hero.png');
-            background-position: center;
-        }
-    }
-
-    :global(body.brand-green .product-page-hero-bg::before) {
-        filter: var(--web-color-image-background-filter);
-    }
-</style>
diff --git a/src/lib/components/product-pages/product-cards.svelte b/src/lib/components/product-pages/product-cards.svelte
index fada6ecf02..61095fd6e9 100644
--- a/src/lib/components/product-pages/product-cards.svelte
+++ b/src/lib/components/product-pages/product-cards.svelte
@@ -65,13 +65,7 @@
                         class="web-u-padding-inline-8 web-u-padding-block-end-8 flex flex-col gap-2"
                     >
                         <div class="flex items-center gap-2">
-                            <img
-                                src={product.icon}
-                                alt="auth"
-                                width="32"
-                                height="32"
-                                class="products-explore-card-icon"
-                            />
+                            <img src={product.icon} alt="auth" width="32" height="32" />
                             <h4 class="text-main-body text-primary">{product.title}</h4>
                             <span class="web-icon-arrow-right ml-auto" aria-hidden="true"></span>
                         </div>
@@ -84,9 +78,3 @@
         </div>
     </div>
 </section>
-
-<style>
-    :global(body.brand-green .products-brandable .products-explore-card-icon) {
-        filter: var(--web-color-image-accent-filter) !important;
-    }
-</style>
diff --git a/src/lib/components/ui/icon/sprite/sprite.svelte b/src/lib/components/ui/icon/sprite/sprite.svelte
index fd69fc81bd..905b80b55f 100644
--- a/src/lib/components/ui/icon/sprite/sprite.svelte
+++ b/src/lib/components/ui/icon/sprite/sprite.svelte
@@ -97,14 +97,6 @@
             fill-rule="evenodd"
         ></path>
     </symbol>
-    <symbol id="mongo" stroke="currentColor" viewBox="0 0 120 258">
-        <path
-            d="M83.009 28.756 C 72.133 15.909,62.767 2.861,60.854 0.151 C 60.653 -0.050,60.350 -0.050,60.149 0.151 C 58.236 2.861,48.870 15.909,37.994 28.756 C -55.359 147.292,52.697 227.287,52.697 227.287 L 53.603 227.889 C 54.409 240.235,56.423 258.000,56.423 258.000 L 60.451 258.000 L 64.479 258.000 C 64.479 258.000,66.493 240.335,67.299 227.889 L 68.205 227.187 C 68.306 227.187,176.362 147.292,83.009 28.756 M60.451 225.480 C 60.451 225.480,55.617 221.365,54.308 219.257 L 54.308 219.057 L 60.149 89.981 C 60.149 89.580,60.753 89.580,60.753 89.981 L 66.594 219.057 L 66.594 219.257 C 65.285 221.365,60.451 225.480,60.451 225.480 Z"
-            fill="currentColor"
-            stroke="none"
-            fill-rule="evenodd"
-        ></path>
-    </symbol>
     <symbol id="divider-vertical" stroke="currentColor" viewBox="0 0 20 20">
         <path
             d="M9.750 3.463 C 9.591 3.536,9.520 3.610,9.451 3.775 C 9.406 3.884,9.400 4.585,9.400 10.009 L 9.400 16.119 9.475 16.268 C 9.696 16.705,10.304 16.705,10.525 16.268 L 10.600 16.119 10.599 10.001 C 10.599 4.136,10.596 3.878,10.537 3.750 C 10.464 3.591,10.390 3.520,10.225 3.451 C 10.064 3.384,9.914 3.388,9.750 3.463 "
diff --git a/src/lib/components/ui/icon/types.ts b/src/lib/components/ui/icon/types.ts
index 2eebf5e7a2..b23a1e419c 100644
--- a/src/lib/components/ui/icon/types.ts
+++ b/src/lib/components/ui/icon/types.ts
@@ -11,7 +11,6 @@ export type IconType =
     | 'github'
     | 'ticket'
     | 'sparkle'
-    | 'mongo'
     | 'divider-vertical'
     | 'nuxt'
     | 'chevron-up'
diff --git a/src/lib/layouts/Docs.svelte b/src/lib/layouts/Docs.svelte
index 694e21918c..26e8871f78 100644
--- a/src/lib/layouts/Docs.svelte
+++ b/src/lib/layouts/Docs.svelte
@@ -41,7 +41,7 @@
 <script lang="ts">
     import { Search, IsLoggedIn } from '$lib/components';
     import { isMac } from '$lib/utils/platform';
-    import { getContext, onMount, setContext } from 'svelte';
+    import { getContext, setContext } from 'svelte';
     import { SOCIAL_STATS } from '$lib/constants';
     import { page } from '$app/state';
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
@@ -55,7 +55,6 @@
     }
 
     let { variant = 'default', isReferences = false, children }: Props = $props();
-    let brandTheme = $state<'pink' | 'green'>('green');
 
     const variantClasses: Record<DocsLayoutVariant, string> = {
         default: 'web-grid-side-nav max-w-[90rem] mx-auto',
@@ -64,14 +63,6 @@
     };
 
     let variantClass = $derived(variantClasses[variant]);
-    let darkLogoSrc = $derived(
-        brandTheme === 'green' ? '/images/logos/appwrite-green.svg' : '/images/logos/appwrite.svg'
-    );
-    let lightLogoSrc = $derived(
-        brandTheme === 'green'
-            ? '/images/logos/appwrite-light-green.svg'
-            : '/images/logos/appwrite-light.svg'
-    );
 
     $effect(() => {
         $layoutState.currentVariant = variant;
@@ -86,21 +77,6 @@
         document.body.style.overflow = '';
     });
 
-    const syncBrandTheme = () => {
-        brandTheme = document.body.classList.contains('brand-pink') ? 'pink' : 'green';
-    };
-
-    onMount(() => {
-        syncBrandTheme();
-
-        const brandObserver = new MutationObserver(syncBrandTheme);
-        brandObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
-
-        return () => {
-            brandObserver.disconnect();
-        };
-    });
-
     const key = page.route.id?.includes('tutorials') ? TUT_CTX_KEY : CTX_KEY;
     setContext(key, true);
 
@@ -124,14 +100,14 @@
             <a href="/" aria-label="homepage">
                 <img
                     class="web-logo web-u-only-dark"
-                    src={darkLogoSrc}
+                    src="/images/logos/appwrite.svg"
                     alt="appwrite"
                     height="24"
                     width="130"
                 />
                 <img
                     class="web-logo web-u-only-light"
-                    src={lightLogoSrc}
+                    src="/images/logos/appwrite-light.svg"
                     alt="appwrite"
                     height="24"
                     width="130"
@@ -164,14 +140,14 @@
                 <a href="/" aria-label="homepage">
                     <img
                         class="web-logo web-u-only-dark"
-                        src={darkLogoSrc}
+                        src="/images/logos/appwrite.svg"
                         alt="appwrite"
                         height="24"
                         width="130"
                     />
                     <img
                         class="web-logo web-u-only-light"
-                        src={lightLogoSrc}
+                        src="/images/logos/appwrite-light.svg"
                         alt="appwrite"
                         height="24"
                         width="130"
diff --git a/src/lib/layouts/Main.svelte b/src/lib/layouts/Main.svelte
index f8e71466d1..665623f62e 100644
--- a/src/lib/layouts/Main.svelte
+++ b/src/lib/layouts/Main.svelte
@@ -27,14 +27,6 @@
     export let omitMainId = false;
     export let hideNavigation = false;
     let theme: 'light' | 'dark' | null = 'dark';
-    let brandTheme: 'pink' | 'green' = 'green';
-
-    $: darkLogoSrc =
-        brandTheme === 'green' ? '/images/logos/appwrite-green.svg' : '/images/logos/appwrite.svg';
-    $: lightLogoSrc =
-        brandTheme === 'green'
-            ? '/images/logos/appwrite-light-green.svg'
-            : '/images/logos/appwrite-light.svg';
 
     function setupThemeObserver() {
         const handleVisibility = () => {
@@ -99,26 +91,11 @@
         return 'dark';
     }
 
-    function syncBrandTheme() {
-        brandTheme = document.body.classList.contains('brand-pink') ? 'pink' : 'green';
-    }
-
     onMount(() => {
         setTimeout(() => {
             $initialized = true;
         }, 1000);
-
-        syncBrandTheme();
-
-        const brandObserver = new MutationObserver(syncBrandTheme);
-        brandObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
-
-        const disposeThemeObserver = setupThemeObserver();
-
-        return () => {
-            brandObserver.disconnect();
-            disposeThemeObserver();
-        };
+        return setupThemeObserver();
     });
 
     $: navLinks = [
@@ -178,7 +155,6 @@
     $: ($isHeaderHidden, updateSideNav());
 
     $: isOfferPage = page.route.id?.includes('/offer-300') ?? false;
-    $: isProductsPage = page.route.id?.startsWith('/products') ?? false;
 
     $: mobileButtonHref = isOfferPage ? 'https://apwr.dev/DCMWDSw' : getAppwriteDashboardUrl();
     $: mobileButtonEvent = isOfferPage
@@ -201,14 +177,14 @@
             <a href="/">
                 <img
                     class="web-logo web-u-only-dark"
-                    src={darkLogoSrc}
+                    src="/images/logos/appwrite.svg"
                     alt="appwrite"
                     height="24"
                     width="130"
                 />
                 <img
                     class="web-logo web-u-only-light"
-                    src={lightLogoSrc}
+                    src="/images/logos/appwrite-light.svg"
                     alt="appwrite"
                     height="24"
                     width="130"
@@ -242,14 +218,14 @@
                 <a href="/">
                     <img
                         class="web-logo web-u-only-dark"
-                        src={darkLogoSrc}
+                        src="/images/logos/appwrite.svg"
                         alt="appwrite"
                         height="24"
                         width="130"
                     />
                     <img
                         class="web-logo web-u-only-light"
-                        src={lightLogoSrc}
+                        src="/images/logos/appwrite-light.svg"
                         alt="appwrite"
                         height="24"
                         width="130"
@@ -282,7 +258,6 @@
 
     <main
         class="relative space-y-6"
-        class:products-brandable={isProductsPage}
         class:invisible={$isMobileNavOpen}
         id={omitMainId ? undefined : 'main'}
     >
diff --git a/src/markdoc/layouts/Post.svelte b/src/markdoc/layouts/Post.svelte
index c948bfa5fa..7812ce6966 100644
--- a/src/markdoc/layouts/Post.svelte
+++ b/src/markdoc/layouts/Post.svelte
@@ -161,9 +161,7 @@
                         </div>
                     {/if}
 
-                    <div
-                        class="web-article-content prose prose-large blog-content-images mt-8 flex flex-col gap-8"
-                    >
+                    <div class="web-article-content prose prose-large mt-8 flex flex-col gap-8">
                         {#if lastUpdated}
                             <span class="text-main-body last-updated-text font-medium">
                                 Updated:
diff --git a/src/routes/(marketing)/(components)/hero.svelte b/src/routes/(marketing)/(components)/hero.svelte
index d51aaa6f34..99eb4229df 100644
--- a/src/routes/(marketing)/(components)/hero.svelte
+++ b/src/routes/(marketing)/(components)/hero.svelte
@@ -23,9 +23,9 @@
     <div
         class={cn(
             'animate-lighting absolute top-0 left-0 -z-10 h-screen w-[200vw] -translate-x-[25%] translate-y-8 rotate-25 overflow-hidden blur-3xl md:w-full',
+            'bg-[image:radial-gradient(ellipse_390px_50px_at_10%_30%,_rgba(254,_149,_103,_0.2)_0%,_rgba(254,_149,_103,_0)_70%),_radial-gradient(ellipse_1100px_170px_at_15%_40%,rgba(253,_54,_110,_0.08)_0%,_rgba(253,_54,_110,_0)_70%),_radial-gradient(ellipse_1200px_180px_at_30%_30%,_rgba(253,_54,_110,_0.08)_0%,_rgba(253,_54,_110,_0)_70%)]',
             'bg-position-[0%_0%]'
         )}
-        style="background-image: radial-gradient(ellipse 390px 50px at 10% 30%, rgba(254, 149, 103, 0.2) 0%, rgba(254, 149, 103, 0) 70%), radial-gradient(ellipse 1100px 170px at 15% 40%, rgb(var(--brand-accent-rgb) / 0.08) 0%, rgb(var(--brand-accent-rgb) / 0) 70%), radial-gradient(ellipse 1200px 180px at 30% 30%, rgb(var(--brand-accent-rgb) / 0.08) 0%, rgb(var(--brand-accent-rgb) / 0) 70%);"
     ></div>
 
     <div
@@ -60,9 +60,7 @@
                 <AppwriteIn100Seconds />
             </div>
         </div>
-        <div class="brand-dashboard">
-            <Dashboard />
-        </div>
+        <Dashboard />
         <!--
         Console image variation (disabled for now)
         <div
@@ -83,9 +81,3 @@
         -->
     </div>
 </div>
-
-<style>
-    :global(body.brand-green .brand-dashboard) {
-        filter: hue-rotate(155deg) saturate(1.06) brightness(0.98);
-    }
-</style>
diff --git a/src/routes/(marketing)/(components)/map.svelte b/src/routes/(marketing)/(components)/map.svelte
index 5181048435..d251155040 100644
--- a/src/routes/(marketing)/(components)/map.svelte
+++ b/src/routes/(marketing)/(components)/map.svelte
@@ -21,25 +21,9 @@
             Pick one of our many cloud regions or edges to meet your project's needs and reduce
             latency.
         </p>
-        <Button variant="secondary" href="/the-appwrite-network" class="network-map-cta"
+        <Button variant="secondary" href="/the-appwrite-network"
             >More about the Appwrite Network</Button
         >
     </div>
     <TheAppwriteNetwork {theme} />
 </div>
-
-<style lang="scss">
-    :global(.network-map-cta.web-button.is-secondary) {
-        background: hsl(var(--web-color-button-primary) / 0.16);
-        color: hsl(var(--web-color-button-primary));
-        border: 1px solid hsl(var(--web-color-button-primary) / 0.42);
-    }
-
-    :global(.network-map-cta.web-button.is-secondary:hover) {
-        background: hsl(var(--web-color-button-primary) / 0.22);
-    }
-
-    :global(.network-map-cta.web-button.is-secondary:focus-visible) {
-        box-shadow: 0 0 0 4px hsl(var(--web-color-button-primary) / 0.24);
-    }
-</style>
diff --git a/src/routes/(marketing)/(components)/pricing.svelte b/src/routes/(marketing)/(components)/pricing.svelte
index f77b2253f9..18f248a70f 100644
--- a/src/routes/(marketing)/(components)/pricing.svelte
+++ b/src/routes/(marketing)/(components)/pricing.svelte
@@ -65,9 +65,9 @@
         <div
             class={cn(
                 'animate-lighting absolute top-0 left-0 -z-10 h-screen w-[200vw] -translate-x-[25%] translate-y-8 rotate-25 overflow-hidden blur-3xl md:w-full',
+                'bg-[image:radial-gradient(ellipse_390px_50px_at_10%_30%,_rgba(254,_149,_103,_0.2)_0%,_rgba(254,_149,_103,_0)_70%),_radial-gradient(ellipse_1100px_170px_at_15%_40%,rgba(253,_54,_110,_0.08)_0%,_rgba(253,_54,_110,_0)_70%),_radial-gradient(ellipse_1200px_180px_at_30%_30%,_rgba(253,_54,_110,_0.08)_0%,_rgba(253,_54,_110,_0)_70%)]',
                 'bg-position-[0%_0%]'
             )}
-            style="background-image: radial-gradient(ellipse 390px 50px at 10% 30%, rgba(254, 149, 103, 0.2) 0%, rgba(254, 149, 103, 0) 70%), radial-gradient(ellipse 1100px 170px at 15% 40%, rgb(var(--brand-accent-rgb) / 0.08) 0%, rgb(var(--brand-accent-rgb) / 0) 70%), radial-gradient(ellipse 1200px 180px at 30% 30%, rgb(var(--brand-accent-rgb) / 0.08) 0%, rgb(var(--brand-accent-rgb) / 0) 70%);"
         ></div>
 
         <div
@@ -105,9 +105,10 @@
                     <div class="flex items-center gap-2.5">
                         <span class="text-description text-secondary font-medium">{name}</span>
                         {#if label}
-                            <div class="web-inline-tag is-pink text-caption font-medium">
-                                {label}
-                            </div>
+                            <span
+                                class="bg-accent-200 text-caption rounded-lg px-1.5 py-0.5 font-medium text-white"
+                                >{label}</span
+                            >
                         {/if}
                     </div>
                     <div class="flex flex-1 flex-col">
diff --git a/src/routes/(marketing)/+page.svelte b/src/routes/(marketing)/+page.svelte
index cfdb3138c3..0b053c5da5 100644
--- a/src/routes/(marketing)/+page.svelte
+++ b/src/routes/(marketing)/+page.svelte
@@ -21,54 +21,42 @@
 />
 
 <Main>
-    <div class="homepage-brandable">
-        <Hero
-            title="Build like a team of hundreds"
-            subtitle="Appwrite is an open-source, all-in-one development platform. Use built-in backend infrastructure and web hosting, all from a single place."
-        />
-        <Platforms headline="Designed for the tools you work with" />
-        <LogoList class="border-smooth border-b" title="Loved by startups and world leaders" />
-        <Bento />
-        <Pullquote
-            name="Phil McCluskey"
-            title="App Manager, Majik Kids"
-            avatar="/images/testimonials/phil.jpg"
+    <Hero
+        title="Build like a team of hundreds"
+        subtitle="Appwrite is an open-source, all-in-one development platform. Use built-in backend infrastructure and web hosting, all from a single place."
+    />
+    <Platforms headline="Designed for the tools you work with" />
+    <LogoList class="border-smooth border-b" title="Loved by startups and world leaders" />
+    <Bento />
+    <Pullquote
+        name="Phil McCluskey"
+        title="App Manager, Majik Kids"
+        avatar="/images/testimonials/phil.jpg"
+    >
+        <span class="text-secondary">Just like a Swiss Army Knife</span> you can choose and use the tools
+        that you need with Appwrite.</Pullquote
+    >
+    <Ai />
+    <CaseStudies />
+    <Features theme="light" />
+    <div class="light bg-[#EDEDF0]">
+        <Map theme="light" />
+        <Scale
+            testimonial={{
+                name: 'Ryan O’Connor',
+                title: 'Founder',
+                company: 'K-Collect',
+                image: '/images/testimonials/ryan-oconner-testimonial.png'
+            }}
         >
-            <span class="text-secondary">Just like a Swiss Army Knife</span> you can choose and use the
-            tools that you need with Appwrite.</Pullquote
-        >
-        <Ai />
-        <CaseStudies />
-        <Features theme="light" />
-        <div class="light bg-[#EDEDF0]">
-            <Map theme="light" />
-            <Scale
-                testimonial={{
-                    name: 'Ryan O’Connor',
-                    title: 'Founder',
-                    company: 'K-Collect',
-                    image: '/images/testimonials/ryan-oconner-testimonial.png'
-                }}
-            >
-                The switch to using Appwrite brought
-                <span class="text-primary">infinite value that I'm still discovering today.</span>
-            </Scale>
-        </div>
-        <Pricing />
+            The switch to using Appwrite brought
+            <span class="text-primary">infinite value that I'm still discovering today.</span>
+        </Scale>
     </div>
+    <Pricing />
 </Main>
 
 <div class="container">
     <FooterNav />
     <MainFooter />
 </div>
-
-<style>
-    :global(body.brand-green .homepage-brandable img[src*='/images/icons/']) {
-        filter: var(--web-color-image-accent-filter);
-    }
-
-    :global(body.brand-green .homepage-brandable img[src*='/images/backgrounds/']) {
-        filter: var(--web-color-image-background-filter);
-    }
-</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 848823769c..c33e9ef8e0 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,10 +1,8 @@
 <script lang="ts" module>
     import { type Reo, loadReoScript } from '$lib/reodotdev';
-    import { env } from '$env/dynamic/public';
     import { derived as storeDerived, writable } from 'svelte/store';
 
     export type Theme = 'dark' | 'light' | 'system';
-    export type BrandTheme = 'pink' | 'green';
     export const currentTheme = (() => {
         const store = writable<Theme>(getPreferredTheme());
 
@@ -44,28 +42,6 @@
 
         return theme;
     }
-
-    function isBrandTheme(theme: unknown): theme is BrandTheme {
-        return ['pink', 'green'].includes(theme as BrandTheme);
-    }
-
-    function getPreferredBrandTheme(): BrandTheme {
-        const envTheme = env.PUBLIC_BRAND_THEME?.toLowerCase();
-        if (isBrandTheme(envTheme)) {
-            return envTheme;
-        }
-
-        if (!browser) {
-            return 'green';
-        }
-
-        const storedTheme = localStorage.getItem('brand-theme');
-        if (isBrandTheme(storedTheme)) {
-            return storedTheme;
-        }
-
-        return 'green';
-    }
 </script>
 
 <script lang="ts">
@@ -94,19 +70,6 @@
         document.body.classList.add(className);
     }
 
-    function applyBrandTheme(theme: BrandTheme) {
-        if (!browser) return;
-
-        document.body.classList.remove('brand-pink', 'brand-green');
-        document.body.classList.add(`brand-${theme}`);
-
-        const favicon = document.querySelector("link[rel='icon']") as HTMLLinkElement | null;
-        if (favicon) {
-            favicon.href =
-                theme === 'green' ? '/images/logos/logo-green.svg' : '/images/logos/logo.svg';
-        }
-    }
-
     const thresholds = [0.25, 0.5, 0.75];
     const tracked = new Set();
 
@@ -117,7 +80,6 @@
         const initialTheme = page.route.id?.startsWith('/docs') ? getPreferredTheme() : 'dark';
 
         applyTheme(initialTheme);
-        applyBrandTheme(getPreferredBrandTheme());
 
         saveReferrerAndUtmSource(page.url);
     });
@@ -221,144 +183,4 @@
     :global(html) {
         color-scheme: dark;
     }
-
-    /* Recolor docs + pricing visual assets in green theme without replacing files */
-    :global(
-        body.brand-green
-            .docs-brandable
-            img[src*='/images/icons/']:not([src*='/images/icons/frameworks/'])
-    ),
-    :global(
-        body.brand-green
-            .pricing-brandable
-            img[src*='/images/icons/']:not([src*='/images/logos/']):not(
-                [src*='/images/platforms/']
-            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
-                [src*='/images/company/']
-            )
-    ),
-    :global(
-        body.brand-green
-            .docs-brandable
-            img[src*='/images/docs/']:not([src*='/images/docs/frameworks/'])
-    ),
-    :global(
-        body.brand-green
-            .pricing-brandable
-            img[src*='/images/docs/']:not([src*='/images/logos/']):not(
-                [src*='/images/platforms/']
-            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
-                [src*='/images/company/']
-            )
-    ),
-    :global(
-        body.brand-green
-            .docs-brandable
-            img[src*='/images/products/']:not([src*='/images/products/frameworks/'])
-    ),
-    :global(
-        body.brand-green
-            .pricing-brandable
-            img[src*='/images/products/']:not([src*='/images/logos/']):not(
-                [src*='/images/platforms/']
-            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
-                [src*='/images/company/']
-            )
-    ),
-    :global(
-        body.brand-green
-            img[src*='/images/icons/illustrated/']:not(.no-brand-filter):not(
-                [src*='/images/logos/']
-            ):not([src*='/images/platforms/']):not([src*='/images/frameworks/']):not(
-                [src*='/images/companies/']
-            ):not([src*='/images/company/'])
-    ),
-    :global(
-        body.brand-green
-            .products-brandable
-            img[src*='/images/icons/']:not([src*='/images/logos/']):not(
-                [src*='/images/platforms/']
-            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
-                [src*='/images/company/']
-            )
-    ),
-    :global(
-        body.brand-green
-            .products-brandable
-            img[src*='/images/docs/']:not([src*='/images/logos/']):not(
-                [src*='/images/platforms/']
-            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
-                [src*='/images/company/']
-            )
-    ),
-    :global(
-        body.brand-green
-            .products-brandable
-            img[src*='/images/products/']:not([src*='/images/logos/']):not(
-                [src*='/images/platforms/']
-            ):not([src*='/images/frameworks/']):not([src*='/images/companies/']):not(
-                [src*='/images/company/']
-            )
-    ) {
-        filter: var(--web-color-image-accent-filter);
-    }
-
-    :global(body.brand-green .docs-brandable img[src*='/images/background']),
-    :global(body.brand-green .docs-brandable img[src*='/images/bgs/']),
-    :global(
-        body.brand-green
-            img[src*='/images/bgs/']:not(.no-brand-filter):not([src*='/images/logos/']):not(
-                [src*='/images/avatars/']
-            )
-    ),
-    :global(
-        body.brand-green
-            .pricing-brandable
-            img[src*='/images/background']:not([src*='/images/logos/'])
-    ),
-    :global(
-        body.brand-green
-            .products-brandable
-            img[src*='/images/background']:not([src*='/images/logos/'])
-    ),
-    :global(body.brand-green .products-brandable img[src*='/images/bgs/']),
-    :global(body.brand-green .docs-brandable img[src*='/images/docs/tutorials/']),
-    :global(body.brand-green .docs-brandable img[src*='/images/docs/quick-starts/']),
-    :global(body.brand-green .docs-brandable img[src*='/images/tutorials/']),
-    :global(body.brand-green .docs-brandable [style*='background-image']),
-    :global(body.brand-green .pricing-brandable [style*='background-image']),
-    :global(body.brand-green .products-brandable [style*='background-image']) {
-        filter: var(--web-color-image-background-filter);
-    }
-
-    :global(
-        body.brand-green
-            .pricing-brandable
-            img:not(.no-brand-filter):not([src*='/images/logos/']):not(
-                [src*='/images/avatars/']
-            ):not([src*='/images/platforms/']):not([src*='/images/frameworks/']):not(
-                [src*='/images/companies/']
-            ):not([src*='/images/company/'])
-    ),
-    :global(
-        body.brand-green
-            .products-brandable
-            img:not(.no-brand-filter):not([src*='/images/logos/']):not(
-                [src*='/images/avatars/']
-            ):not([src*='/images/platforms/']):not([src*='/images/frameworks/']):not(
-                [src*='/images/companies/']
-            ):not([src*='/images/company/'])
-    ) {
-        filter: var(--web-color-image-background-filter);
-    }
-
-    :global(
-        body.brand-green
-            .blog-content-images
-            img:not(.no-brand-filter):not([src*='/images/platforms/']):not(
-                [src*='/images/frameworks/']
-            ):not([src*='/images/companies/']):not([src*='/images/company/'])
-    ) {
-        filter: var(--web-color-image-background-filter);
-    }
 </style>
diff --git a/src/routes/blog/[[page]]/+page.svelte b/src/routes/blog/[[page]]/+page.svelte
index 3fd709219c..33abadeaeb 100644
--- a/src/routes/blog/[[page]]/+page.svelte
+++ b/src/routes/blog/[[page]]/+page.svelte
@@ -204,7 +204,7 @@
                             gradientTransform="translate(-2.5 629.739) rotate(90) scale(289.261 362.5)"
                         >
                             <stop offset="0.281696" stop-color="#FE9567" />
-                            <stop offset="0.59375" stop-color="hsl(var(--web-color-pink-500))" />
+                            <stop offset="0.59375" stop-color="#FD366E" />
                         </radialGradient>
                     </defs>
                 </svg>
diff --git a/src/routes/docs/+layout.svelte b/src/routes/docs/+layout.svelte
index 6b85dadf9f..2829c00a88 100644
--- a/src/routes/docs/+layout.svelte
+++ b/src/routes/docs/+layout.svelte
@@ -12,6 +12,4 @@
     });
 </script>
 
-<div class="docs-brandable">
-    {@render children()}
-</div>
+{@render children()}
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index 523156107b..a072468d52 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -34,152 +34,220 @@
     <meta name="twitter:card" content="summary_large_image" />
 </svelte:head>
 
-<div class="pricing-brandable">
-    <div
-        class="web-location-for-mobile absolute overflow-hidden"
-        style:pointer-events="none"
-        style:inline-size="100%"
-    >
-        <enhanced:img
-            src={BG}
-            alt=""
-            style="margin-inline:auto; display:block; width: 1369px; height: auto;"
-        />
-    </div>
+<div
+    class="web-location-for-mobile absolute overflow-hidden"
+    style:pointer-events="none"
+    style:inline-size="100%"
+>
+    <enhanced:img
+        src={BG}
+        alt=""
+        style="margin-inline:auto; display:block; width: 1369px; height: auto;"
+    />
+</div>
 
-    <Main>
-        <div class="web-big-padding-section mt-2">
-            <div class="dark pt-8">
-                <div class="web-big-padding-section-level-2">
-                    <section class="container">
-                        <div class="web-hero">
-                            <h1
-                                class="text-title font-aeonik-pro web-u-max-width-900 web-u-opacity-90 web-u-mobile-align-text-center self-center"
-                                style="background: linear-gradient(90deg, hsl(var(--web-color-pink-500) / 0.78) 0%, #E4E1E5 61.98%, #E4E4E7 100%);
+<Main>
+    <div class="web-big-padding-section mt-2">
+        <div class="dark pt-8">
+            <div class="web-big-padding-section-level-2">
+                <section class="container">
+                    <div class="web-hero">
+                        <h1
+                            class="text-title font-aeonik-pro web-u-max-width-900 web-u-opacity-90 web-u-mobile-align-text-center self-center"
+                            style="background: linear-gradient(90deg, #F47298 0%, #E4E1E5 61.98%, #E4E4E7 100%);
                                 -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-block-end:2px;"
-                            >
-                                Everything your app needs,<br />one subscription
-                            </h1>
-                            <p
-                                class="text-description max-w-xl self-center text-center opacity-90"
-                                style="background: linear-gradient(90deg, hsl(var(--web-color-pink-500) / 0.78) 0%, #E4E1E5 61.98%, #E4E4E7 100%);
+                        >
+                            Everything your app needs,<br />one subscription
+                        </h1>
+                        <p
+                            class="text-description max-w-xl self-center text-center opacity-90"
+                            style="background: linear-gradient(90deg, #F47298 0%, #E4E1E5 61.98%, #E4E4E7 100%);
                                 -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-block-end:2px;"
-                            >
-                                Build, deploy, and observe your app from one platform, all under one
-                                subscription.
-                            </p>
-                        </div>
-                    </section>
-                </div>
-                <div class="web-big-padding-section-level-2">
-                    <section class="container">
-                        <div
-                            class="web-pricing-cards"
-                            style:--columns-template={SHOW_SCALE_PLAN
-                                ? 'repeat(4, 1fr)'
-                                : 'repeat(3, 1fr)'}
                         >
-                            <ul class="web-pricing-cards-list">
-                                <li>
+                            Build, deploy, and observe your app from one platform, all under one
+                            subscription.
+                        </p>
+                    </div>
+                </section>
+            </div>
+            <div class="web-big-padding-section-level-2">
+                <section class="container">
+                    <div
+                        class="web-pricing-cards"
+                        style:--columns-template={SHOW_SCALE_PLAN
+                            ? 'repeat(4, 1fr)'
+                            : 'repeat(3, 1fr)'}
+                    >
+                        <ul class="web-pricing-cards-list">
+                            <li>
+                                <article
+                                    class="web-card is-transparent has-border-gradient h-full"
+                                    style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
+                                >
+                                    <div class="web-pricing-cards-item">
+                                        <header class="web-pricing-cards-header">
+                                            <h2
+                                                id="starter"
+                                                class="text-label text-primary font-aeonik-pro"
+                                            >
+                                                Free
+                                            </h2>
+                                            <div
+                                                class="text-title font-aeonik-pro text-primary mt-12 -mb-6"
+                                            >
+                                                $0
+                                            </div>
+                                            <div class="mt-1">&nbsp;</div>
+                                            <p class="text-main-body mt-4 h-[5rem] font-medium">
+                                                A great fit for passion projects and small
+                                                applications.
+                                            </p>
+                                            <Button
+                                                variant="secondary"
+                                                class="is-full-width mt-8"
+                                                href={getAppwriteDashboardUrl('/register')}
+                                                event="pricing-cards-free-click"
+                                            >
+                                                <span class="text-sub-body font-medium"
+                                                    >Start building</span
+                                                >
+                                            </Button>
+                                        </header>
+                                        <div class="web-pricing-cards-content">
+                                            <ul class="web-checked-list-circle">
+                                                <li><span>5GB bandwidth</span></li>
+                                                <li><span>2GB storage</span></li>
+                                                <li><span>750K executions</span></li>
+                                                <li><span>75K monthly active users</span></li>
+                                                <li><span>Community support</span></li>
+                                                <li>
+                                                    <span
+                                                        >1 Database, 1 Bucket, 2 Functions per
+                                                        project</span
+                                                    >
+                                                </li>
+                                            </ul>
+                                            <p class="text-caption text-secondary mt-4">
+                                                Free projects are paused after 1 week of inactivity.
+                                                Limit of 2 projects.
+                                            </p>
+                                        </div>
+                                    </div>
+                                </article>
+                            </li>
+                            <li>
+                                <div
+                                    class="web-card is-transparent has-border-gradient is-transparent-pink -m-1 h-full p-1! backdrop-blur-none!"
+                                    style:--m-border-radius="1.25rem"
+                                >
                                     <article
-                                        class="web-card is-transparent has-border-gradient h-full"
-                                        style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
+                                        class="web-card is-transparent is-transparent-pink has-border-gradient h-full"
+                                        style="background: linear-gradient(180deg, rgba(253, 54, 110, 0.12) 38.59%, rgba(253, 54, 110, 0) 99.04%);"
                                     >
-                                        <div class="web-pricing-cards-item">
-                                            <header class="web-pricing-cards-header">
+                                        <header class="web-pricing-cards-header">
+                                            <header class="flex gap-3">
                                                 <h2
-                                                    id="starter"
+                                                    id="pro"
                                                     class="text-label text-primary font-aeonik-pro"
                                                 >
-                                                    Free
+                                                    Pro
                                                 </h2>
-                                                <div
-                                                    class="text-title font-aeonik-pro text-primary mt-12 -mb-6"
-                                                >
-                                                    $0
+                                                <div class="web-inline-tag is-pink">
+                                                    Most popular
                                                 </div>
-                                                <div class="mt-1">&nbsp;</div>
-                                                <p class="text-main-body mt-4 h-[5rem] font-medium">
-                                                    A great fit for passion projects and small
-                                                    applications.
-                                                </p>
-                                                <Button
-                                                    variant="secondary"
-                                                    class="is-full-width mt-8"
-                                                    href={getAppwriteDashboardUrl('/register')}
-                                                    event="pricing-cards-free-click"
-                                                >
-                                                    <span class="text-sub-body font-medium"
-                                                        >Start building</span
-                                                    >
-                                                </Button>
                                             </header>
-                                            <div class="web-pricing-cards-content">
-                                                <ul class="web-checked-list-circle">
-                                                    <li><span>5GB bandwidth</span></li>
-                                                    <li><span>2GB storage</span></li>
-                                                    <li><span>750K executions</span></li>
-                                                    <li><span>75K monthly active users</span></li>
-                                                    <li><span>Community support</span></li>
-                                                    <li>
-                                                        <span
-                                                            >1 Database, 1 Bucket, 2 Functions per
-                                                            project</span
-                                                        >
-                                                    </li>
-                                                </ul>
-                                                <p class="text-caption text-secondary mt-4">
-                                                    Free projects are paused after 1 week of
-                                                    inactivity. Limit of 2 projects.
-                                                </p>
+                                            <div class="mt-4 flex flex-col gap-2">
+                                                <span class="-mb-4">From</span>
+                                                <div class="flex items-end gap-2">
+                                                    <div
+                                                        class="text-title font-aeonik-pro text-primary mt-3"
+                                                    >
+                                                        $25
+                                                    </div>
+                                                    <div class="mt-1">/month</div>
+                                                </div>
                                             </div>
+                                            <p class="text-main-body mt-4 h-[5rem] font-medium">
+                                                For production applications that need powerful
+                                                functionality and resources to scale.
+                                            </p>
+                                            <Button
+                                                href={getAppwriteDashboardUrl(
+                                                    '/console?type=create&plan=tier-1'
+                                                )}
+                                                class="is-full-width mt-11"
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                event="pricing-cards-pro-click"
+                                            >
+                                                <span class="text-sub-body font-medium"
+                                                    >Start building</span
+                                                >
+                                            </Button>
+                                        </header>
+                                        <div class="web-pricing-cards-content">
+                                            <p>Dedicated resources per project:</p>
+                                            <ul class="web-checked-list-circle">
+                                                <li><span>2TB bandwidth</span></li>
+                                                <li><span>150GB storage</span></li>
+                                                <li><span>3.5M executions</span></li>
+                                                <li><span>200K monthly active users</span></li>
+                                                <li><span>Organization roles</span></li>
+                                                <li><span>Email support</span></li>
+                                                <li>
+                                                    <span>Daily backups stored for 7 days</span>
+                                                </li>
+                                                <li><span>Add-ons</span></li>
+                                                <li>
+                                                    <span
+                                                        >Unlimited Databases, Buckets, and Functions</span
+                                                    >
+                                                </li>
+                                            </ul>
                                         </div>
                                     </article>
-                                </li>
+                                </div>
+                            </li>
+                            {#if SHOW_SCALE_PLAN}
                                 <li>
-                                    <div
-                                        class="web-card is-transparent has-border-gradient is-transparent-pink -m-1 h-full p-1! backdrop-blur-none!"
-                                        style:--m-border-radius="1.25rem"
+                                    <article
+                                        class="web-card is-transparent has-border-gradient h-full"
+                                        style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
                                     >
-                                        <article
-                                            class="web-card is-transparent is-transparent-pink has-border-gradient h-full"
-                                            style="background: linear-gradient(180deg, hsl(var(--web-color-pink-500) / 0.12) 38.59%, hsl(var(--web-color-pink-500) / 0) 99.04%);"
-                                        >
+                                        <div class="web-pricing-cards-item">
                                             <header class="web-pricing-cards-header">
-                                                <header class="flex gap-3">
-                                                    <h2
-                                                        id="pro"
-                                                        class="text-label text-primary font-aeonik-pro"
-                                                    >
-                                                        Pro
-                                                    </h2>
-                                                    <div class="web-inline-tag is-pink">
-                                                        Most popular
-                                                    </div>
-                                                </header>
+                                                <h2
+                                                    id="scale"
+                                                    class="text-label text-primary font-aeonik-pro"
+                                                >
+                                                    Scale
+                                                </h2>
+
                                                 <div class="mt-4 flex flex-col gap-2">
                                                     <span class="-mb-4">From</span>
                                                     <div class="flex items-end gap-2">
                                                         <div
                                                             class="text-title font-aeonik-pro text-primary mt-3"
                                                         >
-                                                            $25
+                                                            $599
                                                         </div>
                                                         <div class="mt-1">/month</div>
                                                     </div>
                                                 </div>
+
                                                 <p class="text-main-body mt-4 h-[5rem] font-medium">
-                                                    For production applications that need powerful
-                                                    functionality and resources to scale.
+                                                    For teams that handle more complex and large
+                                                    projects and need more control and support.
                                                 </p>
                                                 <Button
+                                                    variant="secondary"
                                                     href={getAppwriteDashboardUrl(
-                                                        '/console?type=create&plan=tier-1'
+                                                        '/console?type=create&plan=tier-2'
                                                     )}
-                                                    class="is-full-width mt-11"
+                                                    event="pricing-cards-scale-click"
+                                                    class="is-full-width mt-10"
                                                     target="_blank"
                                                     rel="noopener noreferrer"
-                                                    event="pricing-cards-pro-click"
                                                 >
                                                     <span class="text-sub-body font-medium"
                                                         >Start building</span
@@ -187,155 +255,15 @@
                                                 </Button>
                                             </header>
                                             <div class="web-pricing-cards-content">
-                                                <p>Dedicated resources per project:</p>
-                                                <ul class="web-checked-list-circle">
-                                                    <li><span>2TB bandwidth</span></li>
-                                                    <li><span>150GB storage</span></li>
-                                                    <li><span>3.5M executions</span></li>
-                                                    <li><span>200K monthly active users</span></li>
-                                                    <li><span>Organization roles</span></li>
-                                                    <li><span>Email support</span></li>
-                                                    <li>
-                                                        <span>Daily backups stored for 7 days</span>
-                                                    </li>
-                                                    <li><span>Add-ons</span></li>
-                                                    <li>
-                                                        <span
-                                                            >Unlimited Databases, Buckets, and
-                                                            Functions</span
-                                                        >
-                                                    </li>
-                                                </ul>
-                                            </div>
-                                        </article>
-                                    </div>
-                                </li>
-                                {#if SHOW_SCALE_PLAN}
-                                    <li>
-                                        <article
-                                            class="web-card is-transparent has-border-gradient h-full"
-                                            style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
-                                        >
-                                            <div class="web-pricing-cards-item">
-                                                <header class="web-pricing-cards-header">
-                                                    <h2
-                                                        id="scale"
-                                                        class="text-label text-primary font-aeonik-pro"
-                                                    >
-                                                        Scale
-                                                    </h2>
-
-                                                    <div class="mt-4 flex flex-col gap-2">
-                                                        <span class="-mb-4">From</span>
-                                                        <div class="flex items-end gap-2">
-                                                            <div
-                                                                class="text-title font-aeonik-pro text-primary mt-3"
-                                                            >
-                                                                $599
-                                                            </div>
-                                                            <div class="mt-1">/month</div>
-                                                        </div>
-                                                    </div>
-
-                                                    <p
-                                                        class="text-main-body mt-4 h-[5rem] font-medium"
-                                                    >
-                                                        For teams that handle more complex and large
-                                                        projects and need more control and support.
-                                                    </p>
-                                                    <Button
-                                                        variant="secondary"
-                                                        href={getAppwriteDashboardUrl(
-                                                            '/console?type=create&plan=tier-2'
-                                                        )}
-                                                        event="pricing-cards-scale-click"
-                                                        class="is-full-width mt-10"
-                                                        target="_blank"
-                                                        rel="noopener noreferrer"
-                                                    >
-                                                        <span class="text-sub-body font-medium"
-                                                            >Start building</span
-                                                        >
-                                                    </Button>
-                                                </header>
-                                                <div class="web-pricing-cards-content">
-                                                    <p>Everything in Pro, plus:</p>
-                                                    <ul class="web-checked-list-circle">
-                                                        <li><span>Unlimited seats</span></li>
-                                                        <li><span>SOC-2</span></li>
-                                                        <li><span>BAA</span></li>
-                                                        <li><span>Network logs</span></li>
-                                                        <li><span>28-day log retention</span></li>
-                                                        <li>
-                                                            <span>Custom organization roles</span>
-                                                        </li>
-                                                        <li><span>SSO</span></li>
-                                                        <li><span>Activity logs</span></li>
-                                                        <li><span>Custom backup policies</span></li>
-                                                    </ul>
-                                                </div>
-                                            </div>
-                                        </article>
-                                    </li>
-                                {/if}
-                                <li>
-                                    <article
-                                        class="web-card is-transparent has-border-gradient u-height-100-percent"
-                                        style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
-                                    >
-                                        <div class="web-pricing-cards-item">
-                                            <header class="web-pricing-cards-header">
-                                                <h2
-                                                    id="enterprise"
-                                                    class="text-label text-primary font-aeonik-pro"
-                                                >
-                                                    Enterprise
-                                                </h2>
-                                                <div
-                                                    class="text-title font-aeonik-pro text-primary mt-10 -mb-6"
-                                                >
-                                                    Custom
-                                                </div>
-                                                <div class="mt-1">&nbsp;</div>
-                                                <p class="text-main-body mt-4 h-[5rem] font-medium">
-                                                    For enterprises that need more power, premium
-                                                    support, and advanced security features.
-                                                </p>
-                                                <Button
-                                                    variant="secondary"
-                                                    href="/contact-us/enterprise"
-                                                    class="is-full-width mt-10"
-                                                    rel="noopener noreferrer"
-                                                    event="pricing-cards-enterprise-click"
-                                                >
-                                                    <!-- <span class="web-sub-body-500">Start trial</span> -->
-                                                    <span class="web-sub-body-500">Contact us</span>
-                                                </Button>
-                                            </header>
-                                            <div class="web-pricing-cards-content">
-                                                <p>
-                                                    Everything in {SHOW_SCALE_PLAN
-                                                        ? 'Scale'
-                                                        : 'Pro'}, plus:
-                                                </p>
+                                                <p>Everything in Pro, plus:</p>
                                                 <ul class="web-checked-list-circle">
-                                                    <li><span>Uptime SLAs</span></li>
-                                                    <li><span>Designated Success Manager</span></li>
-                                                    <li><span>Up to 24/7 support</span></li>
-                                                    <li>
-                                                        <span>Option for private Slack channel</span
-                                                        >
-                                                    </li>
-                                                    <li><span>Volume discounts</span></li>
-                                                    <li><span>Log drains</span></li>
-                                                    <li><span>90-day log retention</span></li>
-                                                    <li><span>Advanced observability</span></li>
-                                                    <li><span>Bring your own Cloud</span></li>
-                                                    <li>
-                                                        <span>SOC-2, HIPAA, and BAA</span>
-                                                    </li>
+                                                    <li><span>Unlimited seats</span></li>
+                                                    <li><span>SOC-2</span></li>
+                                                    <li><span>BAA</span></li>
+                                                    <li><span>Network logs</span></li>
+                                                    <li><span>28-day log retention</span></li>
                                                     <li><span>Custom organization roles</span></li>
-                                                    <li><span>Single Sign-On (SSO)</span></li>
+                                                    <li><span>SSO</span></li>
                                                     <li><span>Activity logs</span></li>
                                                     <li><span>Custom backup policies</span></li>
                                                 </ul>
@@ -343,102 +271,158 @@
                                         </div>
                                     </article>
                                 </li>
-                            </ul>
-                        </div>
-
-                        <section class="mt-20">
-                            <article class="cta-card stack-card p-6 md:p-8">
-                                <div class="stack-card__header">
-                                    <h3
-                                        class="text-display text-primary font-aeonik-pro stack-card__title"
-                                    >
-                                        One platform. One subscription.
-                                    </h3>
-                                    <div class="stack-card__badge">
-                                        1 vendor • 1 subscription • 1 bill
+                            {/if}
+                            <li>
+                                <article
+                                    class="web-card is-transparent has-border-gradient u-height-100-percent"
+                                    style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 63.19%, rgba(255, 255, 255, 0.00) 100%);"
+                                >
+                                    <div class="web-pricing-cards-item">
+                                        <header class="web-pricing-cards-header">
+                                            <h2
+                                                id="enterprise"
+                                                class="text-label text-primary font-aeonik-pro"
+                                            >
+                                                Enterprise
+                                            </h2>
+                                            <div
+                                                class="text-title font-aeonik-pro text-primary mt-10 -mb-6"
+                                            >
+                                                Custom
+                                            </div>
+                                            <div class="mt-1">&nbsp;</div>
+                                            <p class="text-main-body mt-4 h-[5rem] font-medium">
+                                                For enterprises that need more power, premium
+                                                support, and advanced security features.
+                                            </p>
+                                            <Button
+                                                variant="secondary"
+                                                href="/contact-us/enterprise"
+                                                class="is-full-width mt-10"
+                                                rel="noopener noreferrer"
+                                                event="pricing-cards-enterprise-click"
+                                            >
+                                                <!-- <span class="web-sub-body-500">Start trial</span> -->
+                                                <span class="web-sub-body-500">Contact us</span>
+                                            </Button>
+                                        </header>
+                                        <div class="web-pricing-cards-content">
+                                            <p>
+                                                Everything in {SHOW_SCALE_PLAN ? 'Scale' : 'Pro'},
+                                                plus:
+                                            </p>
+                                            <ul class="web-checked-list-circle">
+                                                <li><span>Uptime SLAs</span></li>
+                                                <li><span>Designated Success Manager</span></li>
+                                                <li><span>Up to 24/7 support</span></li>
+                                                <li>
+                                                    <span>Option for private Slack channel</span>
+                                                </li>
+                                                <li><span>Volume discounts</span></li>
+                                                <li><span>Log drains</span></li>
+                                                <li><span>90-day log retention</span></li>
+                                                <li><span>Advanced observability</span></li>
+                                                <li><span>Bring your own Cloud</span></li>
+                                                <li>
+                                                    <span>SOC-2, HIPAA, and BAA</span>
+                                                </li>
+                                                <li><span>Custom organization roles</span></li>
+                                                <li><span>Single Sign-On (SSO)</span></li>
+                                                <li><span>Activity logs</span></li>
+                                                <li><span>Custom backup policies</span></li>
+                                            </ul>
+                                        </div>
                                     </div>
+                                </article>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <section class="mt-20">
+                        <article class="cta-card stack-card p-6 md:p-8">
+                            <div class="stack-card__header">
+                                <h3
+                                    class="text-display text-primary font-aeonik-pro stack-card__title"
+                                >
+                                    One platform. One subscription.
+                                </h3>
+                                <div class="stack-card__badge">
+                                    1 vendor • 1 subscription • 1 bill
                                 </div>
-                                <p class="text-main-body text-secondary/90 mt-4 max-w-3xl">
-                                    Replace fragmented backend, hosting, storage, and delivery
-                                    tooling with a single platform built for the full application
-                                    lifecycle. Reduce integration surface area, simplify
-                                    procurement, and give your team one system to operate and scale.
-                                </p>
-                                <div class="stack-card__compare mt-6">
-                                    <div class="stack-state-card">
-                                        <p class="stack-state-card__label">Before</p>
-                                        <ul class="stack-state-card__list">
-                                            <li>
-                                                Multiple tools with overlapping responsibilities
-                                            </li>
-                                            <li>
-                                                Separate subscriptions, invoices, and renewal cycles
-                                            </li>
-                                            <li>
-                                                More integration, maintenance, and ownership
-                                                overhead
-                                            </li>
-                                        </ul>
-                                    </div>
-                                    <div class="stack-state-card stack-state-card--after">
-                                        <p class="stack-state-card__label">After</p>
-                                        <ul class="stack-state-card__list">
-                                            <li>One platform across the app lifecycle</li>
-                                            <li>
-                                                One subscription with simpler billing and
-                                                procurement
-                                            </li>
-                                            <li>
-                                                Fewer systems to integrate, secure, and maintain
-                                            </li>
-                                        </ul>
-                                    </div>
+                            </div>
+                            <p class="text-main-body text-secondary/90 mt-4 max-w-3xl">
+                                Replace fragmented backend, hosting, storage, and delivery tooling
+                                with a single platform built for the full application lifecycle.
+                                Reduce integration surface area, simplify procurement, and give your
+                                team one system to operate and scale.
+                            </p>
+                            <div class="stack-card__compare mt-6">
+                                <div class="stack-state-card">
+                                    <p class="stack-state-card__label">Before</p>
+                                    <ul class="stack-state-card__list">
+                                        <li>Multiple tools with overlapping responsibilities</li>
+                                        <li>
+                                            Separate subscriptions, invoices, and renewal cycles
+                                        </li>
+                                        <li>
+                                            More integration, maintenance, and ownership overhead
+                                        </li>
+                                    </ul>
                                 </div>
-                                <div class="mt-6 flex flex-wrap items-center gap-4">
-                                    <Button
-                                        href="#compare-plans"
-                                        variant="secondary"
-                                        event="pricing-cards-stack_consolidation-see_included-click"
-                                    >
-                                        See what's included
-                                    </Button>
-                                    <span class="stack-card__helper text-caption text-secondary">
-                                        Compare plan limits, included capabilities, and scaling
-                                        options.
-                                    </span>
+                                <div class="stack-state-card stack-state-card--after">
+                                    <p class="stack-state-card__label">After</p>
+                                    <ul class="stack-state-card__list">
+                                        <li>One platform across the app lifecycle</li>
+                                        <li>
+                                            One subscription with simpler billing and procurement
+                                        </li>
+                                        <li>Fewer systems to integrate, secure, and maintain</li>
+                                    </ul>
                                 </div>
-                            </article>
-                        </section>
+                            </div>
+                            <div class="mt-6 flex flex-wrap items-center gap-4">
+                                <Button
+                                    href="#compare-plans"
+                                    variant="secondary"
+                                    event="pricing-cards-stack_consolidation-see_included-click"
+                                >
+                                    See what's included
+                                </Button>
+                                <span class="stack-card__helper text-caption text-secondary">
+                                    Compare plan limits, included capabilities, and scaling options.
+                                </span>
+                            </div>
+                        </article>
                     </section>
-                </div>
+                </section>
             </div>
+        </div>
 
-            <div id="compare-plans">
-                <ComparePlans />
-            </div>
+        <div id="compare-plans">
+            <ComparePlans />
+        </div>
 
-            <div class="dark relative overflow-hidden pt-10">
-                <div class="web-big-padding-section-level-2 relative">
-                    <div class="relative container" style:z-index="10">
-                        <section class="web-grid-4-6">
-                            <header>
-                                <div class="text-display font-aeonik-pro text-primary">FAQ</div>
-                            </header>
-                            <Faq />
-                        </section>
-                    </div>
+        <div class="dark relative overflow-hidden pt-10">
+            <div class="web-big-padding-section-level-2 relative">
+                <div class="relative container" style:z-index="10">
+                    <section class="web-grid-4-6">
+                        <header>
+                            <div class="text-display font-aeonik-pro text-primary">FAQ</div>
+                        </header>
+                        <Faq />
+                    </section>
                 </div>
-                <div class="web-big-padding-section-level-2 relative !mb-0">
-                    <div class="container">
-                        <PreFooter />
-                        <FooterNav />
-                        <MainFooter />
-                    </div>
+            </div>
+            <div class="web-big-padding-section-level-2 relative !mb-0">
+                <div class="container">
+                    <PreFooter />
+                    <FooterNav />
+                    <MainFooter />
                 </div>
             </div>
         </div>
-    </Main>
-</div>
+    </div>
+</Main>
 
 <style lang="scss">
     @use '$scss/abstract/mixins/border-gradient' as gradients;
@@ -481,8 +465,8 @@
         background:
             radial-gradient(
                 120% 80% at 100% 0%,
-                hsl(var(--web-color-pink-500) / 0.14) 0%,
-                hsl(var(--web-color-pink-500) / 0) 60%
+                rgba(253, 54, 110, 0.14) 0%,
+                rgba(253, 54, 110, 0) 60%
             ),
             radial-gradient(
                 140% 90% at 0% 100%,
@@ -534,12 +518,8 @@
     }
 
     .stack-state-card--after {
-        border-color: hsl(var(--web-color-pink-500) / 0.35);
-        background: linear-gradient(
-            180deg,
-            hsl(var(--web-color-pink-500) / 0.1) 0%,
-            rgba(0, 0, 0, 0.2) 100%
-        );
+        border-color: rgba(253, 54, 110, 0.35);
+        background: linear-gradient(180deg, rgba(253, 54, 110, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
     }
 
     .stack-state-card__label {
@@ -580,7 +560,7 @@
     }
 
     .stack-state-card--after .stack-state-card__list li::before {
-        background: hsl(var(--web-color-pink-500) / 0.8);
+        background: rgba(253, 54, 110, 0.8);
     }
 
     .stack-card__helper {
diff --git a/src/routes/products/auth/(components)/Hero.svelte b/src/routes/products/auth/(components)/Hero.svelte
index 18f18f93fa..863dd6dc44 100644
--- a/src/routes/products/auth/(components)/Hero.svelte
+++ b/src/routes/products/auth/(components)/Hero.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div
-    class="product-auth-hero-bg border-smooth box-content flex items-center border-b px-5 pt-20 pb-20 md:pt-32 md:pb-40 lg:px-8 xl:px-16"
+    class="border-smooth box-content flex items-center border-b bg-[url(/images/bgs/mobile-auth-hero.png)] bg-cover bg-bottom px-5 pt-20 pb-20 md:bg-[url(/images/bgs/auth-hero.png)] md:bg-center md:pt-32 md:pb-40 lg:px-8 xl:px-16"
 >
     <div class="mx-auto grid max-w-[75rem] items-center gap-16 md:grid-cols-2">
         <div class="space-y-4">
@@ -43,47 +43,14 @@
             </div>
         </div>
         <img
-            class="no-brand-filter hidden md:block"
+            class="hidden md:block"
             src={Phone}
             alt="Phone screen alongside of a users table and a code snippet that controls Appwrite's messaging."
         />
         <img
-            class="no-brand-filter block md:hidden"
+            class="block md:hidden"
             src={PhoneMobile}
             alt="Phone screen alongside of a users table and a code snippet that controls Appwrite's messaging."
         />
     </div>
 </div>
-
-<style>
-    .product-auth-hero-bg {
-        position: relative;
-    }
-
-    .product-auth-hero-bg::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background-image: url('/images/bgs/mobile-auth-hero.png');
-        background-size: cover;
-        background-position: bottom;
-        pointer-events: none;
-        z-index: 0;
-    }
-
-    @media (min-width: 48rem) {
-        .product-auth-hero-bg::before {
-            background-image: url('/images/bgs/auth-hero.png');
-            background-position: center;
-        }
-    }
-
-    :global(body.brand-green .product-auth-hero-bg::before) {
-        filter: var(--web-color-image-background-filter);
-    }
-
-    .product-auth-hero-bg > * {
-        position: relative;
-        z-index: 1;
-    }
-</style>
diff --git a/src/routes/products/auth/(components)/OpenSource.svelte b/src/routes/products/auth/(components)/OpenSource.svelte
index 479a8ba15e..0e5b8ba940 100644
--- a/src/routes/products/auth/(components)/OpenSource.svelte
+++ b/src/routes/products/auth/(components)/OpenSource.svelte
@@ -74,11 +74,7 @@
         <div class="mx-auto grid place-items-center gap-8 md:grid-cols-3">
             {#each items as item}
                 <div class="max-w-[275px] text-center">
-                    <img
-                        src={item.icon}
-                        alt={item.title}
-                        class="open-source-alternative-icon mx-auto"
-                    />
+                    <img src={item.icon} alt={item.title} class="mx-auto" />
                     <h3 class="text-sub-body text-primary mt-4 font-medium">{item.title}</h3>
                     <p class="text-sub-body text-secondary mt-2 font-normal">{item.copy}</p>
                 </div>
@@ -86,9 +82,3 @@
         </div>
     </div>
 </section>
-
-<style>
-    :global(body.brand-green .products-brandable .open-source-alternative-icon) {
-        filter: var(--web-color-image-accent-filter);
-    }
-</style>
diff --git a/src/routes/products/functions/(components)/Hero.svelte b/src/routes/products/functions/(components)/Hero.svelte
index a5d9c4897f..8227b8db03 100644
--- a/src/routes/products/functions/(components)/Hero.svelte
+++ b/src/routes/products/functions/(components)/Hero.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div
-    class="product-functions-hero-bg box-content flex items-center px-5 pt-20 pb-20 md:pt-32 md:pb-40 lg:px-8 xl:px-16"
+    class="box-content flex items-center bg-[url(/images/bgs/mobile-auth-hero.png)] bg-cover bg-bottom px-5 pt-20 pb-20 md:bg-[url(/images/bgs/auth-hero.png)] md:bg-center md:pt-32 md:pb-40 lg:px-8 xl:px-16"
 >
     <div class="grid items-center gap-16 md:grid-cols-2">
         <div class="space-y-6">
@@ -29,42 +29,8 @@
             </div>
         </div>
         <img
-            class="no-brand-filter"
             src={Phone}
             alt="Phone screen alongside of a users table and a code snippet that controls Appwrite's functions."
         />
     </div>
 </div>
-
-<style>
-    .product-functions-hero-bg {
-        position: relative;
-    }
-
-    .product-functions-hero-bg::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background-image: url('/images/bgs/mobile-auth-hero.png');
-        background-size: cover;
-        background-position: bottom;
-        pointer-events: none;
-        z-index: 0;
-    }
-
-    @media (min-width: 48rem) {
-        .product-functions-hero-bg::before {
-            background-image: url('/images/bgs/auth-hero.png');
-            background-position: center;
-        }
-    }
-
-    :global(body.brand-green .product-functions-hero-bg::before) {
-        filter: var(--web-color-image-background-filter);
-    }
-
-    .product-functions-hero-bg > * {
-        position: relative;
-        z-index: 1;
-    }
-</style>
diff --git a/src/routes/products/functions/(components)/OpenSource.svelte b/src/routes/products/functions/(components)/OpenSource.svelte
index e3a833f95b..e2a0e855d5 100644
--- a/src/routes/products/functions/(components)/OpenSource.svelte
+++ b/src/routes/products/functions/(components)/OpenSource.svelte
@@ -75,11 +75,7 @@
         <div class="mx-auto grid place-items-center gap-8 md:grid-cols-3">
             {#each items as item}
                 <div class="max-w-[275px] text-center">
-                    <img
-                        src={item.icon}
-                        alt={item.title}
-                        class="open-source-alternative-icon mx-auto"
-                    />
+                    <img src={item.icon} alt={item.title} class="mx-auto" />
                     <h3 class="text-sub-body text-primary mt-4 font-medium">{item.title}</h3>
                     <p class="text-sub-body text-secondary mt-2 font-normal">{item.copy}</p>
                 </div>
@@ -87,9 +83,3 @@
         </div>
     </div>
 </section>
-
-<style>
-    :global(body.brand-green .products-brandable .open-source-alternative-icon) {
-        filter: var(--web-color-image-accent-filter);
-    }
-</style>
diff --git a/src/routes/products/sites/(components)/hero.svelte b/src/routes/products/sites/(components)/hero.svelte
index 1f509b9ada..01427d9b6c 100644
--- a/src/routes/products/sites/(components)/hero.svelte
+++ b/src/routes/products/sites/(components)/hero.svelte
@@ -7,7 +7,13 @@
     import ProductHuntBadge from '../(assets)/images/producthunt-badge.svelte';
 </script>
 
-<div class={cn('sites-hero-gradient relative flex flex-col items-center')}>
+<div
+    class={cn(
+        'relative flex flex-col items-center',
+        'before:absolute before:inset-0 before:top-0 before:left-0 before:-z-10 before:block before:h-full before:bg-[radial-gradient(circle_at_-15%_-10%,_hsla(343,_98%,_60%,_0.2)_0px,_transparent_40%)]',
+        'after:absolute after:inset-0 after:top-0 after:right-0 after:-z-10 after:mt-auto after:mb-0 after:block after:h-full after:bg-[radial-gradient(circle_at_120%_125%,_hsla(248,_99%,_70%,_0.2)_0px,_transparent_40%)]'
+    )}
+>
     <div
         class="container mx-auto grid w-full grid-cols-1 place-items-center gap-x-16 gap-y-8 py-12 max-lg:px-5! lg:grid-cols-12 lg:py-20"
     >
@@ -39,11 +45,7 @@
                 </a>
             </div>
         </div>
-        <img
-            src={Illustration}
-            alt="Illustration"
-            class="no-brand-filter col-span-full lg:col-span-7"
-        />
+        <img src={Illustration} alt="Illustration" class="col-span-full lg:col-span-7" />
         <a
             href="https://www.producthunt.com/posts/appwrite-sites"
             target="_blank"
@@ -54,34 +56,3 @@
     </div>
     <Platforms class="mt-auto mb-0 w-full" headline="Host your favorite web frameworks" />
 </div>
-
-<style>
-    .sites-hero-gradient::before,
-    .sites-hero-gradient::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        z-index: -10;
-        height: 100%;
-        pointer-events: none;
-    }
-
-    .sites-hero-gradient::before {
-        left: 0;
-        background: radial-gradient(
-            circle at -15% -10%,
-            rgb(var(--brand-accent-rgb) / 0.2) 0px,
-            transparent 40%
-        );
-    }
-
-    .sites-hero-gradient::after {
-        right: 0;
-        margin-block: auto 0;
-        background: radial-gradient(
-            circle at 120% 125%,
-            hsl(248 99% 70% / 0.2) 0px,
-            transparent 40%
-        );
-    }
-</style>
diff --git a/src/routes/products/sites/offer-300/(components)/hero.svelte b/src/routes/products/sites/offer-300/(components)/hero.svelte
index cb707fa547..7ec36f368e 100644
--- a/src/routes/products/sites/offer-300/(components)/hero.svelte
+++ b/src/routes/products/sites/offer-300/(components)/hero.svelte
@@ -6,7 +6,13 @@
     import ProductHuntBadge from '../../(assets)/images/producthunt-badge.svelte';
 </script>
 
-<div class={cn('sites-hero-gradient relative flex flex-col items-center')}>
+<div
+    class={cn(
+        'relative flex flex-col items-center',
+        'before:absolute before:inset-0 before:top-0 before:left-0 before:-z-10 before:block before:h-full before:bg-[radial-gradient(circle_at_-15%_-10%,_hsla(343,_98%,_60%,_0.2)_0px,_transparent_40%)]',
+        'after:absolute after:inset-0 after:top-0 after:right-0 after:-z-10 after:mt-auto after:mb-0 after:block after:h-full after:bg-[radial-gradient(circle_at_120%_125%,_hsla(248,_99%,_70%,_0.2)_0px,_transparent_40%)]'
+    )}
+>
     <div
         class="container mx-auto grid w-full grid-cols-1 place-items-center gap-x-16 gap-y-8 py-12 max-lg:px-5! lg:grid-cols-12 lg:py-20"
     >
@@ -38,11 +44,7 @@
                 </a>
             </div>
         </div>
-        <img
-            src={Illustration}
-            alt="Illustration"
-            class="no-brand-filter col-span-full lg:col-span-7"
-        />
+        <img src={Illustration} alt="Illustration" class="col-span-full lg:col-span-7" />
         <a
             href="https://www.producthunt.com/posts/appwrite-sites"
             target="_blank"
@@ -53,34 +55,3 @@
     </div>
     <Platforms class="mt-auto mb-0 w-full" headline="Host your favorite web frameworks" />
 </div>
-
-<style>
-    .sites-hero-gradient::before,
-    .sites-hero-gradient::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        z-index: -10;
-        height: 100%;
-        pointer-events: none;
-    }
-
-    .sites-hero-gradient::before {
-        left: 0;
-        background: radial-gradient(
-            circle at -15% -10%,
-            rgb(var(--brand-accent-rgb) / 0.2) 0px,
-            transparent 40%
-        );
-    }
-
-    .sites-hero-gradient::after {
-        right: 0;
-        margin-block: auto 0;
-        background: radial-gradient(
-            circle at 120% 125%,
-            hsl(248 99% 70% / 0.2) 0px,
-            transparent 40%
-        );
-    }
-</style>
diff --git a/src/routes/products/sites/open-source-netlify/(components)/hero.svelte b/src/routes/products/sites/open-source-netlify/(components)/hero.svelte
index c103421c94..318a1ecb67 100644
--- a/src/routes/products/sites/open-source-netlify/(components)/hero.svelte
+++ b/src/routes/products/sites/open-source-netlify/(components)/hero.svelte
@@ -6,7 +6,13 @@
     import ProductHuntBadge from '../../(assets)/images/producthunt-badge.svelte';
 </script>
 
-<div class={cn('sites-hero-gradient relative flex flex-col items-center')}>
+<div
+    class={cn(
+        'relative flex flex-col items-center',
+        'before:absolute before:inset-0 before:top-0 before:left-0 before:-z-10 before:block before:h-full before:bg-[radial-gradient(circle_at_-15%_-10%,_hsla(343,_98%,_60%,_0.2)_0px,_transparent_40%)]',
+        'after:absolute after:inset-0 after:top-0 after:right-0 after:-z-10 after:mt-auto after:mb-0 after:block after:h-full after:bg-[radial-gradient(circle_at_120%_125%,_hsla(248,_99%,_70%,_0.2)_0px,_transparent_40%)]'
+    )}
+>
     <div
         class="container mx-auto grid w-full grid-cols-1 place-items-center gap-x-16 gap-y-8 py-12 max-lg:px-5! lg:grid-cols-12 lg:py-20"
     >
@@ -35,11 +41,7 @@
                 </a>
             </div>
         </div>
-        <img
-            src={Illustration}
-            alt="Illustration"
-            class="no-brand-filter col-span-full lg:col-span-7"
-        />
+        <img src={Illustration} alt="Illustration" class="col-span-full lg:col-span-7" />
         <a
             href="https://www.producthunt.com/posts/appwrite-sites"
             target="_blank"
@@ -50,34 +52,3 @@
     </div>
     <Platforms class="mt-auto mb-0 w-full" headline="Host your favorite web frameworks" />
 </div>
-
-<style>
-    .sites-hero-gradient::before,
-    .sites-hero-gradient::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        z-index: -10;
-        height: 100%;
-        pointer-events: none;
-    }
-
-    .sites-hero-gradient::before {
-        left: 0;
-        background: radial-gradient(
-            circle at -15% -10%,
-            rgb(var(--brand-accent-rgb) / 0.2) 0px,
-            transparent 40%
-        );
-    }
-
-    .sites-hero-gradient::after {
-        right: 0;
-        margin-block: auto 0;
-        background: radial-gradient(
-            circle at 120% 125%,
-            hsl(248 99% 70% / 0.2) 0px,
-            transparent 40%
-        );
-    }
-</style>
diff --git a/src/routes/products/storage/(components)/OpenSource.svelte b/src/routes/products/storage/(components)/OpenSource.svelte
index 5d4f17f892..cc2225abb9 100644
--- a/src/routes/products/storage/(components)/OpenSource.svelte
+++ b/src/routes/products/storage/(components)/OpenSource.svelte
@@ -53,13 +53,7 @@
                             'relative flex flex-col items-center justify-center px-11 text-center md:-mr-8 md:max-w-[290px] md:px-0 md:pr-8'
                         )}
                     >
-                        <img
-                            src={icon}
-                            width="40"
-                            height="40"
-                            alt=""
-                            class="open-source-alternative-icon"
-                        />
+                        <img src={icon} width="40" height="40" alt="" />
                         <h3 class="text-sub-body text-primary mt-4 mb-1 font-medium">
                             {title}
                         </h3>
@@ -70,9 +64,3 @@
         </div>
     </div>
 </div>
-
-<style>
-    :global(body.brand-green .open-source-alternative-icon) {
-        filter: var(--web-color-image-accent-filter);
-    }
-</style>
diff --git a/src/routes/products/storage/(components)/ProductShot.svelte b/src/routes/products/storage/(components)/ProductShot.svelte
index e7dab83c62..5fad76797b 100644
--- a/src/routes/products/storage/(components)/ProductShot.svelte
+++ b/src/routes/products/storage/(components)/ProductShot.svelte
@@ -136,7 +136,10 @@
                                     type="checkbox"
                                     aria-label={`role ${label} ${headings[i].toLowerCase()}`}
                                     checked={option}
-                                    class="checkbox peer size-4 cursor-pointer appearance-none rounded-sm border-0 bg-white/12 backdrop-blur-lg transition-all duration-100 md:size-5 md:rounded"
+                                    class={cn(
+                                        'checkbox peer size-4 cursor-pointer appearance-none rounded-sm border-0 bg-white/12 backdrop-blur-lg transition-all duration-100 md:size-5 md:rounded',
+                                        'checked:bg-pink-500'
+                                    )}
                                     on:change={() => {
                                         permissions.update((permissions) => {
                                             permissions[index].options[i] =
@@ -177,9 +180,5 @@
             hsl(0, 0%, 100%, 0.16),
             hsl(0, 0%, 100%, 0)
         );
-
-        &:checked {
-            background-color: hsl(var(--web-color-pink-500));
-        }
     }
 </style>
diff --git a/src/routes/products/storage/+page.svelte b/src/routes/products/storage/+page.svelte
index 84fb04bf04..a607e8d0b8 100644
--- a/src/routes/products/storage/+page.svelte
+++ b/src/routes/products/storage/+page.svelte
@@ -62,7 +62,7 @@
             }}
         />
 
-        <div class="storage-mint-bg !mb-0 bg-right-top bg-no-repeat">
+        <div class="!mb-0 bg-right-top bg-no-repeat md:bg-[url(/images/bgs/mint-gradient.png)]">
             <PreviewFiles />
             <div
                 class="relative bg-[url('/images/pages/storage/pattern-1.png')] [background-size:1200px] [background-position:center_bottom_-50%] bg-no-repeat md:[background-size:1350px] md:[background-position:center_bottom]"
@@ -161,7 +161,7 @@
             </div>
         </div>
         <div
-            class="storage-purple-bg web-big-padding-section-level-1 web-white-section light pb-20"
+            class="web-big-padding-section-level-1 web-white-section light bg-[url(/images/bgs/purple-gradient.png)] bg-left bg-no-repeat pb-20"
         >
             <div class="!my-0 py-24 md:py-20">
                 <div class="container">
@@ -208,37 +208,4 @@
     .l-drop-shadow {
         filter: drop-shadow(0 16px 32px rgb(55 59 77 / 0.04));
     }
-
-    .storage-mint-bg,
-    .storage-purple-bg {
-        position: relative;
-        isolation: isolate;
-    }
-
-    .storage-mint-bg::before,
-    .storage-purple-bg::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        z-index: -1;
-        pointer-events: none;
-        background-repeat: no-repeat;
-    }
-
-    @media (min-width: 48rem) {
-        .storage-mint-bg::before {
-            background-image: url('/images/bgs/mint-gradient.png');
-            background-position: right top;
-        }
-    }
-
-    .storage-purple-bg::before {
-        background-image: url('/images/bgs/purple-gradient.png');
-        background-position: left;
-    }
-
-    :global(body.brand-green .storage-mint-bg::before),
-    :global(body.brand-green .storage-purple-bg::before) {
-        filter: var(--web-color-image-background-filter);
-    }
 </style>
diff --git a/src/scss/1-css-variables/_colors.scss b/src/scss/1-css-variables/_colors.scss
index 0070094dd2..0c163db3ea 100644
--- a/src/scss/1-css-variables/_colors.scss
+++ b/src/scss/1-css-variables/_colors.scss
@@ -35,7 +35,7 @@
     --web-color-border: var(--web-color-subtle);
   }
   
-  /* brand accent (pink by default) */
+  /* pink */
   --web-color-pink-hue: 343;
   --web-color-pink-200: var(--web-color-pink-hue) 98% 84%;
   --web-color-pink-500: var(--web-color-pink-hue) 98% 60%; /* #FD366E */
@@ -82,14 +82,6 @@
   --web-color-secondary-hue: 351;
   --web-color-secondary-100: var(--web-color-secondary-hue) 99% 66%; /* #FE536D */
 
-  /* brand helpers for glow, gradients and image tinting */
-  --web-color-brand-rgb: 253 54 110;
-  --web-color-brand-soft-rgb: 255 64 120;
-  --web-color-image-accent-filter: none;
-  --web-color-image-background-filter: none;
-  --web-color-button-primary: var(--web-color-pink-500);
-  --web-color-button-secondary: var(--web-color-secondary-100);
-
   /* greyscale */
   --web-color-white:    0 0% 100%;
   --web-color-greyscale-25:   240 11% 98%;
@@ -113,33 +105,6 @@
   #{$theme-dark} { @include color-dark; }
 }
 
-body.brand-pink {
-  --web-color-pink-hue: 343;
-  --web-color-secondary-hue: 351;
-  --web-color-brand-rgb: 253 54 110;
-  --web-color-brand-soft-rgb: 255 64 120;
-  --web-color-image-accent-filter: none;
-  --web-color-image-background-filter: none;
-  --web-color-button-primary: var(--web-color-pink-500);
-  --web-color-button-secondary: var(--web-color-secondary-100);
-}
-
-body.brand-green {
-  --web-color-pink-hue: 151;
-  --web-color-secondary-hue: 165;
-  --web-color-pink-500: 151 72% 38%;
-  --web-color-pink-600: 151 66% 32%;
-  --web-color-accent: var(--web-color-pink-500);
-  --web-color-accent-darker: var(--web-color-pink-600);
-  --web-color-accent-click: var(--web-color-pink-500);
-  --web-color-brand-rgb: 15 166 95;
-  --web-color-brand-soft-rgb: 56 214 140;
-  --web-color-image-accent-filter: hue-rotate(155deg) saturate(1.08) brightness(0.98);
-  --web-color-image-background-filter: hue-rotate(155deg) saturate(1.04) brightness(0.96);
-  --web-color-button-primary: 151 74% 36%;
-  --web-color-button-secondary: 165 78% 42%;
-}
-
 .#{$p}-u-color-text-primary { color:hsl(var(--web-color-primary))!important; }
 .#{$p}-u-color-text-secondary { color:hsl(var(--web-color-secondary))!important; }
 .#{$p}-u-color-text-tertiary { color:hsl(var(--web-color-tertiary))!important; }
diff --git a/src/scss/6-elements/_badges.scss b/src/scss/6-elements/_badges.scss
index 04395f0252..b1180d7b7e 100644
--- a/src/scss/6-elements/_badges.scss
+++ b/src/scss/6-elements/_badges.scss
@@ -1,18 +1,14 @@
 @use '../abstract' as *;
 
 .#{$p}-badges {
-  --p-badges-shadow-bg-color: hsl(var(--web-color-pink-500) / 0.22);
-  --p-badges-shadow-border-color: hsl(var(--web-color-pink-500) / 0.38);
+  --p-badges-shadow-bg-color: #f2c8d6;
+  --p-badges-shadow-border-color: #f69db7;
   --p-badges-shadowopacity: 0.4;
 
   align-self:center; color:hsl(var(--color-neutral-0));
   padding-block:pxToRem(6); padding-inline:pxToRem(12); border-radius:pxToRem(6);
-  background: radial-gradient(
-    98.13% 199.7% at 98.13% 100%,
-    hsl(var(--web-color-pink-600)) 0%,
-    hsl(var(--web-color-pink-500)) 41.6%,
-    hsl(var(--web-color-pink-500)) 100%
-  );
+  // background: linear-gradient(175deg, hsl(var(--web-color-pink-500)) 25.03%, hsl(var(--web-color-secondary-100)) 100%);
+  background: radial-gradient(98.13% 199.7% at 98.13% 100%, #FE6947 0%, #FD366E 41.6%, #FD366E 100%);
 
   -webkit-backdrop-filter:blur(pxToRem(40));
   backdrop-filter:blur(pxToRem(40));
@@ -26,14 +22,14 @@
 
 
   #{$theme-dark} & {
-    --p-badges-shadow-bg-color: hsl(var(--web-color-pink-500) / 0.16);
-    --p-badges-shadow-border-color: hsl(var(--web-color-pink-500) / 0.28);
+    --p-badges-shadow-bg-color: #2c2c2f;
+    --p-badges-shadow-border-color: #39393c;
     --p-badges-shadowopacity: 0.13;
   }
 
   #{$theme-light} &{
-    --p-badges-shadow-bg-color: hsl(var(--web-color-pink-500) / 0.22);
-    --p-badges-shadow-border-color: hsl(var(--web-color-pink-500) / 0.38);
+    --p-badges-shadow-bg-color: #f2c8d6;
+    --p-badges-shadow-border-color: #f69db7;
     --p-badges-shadowopacity: 0.4;
   }
 
diff --git a/src/scss/6-elements/_button.scss b/src/scss/6-elements/_button.scss
index 685f18b644..93ab1a1097 100644
--- a/src/scss/6-elements/_button.scss
+++ b/src/scss/6-elements/_button.scss
@@ -4,7 +4,7 @@
   --m-border-radius: var(--border-radius-small, #{pxToRem(8)});
   --m-border-size: #{pxToRem(1)};
 
-  background: linear-gradient(135deg, hsl(var(--web-color-button-primary)) 0%, hsl(var(--web-color-button-primary)) 61%, hsl(var(--web-color-button-secondary)) 100%);
+  background: linear-gradient(135deg, hsl(var(--web-color-pink-500)) 0%, hsl(var(--web-color-pink-500)) 61%, hsl(var(--web-color-secondary-100)) 100%);
   background-origin: border-box;
   display:flex; inline-size:fit-content; justify-content:center; align-items:center; gap:pxToRem(8);
   padding-inline:pxToRem(14); padding-block:pxToRem(7); min-block-size:pxToRem(40);
@@ -17,17 +17,17 @@
   .#{$p}-inline-tag { margin-inline-end:pxToRem(-2); background:rgba(255, 255, 255, 0.24); }
 
   &:where(:hover):where(:not(#{$disabled})) {
-    box-shadow:0 0 pxToRem(32) 0 hsl(var(--web-color-button-primary) / 0.32);
+    box-shadow:0 0 pxToRem(32) 0 rgba(253, 54, 110, 0.32);
   }
 
   &:where(:active):where(:not(#{$disabled})) {
-    box-shadow:0 0 pxToRem(32) 0 hsl(var(--web-color-button-primary) / 0.24);
+    box-shadow:0 0 pxToRem(32) 0 rgba(253, 54, 110, 0.24);
   }
 
   &:where(:focus-visible) {
-    box-shadow: 0 0 0 pxToRem(4) hsl(var(--web-color-button-primary) / 0.24);
+    box-shadow: 0 0 0 pxToRem(4) rgba(253, 54, 110, 0.24);
     #{$theme-dark} {
-      box-shadow: 0 0 0 pxToRem(4) hsl(var(--web-color-button-primary) / 0.48);
+      box-shadow: 0 0 0 pxToRem(4) rgba(253, 54, 110, 0.48);
     }
   }
   &:where(#{$disabled}) { opacity:0.4; cursor:initial; }
@@ -40,26 +40,26 @@
     @include border-gradient;
 
     .#{$p}-inline-tag {
-      background:hsl(var(--web-color-secondary-100) / 0.10);
-      color:hsl(var(--web-color-button-primary));
+      background:rgba(255, 64, 120, 0.10);
+      color:hsl(var(--web-color-pink-500));
     }
 
 
     @mixin dark-mode {
-      background: hsl(var(--web-color-button-primary) / 0.04);
+      background: rgba(253, 54, 110, 0.04);
       color: hsl(var(--web-color-greyscale-100));
-      box-shadow: 0px -6px 10px 0px hsl(var(--web-color-button-primary) / 0.08) inset;
-      [class*="icon"] { color:hsl(var(--web-color-button-primary)); }
+      box-shadow: 0px -6px 10px 0px rgba(253, 54, 110, 0.08) inset;
+      [class*="icon"] { color:hsl(var(--web-color-pink-500)); }
       .#{$p}-inline-tag {
-        background:hsl(var(--web-color-secondary-100) / 0.24);
+        background:rgba(255, 64, 120, 0.24);
         color:hsl(var(--web-color-greyscale-50));
       }
 
 
         --m-border-gradient-before: linear-gradient(
           to bottom,
-          hsl(var(--web-color-button-primary) / 0.48) 0%,
-          hsl(var(--web-color-button-primary) / 0) 180%
+          rgba(253, 54, 110, 0.48) 0%,
+          rgba(253, 54, 110, 0) 180%
         );
 
 
@@ -72,11 +72,11 @@
 
 
       &:where(:hover):not(:disabled) {
-        background: hsl(var(--web-color-button-primary) / 0.10);
-        box-shadow: 0px -6px 10px 0px hsl(var(--web-color-button-primary) / 0.08) inset;
+        background: rgba(253, 54, 110, 0.10);
+        box-shadow: 0px -6px 10px 0px rgba(253, 54, 110, 0.08) inset;
         --m-border-gradient-before: linear-gradient(
-        180deg, hsl(var(--web-color-button-primary) / 0.64) 0%,
-        hsl(var(--web-color-button-primary) / 0.00) 163.1%
+        180deg, rgba(253, 54, 110, 0.64) 0%,
+        rgba(253, 54, 110, 0.00) 163.1%
         );
         --m-border-gradient-after: radial-gradient(
           42.86% 42.86% at 50.55% 0%,
@@ -87,33 +87,33 @@
       }
 
       &:where(:active):not(:disabled) {
-        background: hsl(var(--web-color-button-primary) / 0.16);
-        box-shadow: 0px -6px 10px 0px hsl(var(--web-color-button-primary) / 0.08) inset;
+        background: rgba(253, 54, 110, 0.16);
+        box-shadow: 0px -6px 10px 0px rgba(253, 54, 110, 0.08) inset;
         --m-border-gradient-before:
-        linear-gradient(180deg, hsl(var(--web-color-button-primary) / 0.64) 0%, hsl(var(--web-color-button-primary) / 0.00) 163.1%);
+        linear-gradient(180deg, rgba(253, 54, 110, 0.64) 0%, rgba(253, 54, 110, 0.00) 163.1%);
         --m-border-gradient-after:
         radial-gradient(42.86% 42.86% at 50.55% 0%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.00) 100%);
       }
 
       &:where(:focus-visible):not(:disabled) {
-        background: hsl(var(--web-color-button-primary) / 0.04);
-        box-shadow: 0px 0px 0px 4px hsl(var(--web-color-button-primary) / 0.16), 0px -6px 10px 0px hsl(var(--web-color-button-primary) / 0.08) inset;
+        background: rgba(253, 54, 110, 0.04);
+        box-shadow: 0px 0px 0px 4px rgba(253, 54, 110, 0.16), 0px -6px 10px 0px rgba(253, 54, 110, 0.08) inset;
       }
     }
 
 
     @mixin light-mode {
-      background: hsl(var(--web-color-button-primary) / 0.08);
+      background: hsla(343, 98%, 60%, 0.08);
       box-shadow: none;
       color: hsl(var(--web-color-accent-click));
       .#{$p}-inline-tag {
-        background:hsl(var(--web-color-secondary-100) / 0.10);
-        color:hsl(var(--web-color-button-primary));
+        background:rgba(255, 64, 120, 0.10);
+        color:hsl(var(--web-color-pink-500));
       }
 
 
         --m-border-gradient-before:
-        linear-gradient(180deg, hsl(var(--web-color-button-primary) / 0.19) 0%, hsl(var(--web-color-button-primary) / 0.48) 100%);
+        linear-gradient(180deg, rgba(253, 54, 110, 0.19) 0%, rgba(253, 54, 110, 0.48) 100%);
 
 
 
@@ -122,15 +122,15 @@
 
 
       &:where(:hover):not(:disabled) {
-        background: hsl(var(--web-color-button-primary) / 0.10);
+        background: rgba(253, 54, 110, 0.10);
       }
 
       &:where(:active):not(:disabled) {
-        background: hsl(var(--web-color-button-primary) / 0.12);
+        background: rgba(253, 54, 110, 0.12);
       }
 
       &:where(:focus-visible):not(:disabled) {
-        box-shadow: 0px 0px 0px 4px hsl(var(--web-color-button-primary) / 0.24);
+        box-shadow: 0px 0px 0px 4px rgba(253, 54, 110, 0.24);
       }
     }
     @include light-mode;
@@ -279,7 +279,7 @@
         flex-shrink:0;
 
         #{$theme-light} & {
-          color:hsl(var(--web-color-button-primary));
+          color:hsl(var(--web-color-pink-500));
         }
 
         #{$theme-dark} & {
diff --git a/src/scss/6-elements/_card.scss b/src/scss/6-elements/_card.scss
index e995655458..c669745eb6 100644
--- a/src/scss/6-elements/_card.scss
+++ b/src/scss/6-elements/_card.scss
@@ -63,11 +63,7 @@
     -webkit-backdrop-filter:blur(pxToRem(100));
     backdrop-filter:blur(pxToRem(100));
     &-pink {
-      background: linear-gradient(
-        180deg,
-        hsl(var(--web-color-pink-500) / 0.04) 61.28%,
-        hsl(var(--web-color-pink-500) / 0.00) 100%
-      );
+      background: linear-gradient(180deg, rgba(253, 54, 110, 0.04) 61.28%, rgba(253, 54, 110, 0.00) 100%);
       border-color:hsl(var(--web-color-pink-500) / 0.5);
     }
   }
@@ -98,11 +94,7 @@
     --m-border-gradient-before: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.00) 100%);
 
     &.is-transparent-pink {
-      --m-border-gradient-before: linear-gradient(
-        180deg,
-        hsl(var(--web-color-pink-500) / 0.48) 0%,
-        hsl(var(--web-color-pink-500) / 0.00) 100%
-      );
+      --m-border-gradient-before: linear-gradient(180deg, rgba(253, 54, 110, 0.48) 0%, rgba(253, 54, 110, 0.00) 100%);
       --m-border-gradient-after: radial-gradient(42.86% 42.86% at 50.55% 0%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%);
     }
   }
diff --git a/src/scss/6-elements/_hero-banner-button.scss b/src/scss/6-elements/_hero-banner-button.scss
index 5ff862b8e1..b7b6cbad8a 100644
--- a/src/scss/6-elements/_hero-banner-button.scss
+++ b/src/scss/6-elements/_hero-banner-button.scss
@@ -4,8 +4,8 @@
   @include border-gradient;
   --m-border-gradient-before: linear-gradient(
     to bottom,
-    hsl(var(--web-color-pink-500) / 0.48) 0%,
-    hsl(var(--web-color-pink-500) / 0) 180%
+    rgba(253, 54, 110, 0.48) 0%,
+    rgba(253, 54, 110, 0) 180%
   );
   --m-border-gradient-after: radial-gradient(
     42.86% 42.86% at 50.55% -0%,
diff --git a/src/scss/7-components/_side-nav.scss b/src/scss/7-components/_side-nav.scss
index c23f0eaf2f..51a4422cbf 100644
--- a/src/scss/7-components/_side-nav.scss
+++ b/src/scss/7-components/_side-nav.scss
@@ -12,10 +12,7 @@
   --p-side-nav-item-bg-color-hover: var(--web-color-greyscale-50);
 
   --p-side-nav-item-text-color-selected: var(--web-color-primary);
-  --p-side-nav-item-icon-color-selected: linear-gradient(
-    hsl(var(--web-color-accent)),
-    hsl(var(--web-color-secondary-100))
-  );
+  --p-side-nav-item-icon-color-selected: linear-gradient( hsla(343, 98%, 60%, 1), hsla(22, 98%, 60%, 1) );
 
   --p-side-nav-bg-color: var(--p-body-bg-color);
 
@@ -102,18 +99,4 @@
   #{$theme-dark} & {
     --p-side-nav-item-bg-color-hover: var(--web-color-white) / 0.08;
   }
-}
-
-body.brand-green {
-  .#{$p}-side-nav {
-    --p-side-nav-item-text-color-selected: var(--web-color-pink-500);
-    --p-side-nav-item-icon-color-selected: linear-gradient(
-      hsl(var(--web-color-pink-500)),
-      hsl(var(--web-color-pink-600))
-    );
-  }
-
-  .#{$p}-side-nav-button.is-selected {
-    background-color: hsl(var(--web-color-pink-500) / 0.12);
-  }
 }
\ No newline at end of file
diff --git a/src/scss/abstract/mixins/_checked-badge.scss b/src/scss/abstract/mixins/_checked-badge.scss
index 1d5de62f75..c3abc071b3 100644
--- a/src/scss/abstract/mixins/_checked-badge.scss
+++ b/src/scss/abstract/mixins/_checked-badge.scss
@@ -4,12 +4,9 @@
   display:block;
   inline-size:pxToRem(20);
   min-inline-size:pxToRem(20);
-  block-size:pxToRem(20);
-  border-radius: 50%;
-  background-color: hsl(var(--web-color-pink-500) / 0.08);
-  border: solid pxToRem(1.2) hsl(var(--web-color-pink-500) / 0.32);
+  block-size:pxToRem(24);
   background-repeat: no-repeat;
   background-size: contain;
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEwIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xLjI1IDUuNUwzLjc1IDcuNUw4Ljc1IDEiIHN0cm9rZT0iI0U0RTRFNyIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
-  background-position: center;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iOCIgZmlsbD0iI0ZEMzY2RSIgZmlsbC1vcGFjaXR5PSIwLjA4IiBzdHJva2U9IiNGRDM2NkUiIHN0cm9rZS1vcGFjaXR5PSIwLjMyIiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik02LjI1IDExLjVMOC43NSAxMy41TDEzLjc1IDciIHN0cm9rZT0iI0U0RTRFNyIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
+  background-position-y: center;
 }
\ No newline at end of file
diff --git a/static/images/logos/appwrite-green.svg b/static/images/logos/appwrite-green.svg
deleted file mode 100644
index 0c8ddc4381..0000000000
--- a/static/images/logos/appwrite-green.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg width="132" height="24" viewBox="0 0 132 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M38.5573 19.495C40.7162 19.495 41.8075 18.3817 42.282 17.6238H42.4955C42.5904 18.4291 43.1598 19.1871 44.2749 19.1871H46.3864V16.8185H45.8407C45.4611 16.8185 45.2713 16.6053 45.2713 16.2737V6.77565H42.4718V8.29155H42.2583C41.7126 7.5336 40.5738 6.46773 38.4861 6.46773C35.1646 6.46773 32.6973 9.2153 32.6973 12.9814C32.6973 16.7474 35.2121 19.495 38.5573 19.495ZM39.0555 16.7948C37.0863 16.7948 35.5442 15.3499 35.5442 13.005C35.5442 10.7075 37.0389 9.14424 39.0317 9.14424C40.9297 9.14424 42.5193 10.5417 42.5193 13.005C42.5193 15.1131 41.167 16.7948 39.0555 16.7948Z" fill="#EDEDF0"/>
-<path d="M48.0392 23.9998H50.8387V17.6238H51.0522C51.5742 18.3817 52.6893 19.495 54.8956 19.495C58.2171 19.495 60.637 16.7 60.637 12.9814C60.637 9.23899 58.051 6.46773 54.7058 6.46773C52.5706 6.46773 51.5267 7.62834 51.0285 8.26786H50.815V6.77565H48.0392V23.9998ZM54.3025 16.8658C52.3808 16.8658 50.7913 15.4447 50.7913 12.9814C50.7913 10.8733 52.1436 9.09687 54.2551 9.09687C56.2242 9.09687 57.7663 10.6365 57.7663 12.9814C57.7663 15.2789 56.2717 16.8658 54.3025 16.8658Z" fill="#EDEDF0"/>
-<path d="M62.0816 23.9998H64.8811V17.6238H65.0946C65.6165 18.3817 66.7316 19.495 68.938 19.495C72.2594 19.495 74.4487 16.7 74.4487 12.9814C74.4487 9.23899 72.0934 6.46773 68.7482 6.46773C66.613 6.46773 65.5691 7.62834 65.0709 8.26786H64.8573V6.77565H62.0816V23.9998ZM68.3449 16.8658C66.4232 16.8658 64.8336 15.4447 64.8336 12.9814C64.8336 10.8733 66.1859 9.09687 68.2974 9.09687C70.2666 9.09687 71.8087 10.6365 71.8087 12.9814C71.8087 15.2789 70.314 16.8658 68.3449 16.8658Z" fill="#EDEDF0"/>
-<path d="M78.1493 19.4753H82.1114L84.3652 9.74037H84.5076L86.7614 19.4753H90.6997L93.8533 7.06386H91.0318L88.778 16.8225H88.5645L86.3106 7.06386H82.5858L80.3083 16.8225H80.0948L77.8647 7.06386H74.8754L78.1493 19.4753Z" fill="#EDEDF0"/>
-<path d="M95.2716 19.4753H98.0711V13.3406C98.0711 10.9957 99.1624 9.55088 101.203 9.55088H102.436V6.75594H101.511C99.9216 6.75594 98.7117 7.84549 98.2372 8.88767H98.0474V7.06386H95.2716V19.4753Z" fill="#EDEDF0"/>
-<path d="M116.329 19.4753H118.512V16.9883H116.353C115.499 16.9883 115.143 16.6093 115.143 15.7329V9.52719H118.654V7.06386H115.143V3.58203H112.486V7.06386H110.161V9.52719H112.32V15.7566C112.32 18.3857 113.909 19.4753 116.329 19.4753Z" fill="#EDEDF0"/>
-<path d="M126.022 19.495C128.608 19.495 130.886 18.2159 131.692 15.6342L129.13 15.0183C128.679 16.3921 127.375 17.1027 125.999 17.1027C123.958 17.1027 122.606 15.7763 122.582 13.6919H132.001V12.9103C132.001 9.2153 129.7 6.46773 125.904 6.46773C122.558 6.46773 119.688 9.09687 119.688 13.005C119.688 16.7948 122.226 19.495 126.022 19.495ZM122.606 11.6549C122.772 10.1627 124.124 8.90738 125.904 8.90738C127.612 8.90738 129.012 9.97325 129.154 11.6549H122.606Z" fill="#EDEDF0"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M108.916 19.4753H106.116V9.52719H103.934V7.06386H108.916V19.4753Z" fill="#EDEDF0"/>
-<path d="M107.309 5.3412C108.329 5.3412 109.088 4.58325 109.088 3.58845C109.088 2.61732 108.329 1.85938 107.309 1.85938C106.288 1.85938 105.529 2.61732 105.529 3.58845C105.529 4.58325 106.288 5.3412 107.309 5.3412Z" fill="#EDEDF0"/>
-<path d="M24.4429 16.4322V21.9096H10.7519C6.76318 21.9096 3.28044 19.7067 1.4171 16.4322C1.14622 15.9561 0.909137 15.4567 0.710264 14.9383C0.319864 13.9225 0.0744552 12.8325 0 11.6952V10.2143C0.0161646 9.96089 0.0416361 9.70942 0.0749451 9.46095C0.143032 8.95105 0.245898 8.45211 0.381093 7.96711C1.66006 3.36909 5.81877 0 10.7519 0C15.6851 0 19.8433 3.36909 21.1223 7.96711H15.2682C14.3072 6.4683 12.6437 5.4774 10.7519 5.4774C8.86017 5.4774 7.19668 6.4683 6.23562 7.96711C5.9427 8.42274 5.71542 8.92516 5.56651 9.46095C5.43425 9.93599 5.36371 10.4369 5.36371 10.9548C5.36371 12.5248 6.01324 13.94 7.05463 14.9383C8.01961 15.865 9.32061 16.4322 10.7519 16.4322H24.4429Z" fill="#11C573"/>
-<path d="M24.4429 9.46094V14.9383H14.4492C15.4906 13.94 16.1401 12.5248 16.1401 10.9548C16.1401 10.4369 16.0696 9.93598 15.9373 9.46094H24.4429Z" fill="#11C573"/>
-</svg>
diff --git a/static/images/logos/appwrite-light-green.svg b/static/images/logos/appwrite-light-green.svg
deleted file mode 100644
index a5341cfaf4..0000000000
--- a/static/images/logos/appwrite-light-green.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg width="132" height="24" viewBox="0 0 132 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M38.5573 19.4953C40.7162 19.4953 41.8075 18.3821 42.282 17.6242H42.4955C42.5904 18.4295 43.1598 19.1874 44.2749 19.1874H46.3864V16.8188H45.8407C45.4611 16.8188 45.2713 16.6057 45.2713 16.2741V6.77602H42.4718V8.29191H42.2583C41.7126 7.53397 40.5738 6.4681 38.4861 6.4681C35.1646 6.4681 32.6973 9.21567 32.6973 12.9817C32.6973 16.7478 35.2121 19.4953 38.5573 19.4953ZM39.0555 16.7952C37.0863 16.7952 35.5442 15.3503 35.5442 13.0054C35.5442 10.7079 37.0389 9.14461 39.0317 9.14461C40.9297 9.14461 42.5193 10.5421 42.5193 13.0054C42.5193 15.1135 41.167 16.7952 39.0555 16.7952Z" fill="#19191C"/>
-<path d="M48.0392 24.0001H50.8387V17.6242H51.0522C51.5742 18.3821 52.6893 19.4953 54.8956 19.4953C58.2171 19.4953 60.637 16.7004 60.637 12.9817C60.637 9.23935 58.051 6.4681 54.7058 6.4681C52.5706 6.4681 51.5267 7.62871 51.0285 8.26823H50.815V6.77602H48.0392V24.0001ZM54.3025 16.8662C52.3808 16.8662 50.7913 15.4451 50.7913 12.9817C50.7913 10.8737 52.1436 9.09724 54.2551 9.09724C56.2242 9.09724 57.7663 10.6368 57.7663 12.9817C57.7663 15.2793 56.2717 16.8662 54.3025 16.8662Z" fill="#19191C"/>
-<path d="M62.0816 24.0001H64.8811V17.6242H65.0946C65.6165 18.3821 66.7316 19.4953 68.938 19.4953C72.2594 19.4953 74.4487 16.7004 74.4487 12.9817C74.4487 9.23935 72.0934 6.4681 68.7482 6.4681C66.613 6.4681 65.5691 7.62871 65.0709 8.26823H64.8573V6.77602H62.0816V24.0001ZM68.3449 16.8662C66.4232 16.8662 64.8336 15.4451 64.8336 12.9817C64.8336 10.8737 66.1859 9.09724 68.2974 9.09724C70.2666 9.09724 71.8087 10.6368 71.8087 12.9817C71.8087 15.2793 70.314 16.8662 68.3449 16.8662Z" fill="#19191C"/>
-<path d="M78.1493 19.4756H82.1114L84.3652 9.74073H84.5076L86.7614 19.4756H90.6997L93.8533 7.06423H91.0318L88.778 16.8228H88.5645L86.3106 7.06423H82.5858L80.3083 16.8228H80.0948L77.8647 7.06423H74.8754L78.1493 19.4756Z" fill="#19191C"/>
-<path d="M95.2716 19.4756H98.0711V13.341C98.0711 10.9961 99.1624 9.55125 101.203 9.55125H102.436V6.75631H101.511C99.9216 6.75631 98.7117 7.84586 98.2372 8.88804H98.0474V7.06422H95.2716V19.4756Z" fill="#19191C"/>
-<path d="M116.329 19.4756H118.512V16.9886H116.353C115.499 16.9886 115.143 16.6096 115.143 15.7333V9.52756H118.654V7.06422H115.143V3.5824H112.486V7.06422H110.161V9.52756H112.32V15.757C112.32 18.3861 113.909 19.4756 116.329 19.4756Z" fill="#19191C"/>
-<path d="M126.022 19.4953C128.608 19.4953 130.886 18.2163 131.692 15.6345L129.13 15.0187C128.679 16.3925 127.375 17.1031 125.999 17.1031C123.958 17.1031 122.606 15.7767 122.582 13.6923H132.001V12.9107C132.001 9.21567 129.7 6.4681 125.904 6.4681C122.558 6.4681 119.688 9.09724 119.688 13.0054C119.688 16.7952 122.226 19.4953 126.022 19.4953ZM122.606 11.6553C122.772 10.1631 124.124 8.90775 125.904 8.90775C127.612 8.90775 129.012 9.97361 129.154 11.6553H122.606Z" fill="#19191C"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M108.916 19.4756H106.116V9.52756H103.934V7.06422H108.916V19.4756Z" fill="#19191C"/>
-<path d="M107.309 5.34169C108.329 5.34169 109.088 4.58374 109.088 3.58893C109.088 2.61781 108.329 1.85986 107.309 1.85986C106.288 1.85986 105.529 2.61781 105.529 3.58893C105.529 4.58374 106.288 5.34169 107.309 5.34169Z" fill="#19191C"/>
-<path d="M24.4429 16.4322V21.9096H10.7519C6.76318 21.9096 3.28044 19.7067 1.4171 16.4322C1.14622 15.9561 0.909137 15.4567 0.710264 14.9383C0.319864 13.9225 0.0744552 12.8325 0 11.6952V10.2143C0.0161646 9.96089 0.0416361 9.70942 0.0749451 9.46095C0.143032 8.95105 0.245898 8.45211 0.381093 7.96711C1.66006 3.36909 5.81877 0 10.7519 0C15.6851 0 19.8433 3.36909 21.1223 7.96711H15.2682C14.3072 6.4683 12.6437 5.4774 10.7519 5.4774C8.86017 5.4774 7.19668 6.4683 6.23562 7.96711C5.9427 8.42274 5.71542 8.92516 5.56651 9.46095C5.43425 9.93599 5.36371 10.4369 5.36371 10.9548C5.36371 12.5248 6.01324 13.94 7.05463 14.9383C8.01961 15.865 9.32061 16.4322 10.7519 16.4322H24.4429Z" fill="#11C573"/>
-<path d="M24.4429 9.46094V14.9383H14.4492C15.4906 13.94 16.1401 12.5248 16.1401 10.9548C16.1401 10.4369 16.0696 9.93598 15.9373 9.46094H24.4429Z" fill="#11C573"/>
-</svg>
diff --git a/static/images/logos/logo-green.svg b/static/images/logos/logo-green.svg
deleted file mode 100644
index 96ed2b3d4f..0000000000
--- a/static/images/logos/logo-green.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M24.4429 16.4322V21.9096H10.7519C6.76318 21.9096 3.28044 19.7067 1.4171 16.4322C1.14622 15.9561 0.909137 15.4567 0.710264 14.9383C0.319864 13.9225 0.0744552 12.8325 0 11.6952V10.2143C0.0161646 9.96089 0.0416361 9.70942 0.0749451 9.46095C0.143032 8.95105 0.245898 8.45211 0.381093 7.96711C1.66006 3.36909 5.81877 0 10.7519 0C15.6851 0 19.8433 3.36909 21.1223 7.96711H15.2682C14.3072 6.4683 12.6437 5.4774 10.7519 5.4774C8.86017 5.4774 7.19668 6.4683 6.23562 7.96711C5.9427 8.42274 5.71542 8.92516 5.56651 9.46095C5.43425 9.93599 5.36371 10.4369 5.36371 10.9548C5.36371 12.5248 6.01324 13.94 7.05463 14.9383C8.01961 15.865 9.32061 16.4322 10.7519 16.4322H24.4429Z"
-    fill="#0FA65F" />
-  <path
-    d="M24.4429 9.46094V14.9383H14.4492C15.4906 13.94 16.1401 12.5248 16.1401 10.9548C16.1401 10.4369 16.0696 9.93598 15.9373 9.46094H24.4429Z"
-    fill="#0FA65F" />
-</svg>

From 96d88d4efdac17fc15756248edef000b2ff9a4df Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Thu, 2 Apr 2026 00:41:34 +0530
Subject: [PATCH 2/2] add mongo sprite

---
 src/lib/components/ui/icon/sprite/sprite.svelte | 8 ++++++++
 src/lib/components/ui/icon/types.ts             | 1 +
 2 files changed, 9 insertions(+)

diff --git a/src/lib/components/ui/icon/sprite/sprite.svelte b/src/lib/components/ui/icon/sprite/sprite.svelte
index 905b80b55f..fd69fc81bd 100644
--- a/src/lib/components/ui/icon/sprite/sprite.svelte
+++ b/src/lib/components/ui/icon/sprite/sprite.svelte
@@ -97,6 +97,14 @@
             fill-rule="evenodd"
         ></path>
     </symbol>
+    <symbol id="mongo" stroke="currentColor" viewBox="0 0 120 258">
+        <path
+            d="M83.009 28.756 C 72.133 15.909,62.767 2.861,60.854 0.151 C 60.653 -0.050,60.350 -0.050,60.149 0.151 C 58.236 2.861,48.870 15.909,37.994 28.756 C -55.359 147.292,52.697 227.287,52.697 227.287 L 53.603 227.889 C 54.409 240.235,56.423 258.000,56.423 258.000 L 60.451 258.000 L 64.479 258.000 C 64.479 258.000,66.493 240.335,67.299 227.889 L 68.205 227.187 C 68.306 227.187,176.362 147.292,83.009 28.756 M60.451 225.480 C 60.451 225.480,55.617 221.365,54.308 219.257 L 54.308 219.057 L 60.149 89.981 C 60.149 89.580,60.753 89.580,60.753 89.981 L 66.594 219.057 L 66.594 219.257 C 65.285 221.365,60.451 225.480,60.451 225.480 Z"
+            fill="currentColor"
+            stroke="none"
+            fill-rule="evenodd"
+        ></path>
+    </symbol>
     <symbol id="divider-vertical" stroke="currentColor" viewBox="0 0 20 20">
         <path
             d="M9.750 3.463 C 9.591 3.536,9.520 3.610,9.451 3.775 C 9.406 3.884,9.400 4.585,9.400 10.009 L 9.400 16.119 9.475 16.268 C 9.696 16.705,10.304 16.705,10.525 16.268 L 10.600 16.119 10.599 10.001 C 10.599 4.136,10.596 3.878,10.537 3.750 C 10.464 3.591,10.390 3.520,10.225 3.451 C 10.064 3.384,9.914 3.388,9.750 3.463 "
diff --git a/src/lib/components/ui/icon/types.ts b/src/lib/components/ui/icon/types.ts
index b23a1e419c..2eebf5e7a2 100644
--- a/src/lib/components/ui/icon/types.ts
+++ b/src/lib/components/ui/icon/types.ts
@@ -11,6 +11,7 @@ export type IconType =
     | 'github'
     | 'ticket'
     | 'sparkle'
+    | 'mongo'
     | 'divider-vertical'
     | 'nuxt'
     | 'chevron-up'