diff --git a/apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts b/apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts
index 844724a5466..337f48b2bbf 100644
--- a/apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts
+++ b/apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts
@@ -89,13 +89,13 @@ export const highlightSelectedNavItem = (id: string) => {
   const navMenuItems = document.querySelectorAll<HTMLAnchorElement>('.function-link-item a')
 
   // find any currently active items and remove them
-  const currentActiveItems = document.querySelectorAll('.function-link-list .text-brand-900')
-  currentActiveItems.forEach((item) => item.classList.remove('text-brand-900'))
+  const currentActiveItems = document.querySelectorAll('.function-link-list .text-brand')
+  currentActiveItems.forEach((item) => item.classList.remove('text-brand'))
 
   // Add active class to the current item
   navMenuItems.forEach((item) => {
     if (item.href.split('/').at(-1) === id) {
-      item.classList.add('text-brand-900')
+      item.classList.add('text-brand')
     }
   })
 }
diff --git a/apps/docs/components/GuidesTableOfContents.tsx b/apps/docs/components/GuidesTableOfContents.tsx
index 9d25121f661..553f3165452 100644
--- a/apps/docs/components/GuidesTableOfContents.tsx
+++ b/apps/docs/components/GuidesTableOfContents.tsx
@@ -46,7 +46,7 @@ const GuidesTableOfContents: FC<Props> = ({ list }) => {
         <li key={`${item.level}-${i}`} className={item.level === 3 ? 'ml-4' : ''}>
           <a
             href={`#${formatSlug(item.link)}`}
-            className="text-scale-1000 hover:text-brand-900 transition-colors"
+            className="text-scale-1000 hover:text-brand transition-colors"
             dangerouslySetInnerHTML={{ __html: formatTOCHeader(removeAnchor(item.text)) }}
           />
         </li>
diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx
index e760c411dc3..657083befd2 100644
--- a/apps/docs/components/HomePageCover.tsx
+++ b/apps/docs/components/HomePageCover.tsx
@@ -28,6 +28,11 @@ const HomePageCover = (props) => {
       icon: '/docs/img/icons/flutter-icon',
       href: '/guides/getting-started/quickstarts/flutter',
     },
+    {
+      tooltip: 'Android Kotlin',
+      icon: '/docs/img/icons/kotlin-icon',
+      href: '/guides/getting-started/quickstarts/kotlin',
+    },
     {
       tooltip: 'SvelteKit',
       icon: '/docs/img/icons/svelte-icon',
@@ -69,7 +74,7 @@ const HomePageCover = (props) => {
         <div className="md:max-w-xs xl:max-w-none">
           <div className="flex items-center gap-3 mb-3">
             <IconBackground>
-              <IconPlay className="text-brand-1100 dark:text-brand-900 w-4" />
+              <IconPlay className="text-brand-600 dark:text-brand w-4" strokeWidth={2} />
             </IconBackground>
             <h3 className="text-2xl m-0">Getting Started</h3>
           </div>
diff --git a/apps/docs/components/LinkCard.tsx b/apps/docs/components/LinkCard.tsx
index e74ac68384a..6e22200bbda 100644
--- a/apps/docs/components/LinkCard.tsx
+++ b/apps/docs/components/LinkCard.tsx
@@ -14,7 +14,7 @@ export default function LinkCard({
 }) {
   return (
     <Link href={link || '#'}>
-      <a className="border-scale-200 hover:border-brand-900 dark:bg-scale-400 m-4 w-full cursor-pointer rounded-md border p-4 shadow-sm hover:shadow-2xl lg:w-2/5">
+      <a className="border-scale-200 hover:border-brand dark:bg-scale-400 m-4 w-full cursor-pointer rounded-md border p-4 shadow-sm hover:shadow-2xl lg:w-2/5">
         {description ? (
           <>
             <h4 className="m-0 mb-4 p-0 text-base font-semibold">{title}</h4>
diff --git a/apps/docs/components/Navigation/Footer.tsx b/apps/docs/components/Navigation/Footer.tsx
index 32f1b4f73db..6550b0f24ce 100644
--- a/apps/docs/components/Navigation/Footer.tsx
+++ b/apps/docs/components/Navigation/Footer.tsx
@@ -29,11 +29,7 @@ const Footer = () => (
             {Icon && <Icon width={16} height={16} />}
             <p>{text}</p>
             <Link href={url} passHref>
-              <a
-                className="text-brand-900 hover:underline"
-                target="_blank"
-                rel="noreferrer noopener"
-              >
+              <a className="text-brand hover:underline" target="_blank" rel="noreferrer noopener">
                 {ctaLabel}
               </a>
             </Link>
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 765aef663dc..a151d6639cf 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -669,10 +669,23 @@ export const database: NavMenuConstant = {
           name: 'RUM: inverted index for full-text search',
           url: '/guides/database/extensions/rum',
         },
+      ],
+    },
+    {
+      name: 'Foreign Data Wrappers',
+      url: undefined,
+      items: [
+        { name: 'Overview', url: '/guides/database/extensions/wrappers/overview' },
+        { name: 'Connecting to Airtable', url: '/guides/database/extensions/wrappers/airtable' },
+        { name: 'Connecting to AWS S3', url: '/guides/database/extensions/wrappers/s3' },
+        { name: 'Connecting to BigQuery', url: '/guides/database/extensions/wrappers/bigquery' },
         {
-          name: 'wrappers: 3rd Party Integrations',
-          url: '/guides/database/extensions/wrappers',
+          name: 'Connecting to ClickHouse',
+          url: '/guides/database/extensions/wrappers/clickhouse',
         },
+        { name: 'Connecting to Firebase', url: '/guides/database/extensions/wrappers/firebase' },
+        { name: 'Connecting to Logflare', url: '/guides/database/extensions/wrappers/logflare' },
+        { name: 'Connecting to Stripe', url: '/guides/database/extensions/wrappers/stripe' },
       ],
     },
     {
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
index deb8caf1f17..8c88d731560 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
@@ -23,7 +23,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
     return (
       <li key={id} className="function-link-item text-scale-1000 leading-3">
         <Link href={`#${id}`} passHref>
-          <a className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand-900 flex gap-3">
+          <a className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand flex gap-3">
             {icon && <img className="w-3" src={`${router.basePath}${icon}`} />}
             {title}
           </a>
@@ -100,7 +100,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
           <a
             className={[
               'flex items-center gap-1 text-xs group mb-3',
-              'text-base transition-all duration-200 text-brand-900 hover:text-brand-1200 hover:cursor-pointer ',
+              'text-base transition-all duration-200 text-brand hover:text-brand-600 hover:cursor-pointer ',
             ].join(' ')}
           >
             <div className="relative w-2">
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
index f264a4112b7..0d390a0e6af 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
@@ -19,7 +19,7 @@ const HeaderLink = React.memo(function HeaderLink(props: {
       className={[
         ' ',
         !props.title && 'capitalize',
-        props.url === router.pathname ? 'text-brand-900' : 'hover:text-brand-900 text-scale-1200',
+        props.url === router.pathname ? 'text-brand' : 'hover:text-brand text-scale-1200',
       ].join(' ')}
     >
       {props.title ?? props.id}
@@ -68,7 +68,7 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
               'flex items-center gap-2',
               'cursor-pointer transition text-sm',
               activeItem
-                ? 'text-brand-900 font-medium'
+                ? 'text-brand font-medium'
                 : 'hover:text-scale-1200 dark:hover:text-scale-1100 text-scale-1000',
             ].join(' ')}
             parent={props.subItem.parent}
@@ -97,8 +97,8 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
                       className={[
                         'cursor-pointer transition text-sm',
                         subSubItem.url === router.pathname
-                          ? 'text-brand-900'
-                          : 'hover:text-brand-900 text-scale-1000',
+                          ? 'text-brand'
+                          : 'hover:text-brand text-scale-1000',
                       ].join(' ')}
                     >
                       {subSubItem.name}
@@ -124,7 +124,7 @@ const ContentLink = React.memo(function ContentLink(props: any) {
           className={[
             'cursor-pointer transition text-sm',
             props.url === router.pathname
-              ? 'text-brand-900'
+              ? 'text-brand'
               : 'hover:text-scale-1200 dark:hover:text-scale-1100 text-scale-1000',
           ].join(' ')}
         >
@@ -152,7 +152,7 @@ const Content = (props) => {
         <a
           className={[
             'flex items-center gap-1 text-xs group mb-3',
-            'text-base transition-all duration-200 text-brand-900 hover:text-brand-1200 hover:cursor-pointer ',
+            'text-base transition-all duration-200 text-brand hover:text-brand-600 hover:cursor-pointer ',
           ].join(' ')}
         >
           <div className="relative w-2">
@@ -166,7 +166,7 @@ const Content = (props) => {
 
       <Link href={menu.url ?? ''} passHref>
         <a>
-          <div className="flex items-center gap-3 my-3 text-brand-900">
+          <div className="flex items-center gap-3 my-3 text-brand">
             <HomeMenuIconPicker icon={menu.icon} />
             <HeaderLink title={menu.title} url={menu.url} id={id} />
           </div>
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
index a280bf07da6..8c2007c78b3 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
@@ -16,7 +16,7 @@ import { deepFilterSections } from './NavigationMenu.utils'
 
 const HeaderLink = React.memo(function HeaderLink(props: any) {
   return (
-    <span className={['text-base text-brand-1200 ', !props.title && 'capitalize'].join(' ')}>
+    <span className={['text-base text-brand-600 ', !props.title && 'capitalize'].join(' ')}>
       {props.title ?? props.id}
     </span>
   )
@@ -64,7 +64,7 @@ const FunctionLink = React.memo(function FunctionLink({
         className={cn(
           'cursor-pointer transition text-sm hover:text-scale-1200 gap-3 relative',
           isParent ? 'flex justify-between' : 'leading-3',
-          active ? 'text-brand-900' : 'text-scale-1000'
+          active ? 'text-brand' : 'text-scale-1000'
         )}
       >
         {icon && <Image width={16} height={16} alt={icon} src={`${router.basePath}${icon}`} />}
@@ -72,7 +72,7 @@ const FunctionLink = React.memo(function FunctionLink({
         {active && !isSubItem && (
           <div
             aria-hidden="true"
-            className="absolute -left-[13px] top-0 bottom-0 w-[1px] bg-brand-1000"
+            className="absolute -left-[13px] top-0 bottom-0 w-[1px] bg-brand-600"
           ></div>
         )}
         {isParent && (
@@ -180,7 +180,7 @@ const NavigationMenuRefListItems = ({
         <a
           className={[
             'flex items-center gap-1 text-xs group mb-3',
-            'text-base transition-all duration-200 text-scale-1100 hover:text-brand-1200 hover:cursor-pointer ',
+            'text-base transition-all duration-200 text-scale-1100 hover:text-brand-600 hover:cursor-pointer ',
           ].join(' ')}
         >
           <div className="relative w-2">
diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
index bd080d8e7c9..bba13421321 100644
--- a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
@@ -56,7 +56,7 @@ const TopNavBarRef: FC = () => {
   }
 
   return (
-    <nav className="h-[60px] border-b backdrop-blur backdrop-filter bg-white-1200 dark:bg-scale-200/90">
+    <nav className="h-[60px] border-b backdrop-blur backdrop-filter bg bg-opacity-75">
       <div className="px-5 max-w-7xl mx-auto flex gap-3 justify-between items-center h-full">
         <div className={['lg:hidden'].join(' ')}>
           <Link href="/">
@@ -68,7 +68,7 @@ const TopNavBarRef: FC = () => {
                 height={24}
                 alt="Supabase Logo"
               />
-              <span className="font-mono text-sm font-medium text-brand-900">DOCS</span>
+              <span className="font-mono text-sm font-medium text-brand">DOCS</span>
             </a>
           </Link>
           {/* {router.asPath.includes('/reference/') && <RefSwitcher />} */}
@@ -82,21 +82,22 @@ const TopNavBarRef: FC = () => {
               group
               items-center
               justify-between
-              bg-scaleA-200
+              bg-surface-100
+              bg-opacity-75
+              hover:bg-surface-200
+              hover:bg-opacity-100
               border
               transition
-              hover:border-scale-600
-              hover:bg-scaleA-300
-              border-scale-500 pl-1.5 md:pl-3 pr-1.5 w-full h-[32px] rounded"
+              border-scale-500 pl-1.5 md:pl-3 pr-1.5 w-full h-[32px] rounded
+              text-lighter
+              "
             >
               <div className="flex items-center space-x-2">
-                <IconSearch className="text-scale-1100" size={18} strokeWidth={2} />
-                <p className="hidden md:flex text-scale-1100 text-sm group-hover:text-scale-1200 transition">
-                  Search docs...
-                </p>
+                <IconSearch className="" size={18} strokeWidth={2} />
+                <p className="hidden md:flex text-sm">Search docs...</p>
               </div>
               <div className="hidden md:flex items-center space-x-1">
-                <div className="text-scale-1200 md:flex items-center justify-center h-5 w-10 border rounded bg-scale-500 border-scale-700 gap-1">
+                <div className="md:flex items-center justify-center h-5 w-10 border rounded bg-surface-300 gap-1">
                   <IconCommand size={12} strokeWidth={1.5} />
                   <span className="text-[12px]">K</span>
                 </div>
diff --git a/apps/docs/components/Navigation/SideBar.tsx b/apps/docs/components/Navigation/SideBar.tsx
index d679b7c7414..e76fa4954bf 100644
--- a/apps/docs/components/Navigation/SideBar.tsx
+++ b/apps/docs/components/Navigation/SideBar.tsx
@@ -83,7 +83,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                     'py-1.5 px-5 rounded text-sm transition',
                     `${
                       item.url === asPath
-                        ? 'bg-scale-200 text-brand-900'
+                        ? 'bg-scale-200 text-brand'
                         : 'text-scale-1100 hover:text-scale-1200'
                     }`,
                   ].join(' ')}
@@ -109,7 +109,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                   size={14}
                   strokeWidth={2}
                 />
-                <span className="text-scale-1200 text-sm group-hover:text-brand-900 transition">
+                <span className="text-scale-1200 text-sm group-hover:text-brand transition">
                   {group.label}
                 </span>
               </Accordion.Trigger>
@@ -124,7 +124,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                               'py-1.5 px-5 rounded text-sm transition',
                               `${
                                 section.url === asPath
-                                  ? 'bg-scale-200 text-brand-900'
+                                  ? 'bg-scale-200 text-brand'
                                   : 'text-scale-1100 hover:text-scale-1200'
                               }`,
                             ].join(' ')}
@@ -150,7 +150,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                               size={14}
                               strokeWidth={2}
                             />
-                            <span className="text-scale-1200 text-sm group-hover:text-brand-900 transition">
+                            <span className="text-scale-1200 text-sm group-hover:text-brand transition">
                               {section.name}
                             </span>
                           </Accordion.Trigger>
@@ -164,7 +164,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                                       'py-1.5 ml-4 px-5 rounded text-sm transition',
                                       `${
                                         item.url === asPath
-                                          ? 'bg-scale-200 text-brand-900'
+                                          ? 'bg-scale-200 text-brand'
                                           : 'text-scale-1100 hover:text-scale-1200'
                                       }`,
                                     ].join(' ')}
diff --git a/apps/docs/components/Pagination.tsx b/apps/docs/components/Pagination.tsx
index 97221d63963..ed6b6e510e5 100644
--- a/apps/docs/components/Pagination.tsx
+++ b/apps/docs/components/Pagination.tsx
@@ -27,7 +27,7 @@ const Pagination = ({ currentPage, totalCount }: { currentPage: number; totalCou
             <Link href={`/discussions?page=${page}`}>
               <a
                 className={`border-scale-600 inline-flex h-8 w-8 items-center justify-center rounded border ${
-                  currentPage === page ? 'bg-brand-900' : 'bg-scale-300'
+                  currentPage === page ? 'bg-brand' : 'bg-scale-300'
                 }`}
               >
                 {page}
diff --git a/apps/docs/components/TableOfContents.tsx b/apps/docs/components/TableOfContents.tsx
index 8be2a831646..297ade47499 100644
--- a/apps/docs/components/TableOfContents.tsx
+++ b/apps/docs/components/TableOfContents.tsx
@@ -69,7 +69,7 @@ const TableOfContents: FC<Props> = ({ toc, video }) => {
               <li key={i} id={item.lvl} style={{ marginLeft: `${(item.lvl - 2) * 1}rem` }}>
                 <a
                   href={`#${formatSlug(item.slug)}`}
-                  className="text-scale-1000 hover:text-brand-900 transition-colors"
+                  className="text-scale-1000 hover:text-brand transition-colors"
                   dangerouslySetInnerHTML={{ __html: formatTOCHeader(removeAnchor(item.content)) }}
                 />
               </li>
diff --git a/apps/docs/components/reference/CLICommandSection.tsx b/apps/docs/components/reference/CLICommandSection.tsx
index 400b3fa7287..792297211de 100644
--- a/apps/docs/components/reference/CLICommandSection.tsx
+++ b/apps/docs/components/reference/CLICommandSection.tsx
@@ -96,7 +96,7 @@ const CliCommandSection = (props) => {
                       </div>
                       <a
                         href={`#${subcommand}`}
-                        className="transition text-scale-1100 hover:text-brand-900"
+                        className="transition text-scale-1100 hover:text-brand"
                       >
                         $ {subcommand.replace(/-/g, ' ')}
                       </a>
diff --git a/apps/docs/components/reference/OldVersionAlert.tsx b/apps/docs/components/reference/OldVersionAlert.tsx
index a9c04d535d8..4a5a601966a 100644
--- a/apps/docs/components/reference/OldVersionAlert.tsx
+++ b/apps/docs/components/reference/OldVersionAlert.tsx
@@ -27,7 +27,7 @@ const OldVersionAlert = ({ sections }: OldVersionAlertProps) => {
         You&apos;re viewing an older version of this library.
         <br />
         <Link href={latestVersionUrl}>
-          <a className="underline decoration-brand-700 underline-offset-4 decoration-1">
+          <a className="underline decoration-brand-400 underline-offset-4 decoration-1">
             Switch to the latest
           </a>
         </Link>
diff --git a/apps/docs/components/reference/RefFunctionSection.tsx b/apps/docs/components/reference/RefFunctionSection.tsx
index 2be99d3e0d7..88c06beda04 100644
--- a/apps/docs/components/reference/RefFunctionSection.tsx
+++ b/apps/docs/components/reference/RefFunctionSection.tsx
@@ -174,7 +174,7 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
                                       <div className="bg-scale-300 border rounded prose max-w-none">
                                         <div className="bg-scale-200 px-5 py-2">
                                           <div className="flex gap-2 items-center">
-                                            <div className="text-brand-900">
+                                            <div className="text-brand">
                                               <IconDatabase size={16} />
                                             </div>
                                             <h5 className="text-xs text-scale-1200">
diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index 59bead2a64d..94cd0ae0631 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -228,7 +228,7 @@ const HeaderLogo = memo(function HeaderLogo() {
           height={24}
           alt="Supabase Logo"
         />
-        <span className="font-mono text-sm font-medium text-brand-900">DOCS</span>
+        <span className="font-mono text-sm font-medium text-brand">DOCS</span>
       </a>
     </Link>
   )
diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx
index 1363448853c..130e76e2510 100644
--- a/apps/docs/layouts/guides/index.tsx
+++ b/apps/docs/layouts/guides/index.tsx
@@ -115,7 +115,7 @@ const Layout: FC<Props> = (props) => {
             ].join(' ')}
           >
             {props.meta.breadcrumb && (
-              <p className="text-brand-900 tracking-wider mb-3">{props.meta.breadcrumb}</p>
+              <p className="text-brand tracking-wider mb-3">{props.meta.breadcrumb}</p>
             )}
             <article
               ref={articleRef}
diff --git a/apps/docs/layouts/ref/RefSubLayout.tsx b/apps/docs/layouts/ref/RefSubLayout.tsx
index dc700bc4858..29324c13fbe 100644
--- a/apps/docs/layouts/ref/RefSubLayout.tsx
+++ b/apps/docs/layouts/ref/RefSubLayout.tsx
@@ -107,7 +107,7 @@ const StickyHeader: FC<StickyHeader> = ({ icon, ...props }) => {
   return (
     <div className={['flex items-center gap-3 not-prose', icon && 'mb-8'].join(' ')}>
       {icon && (
-        <div className="w-8 h-8 bg-brand-500 rounded flex items-center justify-center">
+        <div className="w-8 h-8 bg-brand-300 rounded flex items-center justify-center">
           <Image width={16} height={16} alt={icon} src={`${icon}.svg`} />
         </div>
       )}
diff --git a/apps/docs/layouts/tutorials/TutorialLayout.tsx b/apps/docs/layouts/tutorials/TutorialLayout.tsx
index 47557e96b1b..65ded8cf428 100644
--- a/apps/docs/layouts/tutorials/TutorialLayout.tsx
+++ b/apps/docs/layouts/tutorials/TutorialLayout.tsx
@@ -61,10 +61,10 @@ const Layout: FC<Props> = (props: Props) => {
         ].join(' ')}
       >
         <div>
-          <p className="text-brand-900 tracking-wider">Tutorials</p>
+          <p className="text-brand tracking-wider">Tutorials</p>
           <article className={['prose dark:prose-dark ', 'max-w-none'].join(' ')}>
             <h1>{props.meta.title}</h1>
-            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand-900 my-16"></div>
+            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-300 to-brand my-16"></div>
 
             <MDXProvider components={components} children={props.children} />
           </article>
diff --git a/apps/docs/lib/mdx/plugins/remarkTabs.ts b/apps/docs/lib/mdx/plugins/remarkTabs.ts
new file mode 100644
index 00000000000..3562c2a6eca
--- /dev/null
+++ b/apps/docs/lib/mdx/plugins/remarkTabs.ts
@@ -0,0 +1,138 @@
+import { Content, Paragraph, Parent } from 'mdast'
+import { MdxJsxFlowElement } from 'mdast-util-mdx'
+import { Node } from 'unist'
+import { visit } from 'unist-util-visit'
+
+/**
+ * Transforms PyMdown Tabs to Supabase Tabs.
+ *
+ * https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/
+ */
+const remarkPyMdownTabs = function () {
+  return function transformer(root: Parent) {
+    visit(root, 'paragraph', (node: Paragraph, nodeIndex: number, parent: Parent) => {
+      for (let i = 0; i < node.children.length; i++) {
+        const child = node.children[i]
+        if (child.type !== 'text') {
+          continue
+        }
+
+        // Look for 3 '=', followed by an optionally quoted title,
+        // followed by optional newlines of text
+        const match = child.value.match(/^\n*=== ("?)(.+)\1\n?((?:.|\n)*)/)
+
+        if (!match) {
+          continue
+        }
+
+        // Extract the tab title along with the remaining text
+        const [, , title, value] = match
+
+        // Rewrite the node's value to remove the tab syntax
+        child.value = value
+
+        // Extract sibling nodes that should be linked to this tab
+        const siblingsToNest = extractLinkedSiblings(parent, node, nodeIndex)
+
+        const children: any[] = [...node.children.slice(i), ...siblingsToNest]
+
+        const tabPanelElement: MdxJsxFlowElement = {
+          type: 'mdxJsxFlowElement',
+          name: 'TabPanel',
+          attributes: [
+            {
+              type: 'mdxJsxAttribute',
+              name: 'id',
+              value: title,
+            },
+            {
+              type: 'mdxJsxAttribute',
+              name: 'label',
+              value: title,
+            },
+          ],
+          children,
+        }
+
+        let nodesAdded = 0
+        const previousNode = parent.children[nodeIndex - 1]
+
+        if (previousNode?.type === 'mdxJsxFlowElement' && previousNode.name === 'Tabs') {
+          // Add TabPanel to existing Tabs component
+          previousNode.children.push(tabPanelElement)
+
+          // Remove this node
+          parent.children.splice(nodeIndex, 1)
+          nodesAdded--
+        } else {
+          // Create new Tabs components and add TabPanel
+          const tabsElement: MdxJsxFlowElement = {
+            type: 'mdxJsxFlowElement',
+            name: 'Tabs',
+            attributes: [
+              {
+                type: 'mdxJsxAttribute',
+                name: 'scrollable',
+              },
+              {
+                type: 'mdxJsxAttribute',
+                name: 'size',
+                value: 'small',
+              },
+              {
+                type: 'mdxJsxAttribute',
+                name: 'type',
+                value: 'underlined',
+              },
+            ],
+            children: [tabPanelElement],
+          }
+
+          // Overwrite this paragraph node with Tabs component
+          parent.children.splice(nodeIndex, 1, tabsElement)
+        }
+
+        // If this wasn't the first child of the paragraph, create
+        // a new paragraph before this with the previous text children
+        if (i > 0) {
+          const previousChildren = node.children.slice(0, i)
+          const paragraph: Paragraph = {
+            type: 'paragraph',
+            children: previousChildren,
+          }
+          parent.children.splice(nodeIndex, 0, paragraph)
+
+          nodesAdded++
+        }
+
+        // Return the correct index for the next visit, since
+        // we may have added or removed an element in the array
+        return nodeIndex + nodesAdded
+      }
+    })
+  }
+}
+
+/**
+ * Identifies sibling nodes that should be linked to this admonition
+ * based on their indent level (ie. 4 spaces).
+ *
+ * Iterates through proceeding siblings until one is found that is
+ * not indented relative to the original node.
+ *
+ * Splices the discovered siblings out of the original parent and returns them.
+ */
+function extractLinkedSiblings(parent: Parent, node: Node, index: number, indentAmount = 4) {
+  const { column } = node.position.start
+
+  let nextSibling: Content
+  let i = index
+
+  do {
+    nextSibling = parent.children[++i]
+  } while (nextSibling?.position && nextSibling.position.start.column === column + indentAmount)
+
+  return parent.children.splice(index + 1, i - index - 1)
+}
+
+export default remarkPyMdownTabs
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 5d79d59dddd..e3710ea9ba6 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -97,6 +97,7 @@
     "remark-admonitions": "^1.2.1",
     "remark-gfm": "^3.0.1",
     "remark-slug": "^7.0.1",
+    "remark-emoji": "^3.1.2",
     "shiki": "^0.11.1",
     "sse.js": "^0.6.1",
     "ui": "*",
diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
index cbb1ae76649..0aaafb1f237 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
@@ -162,6 +162,8 @@ import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 import { cookies } from 'next/headers'
 import { NextResponse } from 'next/server'
 
+export const dynamic = 'force-dynamic'
+
 export async function GET(request) {
   const requestUrl = new URL(request.url)
   const code = requestUrl.searchParams.get('code')
@@ -190,6 +192,8 @@ import { NextResponse } from 'next/server'
 import type { NextRequest } from 'next/server'
 import type { Database } from '@/lib/database.types'
 
+export const dynamic = 'force-dynamic'
+
 export async function GET(request: NextRequest) {
   const requestUrl = new URL(request.url)
   const code = requestUrl.searchParams.get('code')
@@ -369,13 +373,9 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
 
 ### Server-side
 
-The combination of [Server Components](https://nextjs.org/docs/getting-started/react-essentials#server-components) and [Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions) can be used to trigger the authentication process from form submissions.
+The combination of [Server Components](https://nextjs.org/docs/getting-started/react-essentials#server-components) and [Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/route-handlers) can be used to trigger the authentication process from form submissions.
 
-<Admonition type="note">
-
-Next.js [Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions) are currently in Alpha and may change. For now we recommend [triggering the authentication flow client-side](/docs/guides/auth/auth-helpers/nextjs#client-side) for production applications.
-
-</Admonition>
+#### Sign Up Route
 
 <Tabs
   scrollable
@@ -385,57 +385,248 @@ Next.js [Server Actions](https://nextjs.org/docs/app/building-your-application/d
 >
 <TabPanel id="js" label="JavaScript">
 
-```jsx app/login.js
-import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
-import { revalidatePath } from 'next/cache'
+```jsx app/auth/sign-up.js
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
 
-export default async function Login() {
-  const handleSignUp = async (formData) => {
-    'use server'
-    const email = formData.get('email')
-    const password = formData.get('password')
+export const dynamic = 'force-dynamic'
 
-    const supabase = createServerActionClient({ cookies })
-    await supabase.auth.signUp({
-      email,
-      password,
-      options: {
-        emailRedirectTo: 'http://localhost:3000/auth/callback',
-      },
-    })
+export async function POST(request) {
+  const requestUrl = new URL(request.url)
+  const formData = await request.formData()
+  const email = formData.get('email')
+  const password = formData.get('password')
+  const supabase = createRouteHandlerClient({ cookies })
 
-    revalidatePath('/')
-  }
+  await supabase.auth.signUp({
+    email,
+    password,
+    options: {
+      emailRedirectTo: `${requestUrl.origin}/auth/callback`,
+    },
+  })
 
-  const handleSignIn = async (formData) => {
-    'use server'
-    const email = formData.get('email')
-    const password = formData.get('password')
+  return NextResponse.redirect(requestUrl.origin, {
+    status: 301,
+  })
+}
+```
 
-    const supabase = createServerActionClient({ cookies })
-    await supabase.auth.signInWithPassword({
-      email,
-      password,
-    })
+</TabPanel>
 
-    revalidatePath('/')
-  }
+<TabPanel id="ts" label="TypeScript">
 
-  const handleSignOut = async () => {
-    'use server'
-    const supabase = createServerActionClient({ cookies })
-    await supabase.auth.signOut()
-    revalidatePath('/')
-  }
+```tsx app/auth/sign-up.ts
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
 
+import type { Database } from '@/lib/database.types'
+
+export const dynamic = 'force-dynamic'
+
+export async function POST(request: Request) {
+  const requestUrl = new URL(request.url)
+  const formData = await request.formData()
+  const email = String(formData.get('email'))
+  const password = String(formData.get('password'))
+  const supabase = createRouteHandlerClient<Database>({ cookies })
+
+  await supabase.auth.signUp({
+    email,
+    password,
+    options: {
+      emailRedirectTo: `${requestUrl.origin}/auth/callback`,
+    },
+  })
+
+  return NextResponse.redirect(requestUrl.origin, {
+    status: 301,
+  })
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createRouteHandlerClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
+<Admonition type="note">
+
+Returning a `301` status redirects from a POST to a GET route
+
+</Admonition>
+
+#### Login Route
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/auth/login.js
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+export const dynamic = 'force-dynamic'
+
+export async function POST(request) {
+  const requestUrl = new URL(request.url)
+  const formData = await request.formData()
+  const email = formData.get('email')
+  const password = formData.get('password')
+  const supabase = createRouteHandlerClient({ cookies })
+
+  await supabase.auth.signInWithPassword({
+    email,
+    password,
+  })
+
+  return NextResponse.redirect(requestUrl.origin, {
+    status: 301,
+  })
+}
+```
+
+</TabPanel>
+
+<TabPanel id="ts" label="TypeScript">
+
+```tsx app/auth/login.ts
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+import type { Database } from '@/lib/database.types'
+
+export const dynamic = 'force-dynamic'
+
+export async function POST(request: Request) {
+  const requestUrl = new URL(request.url)
+  const formData = await request.formData()
+  const email = String(formData.get('email'))
+  const password = String(formData.get('password'))
+  const supabase = createRouteHandlerClient<Database>({ cookies })
+
+  await supabase.auth.signInWithPassword({
+    email,
+    password,
+  })
+
+  return NextResponse.redirect(requestUrl.origin, {
+    status: 301,
+  })
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createRouteHandlerClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
+<Admonition type="note">
+
+Returning a `301` status redirects from a POST to a GET route
+
+</Admonition>
+
+#### Logout Route
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/auth/logout.js
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+export const dynamic = 'force-dynamic'
+
+export async function POST(request) {
+  const requestUrl = new URL(request.url)
+  const supabase = createRouteHandlerClient({ cookies })
+
+  await supabase.auth.signOut()
+
+  return NextResponse.redirect(`${requestUrl.origin}/login`, {
+    status: 301,
+  })
+}
+```
+
+</TabPanel>
+
+<TabPanel id="ts" label="TypeScript">
+
+```tsx app/auth/logout.ts
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+import type { Database } from '@/lib/database.types'
+
+export const dynamic = 'force-dynamic'
+
+export async function POST(request: Request) {
+  const requestUrl = new URL(request.url)
+  const supabase = createRouteHandlerClient<Database>({ cookies })
+
+  await supabase.auth.signOut()
+
+  return NextResponse.redirect(`${requestUrl.origin}/login`, {
+    status: 301,
+  })
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createRouteHandlerClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
+#### Login Page
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/login.jsx
+export default function Login() {
   return (
-    <form action={handleSignUp}>
+    <form action="/auth/login" method="post">
+      <label htmlFor="email">Email</label>
       <input name="email" />
+      <label htmlFor="password">Password</label>
       <input type="password" name="password" />
-      <button>Sign up</button>
-      <button formAction={handleSignIn}>Sign in</button>
-      <button formAction={handleSignOut}>Sign out</button>
+      <button>Sign In</button>
+      <button formAction="/auth/sign-up">Sign Up</button>
+      <button formAction="/auth/logout">Sign Out</button>
     </form>
   )
 }
@@ -445,70 +636,21 @@ export default async function Login() {
 
 <TabPanel id="ts" label="TypeScript">
 
-```tsx app/login.ts
-import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
-import { revalidatePath } from 'next/cache'
-import { cookies } from 'next/headers'
-
-import type { Database } from '@/lib/database.types'
-
-export default async function Login() {
-  const handleSignUp = async (formData: FormData) => {
-    'use server'
-    const email = String(formData.get('email'))
-    const password = String(formData.get('password'))
-
-    const supabase = createServerActionClient<Database>({ cookies })
-    await supabase.auth.signUp({
-      email,
-      password,
-      options: {
-        emailRedirectTo: 'http://localhost:3000/auth/callback',
-      },
-    })
-
-    revalidatePath('/')
-  }
-
-  const handleSignIn = async (formData: FormData) => {
-    'use server'
-    const email = String(formData.get('email'))
-    const password = String(formData.get('password'))
-
-    const supabase = createServerActionClient<Database>({ cookies })
-    await supabase.auth.signInWithPassword({
-      email,
-      password,
-    })
-
-    revalidatePath('/')
-  }
-
-  const handleSignOut = async () => {
-    'use server'
-    const supabase = createServerActionClient<Database>({ cookies })
-    await supabase.auth.signOut()
-    revalidatePath('/')
-  }
-
+```tsx app/login.tsx
+export default function Login() {
   return (
-    <form action={handleSignUp}>
+    <form action="/auth/login" method="post">
+      <label htmlFor="email">Email</label>
       <input name="email" />
+      <label htmlFor="password">Password</label>
       <input type="password" name="password" />
-      <button>Sign up</button>
-      <button formAction={handleSignIn}>Sign in</button>
-      <button formAction={handleSignOut}>Sign out</button>
+      <button>Sign In</button>
+      <button formAction="/auth/sign-up">Sign Up</button>
     </form>
   )
 }
 ```
 
-<Admonition type="note">
-
-TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createServerActionClient` to add type support to the Supabase client.
-
-</Admonition>
-
 </TabPanel>
 </Tabs>
 
@@ -551,7 +693,7 @@ This allows for the Supabase client to be easily instantiated in the correct con
 import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
 import { useEffect, useState } from 'react'
 
-export default function Home() {
+export default function Page() {
   const [todos, setTodos] = useState()
   const supabase = createClientComponentClient()
 
@@ -582,7 +724,7 @@ import type { Database } from '@/lib/database.types'
 
 type Todo = Database['public']['Tables']['todos']['Row']
 
-export default function Home() {
+export default function Page() {
   const [todos, setTodos] = useState<Todo[] | null>(null)
   const supabase = createClientComponentClient<Database>()
 
@@ -653,7 +795,9 @@ In order to use Supabase in Server Components, you need to have implemented the
 import { cookies } from 'next/headers'
 import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
 
-export default async function Home() {
+export const dynamic = 'force-dynamic'
+
+export default async function Page() {
   const supabase = createServerComponentClient({ cookies })
   const { data } = await supabase.from('todos').select()
   return <pre>{JSON.stringify(data, null, 2)}</pre>
@@ -670,6 +814,8 @@ import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
 
 import type { Database } from '@/lib/database.types'
 
+export const dynamic = 'force-dynamic'
+
 export default async function ServerComponent() {
   const supabase = createServerComponentClient<Database>({ cookies })
   const { data } = await supabase.from('todos').select()
@@ -724,6 +870,8 @@ import { cookies } from 'next/headers'
 import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
 import { revalidatePath } from 'next/cache'
 
+export const dynamic = 'force-dynamic'
+
 export default async function NewTodo() {
   const addTodo = async (formData) => {
     'use server'
@@ -753,6 +901,8 @@ import { revalidatePath } from 'next/cache'
 
 import type { Database } from '@/lib/database.types'
 
+export const dynamic = 'force-dynamic'
+
 export default async function NewTodo() {
   const addTodo = async (formData: FormData) => {
     'use server'
@@ -801,11 +951,13 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
 >
 <TabPanel id="js" label="JavaScript">
 
-```jsx app/api/todos/route.jsx
+```jsx app/api/todos/route.js
 import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 import { NextResponse } from 'next/server'
 import { cookies } from 'next/headers'
 
+export const dynamic = 'force-dynamic'
+
 export async function POST(request) {
   const { title } = await request.json()
   const supabase = createRouteHandlerClient({ cookies })
@@ -818,13 +970,15 @@ export async function POST(request) {
 
 <TabPanel id="ts" label="TypeScript">
 
-```tsx app/api/todos/route.tsx
+```tsx app/api/todos/route.ts
 import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 import { NextResponse } from 'next/server'
 import { cookies } from 'next/headers'
 
 import type { Database } from '@/lib/database.types'
 
+export const dynamic = 'force-dynamic'
+
 export async function POST(request: Request) {
   const { title } = await request.json()
   const supabase = createRouteHandlerClient<Database>({ cookies })
@@ -846,6 +1000,258 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
 
 See [refreshing session example](/docs/guides/auth/auth-helpers/nextjs#managing-session-with-middleware) above.
 
+### Edge Runtime
+
+The Next.js Edge Runtime allows you to host Server Components and Route Handlers from Edge nodes, serving the routes as close as possible to your user's location.
+
+A route can be configured to use the Edge Runtime by exporting a `runtime` variable set to `edge`. Additionally, the `cookies()` function must be called from the Edge route, before creating a Supabase Client.
+
+#### Server Components
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/page.jsx
+import { cookies } from 'next/headers'
+import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
+
+export const runtime = 'edge'
+export const dynamic = 'force-dynamic'
+
+export default async function Page() {
+  const cookieStore = cookies()
+
+  const supabase = createServerComponentClient({
+    cookies: () => cookieStore,
+  })
+
+  const { data } = await supabase.from('todos').select()
+  return <pre>{JSON.stringify(data, null, 2)}</pre>
+}
+```
+
+</TabPanel>
+
+<TabPanel id="ts" label="TypeScript">
+
+```tsx app/page.tsx
+import { cookies } from 'next/headers'
+import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
+
+import type { Database } from '@/lib/database.types'
+
+export const runtime = 'edge'
+export const dynamic = 'force-dynamic'
+
+export default async function Page() {
+  const cookieStore = cookies()
+
+  const supabase = createServerComponentClient<Database>({
+    cookies: () => cookieStore,
+  })
+
+  const { data } = await supabase.from('todos').select()
+  return <pre>{JSON.stringify(data, null, 2)}</pre>
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createServerComponentClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
+#### Route Handlers
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/api/todos/route.js
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+export const runtime = 'edge'
+export const dynamic = 'force-dynamic'
+
+export async function POST(request) {
+  const { title } = await request.json()
+  const cookieStore = cookies()
+
+  const supabase = createRouteHandlerClient({
+    cookies: () => cookieStore,
+  })
+
+  const { data } = await supabase.from('todos').insert({ title }).select()
+  return NextResponse.json(data)
+}
+```
+
+</TabPanel>
+
+<TabPanel id="ts" label="TypeScript">
+
+```tsx app/api/todos/route.ts
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+import type { Database } from '@/lib/database.types'
+
+export const runtime = 'edge'
+export const dynamic = 'force-dynamic'
+
+export async function POST(request: Request) {
+  const { title } = await request.json()
+  const cookieStore = cookies()
+
+  const supabase = createRouteHandlerClient<Database>({
+    cookies: () => cookieStore,
+  })
+
+  const { data } = await supabase.from('todos').insert({ title }).select()
+  return NextResponse.json(data)
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createRouteHandlerClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
+### Static Routes
+
+Server Components and Route Handlers are static by default - data is fetched once at build time and the value is cached. Since the request to Supabase now happens at build time, there is no user, session or cookie to pass along with the request to Supabase. Therefore, the `createClient` function from `supabase-js` can be used to fetch data for static routes.
+
+#### Server Components
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/page.jsx
+import { createClient } from '@supabase/supabase-js'
+
+export default async function Page() {
+  const supabase = createClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+  )
+
+  const { data } = await supabase.from('todos').select()
+  return <pre>{JSON.stringify(data, null, 2)}</pre>
+}
+```
+
+</TabPanel>
+
+<TabPanel id="ts" label="TypeScript">
+
+```tsx app/page.tsx
+import { createClient } from '@supabase/supabase-js'
+
+import type { Database } from '@/lib/database.types'
+
+export default async function Page() {
+  const supabase = createClient<Database>(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  )
+
+  const { data } = await supabase.from('todos').select()
+  return <pre>{JSON.stringify(data, null, 2)}</pre>
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
+#### Route Handlers
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/api/todos/route.js
+import { createClient } from '@supabase/supabase-js'
+import { NextResponse } from 'next/server'
+
+export async function POST(request) {
+  const { title } = await request.json()
+
+  const supabase = createClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+  )
+
+  const { data } = await supabase.from('todos').insert({ title }).select()
+  return NextResponse.json(data)
+}
+```
+
+</TabPanel>
+
+<TabPanel id="ts" label="TypeScript">
+
+```tsx app/api/todos/route.ts
+import { createClient } from '@supabase/supabase-js'
+import { NextResponse } from 'next/server'
+
+import type { Database } from '@/lib/database.types'
+
+export async function POST(request: Request) {
+  const { title } = await request.json()
+
+  const supabase = createClient<Database>(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  )
+
+  const { data } = await supabase.from('todos').insert({ title }).select()
+  return NextResponse.json(data)
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
 ## More examples
 
 - [Build a Twitter Clone with the Next.js App Router and Supabase - free egghead course](https://egghead.io/courses/build-a-twitter-clone-with-the-next-js-app-router-and-supabase-19bebadb)
diff --git a/apps/docs/pages/guides/auth/phone-login/twilio.mdx b/apps/docs/pages/guides/auth/phone-login/twilio.mdx
index 60277debe66..01b16e358f9 100644
--- a/apps/docs/pages/guides/auth/phone-login/twilio.mdx
+++ b/apps/docs/pages/guides/auth/phone-login/twilio.mdx
@@ -329,7 +329,7 @@ In some cases, you may wish to use WhatsApp as a delivery channel instead. Here
 - You wish for a secure channel
 - Your users mostly use WhatsApp as a messaging platform
 
-To make use of WhatsApp OTP, please complete the following steps:
+WhatsApp OTPs can be used with Twilio Verify without additional configuration. To make use of WhatsApp OTP with Twilio Programmable Messaging, please complete the following steps:
 
 - Go through the [Twilio self sign up guide for WhatsApp](https://www.twilio.com/docs/whatsapp/self-sign-up)
 - Submit a template via the [Twilio Guide For Submitting WhatsApp templates](https://www.twilio.com/docs/whatsapp/tutorial/send-whatsapp-notification-messages-templates#creating-message-templates-and-submitting-them-for-approval)
diff --git a/apps/docs/pages/guides/cli/github-action/[slug].tsx b/apps/docs/pages/guides/cli/github-action/[slug].tsx
index 1e3934c265a..049e3f1072d 100644
--- a/apps/docs/pages/guides/cli/github-action/[slug].tsx
+++ b/apps/docs/pages/guides/cli/github-action/[slug].tsx
@@ -11,6 +11,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
 import { UrlTransformFunction, linkTransform } from '~/lib/mdx/plugins/rehypeLinkTransform'
 import remarkMkDocsAdmonition from '~/lib/mdx/plugins/remarkAdmonition'
 import { removeTitle } from '~/lib/mdx/plugins/remarkRemoveTitle'
+import remarkPyMdownTabs from '~/lib/mdx/plugins/remarkTabs'
 
 // We fetch these docs at build time from an external repo
 const org = 'supabase'
@@ -134,6 +135,7 @@ export const getStaticProps: GetStaticProps<ActionDocsProps> = async ({ params }
       remarkPlugins: [
         remarkGfm,
         remarkMkDocsAdmonition,
+        remarkPyMdownTabs,
         [removeTitle, meta.title],
         [remarkCodeHike, codeHikeOptions],
       ],
diff --git a/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx b/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx
new file mode 100644
index 00000000000..2363a4ce7d0
--- /dev/null
+++ b/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx
@@ -0,0 +1,181 @@
+import { CodeHikeConfig, remarkCodeHike } from '@code-hike/mdx'
+import { GetStaticPaths, GetStaticProps } from 'next'
+import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
+import { serialize } from 'next-mdx-remote/serialize'
+import { relative } from 'path'
+import rehypeSlug from 'rehype-slug'
+import remarkGfm from 'remark-gfm'
+import emoji from 'remark-emoji'
+import codeHikeTheme from 'config/code-hike.theme.json' assert { type: 'json' }
+import components from '~/components'
+import Layout from '~/layouts/DefaultGuideLayout'
+import { UrlTransformFunction, linkTransform } from '~/lib/mdx/plugins/rehypeLinkTransform'
+import remarkMkDocsAdmonition from '~/lib/mdx/plugins/remarkAdmonition'
+import { removeTitle } from '~/lib/mdx/plugins/remarkRemoveTitle'
+import remarkPyMdownTabs from '~/lib/mdx/plugins/remarkTabs'
+
+// We fetch these docs at build time from an external repo
+const org = 'supabase'
+const repo = 'wrappers'
+const branch = 'main'
+const docsDir = 'docs'
+const externalSite = 'https://supabase.github.io/wrappers'
+
+// Each external docs page is mapped to a local page
+const pageMap = [
+  {
+    slug: 'airtable',
+    meta: {
+      title: 'Airtable',
+    },
+    remoteFile: 'airtable.md',
+  },
+  {
+    slug: 's3',
+    meta: {
+      title: 'AWS S3',
+    },
+    remoteFile: 's3.md',
+  },
+  {
+    slug: 'bigquery',
+    meta: {
+      title: 'BigQuery',
+    },
+    remoteFile: 'bigquery.md',
+  },
+  {
+    slug: 'clickhouse',
+    meta: {
+      title: 'ClickHouse',
+    },
+    remoteFile: 'clickhouse.md',
+  },
+  {
+    slug: 'firebase',
+    meta: {
+      title: 'Firebase',
+    },
+    remoteFile: 'firebase.md',
+  },
+  {
+    slug: 'logflare',
+    meta: {
+      title: 'Logflare',
+    },
+    remoteFile: 'logflare.md',
+  },
+  {
+    slug: 'stripe',
+    meta: {
+      title: 'Stripe',
+    },
+    remoteFile: 'stripe.md',
+  },
+]
+
+interface WrappersDocsProps {
+  source: MDXRemoteSerializeResult
+  meta: {
+    title: string
+    description?: string
+  }
+}
+
+export default function WrappersDocs({ source, meta }: WrappersDocsProps) {
+  return (
+    <Layout meta={meta}>
+      <MDXRemote {...source} components={components} />
+    </Layout>
+  )
+}
+
+/**
+ * Fetch markdown from external repo and transform links
+ */
+export const getStaticProps: GetStaticProps<WrappersDocsProps> = async ({ params }) => {
+  const page = pageMap.find(({ slug }) => slug === params.slug)
+
+  if (!page) {
+    throw new Error(`No page mapping found for slug '${params.slug}'`)
+  }
+
+  const { remoteFile, meta } = page
+
+  const response = await fetch(
+    `https://raw.githubusercontent.com/${org}/${repo}/${branch}/${docsDir}/${remoteFile}`
+  )
+
+  const source = await response.text()
+
+  const urlTransform: UrlTransformFunction = (url) => {
+    try {
+      const externalSiteUrl = new URL(externalSite)
+
+      const placeholderHostname = 'placeholder'
+      const { hostname, pathname, hash } = new URL(url, `http://${placeholderHostname}`)
+
+      // Don't modify a url with a FQDN or a url that's only a hash
+      if (hostname !== placeholderHostname || pathname === '/') {
+        return url
+      }
+
+      const relativePage = (
+        pathname.endsWith('.md')
+          ? pathname.replace(/\.md$/, '')
+          : relative(externalSiteUrl.pathname, pathname)
+      ).replace(/^\//, '')
+
+      const page = pageMap.find(({ remoteFile }) => `${relativePage}.md` === remoteFile)
+
+      // If we have a mapping for this page, use the mapped path
+      if (page) {
+        return page.slug + hash
+      }
+
+      // If we don't have this page in our docs, link to original docs
+      return `${externalSite}/${relativePage}${hash}`
+    } catch (err) {
+      console.error('Error transforming markdown URL', err)
+      return url
+    }
+  }
+
+  const codeHikeOptions: CodeHikeConfig = {
+    theme: codeHikeTheme,
+    lineNumbers: true,
+    showCopyButton: true,
+    skipLanguages: [],
+    autoImport: false,
+  }
+
+  const mdxSource = await serialize(source, {
+    scope: {
+      chCodeConfig: codeHikeOptions,
+    },
+    mdxOptions: {
+      remarkPlugins: [
+        remarkGfm,
+        remarkMkDocsAdmonition,
+        emoji,
+        remarkPyMdownTabs,
+        [removeTitle, meta.title],
+        [remarkCodeHike, codeHikeOptions],
+      ],
+      rehypePlugins: [[linkTransform, urlTransform], rehypeSlug],
+    },
+  })
+
+  return { props: { source: mdxSource, meta } }
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    paths: pageMap.map(({ slug }) => ({
+      params: {
+        slug,
+      },
+    })),
+    fallback: false,
+  }
+}
diff --git a/apps/docs/pages/guides/database/extensions/wrappers.mdx b/apps/docs/pages/guides/database/extensions/wrappers/overview.mdx
similarity index 78%
rename from apps/docs/pages/guides/database/extensions/wrappers.mdx
rename to apps/docs/pages/guides/database/extensions/wrappers/overview.mdx
index 5d99f88ea08..16373b0a30e 100644
--- a/apps/docs/pages/guides/database/extensions/wrappers.mdx
+++ b/apps/docs/pages/guides/database/extensions/wrappers/overview.mdx
@@ -2,7 +2,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
   id: 'wrappers',
-  title: 'wrappers: 3rd Party Integrations',
+  title: 'Wrappers: 3rd Party Integrations',
   description: '3rd party integrations for PostgreSQL ',
 }
 
@@ -60,12 +60,13 @@ A web interface for connecting to external data is coming to Supabase Studio in
 
 ## Integrations
 
-- [Firebase](https://supabase.github.io/wrappers/firebase/)
-- [Stripe](https://supabase.github.io/wrappers/stripe/)
-- [BigQuery](https://supabase.github.io/wrappers/bigquery/)
-- [AWS S3](https://supabase.github.io/wrappers/s3/)
-- Airtable - Coming Soon
-- Clickhouse - Coming Soon
+- [Airtable](/docs/guides/database/extensions/wrappers/airtable)
+- [AWS S3](/docs/guides/database/extensions/wrappers/s3)
+- [BigQuery](/docs/guides/database/extensions/wrappers/bigquery)
+- [ClickHouse](/docs/guides/database/extensions/wrappers/clickhouse)
+- [Firebase](/docs/guides/database/extensions/wrappers/firebase)
+- [Logflare](/docs/guides/database/extensions/wrappers/logflare)
+- [Stripe](/docs/guides/database/extensions/wrappers/stripe)
 
 ## Resources
 
diff --git a/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx b/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx
index 91f5a535fa5..4b1991f3d12 100644
--- a/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx
+++ b/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx
@@ -62,8 +62,6 @@ export const meta = {
       ```kotlin
         implementation "io.github.jan-tennert.supabase:postgrest-kt:$supabase_version"
         implementation "io.ktor:ktor-client-android:$ktor_version"
-        implementation "io.ktor:ktor-client-core:$ktor_version"
-        implementation "io.ktor:ktor-utils:$ktor_version"
       ```
 
     </StepHikeCompact.Code>
@@ -102,10 +100,8 @@ export const meta = {
           supabaseUrl = "https://xyzcompany.supabase.co",
           supabaseKey = "public-anon-key"
         ) {
-              install(GoTrue)
-              install(Postgrest)
-              install(Storage)
-          }
+          install(Postgrest)
+      }
       ```
 
     </StepHikeCompact.Code>
diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
index 8024c9629a4..68b70f43e4b 100644
--- a/apps/docs/pages/index.mdx
+++ b/apps/docs/pages/index.mdx
@@ -25,7 +25,7 @@ export const meta = {
       ## Products
     </div>
 
-    <div className="grid grid-cols-12 gap-6 not-prose [&_svg]:text-brand-1100 [&_svg]dark:text-brand-900">
+    <div className="grid grid-cols-12 gap-6 not-prose [&_svg]:text-brand-600 [&_svg]dark:text-brand">
       {products.map((product) => {
         return (
           <Link href={product.href} key={product.title} passHref>
@@ -44,7 +44,7 @@ export const meta = {
       <div className="col-span-4 flex flex-col gap-1 [&_h2]:m-0 [&_h3]:m-0">
 
         <div className="md:max-w-xs 2xl:max-w-none">
-          <div className="flex items-center gap-3 mb-3 text-brand-1100 dark:text-brand-900">
+          <div className="flex items-center gap-3 mb-3 text-brand-600 dark:text-brand">
             {/* <IconBackground>
               <HomeMenuIconPicker icon="reference-cli" width={18} height={18} />
             </IconBackground> */}
@@ -89,7 +89,7 @@ export const meta = {
         <TextLink
           label="Explore more resources"
           url="/guides/resources"
-          className="no-underline text-brand-900 text-sm"
+          className="no-underline text-brand text-sm"
         />
       </div>
 
@@ -148,7 +148,7 @@ export const meta = {
     <div className="col-span-4 flex flex-col gap-1 [&_h2]:m-0 [&_h3]:m-0">
 
       <div className="md:max-w-xs 2xl:max-w-none">
-        <div className="flex items-center gap-3 mb-3 text-brand-1100 dark:text-brand-900">
+        <div className="flex items-center gap-3 mb-3 text-brand-600 dark:text-brand">
           <IconBackground>
             <HomeMenuIconPicker icon="self-hosting" width={18} height={18} />
           </IconBackground>
@@ -160,7 +160,7 @@ export const meta = {
         <TextLink
           label="More on Self-Hosting"
           url="/guides/self-hosting"
-          className="no-underline text-brand-900 text-sm"
+          className="no-underline text-brand text-sm"
         />
       </div>
 
diff --git a/apps/docs/styles/main.scss b/apps/docs/styles/main.scss
index ec6e38a814e..ece45d88688 100644
--- a/apps/docs/styles/main.scss
+++ b/apps/docs/styles/main.scss
@@ -169,7 +169,7 @@ pre[class*='language-'] {
 
 // ToC styles
 .toc__menu-item--active {
-  color: var(--colors-brand9) !important;
+  color: hsl(var(--brand-default)) !important;
 }
 
 .video-container {
diff --git a/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx b/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx
new file mode 100644
index 00000000000..2a6c49e301c
--- /dev/null
+++ b/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx
@@ -0,0 +1,105 @@
+---
+title: Supabase Beta July 2023
+description: Launch Week 8 is coming - but we still shipped some goodies during July
+author: ant_wilson
+image: 2023-08-02-july-2023-beta-update/july-2023-beta-update.png
+thumb: 2023-08-02-july-2023-beta-update/july-2023-beta-update.png
+tags:
+  - release-notes
+date: '2023-08-02'
+toc_depth: 3
+---
+
+Next Monday is Launch Week 🎱, where we’ll be announcing a tonne of surprises. In the meantime, here’s a summary of everything we shipped in July. Read on!
+
+## Supabase Launch Week 8
+
+![Supabase Launch Week 8](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/launch-week.png)
+
+Launch Week 8 starts next week. We’ll be announcing one new major feature every day for an entire week (with a few bonus surprises along the way). Get your ticket and tune in on Monday the 7th.
+
+[Get your ticket](https://supabase.com/launch-week)
+
+## New Android Kotlin Library
+
+![New Android Kotlin Library](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/android-kotlin.png?t=2023-08-02T11%3A05%3A46.805Z)
+
+Are you a mobile dev? We now have client libraries for Android. This is thanks to one of our community members - [@TheRealJanGER](https://twitter.com/TheRealJanGER). Try it out, and if you want to help us maintain the library let us know.
+
+[Quickstart](https://supabase.com/docs/guides/getting-started/quickstarts/kotlin)
+
+[Tutorial](https://supabase.com/docs/guides/getting-started/tutorials/with-kotlin)
+
+## pgvector 0.4.0 performance
+
+![pgvector 0.4.0 performance](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/pgvector.png)
+
+There's been a lot of talk about pgvector performance, so we pushed it to the limits to figure out its strengths and limitations. The good news is that work has already [started](https://github.com/pgvector/pgvector/tree/hnsw) on HNSW, and isn’t far away.
+
+[Read the benchmark](https://supabase.com/blog/pgvector-performance)
+
+## Quick product announcements
+
+- [Auth] There is a new OAuth provider in time: Login with Figma. [Docs](https://supabase.com/docs/guides/auth/social-login/auth-figma)
+- [Auth] You can now use Resend as a custom SMTP provider. [Docs](https://resend.com/docs/send-with-supabase-smtp)
+- [Postgres Tooling] pgsodium 3.1.8 released. [PR](https://github.com/michelp/pgsodium/releases/tag/v3.1.8)
+- [Postgres Tooling] PostgREST 11.1 is now live. [Blog post](https://supabase.com/blog/postgrest-11-1-release)
+
+## Egghead course: Twitter Clone with the Next.js App Router
+
+![Egghead course: Twitter Clone with the Next.js App Router](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/egghead-course.png?t=2023-08-02T10%3A55%3A17.908Z)
+
+Should we rebrand to X Clone? Next.js App router is ushering in the next era of web development. What a best way to learn to navigate it than by building a full-stack app?
+
+[Course](https://egghead.io/courses/build-a-twitter-clone-with-the-next-js-app-router-and-supabase-19bebadb)
+
+## Twitter Space: Launch Week 8 - Kickoff 🏈
+
+![Twitter Space](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/twitter-space.png?t=2023-08-02T11%3A05%3A03.838Z)
+
+After Monday's announcement, we are kicking off LW8 with a very cool Twitter Space, featuring the DevRel team and guests. Bring your questions!
+
+10:00 AM PT | 1:00 PM ET | 06:00 PM UK
+
+[Set reminder](https://twitter.com/i/spaces/1DXGyvjkeEeJM)
+
+## Made with Supabase
+
+![Made with Supabase: Snowchat](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/snowchat.png)
+
+[snowChat](https://snowchat.streamlit.app/) | An intuitive and user-friendly application that allows you to interact with your Snowflake data using natural language queries. Built by [Kaarthik Andavar](https://twitter.com/kaarthikcodes) using Python, Streamlit, Open AI, and Supabase Vector.
+
+## Extended Community Highlights
+
+![Community Highlights](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/community-highlights.png)
+
+- Build a Simple Dropbox clone using Deno, DenoKV, Fresh and Supabase. [Video Tutorial](https://www.youtube.com/watch?v=_WerF8YMqks)
+- Safeguarding Data Integrity with pg_safeupdate in PostgreSQL and Supabase. [Blog post](https://www.notion.so/809925346af243b3a4ede8774e71472c?pvs=21)
+- Supabase for C#: Streamlining Backend Development with Database Magic. [Blog post](https://themurph.hashnode.dev/supabase-csharp)
+- Building an MVP app using Supabase. [Blog post](https://www.antstack.com/blog/building-an-mvp-app-using-supabase/)
+- Fortify Your Application With Supabase: Exploring Fine-Grained Control with Row-Level Security and OAuth Sign-in. [Article](https://techconative.com/blog/supabase-rls-security-oauth-authentication/)
+- Using Supabase authentication in NestJs. [Tutorial](https://blog.iamstarcode.com/using-supabase-authentication-in-nestjs)
+- React Native file upload with Supabase Storage. [Tutorial](https://supabase.com/blog/react-native-storage) | [Video](https://www.youtube.com/watch?v=am6w5zEDk_g)
+- Safeguarding Data Integrity with pg_safeupdate in PostgreSQL and Supabase. [Blog Post](https://blog.mansueli.com/safeguarding-data-integrity-with-pg-safeupdate-in-postgresql-and-supabase)
+- Supabase almost SHUT ME DOWN. [Video](https://www.youtube.com/watch?v=2WHTZa4ENfc)
+
+## Supabase in Times Square
+
+![Supabase in Times Square](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/times-sq.png?t=2023-08-02T11%3A04%3A14.458Z)
+
+The Redpoint team put together InfraRed 100, a report that recognizes 100 transformative companies in cloud infrastructure. We are honoured to be included with so many amazing companies we admire 🙇🏻‍♂️. They even featured us on a billboard in Times Square to celebrate.
+
+[Read the full report](https://www.redpoint.com/infrared/100/)
+
+## We’re Hiring
+
+- [Support Engineer (APAC)](https://boards.greenhouse.io/supabase/jobs/4934378004)
+- [FullStack Engineer Billing](https://www.notion.so/Beta-Update-July-Monday-31st-10386eba40934ea597ee5e5b1b81574e?pvs=21)
+
+## ⚠️ Baking hot meme zone ⚠️
+
+If you made it this far in the email you deserve a devilish treat.
+
+NPCs represent…
+
+![July's favorite meme](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/supabase-meme.png)
diff --git a/apps/www/components/AuthWidget/AuthWidgetSection.tsx b/apps/www/components/AuthWidget/AuthWidgetSection.tsx
index f9ee1bbf25a..6d840b80c68 100644
--- a/apps/www/components/AuthWidget/AuthWidgetSection.tsx
+++ b/apps/www/components/AuthWidget/AuthWidgetSection.tsx
@@ -19,9 +19,9 @@ function AuthWidgetSection() {
   const { basePath } = useRouter()
   const [radius, setRadius] = useState('4px')
   const [brandColor, setBrandColor] = useState({
-    brand: 'var(--colors-brand9)',
-    brandAccent: 'var(--colors-brand11)',
-    brandAccent2: 'var(--colors-brand3)',
+    brand: 'hsl(var(--brand-default))',
+    brandAccent: 'hsl(var(--brand-500))',
+    brandAccent2: 'hsl(var(--brand-200))',
   })
   const [layout, setLayout] = useState('horizontal')
 
@@ -140,15 +140,15 @@ function AuthWidgetSection() {
                   <button
                     onClick={() =>
                       setBrandColor({
-                        brand: 'var(--colors-brand9)',
-                        brandAccent: 'var(--colors-brand11)',
-                        brandAccent2: 'var(--colors-brand3)',
+                        brand: 'hsl(var(--brand-default))',
+                        brandAccent: 'hsl(var(--brand-500))',
+                        brandAccent2: 'hsl(var(--brand-200))',
                       })
                     }
                     className={[
-                      'bg-brand-300 border-brand-900 h-10 w-10 rounded-full border-2 transition hover:scale-105',
-                      brandColor.brand === 'var(--colors-brand9)'
-                        ? ' !bg-brand-900 ring-scale-400 border-scale-800 ring-2 drop-shadow-lg dark:ring-white'
+                      'bg-brand-300 border-brand h-10 w-10 rounded-full border-2 transition hover:scale-105',
+                      brandColor.brand === 'hsl(var(--brand-default))'
+                        ? ' !bg-brand ring-scale-400 border-scale-800 ring-2 drop-shadow-lg dark:ring-white'
                         : '',
                     ].join(' ')}
                   ></button>
diff --git a/apps/www/components/Button.tsx b/apps/www/components/Button.tsx
index babd6994b7f..549409500a4 100644
--- a/apps/www/components/Button.tsx
+++ b/apps/www/components/Button.tsx
@@ -13,8 +13,8 @@ const Button = (props: Props) => {
 
   const colorClass =
     type === 'primary'
-      ? 'px-3 py-2 shadow-sm border border-transparent text-white bg-brand-700 hover:bg-brand-800 focus:ring-2 focus:ring-offset-2 focus:ring-brand-500'
-      : 'text-brand-700 bg-none'
+      ? 'px-3 py-2 shadow-sm border border-transparent text-white bg-brand-400 hover:bg-brand-300 focus:ring-2 focus:ring-offset-2 focus:ring-brand-300'
+      : 'text-brand-400 bg-none'
 
   const textClass = type === 'primary' ? 'font-medium left-3 group-hover:left-0' : 'font-normal'
 
diff --git a/apps/www/components/Charts/PGCharts.tsx b/apps/www/components/Charts/PGCharts.tsx
index f73e0454b2f..982c1097fc9 100644
--- a/apps/www/components/Charts/PGCharts.tsx
+++ b/apps/www/components/Charts/PGCharts.tsx
@@ -7,7 +7,7 @@ import * as data from '~/data/blog/PostgresFTSComparison'
 import remarkGfm from 'remark-gfm'
 
 const barColors = {
-  pg: 'var(--colors-brand11)',
+  pg: 'hsl(var(--brand-600))',
   meilisearch: 'var(--colors-blue11)',
   typesense: 'var(--colors-violet11)',
   'sqlite-disk': 'var(--colors-orange11)',
diff --git a/apps/www/components/CodeBlock/CodeBlock.tsx b/apps/www/components/CodeBlock/CodeBlock.tsx
index 99f0cb02169..1269b1f11ff 100644
--- a/apps/www/components/CodeBlock/CodeBlock.tsx
+++ b/apps/www/components/CodeBlock/CodeBlock.tsx
@@ -119,7 +119,7 @@ function CodeBlock(props: CodeBlockProps) {
                 type="text"
                 icon={
                   copied ? (
-                    <span className="text-brand-900">
+                    <span className="text-brand">
                       <IconCheck strokeWidth={3} />
                     </span>
                   ) : (
diff --git a/apps/www/components/Hero/Hero.tsx b/apps/www/components/Hero/Hero.tsx
index 6aba7c1539c..9ce53bff3a8 100644
--- a/apps/www/components/Hero/Hero.tsx
+++ b/apps/www/components/Hero/Hero.tsx
@@ -41,7 +41,7 @@ const Hero = () => {
                   {showAnnouncement && (
                     <Link href="/launch-week">
                       <a className="group w-auto rounded-full p-1 mb-6 mt-8 md:mb-10 bg-gradient-to-b from-[#1b1f2124] to-[#02040550] hover:from-[#ffffff15] hover:to-[#ffffff05] transition-all backdrop-blur-lg border flex items-center justify-between gap-2 md:gap-4 text-scale-1100 hover:text-scale-1200 text-sm">
-                        <div className="text-scale-200 rounded-full bg-brand-900 px-3 py-1 flex items-center justify-center">
+                        <div className="text-scale-200 rounded-full bg-brand px-3 py-1 flex items-center justify-center">
                           Get your ticket
                         </div>
                         <span>Launch Week 8 - August 7-11</span>
diff --git a/apps/www/components/InteractiveShimmerCard/index.tsx b/apps/www/components/InteractiveShimmerCard/index.tsx
index 3e11c07bd46..d6017544f96 100644
--- a/apps/www/components/InteractiveShimmerCard/index.tsx
+++ b/apps/www/components/InteractiveShimmerCard/index.tsx
@@ -34,9 +34,9 @@ const InteractiveShimmerCard = ({
     const isActive = x > -3 && x < width + 3 && y > -3 && y < height + 3
     const activeGlow =
       hasActiveOnHover && isActive
-        ? `radial-gradient(65rem circle at ${x}px ${y}px, var(--colors-brand9), transparent), `
+        ? `radial-gradient(65rem circle at ${x}px ${y}px, hsl(var(--brand-default)), transparent), `
         : ''
-    outerElement.style.background = isActive ? `var(--colors-brand9)` : `var(--colors-scale3)`
+    outerElement.style.background = isActive ? `hsl(var(--brand-default))` : `var(--colors-scale3)`
     outerElement.style.backgroundImage = `
       ${activeGlow}radial-gradient(30rem circle at ${x}px ${y}px, ${
       shimmerFromColor ?? 'var(--colors-scale8)'
diff --git a/apps/www/components/LaunchWeek/6/HackathonSection.tsx b/apps/www/components/LaunchWeek/6/HackathonSection.tsx
index ad73a8a52a5..c2be728bb50 100644
--- a/apps/www/components/LaunchWeek/6/HackathonSection.tsx
+++ b/apps/www/components/LaunchWeek/6/HackathonSection.tsx
@@ -44,7 +44,7 @@ export default function LaunchHero() {
             <h3 className="text-scale-1200 text-lg">Submission</h3>
             <p className="text-scale-1100 text-sm">
               Submit your project through{' '}
-              <a className="text-brand-900" href="https://madewithsupabase.com">
+              <a className="text-brand" href="https://madewithsupabase.com">
                 madewithsupabase.com
               </a>
               .
diff --git a/apps/www/components/LaunchWeek/7/LaunchSection/ArticleButtonListItem.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/ArticleButtonListItem.tsx
index e374bd023fc..8aee78e4070 100644
--- a/apps/www/components/LaunchWeek/7/LaunchSection/ArticleButtonListItem.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/ArticleButtonListItem.tsx
@@ -9,7 +9,7 @@ const ArticleButtonListItem = (props: Article) => {
         <div className="flex flex-row">
           <div>
             <div className="flex flex-col">
-              <span className="text-scale-1200 group-hover:text-brand-900 text-left text-base transition">
+              <span className="text-scale-1200 group-hover:text-brand text-left text-base transition">
                 {props.title}
               </span>
               <p className="text-scale-1100 text-left text-sm transition">{props.description}</p>
diff --git a/apps/www/components/LaunchWeek/7/LaunchSection/ProductButton.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/ProductButton.tsx
index 550d0e28815..14fa872e674 100644
--- a/apps/www/components/LaunchWeek/7/LaunchSection/ProductButton.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/ProductButton.tsx
@@ -6,7 +6,7 @@ const ProductButton = (props: Article) => {
     <div className="mr-2 mb-2 inline-block">
       <button
         className=" 
-                text-brand-1200
+                text-brand-600
                 hover:bg-scale-300 border-scale-500 flex items-start gap-3 rounded-md border bg-transparent p-3 
                 px-6 transition
                 dark:drop-shadow-sm"
diff --git a/apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx
index 07ed656ae0c..1aaafcdd21b 100644
--- a/apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx
@@ -8,7 +8,7 @@ export const ProductButtonListItem = (props: Article) => {
       <div className="inline-block">
         <button
           className=" 
-          text-brand-1200 
+          text-brand-600 
           group
           flex items-start gap-3 bg-transparent
           transition
@@ -18,7 +18,7 @@ export const ProductButtonListItem = (props: Article) => {
             <SparklesIcon strokeWidth={1} />
           </div>
           <div className="flex flex-col items-start gap-0">
-            <span className="group-hover:text-brand-900 text-sm">{props.title}</span>
+            <span className="group-hover:text-brand text-sm">{props.title}</span>
             <p className="text-scale-1100 text-left text-sm">{props.description}</p>
           </div>
         </button>
diff --git a/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx
index 3faf36f20d0..db093a84ca8 100644
--- a/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx
@@ -25,7 +25,7 @@ export const LaunchSection = (props: WeekDayProps) => {
       <div
         className={[
           'absolute mt-[4px] -ml-[21px] h-3 w-3 rounded-full border md:-ml-[37px] lg:-ml-[37.5px]',
-          props.shipped ? 'border-brand-900 bg-brand-400' : 'border-purple-900 bg-purple-300',
+          props.shipped ? 'border-brand bg-brand-400' : 'border-purple-900 bg-purple-300',
         ].join(' ')}
       ></div>
       {/* END timeline dot */}
@@ -63,7 +63,7 @@ export const LaunchSection = (props: WeekDayProps) => {
               nextDayNotShipped
                 ? 'launch-week-timeline-border--approaching'
                 : props.shipped
-                ? 'border-brand-900'
+                ? 'border-brand'
                 : 'border-purple-700',
               className,
             ].join(' ')}
@@ -152,7 +152,7 @@ export const LaunchSection = (props: WeekDayProps) => {
               md:pl-8
               lg:pl-8
         `,
-          props.shipped ? 'border-brand-900' : 'border-purple-700',
+          props.shipped ? 'border-brand' : 'border-purple-700',
           props.shippingHasStarted && 'lg:col-span-6',
           !lastIndex && 'pb-8 lg:pb-16',
         ].join(' ')}
diff --git a/apps/www/components/LaunchWeek/7/Ticket/form.module.css b/apps/www/components/LaunchWeek/7/Ticket/form.module.css
index 5b6a078561b..1bdf317bbc9 100644
--- a/apps/www/components/LaunchWeek/7/Ticket/form.module.css
+++ b/apps/www/components/LaunchWeek/7/Ticket/form.module.css
@@ -130,8 +130,8 @@
   height: 56px;
   margin-top: var(--space-4x);
   border-radius: var(--space-2x);
-  border: 1px solid var(--brand);
-  background: var(--brand);
+  border: 1px solid hsl(var(--brand-default));
+  background: hsl(var(--brand-default));
   cursor: pointer;
   font-family: inherit;
   font-size: var(--text-md);
@@ -170,7 +170,7 @@
 .submit.default:hover,
 .submit.default:focus {
   background: black;
-  color: var(--brand);
+  color: hsl(var(--brand-default));
 }
 
 .submit.default.generate-with-github:hover path,
diff --git a/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx b/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx
new file mode 100644
index 00000000000..8f001d4cfc7
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import SectionContainer from '../../Layouts/SectionContainer'
+import { SmallCard } from '../8/Releases/components'
+import Link from 'next/link'
+import Image from 'next/image'
+
+const LW8CalloutsSection = () => {
+  return (
+    <SectionContainer className="!py-0 w-full !px-0 !max-w-none">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 scroll-mt-[105px]" id="hackathon">
+        <SmallCard className="hover:from-background-surface-300 hover:to-background-surface-300">
+          <Link href="https://twitter.com/i/spaces/1DXGyvjkeEeJM">
+            <a target="_blank" className="flex flex-row justify-between items-center w-full h-full">
+              <div className="relative flex-shrink flex items-center p-2 w-2/3 lg:w-1/2 md:w-auto">
+                <div className="flex flex-col gap-1 sm:pl-4">
+                  <span className="text-white">Join us daily at Twitter Spaces </span>
+                  <span className="">Next up: Monday – Opening Day</span>
+                </div>
+              </div>
+              <div className="relative flex !aspect-video h-[80px] md:h-[100px] gap-2 z-10 rounded overflow-hidden">
+                <Image
+                  src="/images/launchweek/8/twitter-spaces-thumb.svg"
+                  alt="twitter spaces thumbnail"
+                  layout="fill"
+                  objectFit="cover"
+                />
+              </div>
+            </a>
+          </Link>
+        </SmallCard>
+        <SmallCard className="hover:from-background-surface-300 hover:to-background-surface-300">
+          <Link href="/blog/supabase-lw8-hackathon">
+            <a target="_blank" className="flex flex-row justify-between items-center w-full h-full">
+              <div className="relative h-full flex-shrink flex flex-col md:flex-row md:items-center p-2 w-2/3 lg:w-1/2 md:w-auto gap-1 md:gap-4">
+                <div className="flex flex-col gap-1 sm:pl-4">
+                  <span className="text-white">LW8 Hackathon Aug 4 – Aug 13</span>
+                  <span className="">Read more about rules and prizes on the blog</span>
+                </div>
+              </div>
+              <div className="relative flex !aspect-video h-[80px] md:h-[100px] gap-2 z-10 rounded overflow-hidden">
+                <Image
+                  src="/images/launchweek/8/lw8-hackathon-thumb.svg"
+                  alt="hackathon thumbnail"
+                  layout="fill"
+                  objectFit="cover"
+                />
+              </div>
+            </a>
+          </Link>
+        </SmallCard>
+      </div>
+    </SectionContainer>
+  )
+}
+
+export default LW8CalloutsSection
diff --git a/apps/www/components/LaunchWeek/8/LW8Meetups.tsx b/apps/www/components/LaunchWeek/8/LW8Meetups.tsx
new file mode 100644
index 00000000000..9ae4ceda564
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/LW8Meetups.tsx
@@ -0,0 +1,105 @@
+import Link from 'next/link'
+import React, { useEffect, useState } from 'react'
+import { Badge } from 'ui'
+import useConfData from '../hooks/use-conf-data'
+
+export interface Meetup {
+  id?: any
+  title: string
+  isLive: boolean
+  link: string
+  display_info: string
+  start_at: string
+}
+
+const LW8Meetups = ({ meetups }: { meetups?: Meetup[] }) => {
+  const { supabase } = useConfData()
+  const [meets, setMeets] = useState<Meetup[]>(meetups ?? [])
+  const [realtimeChannel, setRealtimeChannel] = useState<ReturnType<
+    (typeof supabase)['channel']
+  > | null>(null)
+
+  useEffect(() => {
+    // Listen to realtime changes
+    if (supabase && !realtimeChannel) {
+      const channel = supabase
+        .channel('changes')
+        .on(
+          'postgres_changes',
+          {
+            event: 'UPDATE',
+            schema: 'public',
+            table: 'lw8_meetups',
+          },
+          async () => {
+            const { data: newMeets } = await supabase.from('lw8_meetups').select('*')
+            setMeets(newMeets)
+          }
+        )
+        .subscribe()
+      setRealtimeChannel(channel)
+    }
+
+    return () => {
+      // Cleanup realtime subscription on unmount
+      realtimeChannel?.unsubscribe()
+    }
+  }, [])
+
+  return (
+    <div className="max-w-6xl mx-auto grid grid-cols-1 xl:grid-cols-12 gap-8 xl:gap-8">
+      <div className="col-span-1 xl:col-span-4 flex flex-col justify-center max-w-lg">
+        <h2 className="text-2xl sm:text-3xl xl:text-4xl tracking-[-.5px]">Join the community</h2>
+        <p className="text-scale-1000 text-xs sm:text-sm xl:text-base py-3 xl:max-w-md">
+          Celebrate LW8 at our first-ever live community meetups across various locations. Join the
+          fun, grab some swag, and meet the Supabase community.
+        </p>
+      </div>
+      <div className="col-span-1 xl:col-span-7 xl:col-start-6 w-full max-w-4xl flex flex-col justify-between items-stretch">
+        {meets &&
+          meets
+            ?.sort((a, b) => (new Date(a.start_at) > new Date(b.start_at) ? 1 : -1))
+            .map(({ display_info, link, isLive, title }: Meetup) => (
+              <Link href={link ?? '#'}>
+                <a
+                  target="_blank"
+                  className={[
+                    'w-full group py-0 flex items-center gap-2 md:gap-4 text-lg sm:text-2xl xl:text-4xl border-b border-[#111718]',
+                    'hover:text-scale-1200',
+                    isLive ? 'text-scale-1100' : 'text-[#56646B]',
+                    !link && 'pointer-events-none',
+                  ].join(' ')}
+                >
+                  <div className="flex items-center gap-2 md:gap-4 py-2 md:py-0">
+                    <span>{title}</span>
+                    {isLive && <Badge>Live now</Badge>}
+                    <span className="hidden md:inline opacity-0 -translate-x-2 transition-all md:group-hover:opacity-100 group-hover:translate-x-0">
+                      <svg
+                        width="47"
+                        height="47"
+                        viewBox="0 0 47 47"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M33.0387 16.2422L40.6691 23.8727M40.6691 23.8727L33.0387 31.5031M40.6691 23.8727L6.33203 23.8727"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  {display_info && (
+                    <span className="text-sm text-right flex-1">{display_info}</span>
+                  )}
+                </a>
+              </Link>
+            ))}
+      </div>
+    </div>
+  )
+}
+
+export default LW8Meetups
diff --git a/apps/www/components/LaunchWeek/8/Releases/components/index.tsx b/apps/www/components/LaunchWeek/8/Releases/components/index.tsx
new file mode 100644
index 00000000000..58a6ab51863
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Releases/components/index.tsx
@@ -0,0 +1,337 @@
+import { Badge } from 'ui'
+
+import Link from 'next/link'
+import CountdownComponent from '../../Countdown'
+
+export const PencilSvg = () => (
+  <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3.21792 11.2469L11.8015 2.66333L14.0953 4.95709L5.51167 13.5407M3.21792 11.2469L2.34219 14.4164L5.51167 13.5407M3.21792 11.2469L5.51167 13.5407"
+      stroke="#8F8F8F"
+      strokeMiterlimit="10"
+      strokeLinejoin="bevel"
+    />
+  </svg>
+)
+export const DocsSvg = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M4.96289 9.48618H10.9629M4.96289 7.48618H10.9629M4.96289 11.4862H8.96289M3 2.00034V13.9998H12.9996V5.60113L9.38156 2.00034H3ZM12.9644 5.58432L9.38004 2L9.38004 5.58432L12.9644 5.58432Z"
+      stroke="#8F8F8F"
+      strokeMiterlimit="10"
+      strokeLinejoin="bevel"
+    />
+  </svg>
+)
+export const PlaySvg = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M13.4287 8L8.74762 10.7026L4.06653 13.4053L4.06653 8L4.06653 2.59474L8.74762 5.29737L13.4287 8Z"
+      stroke="#8F8F8F"
+      strokeMiterlimit="10"
+      strokeLinejoin="bevel"
+    />
+  </svg>
+)
+export const GithubSvg = () => (
+  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.2125 1.75781C4.6765 1.75781 1.8125 4.62181 1.8125 8.15781C1.8125 10.9898 3.6445 13.3818 6.1885 14.2298C6.5085 14.2858 6.6285 14.0938 6.6285 13.9258C6.6285 13.7738 6.6205 13.2698 6.6205 12.7338C5.0125 13.0298 4.5965 12.3418 4.4685 11.9818C4.3965 11.7978 4.0845 11.2298 3.8125 11.0778C3.5885 10.9578 3.2685 10.6618 3.8045 10.6538C4.3085 10.6458 4.6685 11.1178 4.7885 11.3098C5.3645 12.2778 6.2845 12.0058 6.6525 11.8378C6.7085 11.4218 6.8765 11.1418 7.0605 10.9818C5.6365 10.8218 4.1485 10.2698 4.1485 7.82181C4.1485 7.12581 4.3965 6.54981 4.8045 6.10181C4.7405 5.94181 4.5165 5.28581 4.8685 4.40581C4.8685 4.40581 5.4045 4.23781 6.6285 5.06181C7.1405 4.91781 7.6845 4.84581 8.2285 4.84581C8.7725 4.84581 9.3165 4.91781 9.8285 5.06181C11.0525 4.22981 11.5885 4.40581 11.5885 4.40581C11.9405 5.28581 11.7165 5.94181 11.6525 6.10181C12.0605 6.54981 12.3085 7.11781 12.3085 7.82181C12.3085 10.2778 10.8125 10.8218 9.3885 10.9818C9.6205 11.1818 9.8205 11.5658 9.8205 12.1658C9.8205 13.0218 9.8125 13.7098 9.8125 13.9258C9.8125 14.0938 9.9325 14.2938 10.2525 14.2298C11.523 13.8009 12.627 12.9844 13.4092 11.8951C14.1913 10.8059 14.6122 9.49877 14.6125 8.15781C14.6125 4.62181 11.7485 1.75781 8.2125 1.75781Z"
+      fill="#8F8F8F"
+    />
+  </svg>
+)
+export const LinkSvg = () => (
+  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6.875 4.0013H4.20833C3.47195 4.0013 2.875 4.59826 2.875 5.33464V12.0013C2.875 12.7377 3.47195 13.3346 4.20833 13.3346H10.875C11.6114 13.3346 12.2083 12.7377 12.2083 12.0013V9.33464M9.54167 2.66797H13.5417M13.5417 2.66797V6.66797M13.5417 2.66797L6.875 9.33464"
+      stroke="#8F8F8F"
+      strokeWidth="1"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+export const ArrowTopRightSvg = () => (
+  <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3.44531 13.846L13.1152 4.17578"
+      stroke="#8F8F8F"
+      strokeMiterlimit="10"
+      strokeLinejoin="bevel"
+    />
+    <path
+      d="M3.44531 4.09375H13.1152V13.7637"
+      stroke="#8F8F8F"
+      strokeMiterlimit="10"
+      strokeLinejoin="bevel"
+    />
+  </svg>
+)
+export const HackernewsSvg = () => (
+  <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.26821 7.87591L9.94194 4.47266H11.8008L8.82871 10.074V13.606H7.16205V10.0213L4.1875 4.47266H6.15549L7.86748 7.9537C7.87321 7.95954 7.87972 7.96606 7.88751 7.97386C7.95585 8.04219 7.98757 8.11202 8.00726 8.16124C8.01322 8.17614 8.01776 8.18804 8.02175 8.19849C8.02548 8.20824 8.02872 8.21672 8.03217 8.22518L8.04751 8.24052C8.11375 8.10585 8.19796 7.98119 8.26821 7.87591Z"
+      fill="#8F8F8F"
+    />
+  </svg>
+)
+
+export const SmallCard = ({ className, children }: { className?: string; children: any }) => (
+  <div
+    className={[
+      'relative p-[1px] bg-gradient-to-b from-[#111718] to-[#1C1C1C60] rounded-2xl overflow-hidden shadow-lg',
+      className,
+    ].join(' ')}
+  >
+    <div
+      className={[
+        'rounded-2xl text-sm text-[#9296AA] p-2 flex flex-row justify-between items-center backdrop-blur-md h-full',
+        'bg-[#030A0C]',
+      ].join(' ')}
+    >
+      {children}
+    </div>
+  </div>
+)
+
+export const StyledArticleBadge = ({
+  className,
+  children,
+}: {
+  className?: string
+  children: any
+}) => (
+  <div
+    className={['relative bg-transparent border border-[#F4FFFA90] rounded-full', className].join(
+      ' '
+    )}
+  >
+    <div className="!bg-transparent rounded-full !py-1 !px-4 w-full inset-[1px] text-sm border-none dark:from-white dark:to-[#6453C5] dark:border-none">
+      <span className="text-sm text-[#F4FFFA80] bg-clip-text bg-gradient-to-r from-[#F4FFFA] to-[#7E7AAD]">
+        {children}
+      </span>
+      <div className="absolute inset-0 w-full h-full bg-[#1C1C1C] rounded-full blur-2xl" />
+    </div>
+  </div>
+)
+
+export const AccordionHeader = ({
+  date,
+  day,
+  title,
+  shipped,
+  publishedAt,
+  shippable = true,
+}: {
+  date: string
+  day: string
+  title: string
+  shipped?: boolean
+  publishedAt: string
+  shippable?: boolean
+}) => {
+  return (
+    <div className="flex flex-1 flex-col sm:flex-row">
+      <div className="flex gap-4 w-full sm:w-auto sm:min-w-[240px] md:min-w-[380px] items-center">
+        <span className="text-scale-900 text-sm">
+          <span className="inline sm:hidden md:inline">{day} </span>
+          {date && (
+            <span>
+              <span className="inline sm:hidden md:inline">・</span> {date}
+            </span>
+          )}
+        </span>
+      </div>
+      {shippable && shipped && (
+        <Badge
+          className={`relative inset-0 !bg-transparent !py-1 !px-4 h-fit backdrop-blur-md ${
+            shipped
+              ? 'bg-gradient-to-br from-[#05090B] to-[#05090B] !border-[#061517]'
+              : 'border-[#FFFFFF20]'
+          }`}
+        >
+          <span className="text-[#A0A0A0] text-sm font-normal bg-clip-text bg-gradient-to-r from-[#F4FFFA] to-[#675FA7]">
+            Shipped
+          </span>
+        </Badge>
+      )}
+      {shipped && <span className="text-scale-1200 text-lg mt-1 sm:mt-0">{title}</span>}
+      {shippable && !shipped && (
+        <span className="text-sm font-normal text-[#A0A0A0] mt-1 sm:mt-0 flex items-center gap-1 md:gap-4">
+          <svg
+            width="17"
+            height="17"
+            viewBox="0 0 17 17"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g opacity="0.5">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M4.32656 7.58047V5.98047C4.32656 3.77133 6.11742 1.98047 8.32656 1.98047C10.5357 1.98047 12.3266 3.77133 12.3266 5.98047V7.58047C13.2102 7.58047 13.9266 8.29681 13.9266 9.18047V13.1805C13.9266 14.0641 13.2102 14.7805 12.3266 14.7805H4.32656C3.44291 14.7805 2.72656 14.0641 2.72656 13.1805V9.18047C2.72656 8.29681 3.44291 7.58047 4.32656 7.58047ZM10.7266 5.98047V7.58047H5.92656V5.98047C5.92656 4.65499 7.00108 3.58047 8.32656 3.58047C9.65205 3.58047 10.7266 4.65499 10.7266 5.98047Z"
+                fill="#A0A0A0"
+              />
+            </g>
+          </svg>
+
+          <CountdownComponent />
+        </span>
+      )}
+    </div>
+  )
+}
+export const MultistepSectionHeader = ({ title, blog }: any) => {
+  return (
+    <div className="flex flex-1 flex-col sm:flex-row py-8">
+      <div className="flex gap-4 w-full items-center justify-between md:justify-start">
+        {title && <span className="text-scale-1200 text-lg mt-3 sm:mt-0">{title}</span>}
+        {!!blog && (
+          <ChipLink href={blog} className="!w-auto !text-left !justify-between !flex-none">
+            Blog post
+            <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+              <PencilSvg />
+            </div>
+          </ChipLink>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export const ChipLink = ({
+  href,
+  uiOnly,
+  className,
+  target,
+  children,
+}: {
+  href?: string
+  className?: string
+  uiOnly?: boolean
+  target?: '_blank' | '_self' | '_parent' | '_top' | 'framename'
+  children: any
+}) =>
+  uiOnly ? (
+    <span
+      className={[
+        'flex flex-auto justify-center sm:justify-between w-full text-center sm:text-left min-h-[43px] sm:w-auto items-center border border-[#232323] bg-gradient-to-r text-white from-[#46444490] to-[#19191980] hover:from-[#4e4e4e90] hover:to-[#19191980] backdrop-blur-xl rounded-full text-sm py-2 px-3 sm:pr-2',
+        className,
+      ].join(' ')}
+    >
+      {children}
+    </span>
+  ) : !!href ? (
+    <Link href={href}>
+      <a
+        target={target ?? '_self'}
+        rel="noopener"
+        className={[
+          'flex flex-auto justify-center sm:justify-between w-full text-center sm:text-left min-h-[43px] sm:w-auto items-center border border-[#232323] bg-gradient-to-r text-white from-[#46444490] to-[#19191980] hover:from-[#4e4e4e90] hover:to-[#19191980] backdrop-blur-xl rounded-full text-sm py-2 px-3 sm:pr-2',
+          className,
+        ].join(' ')}
+      >
+        {children}
+      </a>
+    </Link>
+  ) : null
+
+export const SectionButtons = ({
+  blog,
+  docs,
+  video,
+  github,
+  url,
+  hackernews,
+  mobileGrid,
+}: {
+  blog?: string
+  docs?: string
+  video?: string
+  github?: string
+  url?: string
+  hackernews?: string
+  mobileGrid?: boolean
+}) => {
+  return (
+    <div
+      className={[
+        'flex w-full max-w-full md:w-auto justify-center gap-2 z-10',
+        mobileGrid && 'grid grid-cols-2 gap-2 sm:flex',
+      ].join(' ')}
+    >
+      {!!blog && (
+        <ChipLink href={blog}>
+          Blog post
+          <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+            <PencilSvg />
+          </div>
+        </ChipLink>
+      )}
+      {!!docs && (
+        <ChipLink href={docs}>
+          Docs
+          <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+            <DocsSvg />
+          </div>
+        </ChipLink>
+      )}
+      {!!video && (
+        <ChipLink href={video} target="_blank">
+          Video
+          <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+            <PlaySvg />
+          </div>
+        </ChipLink>
+      )}
+      {!!github && (
+        <ChipLink href={github} target="_blank">
+          Github
+          <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+            <GithubSvg />
+          </div>
+        </ChipLink>
+      )}
+      {!!url && (
+        <ChipLink href={url}>
+          Read
+          <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+            <LinkSvg />
+          </div>
+        </ChipLink>
+      )}
+      {hackernews && (
+        <ChipLink href={hackernews} target="_blank">
+          Hackernews
+          <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+            <HackernewsSvg />
+          </div>
+        </ChipLink>
+      )}
+    </div>
+  )
+}
+
+export const CartTitle = ({ children }: { children: any }) => (
+  <span className="z-0 relative text-[#F4FFFA90] bg-clip-text bg-gradient-to-r from-[#F4FFFA] to-[#675FA7] tracking-[-.5px] text-xl">
+    {children}
+    <div className="absolute -z-10 inset-0 w-full h-full bg-[#1C1C1C90] rounded-full blur-xl" />
+  </span>
+)
+
+export default {
+  AccordionHeader,
+  DocsSvg,
+  PencilSvg,
+  PlaySvg,
+  CartTitle,
+  ChipLink,
+  SectionButtons,
+  SmallCard,
+  StyledArticleBadge,
+}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/TicketCustomizationForm.tsx b/apps/www/components/LaunchWeek/8/Ticket/TicketCustomizationForm.tsx
index dd9aa9e243c..6d6f848b536 100644
--- a/apps/www/components/LaunchWeek/8/Ticket/TicketCustomizationForm.tsx
+++ b/apps/www/components/LaunchWeek/8/Ticket/TicketCustomizationForm.tsx
@@ -54,9 +54,7 @@ const TicketCustomizationForm = ({ supabase, user }: Props) => {
             Connected account
           </span>
         )}
-        {IS_SAVED && (
-          <span className="opacity-0 animate-fade-in text-xs text-brand-900">Saved</span>
-        )}
+        {IS_SAVED && <span className="opacity-0 animate-fade-in text-xs text-brand">Saved</span>}
         {HAS_ERROR && (
           <span className="opacity-0 animate-fade-in text-xs text-tomato-900">
             Something went wrong
@@ -72,7 +70,7 @@ const TicketCustomizationForm = ({ supabase, user }: Props) => {
         disabled
         placeholder="name"
         value={user.name}
-        icon={<IconCheck strokeWidth={2} className="w-3 text-brand-900" />}
+        icon={<IconCheck strokeWidth={2} className="w-3 text-brand" />}
       />
       <Input
         className="[&_input]:border-scale-200"
@@ -91,7 +89,7 @@ const TicketCustomizationForm = ({ supabase, user }: Props) => {
             className={[
               'w-3',
               IS_SAVING && 'text-scale-300',
-              !!formData.role ? 'text-brand-900' : 'text-scale-300',
+              !!formData.role ? 'text-brand' : 'text-scale-300',
             ].join(' ')}
           />
         }
@@ -113,7 +111,7 @@ const TicketCustomizationForm = ({ supabase, user }: Props) => {
             className={[
               'w-3',
               IS_SAVING && 'text-scale-300',
-              !!formData.company ? 'text-brand-900' : 'text-scale-300',
+              !!formData.company ? 'text-brand' : 'text-scale-300',
             ].join(' ')}
           />
         }
@@ -135,7 +133,7 @@ const TicketCustomizationForm = ({ supabase, user }: Props) => {
             className={[
               'w-3 flex spin',
               IS_SAVING && 'text-scale-300',
-              !!formData.location ? 'text-brand-900' : 'text-scale-300',
+              !!formData.location ? 'text-brand' : 'text-scale-300',
             ].join(' ')}
           />
         }
diff --git a/apps/www/components/LaunchWeek/8/Ticket/form.module.css b/apps/www/components/LaunchWeek/8/Ticket/form.module.css
index 5b6a078561b..d982d30f265 100644
--- a/apps/www/components/LaunchWeek/8/Ticket/form.module.css
+++ b/apps/www/components/LaunchWeek/8/Ticket/form.module.css
@@ -130,8 +130,8 @@
   height: 56px;
   margin-top: var(--space-4x);
   border-radius: var(--space-2x);
-  border: 1px solid var(--brand);
-  background: var(--brand);
+  border: 1px solid hsl(var(--brand-default));
+  background: hsl(var(--brand-default));
   cursor: pointer;
   font-family: inherit;
   font-size: var(--text-md);
@@ -170,12 +170,12 @@
 .submit.default:hover,
 .submit.default:focus {
   background: black;
-  color: var(--brand);
+  color: hsl(var(--brand-default));
 }
 
 .submit.default.generate-with-github:hover path,
 .submit.default.generate-with-github:focus path {
-  fill: var(--brand);
+  fill: hsl(var(--brand-default));
 }
 
 .submit.error:hover,
diff --git a/apps/www/components/Layouts/SectionContainer.tsx b/apps/www/components/Layouts/SectionContainer.tsx
index db5ec705165..931294e211d 100644
--- a/apps/www/components/Layouts/SectionContainer.tsx
+++ b/apps/www/components/Layouts/SectionContainer.tsx
@@ -3,10 +3,12 @@ import classNames from 'classnames'
 interface Props {
   children: React.ReactNode
   className?: string
+  id?: string
 }
 
-const SectionContainer = ({ children, className }: Props) => (
+const SectionContainer = ({ children, className, id }: Props) => (
   <div
+    id={id}
     className={classNames(
       `sm:py-18 container relative mx-auto px-6 py-16 md:py-24 lg:px-16 lg:py-24 xl:px-20`,
       className
diff --git a/apps/www/components/MagnifiedProducts.tsx b/apps/www/components/MagnifiedProducts.tsx
index 17880f85e71..fc288b4b771 100644
--- a/apps/www/components/MagnifiedProducts.tsx
+++ b/apps/www/components/MagnifiedProducts.tsx
@@ -93,7 +93,7 @@ function Product({
               lazyBoundary="100px"
             />
           </motion.div>
-          <div className="text-brand-1100 dark:text-brand-900 flex justify-center relative opacity-70 md:absolute md:bottom-0 md:opacity-0 group-hover:opacity-100 transition-opacity md:translate-y-8 md:-left-20 md:md:-right-20 font-mono uppercase text-center text-xs mt-2">
+          <div className="text-brand-600 dark:text-brand flex justify-center relative opacity-70 md:absolute md:bottom-0 md:opacity-0 group-hover:opacity-100 transition-opacity md:translate-y-8 md:-left-20 md:md:-right-20 font-mono uppercase text-center text-xs mt-2">
             <span>{product.name}</span>
           </div>
         </a>
diff --git a/apps/www/components/Nav/Company.tsx b/apps/www/components/Nav/Company.tsx
index 7b263e0bc9b..3332c475b76 100644
--- a/apps/www/components/Nav/Company.tsx
+++ b/apps/www/components/Nav/Company.tsx
@@ -82,7 +82,7 @@ const Company = () => {
         <div className="mt-6 text-sm font-medium">
           <a
             href="/blog"
-            className="dark:text-brand-900 dark:hover:text-brand-700 text-gray-600 transition duration-150 ease-in-out hover:text-gray-500"
+            className="dark:text-brand dark:hover:text-brand-400 text-gray-600 transition duration-150 ease-in-out hover:text-gray-500"
           >
             View all posts <span aria-hidden="true">&rarr;</span>
           </a>
diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx
index 2439d76df00..cbd28eaea7a 100644
--- a/apps/www/components/Nav/index.tsx
+++ b/apps/www/components/Nav/index.tsx
@@ -85,7 +85,7 @@ const Nav = () => {
             <p className="mt-1 text-sm text-scale-1100 dark:text-dark-100">{description}</p>
           </div>
           {url && (
-            <p className="mt-2 text-sm font-medium text-brand-900 lg:mt-4">
+            <p className="mt-2 text-sm font-medium text-brand lg:mt-4">
               <TextLink label={label ? 'Get notified' : 'Learn more'} url={url} />
             </p>
           )}
@@ -120,7 +120,7 @@ const Nav = () => {
     >
       <button
         className={[
-          'text-scale-900 focus:ring-brand-900 dark:bg-scale-200 dark:hover:bg-scale-300 inline-flex items-center justify-center rounded-md bg-gray-50 p-2 hover:bg-white focus:outline-none focus:ring-2 focus:ring-inset',
+          'text-scale-900 focus:ring-brand dark:bg-scale-200 dark:hover:bg-scale-300 inline-flex items-center justify-center rounded-md bg-gray-50 p-2 hover:bg-white focus:outline-none focus:ring-2 focus:ring-inset',
           showLaunchWeekNavMode && '!bg-transparent border border-[#be9eea]',
         ].join(' ')}
         aria-expanded="false"
@@ -166,7 +166,7 @@ const Nav = () => {
     <div
       className={[
         `
-        text-scale-1200 hover:text-brand-900
+        text-scale-1200 hover:text-brand
         inline-flex cursor-pointer items-center
         border-b-2
         border-transparent
@@ -258,7 +258,7 @@ const Nav = () => {
                   <Link href="/pricing">
                     <a
                       className={[
-                        `text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
+                        `text-scale-1200 hover:text-brand hover:border-brand dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
                         border-b-2 border-transparent p-5 px-1
                         text-sm font-medium`,
                         showLaunchWeekNavMode && '!text-white',
@@ -270,7 +270,7 @@ const Nav = () => {
                   <Link href="/docs">
                     <a
                       className={[
-                        `text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
+                        `text-scale-1200 hover:text-brand hover:border-brand dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
                         border-b-2 border-transparent p-5 px-1
                         text-sm font-medium`,
                         showLaunchWeekNavMode && '!text-white',
@@ -282,7 +282,7 @@ const Nav = () => {
                   <Link href="/blog">
                     <a
                       className={[
-                        `text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
+                        `text-scale-1200 hover:text-brand hover:border-brand dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
                         border-b-2 border-transparent p-5 px-1
                         text-sm font-medium`,
                         showLaunchWeekNavMode && '!text-white',
@@ -299,7 +299,7 @@ const Nav = () => {
                     className="hidden group lg:flex"
                     type="text"
                     icon={
-                      <div className="flex items-center justify-center w-4 h-4 text-brand-800">
+                      <div className="flex items-center justify-center w-4 h-4 text-brand-300">
                         <div
                           className={[
                             `text-scale-900 flex h-3 w-3 items-center justify-center
@@ -376,7 +376,7 @@ const Nav = () => {
                   <button
                     onClick={() => setOpen(false)}
                     type="button"
-                    className="inline-flex items-center justify-center p-2 bg-white rounded-md text-scale-900 focus:ring-brand-900 dark:bg-scale-300 dark:hover:bg-scale-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset"
+                    className="inline-flex items-center justify-center p-2 bg-white rounded-md text-scale-900 focus:ring-brand dark:bg-scale-300 dark:hover:bg-scale-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset"
                   >
                     <span className="sr-only">Close menu</span>
                     <svg
diff --git a/apps/www/components/Partners/PartnerLinkBox.tsx b/apps/www/components/Partners/PartnerLinkBox.tsx
index 31c3809b457..5f48015ac9e 100644
--- a/apps/www/components/Partners/PartnerLinkBox.tsx
+++ b/apps/www/components/Partners/PartnerLinkBox.tsx
@@ -19,7 +19,7 @@ const PartnerLinkBox = ({
       'bg-amber-400 dark:bg-scale-100 group-hover:bg-amber-500 dark:group-hover:bg-amber-300 text-amber-900',
     blue: 'bg-blue-400 dark:bg-scale-100 group-hover:bg-blue-500 dark:group-hover:bg-blue-300 text-blue-900',
     brand:
-      'bg-brand-400 dark:bg-scale-100 group-hover:bg-brand-500 dark:group-hover:bg-brand-300 text-brand-900',
+      'bg-brand-400 dark:bg-scale-100 group-hover:bg-brand-300 dark:group-hover:bg-brand-300 text-brand',
   }
 
   const content = (
diff --git a/apps/www/components/Pricing/ComputePricingModal.tsx b/apps/www/components/Pricing/ComputePricingModal.tsx
index eb76e04349b..7e4149fcd13 100644
--- a/apps/www/components/Pricing/ComputePricingModal.tsx
+++ b/apps/www/components/Pricing/ComputePricingModal.tsx
@@ -119,7 +119,7 @@ export default function ComputePricingModal({ showComputeModal, setShowComputeMo
                     </th>
                     <td
                       className={`px-4 py-3 ${
-                        column.key === 'plan' ? 'text-brand-900 pt-16 lg:pt-3' : ''
+                        column.key === 'plan' ? 'text-brand pt-16 lg:pt-3' : ''
                       }`}
                     >
                       {column.key === 'dedicated' ? (
diff --git a/apps/www/components/ProductIcon.tsx b/apps/www/components/ProductIcon.tsx
index 2d38ab75564..7d1c5090451 100644
--- a/apps/www/components/ProductIcon.tsx
+++ b/apps/www/components/ProductIcon.tsx
@@ -9,13 +9,13 @@ function ProductIcon({ icon, color }: ProductIcon) {
       className={[
         'inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md',
         !color || color === 'black' ? 'bg-scale-1200 text-scale-100' : '',
-        color && color === 'green' ? 'bg-brand-800 dark:bg-brand-600 text-brand-100' : '',
+        color && color === 'green' ? 'bg-brand-300 dark:bg-brand-600 text-brand-100' : '',
       ].join(' ')}
     >
       <svg
         className={[
           'h-5 w-5 stroke-white dark:stroke-black',
-          color && color === 'green' ? 'dark:stroke-brand-900' : '',
+          color && color === 'green' ? 'dark:stroke-brand' : '',
         ].join(' ')}
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
diff --git a/apps/www/components/Quote.tsx b/apps/www/components/Quote.tsx
index 2c1b1bcc48d..8eb6c7507bc 100644
--- a/apps/www/components/Quote.tsx
+++ b/apps/www/components/Quote.tsx
@@ -21,7 +21,7 @@ export default function Quote(props: Props) {
             <Avatar caption={caption} img={img} />
           </div>
         )}
-        <div className="absolute rounded-full w-1 h-full inset-0 right-auto bg-brand-900" />
+        <div className="absolute rounded-full w-1 h-full inset-0 right-auto bg-brand" />
       </div>
     </figure>
   )
diff --git a/apps/www/components/SOC2RequestForm.tsx b/apps/www/components/SOC2RequestForm.tsx
index fb45809b19f..841e7e0e5b9 100644
--- a/apps/www/components/SOC2RequestForm.tsx
+++ b/apps/www/components/SOC2RequestForm.tsx
@@ -68,7 +68,7 @@ const SOC2RequestForm = () => {
   return (
     <div>
       {formSubmitted ? (
-        <h3 className="h3 text-brand-900 mt-12 text-center">
+        <h3 className="h3 text-brand mt-12 text-center">
           Thank you for your submission! A member from the Supabase team will reach out to you
           shortly!
         </h3>
diff --git a/apps/www/components/ScrollProgress.tsx b/apps/www/components/ScrollProgress.tsx
index ddbea562561..cd366d1c21f 100644
--- a/apps/www/components/ScrollProgress.tsx
+++ b/apps/www/components/ScrollProgress.tsx
@@ -30,7 +30,7 @@ const ScrollProgress = () => {
   return (
     <div className="h-[2px] w-full flex justify-start relative">
       <div
-        className="h-full top-0 bottom-0 right-0 absolute w-screen bg-brand-900 will-change-transform transition-opacity"
+        className="h-full top-0 bottom-0 right-0 absolute w-screen bg-brand will-change-transform transition-opacity"
         style={{
           display: isActive ? 'absolute' : 'relative',
           transform: `translate3d(${isActive ? progressPercentage - 100 + '%' : '0'},0,0)`,
diff --git a/apps/www/components/Sections/CommunitySlider.tsx b/apps/www/components/Sections/CommunitySlider.tsx
index f0e8ac52d93..af1bbde695b 100644
--- a/apps/www/components/Sections/CommunitySlider.tsx
+++ b/apps/www/components/Sections/CommunitySlider.tsx
@@ -130,7 +130,7 @@ const CommunitySlider = () => {
       <p className="text-scale-900 my-3 text-base">{card.abstract}</p>
 
       {card.url && (
-        <div className="text-brand-900 block cursor-pointer text-sm">Read Customer Story</div>
+        <div className="text-brand block cursor-pointer text-sm">Read Customer Story</div>
       )}
     </div>
   )
diff --git a/apps/www/components/Sections/CustomerQuotesSection.tsx b/apps/www/components/Sections/CustomerQuotesSection.tsx
index bfcd363fc8a..4715d7f390a 100644
--- a/apps/www/components/Sections/CustomerQuotesSection.tsx
+++ b/apps/www/components/Sections/CustomerQuotesSection.tsx
@@ -74,7 +74,7 @@ const CustomerQuotesSection = (props: Props) => {
             {customer.author}, {customer.role}
           </p>
           {customer.url && (
-            <div className="text-brand-900 border-t mt-4 pt-4 cursor-pointer text-sm flex items-center justify-between">
+            <div className="text-brand border-t mt-4 pt-4 cursor-pointer text-sm flex items-center justify-between">
               <span>Read Customer Story</span>
               <IconArrowUpRight />
             </div>
diff --git a/apps/www/components/Sections/ProductHeaderCentered.tsx b/apps/www/components/Sections/ProductHeaderCentered.tsx
index 9012a0f846d..98de8020142 100644
--- a/apps/www/components/Sections/ProductHeaderCentered.tsx
+++ b/apps/www/components/Sections/ProductHeaderCentered.tsx
@@ -53,7 +53,7 @@ const ProductHeaderCentered = (props: Types) => (
               {props.icon && <ProductIcon icon={props.icon} />}
               {props.title && (
                 <span
-                  className="text-brand-900 font-mono uppercase tracking-widest text-sm"
+                  className="text-brand font-mono uppercase tracking-widest text-sm"
                   key={`product-name-${props.title}`}
                 >
                   {props.title}
diff --git a/apps/www/components/Sections/TimedTabsSection.tsx b/apps/www/components/Sections/TimedTabsSection.tsx
index 532a70fb177..1de3cc0ddd7 100644
--- a/apps/www/components/Sections/TimedTabsSection.tsx
+++ b/apps/www/components/Sections/TimedTabsSection.tsx
@@ -29,7 +29,7 @@ const Tab = ({ isActive, label, paragraph, onClick, progress, intervalDuration }
       {isActive && (
         <motion.div
           className={[
-            'absolute inset-0 w-full right-full bg-brand-900 h-full transition-opacity',
+            'absolute inset-0 w-full right-full bg-brand h-full transition-opacity',
             progress! > 99.7 ? 'opacity-0' : 'opacity-100',
           ].join(' ')}
           style={{ x: `${progress! - 100}%` }}
diff --git a/apps/www/data/products/vector/pageData.tsx b/apps/www/data/products/vector/pageData.tsx
index 2da32838233..2ae6b53155f 100644
--- a/apps/www/data/products/vector/pageData.tsx
+++ b/apps/www/data/products/vector/pageData.tsx
@@ -162,7 +162,7 @@ export default {
       <>
         <span className="heading-gradient">Simple yet</span>
         <br />
-        <span className="text-brand-900">powerful APIs</span>
+        <span className="text-brand">powerful APIs</span>
       </>
     ),
     paragraph: 'Easy-to-use client libraries for managing and querying vector stores in Postgres.',
@@ -242,7 +242,7 @@ docs.query(
       <>
         <span className="heading-gradient">Powerful Features</span>
         <br />
-        <span className="text-brand-900">Scale to millions</span>
+        <span className="text-brand">Scale to millions</span>
       </>
     ),
     paragraph:
diff --git a/apps/www/layouts/comparison.tsx b/apps/www/layouts/comparison.tsx
index 020d31e2559..c832c800eda 100644
--- a/apps/www/layouts/comparison.tsx
+++ b/apps/www/layouts/comparison.tsx
@@ -90,7 +90,7 @@ const LayoutComparison = ({ components, props }: Props) => {
           {/* Title and description */}
           <div className="mb-16 max-w-5xl space-y-8">
             <div className="space-y-4">
-              <p className="text-brand-900 text-center">Alternative</p>
+              <p className="text-brand text-center">Alternative</p>
               <h1 className="h1 text-center">{props.blog.title}</h1>
               <div className="text-scale-900 flex justify-center space-x-3 text-sm">
                 <p>{props.blog.date}</p>
diff --git a/apps/www/pages/beta.tsx b/apps/www/pages/beta.tsx
index 8ac450a2b35..f72f5e5a8fd 100644
--- a/apps/www/pages/beta.tsx
+++ b/apps/www/pages/beta.tsx
@@ -118,7 +118,7 @@ const Hero = (props: Props) => {
         <div className="col-span-12 text-scale-900 dark:text-white md:col-span-9 lg:col-span-8 xl:col-span-6">
           <p className="mb-10 text-4xl">Supabase is an open source Firebase alternative.</p>
           <p className="text-2xl">
-            Today, we're moving to <span className="text-brand-900">Beta</span>
+            Today, we're moving to <span className="text-brand">Beta</span>
           </p>
           <time itemProp="datePublished" dateTime="2020-12-03" className="text-sm opacity-80">
             Published December 3rd, 2020
@@ -139,7 +139,7 @@ const Introduction = () => {
             <a
               href="https://news.ycombinator.com/item?id=23319901"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               Alpha
             </a>{' '}
@@ -154,7 +154,7 @@ const Introduction = () => {
           <a
             href="/blog/2020/12/02/case-study-xendit"
             target="_blank"
-            className="text-brand-900 hover:text-brand-900"
+            className="text-brand hover:text-brand"
           >
             Xendit
           </a>
@@ -162,7 +162,7 @@ const Introduction = () => {
           <a
             href="/blog/2020/12/02/case-study-monitoro"
             target="_blank"
-            className="text-brand-900 hover:text-brand-900"
+            className="text-brand hover:text-brand"
           >
             Monitoro
           </a>
@@ -170,7 +170,7 @@ const Introduction = () => {
           <a
             href="/blog/2020/12/02/case-study-tayfa"
             target="_blank"
-            className="text-brand-900 hover:text-brand-900"
+            className="text-brand hover:text-brand"
           >
             TAYFA
           </a>{' '}
@@ -223,8 +223,7 @@ const TableOfContents = (props: any) => {
       <div className="container grid grid-cols-12 gap-4 px-8 py-20 mx-auto lg:px-28">
         <div className="col-span-12 mb-10 text-base">
           <p className="text-2xl text-black dark:text-white">
-            Supabase <span className="text-brand-900 dark:text-brand-900">Beta</span> is starting
-            now.
+            Supabase <span className="text-brand dark:text-brand">Beta</span> is starting now.
           </p>
         </div>
         <div className="grid grid-cols-12 col-span-12 gap-y-10">
@@ -314,7 +313,7 @@ const Performance = () => {
                       <Bar
                         color={
                           stat.name === 'Supabase'
-                            ? 'bg-brand-900 dark:bg-brand-800'
+                            ? 'bg-brand dark:bg-brand-300'
                             : 'bg-brand-300 dark:bg-brand-400'
                         }
                         finalPercentage={Math.ceil((stat.value / maxValue) * 100)}
@@ -353,7 +352,7 @@ const Performance = () => {
               <a
                 href="https://elixir-lang.org/"
                 target="_blank"
-                className="text-brand-900 hover:text-brand-900"
+                className="text-brand hover:text-brand"
               >
                 Elixir
               </a>{' '}
@@ -361,7 +360,7 @@ const Performance = () => {
               <a
                 href="https://github.com/supabase/realtime"
                 target="_blank"
-                className="text-brand-900 hover:text-brand-900"
+                className="text-brand hover:text-brand"
               >
                 Realtime engine
               </a>
@@ -369,7 +368,7 @@ const Performance = () => {
               <a
                 href="https://postgrest.org/en/v7.0.0/"
                 target="_blank"
-                className="text-brand-900 hover:text-brand-900"
+                className="text-brand hover:text-brand"
               >
                 PostgREST
               </a>{' '}
@@ -381,7 +380,7 @@ const Performance = () => {
               <a
                 href="https://github.com/supabase/benchmarks/"
                 target="_blank"
-                className="text-brand-900 hover:text-brand-900"
+                className="text-brand hover:text-brand"
               >
                 benchmarks
               </a>{' '}
@@ -451,11 +450,7 @@ const Security = () => {
               </li>
               <li className="mb-5">
                 Adopted the{' '}
-                <a
-                  href="https://snyk.io/"
-                  target="_blank"
-                  className="text-brand-900 hover:text-brand-900"
-                >
+                <a href="https://snyk.io/" target="_blank" className="text-brand hover:text-brand">
                   Snyk
                 </a>{' '}
                 dependency monitor as part of our SSDLC on several key component of our system, to
@@ -467,7 +462,7 @@ const Security = () => {
                 <a
                   href="https://github.com/PostgREST/postgrest/pull/1600#issuecomment-735257952"
                   target="_blank"
-                  className="text-brand-900 hover:text-brand-900"
+                  className="text-brand hover:text-brand"
                 >
                   now uses
                 </a>{' '}
@@ -513,7 +508,7 @@ const Reliability = () => {
               <a
                 href="https://status.supabase.com"
                 target="_blank"
-                className="text-brand-900 hover:text-brand-900"
+                className="text-brand hover:text-brand"
               >
                 https://status.supabase.com
               </a>{' '}
@@ -557,7 +552,7 @@ const NewFeaturesAndIntegrations = () => {
                   <a
                     href="/docs/reference/javascript/auth-signup"
                     target="_blank"
-                    className="text-brand-900 hover:text-brand-900"
+                    className="text-brand hover:text-brand"
                   >
                     JavaScript
                   </a>{' '}
@@ -565,7 +560,7 @@ const NewFeaturesAndIntegrations = () => {
                   <a
                     href="/docs/gotrue/server/about#endpoints"
                     target="_blank"
-                    className="text-brand-900 hover:text-brand-900"
+                    className="text-brand hover:text-brand"
                   >
                     HTTP
                   </a>
@@ -587,7 +582,7 @@ const NewFeaturesAndIntegrations = () => {
                   <a
                     href="/docs/guides/client-libraries#realtime-changes"
                     target="_blank"
-                    className="text-brand-900 hover:text-brand-900"
+                    className="text-brand hover:text-brand"
                   >
                     subscribe to changes in your database
                   </a>{' '}
@@ -606,7 +601,7 @@ const NewFeaturesAndIntegrations = () => {
                   <a
                     href="/docs/reference/javascript/select#query-foreign-tables"
                     target="_blank"
-                    className="text-brand-900 hover:text-brand-900"
+                    className="text-brand hover:text-brand"
                   >
                     querying from multiple tables
                   </a>{' '}
@@ -614,7 +609,7 @@ const NewFeaturesAndIntegrations = () => {
                   <a
                     href="/docs/reference/javascript/rpc"
                     target="_blank"
-                    className="text-brand-900 hover:text-brand-900"
+                    className="text-brand hover:text-brand"
                   >
                     invoke complex functions
                   </a>
@@ -703,7 +698,7 @@ const BetaPricing = () => (
               <a
                 href="mailto:rory@supabase.io"
                 target="_blank"
-                className="text-brand-900 hover:text-brand-900"
+                className="text-brand hover:text-brand"
               >
                 rory@supabase.io
               </a>
@@ -716,7 +711,7 @@ const BetaPricing = () => (
           </ul>
           <p>
             The Supabase Base plan is now called the Supabase Pro plan as per the{' '}
-            <a href="https://supabase.com/pricing" className="text-brand-900 hover:text-brand-900">
+            <a href="https://supabase.com/pricing" className="text-brand hover:text-brand">
               pricing page
             </a>
             .
@@ -747,7 +742,7 @@ const OpenSource = () => (
             <a
               href="https://github.com/sponsors/supabase/"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               sponsorship
             </a>{' '}
@@ -759,7 +754,7 @@ const OpenSource = () => (
             <a
               href="/blog/2020/12/02/supabase-striveschool"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               partnering with Strive School
             </a>{' '}
@@ -772,7 +767,7 @@ const OpenSource = () => (
             <a
               href="mailto:rory@supabase.io"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               rory@supabase.io
             </a>{' '}
@@ -783,7 +778,7 @@ const OpenSource = () => (
             <a
               href="https://github.com/supabase"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               our GitHub.
             </a>{' '}
@@ -819,7 +814,7 @@ const FundingPartners = () => (
             <a
               href="https://twitter.com/supabase"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               Twitter
             </a>{' '}
@@ -856,7 +851,7 @@ const ScalingOurTeam = () => (
             <a
               href="mailto:work@supabase.io"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               work@supabase.io
             </a>
@@ -917,7 +912,7 @@ const WhatsNext = () => (
             <a
               href="mailto:support@supabase.io"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               support@supabase.io
             </a>{' '}
@@ -925,7 +920,7 @@ const WhatsNext = () => (
             <a
               href="https://github.com/supabase/supabase/discussions"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               discussion
             </a>{' '}
diff --git a/apps/www/pages/blog/[slug].tsx b/apps/www/pages/blog/[slug].tsx
index 1b1fcbd5b8b..356c3d5c107 100644
--- a/apps/www/pages/blog/[slug].tsx
+++ b/apps/www/pages/blog/[slug].tsx
@@ -202,7 +202,7 @@ function BlogPostPage(props: any) {
               {/* Title and description */}
               <div className="mb-16 max-w-5xl space-y-8">
                 <div className="space-y-4">
-                  <p className="text-brand-900">Blog post</p>
+                  <p className="text-brand">Blog post</p>
                   <h1 className="h1">{props.blog.title}</h1>
                   <div className="text-scale-900 flex space-x-3 text-sm">
                     <p>{props.blog.date}</p>
diff --git a/apps/www/pages/careers/index.tsx b/apps/www/pages/careers/index.tsx
index a303e9f2e9a..f03c234b0a1 100644
--- a/apps/www/pages/careers/index.tsx
+++ b/apps/www/pages/careers/index.tsx
@@ -101,7 +101,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
       <DefaultLayout>
         <div className="text-scale-1200">
           <div className="container relative mx-auto px-6 py-10 lg:pt-12 lg:px-16 xl:px-20 text-center space-y-4">
-            <h1 className="text-sm text-brand-900 md:text-base">
+            <h1 className="text-sm text-brand md:text-base">
               <span className="sr-only">Supabase </span>Careers
             </h1>
             <h2 className="text-3xl md:text-4xl xl:text-5xl lg:max-w-2xl xl:max-w-3xl lg:mx-auto tracking-[-1.5px]">
@@ -121,9 +121,9 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                 return (
                   <div
                     key={i}
-                    className="border-t-[1px] mt-6 mx-2 md:mx-2 md:mt-0 md:border-0 border-brand-900 w-[134px] md:max-w-none"
+                    className="border-t-[1px] mt-6 mx-2 md:mx-2 md:mt-0 md:border-0 border-brand w-[134px] md:max-w-none"
                   >
-                    <div className="hidden md:block border-t-[1px] lg:border-t-2 border-brand-900 w-[60px] lg:w-[100px]"></div>
+                    <div className="hidden md:block border-t-[1px] lg:border-t-2 border-brand w-[60px] lg:w-[100px]"></div>
                     <h2 className="text-3xl lg:text-4xl pt-3 tracking-[-1.5px]">
                       {company.number}
                     </h2>
@@ -153,7 +153,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                       Discord to stay connected to our team, and our community.
                     </p>
                     <div className="max-w-[300px] sm:max-w-md lg:max-w-md mt-20">
-                      <div className="border-t-2 border-brand-900 w-4/12"></div>
+                      <div className="border-t-2 border-brand w-4/12"></div>
                       <h2 className="text-2xl sm:text-3xl lg:text-4xl pt-2 tracking-[-1.5px]">
                         We deeply believe in the efficacy of collaborative open source
                       </h2>
@@ -445,10 +445,10 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                     className="flex lg:block items-start space-x-6 lg:space-x-0 lg:w-full"
                   >
                     <div className="lg:flex items-center">
-                      <h3 className="bg-brand-600 border-[1px] border-brand-800 text-brand-900 text-md text-center w-[44px] px-2 py-1.5 rounded-md">
+                      <h3 className="bg-brand-600 border-[1px] border-brand-300 text-brand text-md text-center w-[44px] px-2 py-1.5 rounded-md">
                         {i + 1}
                       </h3>
-                      <div className="h-[100px] w-[1px] sm:h-[100px] mx-auto lg:h-[1px] lg:w-full bg-brand-800 lg:pr-6"></div>
+                      <div className="h-[100px] w-[1px] sm:h-[100px] mx-auto lg:h-[1px] lg:w-full bg-brand-300 lg:pr-6"></div>
                     </div>
                     <div className="lg:mt-6">
                       <h2 className="sm:text-lg max-w-[75%] xl:max-w-none xl:w-11/12 lg:max-w-none">
@@ -461,7 +461,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                   </div>
                 )
               })}
-              <h3 className="bg-brand-600 border-[1px] border-brand-800 text-brand-900 text-xl w-[44px] min-h-[40px] px-2 py-1 rounded-md grid justify-items-center items-center">
+              <h3 className="bg-brand-600 border-[1px] border-brand-300 text-brand text-xl w-[44px] min-h-[40px] px-2 py-1 rounded-md grid justify-items-center items-center">
                 <IconCheck />
               </h3>
             </div>
diff --git a/apps/www/pages/customers/[slug].tsx b/apps/www/pages/customers/[slug].tsx
index 7be097ca5b9..19880b2ca34 100644
--- a/apps/www/pages/customers/[slug].tsx
+++ b/apps/www/pages/customers/[slug].tsx
@@ -122,9 +122,7 @@ function CaseStudyPage(props: any) {
                 <article className="flex flex-col gap-8">
                   <div className="flex flex-col gap-8 max-w-xxl">
                     <Link passHref href="/customers">
-                      <a className="text-brand-900 hover:text-brand-1000 mb-2 mt-0">
-                        Customer Stories
-                      </a>
+                      <a className="text-brand hover:text-brand-600 mb-2 mt-0">Customer Stories</a>
                     </Link>
                     <h1 className="text-scale-1200 text-4xl font-semibold xl:text-5xl">
                       {props.blog.title}
diff --git a/apps/www/pages/edge-functions/edge-functions.tsx b/apps/www/pages/edge-functions/edge-functions.tsx
index 20900033d31..981685a0268 100644
--- a/apps/www/pages/edge-functions/edge-functions.tsx
+++ b/apps/www/pages/edge-functions/edge-functions.tsx
@@ -145,7 +145,7 @@ function Database() {
                     className="bg-scale-100 dark:bg-scale-300 group flex flex-col gap-4 rounded border px-8 py-6"
                     key={i}
                   >
-                    <div className="bg-scale-300 dark:bg-scale-500 text-scale-1200 group-hover:text-brand-900 flex h-12 w-12 items-center justify-center rounded-md border transition-all group-hover:scale-105">
+                    <div className="bg-scale-300 dark:bg-scale-500 text-scale-1200 group-hover:text-brand flex h-12 w-12 items-center justify-center rounded-md border transition-all group-hover:scale-105">
                       {item.icon ? item.icon : <IconCode strokeWidth={2} />}
                     </div>
 
diff --git a/apps/www/pages/launch-week/6/index.tsx b/apps/www/pages/launch-week/6/index.tsx
index 7f8f8426cc1..4912c976a6b 100644
--- a/apps/www/pages/launch-week/6/index.tsx
+++ b/apps/www/pages/launch-week/6/index.tsx
@@ -1018,7 +1018,7 @@ export default function launchweek() {
                 href="https://supabase.com/blog/launch-week-6-hackathon"
                 target="_blank"
                 rel="nooper noreferrer"
-                className="text-brand-900"
+                className="text-brand"
               >
                 blog post
               </a>
@@ -1052,7 +1052,7 @@ export default function launchweek() {
                   <a
                     href="https://discord.supabase.com/"
                     rel="noopener noreferrer"
-                    className="text-brand-900 flex items-center"
+                    className="text-brand flex items-center"
                     target="_blank"
                   >
                     Join our Discord <IconExternalLink size="small" className="inline-block ml-2" />
@@ -1064,7 +1064,7 @@ export default function launchweek() {
                 <p className="text-slate-900 w-[90%] lg:w-[80%]">
                   Submit your project through{' '}
                   <a
-                    className="text-brand-900"
+                    className="text-brand"
                     href="https://www.madewithsupabase.com/launch-week-6"
                     target="_blank"
                   >
@@ -1091,7 +1091,7 @@ export default function launchweek() {
                 <div className="border border-[#2E2E2E] rounded-xl pl-5 pr-9 py-4 mb-4 bg-[#121212] w-fit relative max-w-[250px]">
                   <img
                     src="/images/launchweek/link.svg"
-                    className="absolute top-[16px] right-[10px] text-brand-900"
+                    className="absolute top-[16px] right-[10px] text-brand"
                   ></img>
                   <h3 className="text-white">Supabase Cache Helpers</h3>
                   <p className="text-slate-1000 text-xs">Previous Best Overall Project Winner</p>
@@ -1105,7 +1105,7 @@ export default function launchweek() {
                 <div className="border border-[#2E2E2E] rounded-xl pl-5 pr-9 py-4 mb-4 bg-[#121212] w-fit relative max-w-[250px]">
                   <img
                     src="/images/launchweek/link.svg"
-                    className="absolute top-[16px] right-[10px] text-brand-900"
+                    className="absolute top-[16px] right-[10px] text-brand"
                   ></img>
                   <h3 className="text-white">Super UI</h3>
                   <p className="text-slate-1000 text-xs">Previous Best Overall Project Runner Up</p>
@@ -1120,7 +1120,7 @@ export default function launchweek() {
                 <div className="border border-[#2E2E2E] rounded-xl pl-5 pr-9 py-4 mb-4 bg-[#121212] w-fit relative max-w-[250px]">
                   <img
                     src="/images/launchweek/link.svg"
-                    className="absolute top-[16px] right-[10px] text-brand-900"
+                    className="absolute top-[16px] right-[10px] text-brand"
                   ></img>
                   <h3 className="text-white">Quid Faciam Hodie?</h3>
                   <p className="text-slate-1000 text-xs">Winner Best Flutter Project</p>
@@ -1130,7 +1130,7 @@ export default function launchweek() {
                 <div className="border border-[#2E2E2E] rounded-xl pl-5 pr-9 py-4 mb-4 bg-[#121212] w-fit relative max-w-[250px]">
                   <img
                     src="/images/launchweek/link.svg"
-                    className="absolute top-[16px] right-[10px] text-brand-900"
+                    className="absolute top-[16px] right-[10px] text-brand"
                   ></img>
                   <h3 className="text-white">That Hot Dog Game</h3>
                   <p className="text-slate-1000 text-xs">Previous Winner: Most Fun/Interesting</p>
@@ -1145,7 +1145,7 @@ export default function launchweek() {
                 <div className="border border-[#2E2E2E] rounded-xl pl-5 pr-9 py-4 bg-[#121212] w-fit relative max-w-[250px]">
                   <img
                     src="/images/launchweek/link.svg"
-                    className="absolute top-[16px] right-[10px] text-brand-900"
+                    className="absolute top-[16px] right-[10px] text-brand"
                   ></img>
                   <h3 className="text-white">RepoWatch</h3>
                   <p className="text-slate-1000 text-xs">Previous Winner Best Realtime Project</p>
@@ -1177,10 +1177,10 @@ export default function launchweek() {
                   }}
                 >
                   <div className="relative group">
-                    <div className="absolute -inset-0.5 bg-brand-1100 rounded-full opacity-75 group-hover:opacity-100 group-hover:blur-sm transition duration-500"></div>
+                    <div className="absolute -inset-0.5 bg-brand-600 rounded-full opacity-75 group-hover:opacity-100 group-hover:blur-sm transition duration-500"></div>
                     <a href={creator.link} target="_blank" rel="noopener">
                       <img
-                        className="relative rounded-full w-12 h-12 border border-[#2E2E2E] border-brand-900 hover:shadow-md"
+                        className="relative rounded-full w-12 h-12 border border-[#2E2E2E] border-brand hover:shadow-md"
                         src={creator.profile_picture}
                       />
                     </a>
@@ -1204,7 +1204,7 @@ export default function launchweek() {
               We worked with more than 30 content creators from around the world to drop a mountain
               of content simultaneously!
               <a rel="noopener" target="_blank" href="/blog/the-supabase-content-storm">
-                <div className="text-brand-900 flex items-center mt-2">
+                <div className="text-brand flex items-center mt-2">
                   See all the content
                   <IconExternalLink size="small" className="inline-block ml-1" />
                 </div>
@@ -1220,7 +1220,7 @@ export default function launchweek() {
                 {activeCreator !== null && (
                   <p className="text-slate-900 ">{creators[activeCreator].description}</p>
                 )}
-                <p className="text-brand-900 mt-1">
+                <p className="text-brand mt-1">
                   <a rel="noopener" target="_blank" href={creators[activeCreator].link}>
                     <span>
                       {creators[activeCreator].link_title}
diff --git a/apps/www/pages/launch-week/index.tsx b/apps/www/pages/launch-week/index.tsx
index a44ac87bf85..0462fd955db 100644
--- a/apps/www/pages/launch-week/index.tsx
+++ b/apps/www/pages/launch-week/index.tsx
@@ -11,16 +11,19 @@ import { PageState, ConfDataContext, UserData } from '~/components/LaunchWeek/ho
 import DefaultLayout from '~/components/Layouts/Default'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import { LaunchWeekLogoHeader } from '~/components/LaunchWeek/8/LaunchWeekLogoHeader'
+import { Meetup } from '~/components/LaunchWeek/8/LW8Meetups'
 
 import { useTheme } from 'common/Providers'
 
 import 'swiper/swiper.min.css'
 import Head from 'next/head'
+import LW8CalloutsSection from '../../components/LaunchWeek/8/LW8CalloutsSection'
 
 const AnimatedParticles = dynamic(
   () => import('~/components/LaunchWeek/8/AnimatedParticles/ParticlesCanvas')
 )
 const TicketContainer = dynamic(() => import('~/components/LaunchWeek/8/Ticket/TicketContainer'))
+const LW8Meetups = dynamic(() => import('~/components/LaunchWeek/8/LW8Meetups'))
 const LaunchWeekPrizeSection = dynamic(
   () => import('~/components/LaunchWeek/8/LaunchWeekPrizeSection')
 )
@@ -29,6 +32,7 @@ const CTABanner = dynamic(() => import('~/components/CTABanner'))
 
 interface Props {
   users?: UserData[]
+  meetups?: Meetup[]
 }
 
 const supabaseAdmin = createClient(
@@ -39,7 +43,7 @@ const supabaseAdmin = createClient(
     'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9idWxkYW5ycHRsb2t0eGNmZnZuIiwicm9sZSI6ImFub24iLCJpYXQiOjE2Njk3MjcwMTIsImV4cCI6MTk4NTMwMzAxMn0.SZLqryz_-stF8dgzeVXmzZWPOqdOrBwqJROlFES8v3I'
 )
 
-export default function TicketHome({ users }: Props) {
+export default function TicketHome({ users, meetups }: Props) {
   const { query } = useRouter()
 
   const TITLE = 'Supabase LaunchWeek 8'
@@ -149,7 +153,7 @@ export default function TicketHome({ users }: Props) {
                     />
                   </div>
                 </SectionContainer>
-                <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0">
+                <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0 pointer-events-none">
                   <Image
                     src="/images/launchweek/8/LW8-gradient.png"
                     layout="fill"
@@ -162,6 +166,16 @@ export default function TicketHome({ users }: Props) {
               </div>
             </div>
 
+            <div id="twitter-spaces">
+              <SectionContainer className="!pb-0" id="hackathon">
+                <LW8CalloutsSection />
+              </SectionContainer>
+            </div>
+
+            <SectionContainer id="meetups">
+              <LW8Meetups meetups={meetups} />
+            </SectionContainer>
+
             <div className="relative !w-full max-w-[100vw] min-h-[400px] !px-4 sm:max-w-xl md:max-w-4xl lg:max-w-7xl z-20 flex flex-col justify-around items-center !py-4 md:!py-8 lg:!pb-0 gap-2 md:gap-4 !mx-auto">
               {supabase && (
                 <div className="w-full max-w-[100vw] px-4 flex justify-center py-8 md:py-20">
@@ -185,15 +199,19 @@ export default function TicketHome({ users }: Props) {
   )
 }
 
-export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
+export const getServerSideProps: GetServerSideProps = async () => {
   // fetch users for the TicketBrickWall
   const { data: users } = await supabaseAdmin!
     .from('lw8_tickets_golden')
-    .select('username, golden', { count: 'exact' })
+    .select('username, golden')
+    .limit(1000)
+
+  const { data: meetups } = await supabaseAdmin!.from('lw8_meetups').select('*')
 
   return {
     props: {
       users,
+      meetups,
     },
   }
 }
diff --git a/apps/www/pages/launch-week/tickets/[username].tsx b/apps/www/pages/launch-week/tickets/[username].tsx
index 37808e679e4..0aa62979f24 100644
--- a/apps/www/pages/launch-week/tickets/[username].tsx
+++ b/apps/www/pages/launch-week/tickets/[username].tsx
@@ -114,7 +114,7 @@ export default function UsernamePage({ user, users, ogImageUrl }: Props) {
                     )}
                   </div>
                 </SectionContainer>
-                <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0">
+                <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0 pointer-events-none">
                   <Image
                     src="/images/launchweek/8/LW8-gradient.png"
                     layout="fill"
diff --git a/apps/www/pages/launch-week/tickets/index.tsx b/apps/www/pages/launch-week/tickets/index.tsx
index 6feffbfbc68..69c57824d72 100644
--- a/apps/www/pages/launch-week/tickets/index.tsx
+++ b/apps/www/pages/launch-week/tickets/index.tsx
@@ -154,7 +154,7 @@ export default function TicketsPage({ users }: Props) {
               />
             </div>
           </SectionContainer>
-          <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0">
+          <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0 pointer-events-none">
             <Image
               src="/images/launchweek/8/LW8-gradient.png"
               layout="fill"
diff --git a/apps/www/pages/legal/dpa.tsx b/apps/www/pages/legal/dpa.tsx
index 7814c69a208..3e8bd8429fd 100644
--- a/apps/www/pages/legal/dpa.tsx
+++ b/apps/www/pages/legal/dpa.tsx
@@ -52,7 +52,7 @@ const DPA = () => {
                 <p>You can download our latest DPA document by submitting your email here.</p>
 
                 {formSubmitted ? (
-                  <p className="text-brand-900">
+                  <p className="text-brand">
                     Thank you for your submission! A new tab should have opened with the DPA
                     document
                   </p>
diff --git a/apps/www/pages/open-source/index.tsx b/apps/www/pages/open-source/index.tsx
index 1aac63bdcbe..49d24b55151 100644
--- a/apps/www/pages/open-source/index.tsx
+++ b/apps/www/pages/open-source/index.tsx
@@ -82,8 +82,8 @@ const OpenSource = () => {
                   {maintainerPills.map((x) => (
                     <li
                       key={x}
-                      className={`mx-4 rounded-t-lg inline-block p-2 cursor-pointer hover:text-brand-800 ${
-                        activePill == x ? 'bg-gray-200 dark:bg-gray-400 text-brand-800' : ''
+                      className={`mx-4 rounded-t-lg inline-block p-2 cursor-pointer hover:text-brand-300 ${
+                        activePill == x ? 'bg-gray-200 dark:bg-gray-400 text-brand-300' : ''
                       }`}
                       onClick={() => setActivePill(x)}
                     >
diff --git a/apps/www/pages/partners/experts/[slug].tsx b/apps/www/pages/partners/experts/[slug].tsx
index ffb5f8fe409..af94fef4e3c 100644
--- a/apps/www/pages/partners/experts/[slug].tsx
+++ b/apps/www/pages/partners/experts/[slug].tsx
@@ -160,7 +160,7 @@ function Partner({
                   <div className="flex items-center justify-between py-2">
                     <span className="text-scale-900">Category</span>
                     <Link href={`/partners/experts#${partner.category.toLowerCase()}`}>
-                      <a className="text-brand-900 hover:text-brand-800 transition-colors">
+                      <a className="text-brand hover:text-brand-300 transition-colors">
                         {partner.category}
                       </a>
                     </Link>
@@ -172,7 +172,7 @@ function Partner({
                       href={partner.website}
                       target="_blank"
                       rel="noreferrer"
-                      className="text-brand-900 hover:text-brand-800 transition-colors"
+                      className="text-brand hover:text-brand-300 transition-colors"
                     >
                       {new URL(partner.website).host}
                     </a>
@@ -185,7 +185,7 @@ function Partner({
                         href={partner.docs}
                         target="_blank"
                         rel="noreferrer"
-                        className="text-brand-900 hover:text-brand-800 transition-colors"
+                        className="text-brand hover:text-brand-300 transition-colors"
                       >
                         <span className="flex items-center space-x-1">
                           <span>Learn</span>
diff --git a/apps/www/pages/partners/integrations/[slug].tsx b/apps/www/pages/partners/integrations/[slug].tsx
index 95a87f58eba..76772b66469 100644
--- a/apps/www/pages/partners/integrations/[slug].tsx
+++ b/apps/www/pages/partners/integrations/[slug].tsx
@@ -201,7 +201,7 @@ function Partner({
                     <div className="flex items-center justify-between py-2">
                       <span className="text-scale-900">Category</span>
                       <Link href={`/partners/integrations#${partner.category.toLowerCase()}`}>
-                        <a className="text-brand-900 hover:text-brand-800 transition-colors">
+                        <a className="text-brand hover:text-brand-300 transition-colors">
                           {partner.category}
                         </a>
                       </Link>
@@ -213,7 +213,7 @@ function Partner({
                         href={partner.website}
                         target="_blank"
                         rel="noreferrer"
-                        className="text-brand-900 hover:text-brand-800 transition-colors"
+                        className="text-brand hover:text-brand-300 transition-colors"
                       >
                         {new URL(partner.website).host}
                       </a>
@@ -226,7 +226,7 @@ function Partner({
                           href={partner.docs}
                           target="_blank"
                           rel="noreferrer"
-                          className="text-brand-900 hover:text-brand-800 transition-colors"
+                          className="text-brand hover:text-brand-300 transition-colors"
                         >
                           <span className="flex items-center space-x-1">
                             <span>Learn</span>
diff --git a/apps/www/pages/partners/integrations/index.tsx b/apps/www/pages/partners/integrations/index.tsx
index 8eba3c43e9b..eccd6d0ba2c 100644
--- a/apps/www/pages/partners/integrations/index.tsx
+++ b/apps/www/pages/partners/integrations/index.tsx
@@ -202,10 +202,10 @@ function IntegrationPartnersPage(props: Props) {
                     <a className="text-scale-1200">INTEGRATIONS</a>
                   </Link>
                   <Link href={`/partners/experts`}>
-                    <a className="transition-colors text-brand-900 hover:text-brand-800">EXPERTS</a>
+                    <a className="transition-colors text-brand hover:text-brand-300">EXPERTS</a>
                   </Link>
                   <Link href={`/partners/integrations#become-a-partner`}>
-                    <a className="flex items-center space-x-1 transition-colors text-brand-900 hover:text-brand-800">
+                    <a className="flex items-center space-x-1 transition-colors text-brand hover:text-brand-300">
                       BECOME A PARTNER <IconArrowRight />
                     </a>
                   </Link>
diff --git a/apps/www/pages/pricing/index.tsx b/apps/www/pages/pricing/index.tsx
index 3940e1b06e6..1cc52e0a397 100644
--- a/apps/www/pages/pricing/index.tsx
+++ b/apps/www/pages/pricing/index.tsx
@@ -104,7 +104,7 @@ export default function IndexPage() {
   }) => {
     return (
       <div className="mt-8 px-4 mobile-header">
-        <h2 className="gradient-text-brand-500 dark:gradient-text-brand-100 text-3xl font-medium uppercase font-mono">
+        <h2 className="gradient-text-brand-300 dark:gradient-text-brand-100 text-3xl font-medium uppercase font-mono">
           {plan}
         </h2>
         <div className="flex items-baseline gap-2">
@@ -150,7 +150,7 @@ export default function IndexPage() {
         <div className="relative z-10 py-16 lg:py-28">
           <div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
             <div className="mx-auto max-w-3xl space-y-2 lg:max-w-none">
-              <h1 className="text-brand-900 text-base">Pricing</h1>
+              <h1 className="text-brand text-base">Pricing</h1>
               <h2 className="h1">Predictable pricing, no surprises</h2>
               <p className="p text-lg">
                 Start building for free, collaborate with a team, then scale to millions of users
@@ -174,7 +174,7 @@ export default function IndexPage() {
                   key={`row-${plan.name}`}
                   className={[
                     plan.name === 'Pro'
-                      ? 'bg-brand-1100 dark:bg-brand-900 border px-0.5 -mt-8 rounded-[6px]'
+                      ? 'bg-brand-600 dark:bg-brand border px-0.5 -mt-8 rounded-[6px]'
                       : '',
                   ].join(' ')}
                 >
@@ -198,13 +198,13 @@ export default function IndexPage() {
                       <div className="mb-2 flex items-center gap-2">
                         <div className="flex items-center gap-2">
                           <h3
-                            className="gradient-text-brand-500 dark:gradient-text-brand-100 text-2xl font-normal
+                            className="gradient-text-brand-300 dark:gradient-text-brand-100 text-2xl font-normal
                            uppercase flex items-center gap-4 font-mono"
                           >
                             {plan.name}
                           </h3>
                           {plan.nameBadge && (
-                            <span className="bg-brand-500 text-brand-1100 rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
+                            <span className="bg-brand-300 text-brand-600 rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
                               {plan.nameBadge}
                             </span>
                           )}
@@ -249,7 +249,7 @@ export default function IndexPage() {
 
                               {plan.warning && (
                                 <p className="-mt-2">
-                                  <span className="bg-scale-200 text-brand-1100 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
+                                  <span className="bg-scale-200 text-brand-600 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
                                     {plan.warning}
                                   </span>
                                 </p>
@@ -273,7 +273,7 @@ export default function IndexPage() {
                         {plan.features.map((feature) => (
                           <li key={feature} className="flex items-center py-2 first:mt-0">
                             <IconCheck
-                              className="text-brand-900 h-4 w-4"
+                              className="text-brand h-4 w-4"
                               aria-hidden="true"
                               strokeWidth={3}
                             />
@@ -308,7 +308,7 @@ export default function IndexPage() {
             <div className="flex flex-col justify-center lg:px-8">
               <div>
                 <h3
-                  className="gradient-text-brand-500 dark:gradient-text-brand-100 text-2xl font-normal
+                  className="gradient-text-brand-300 dark:gradient-text-brand-100 text-2xl font-normal
                            uppercase flex items-center gap-4 font-mono"
                 >
                   {planEnterprise.name}
@@ -331,11 +331,7 @@ export default function IndexPage() {
               >
                 {planEnterprise.features.map((feature) => (
                   <li key={feature} className="flex items-center py-2 first:mt-0">
-                    <IconCheck
-                      className="text-brand-900 h-4 w-4 "
-                      aria-hidden="true"
-                      strokeWidth={3}
-                    />
+                    <IconCheck className="text-brand h-4 w-4 " aria-hidden="true" strokeWidth={3} />
                     <span className="dark:text-scale-1200 mb-0 ml-3 ">{feature}</span>
                   </li>
                 ))}
@@ -407,7 +403,7 @@ export default function IndexPage() {
                     </Link>
                     {addon.name === 'Optimized Compute' ? (
                       <button
-                        className="text-brand-1000 text-[13px] leading-4 hover:underline "
+                        className="text-brand-600 text-[13px] leading-4 hover:underline "
                         onClick={() => setShowComputeModal(true)}
                       >
                         {addon.rightCtaText}
@@ -440,7 +436,7 @@ export default function IndexPage() {
           className="grid lg:grid-cols-2 gap-8 items-center mt-12 lg:mt-8 max-w-6xl mx-auto"
         >
           <div>
-            <span className="bg-brand-500 text-brand-1100 rounded-md bg-opacity-30 inline-block  dark:bg-scale-400 dark:text-scale-1100 py-0.5 px-2 text-[13px] leading-4 mt-2">
+            <span className="bg-brand-300 text-brand-600 rounded-md bg-opacity-30 inline-block  dark:bg-scale-400 dark:text-scale-1100 py-0.5 px-2 text-[13px] leading-4 mt-2">
               Available for Pro plan
             </span>
             <h2 className="text-scale-1200 text-4xl mt-4">Cost control with spend caps</h2>
@@ -735,7 +731,7 @@ export default function IndexPage() {
                         scope="col"
                         key={plan.name}
                       >
-                        <h3 className="gradient-text-brand-500 dark:gradient-text-brand-100 text-2xl font-mono font-normal uppercase flex items-center gap-4">
+                        <h3 className="gradient-text-brand-300 dark:gradient-text-brand-100 text-2xl font-mono font-normal uppercase flex items-center gap-4">
                           {plan.name}
                         </h3>
                         <div
@@ -796,7 +792,7 @@ export default function IndexPage() {
 
                             {plan.warning && (
                               <p className="-mt-2">
-                                <span className="bg-scale-100 text-brand-1100 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
+                                <span className="bg-scale-100 text-brand-600 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
                                   {plan.warning}
                                 </span>
                               </p>
@@ -953,7 +949,7 @@ export default function IndexPage() {
                 <a
                   target="_blank"
                   href="https://supabase.com/dashboard/support/new"
-                  className="transition text-brand-900 hover:text-brand-1000"
+                  className="transition text-brand hover:text-brand-600"
                 >
                   open a support ticket
                 </a>{' '}
@@ -964,7 +960,7 @@ export default function IndexPage() {
                 <a
                   target="_blank"
                   href="https://supabase.com/dashboard/support/new"
-                  className="transition text-brand-900 hover:text-brand-1000"
+                  className="transition text-brand hover:text-brand-600"
                 >
                   you can contact the team here
                 </a>
diff --git a/apps/www/pages/realtime/Realtime.tsx b/apps/www/pages/realtime/Realtime.tsx
index 24d82a4f836..062ed63e37e 100644
--- a/apps/www/pages/realtime/Realtime.tsx
+++ b/apps/www/pages/realtime/Realtime.tsx
@@ -66,7 +66,7 @@ function RealtimePage() {
             <div className="bg-scale-300 border-scale-500 relative flex h-[372px] w-[560px] items-center justify-center overflow-hidden rounded border drop-shadow-md">
               <div
                 className={[
-                  'border-brand-800 relative h-12 w-48 bg-[#34B27B]',
+                  'border-brand-300 relative h-12 w-48 bg-[#34B27B]',
                   `flex items-center justify-center ${RealtimeStyles['shape']}`,
                 ].join(' ')}
               >
diff --git a/apps/www/pages/support.tsx b/apps/www/pages/support.tsx
index 0ee2f30c399..5dd7c36e5e1 100644
--- a/apps/www/pages/support.tsx
+++ b/apps/www/pages/support.tsx
@@ -38,9 +38,7 @@ const Index = ({}: Props) => {
         <Container>
           <SectionContainer className="">
             <div className="space-y-2 text-center">
-              <h1 className="text-brand-900 font-mono text-base uppercase tracking-widest">
-                Support
-              </h1>
+              <h1 className="text-brand font-mono text-base uppercase tracking-widest">Support</h1>
               <h1 className="h1">Get Support</h1>
               <p className="text-scale-1100 lg:text-lg">
                 The Supabase Support Team is ready to help.
@@ -64,8 +62,8 @@ const Index = ({}: Props) => {
                         our GitHub issues. This can be feature requests too!
                       </p>
                       <p className="text-scale-1100 mt-2 text-sm">
-                        <span className="text-brand-900 font-bold">Use this for:</span> Bugs and
-                        other issues
+                        <span className="text-brand font-bold">Use this for:</span> Bugs and other
+                        issues
                       </p>
                     </p>
                   </div>
@@ -112,8 +110,8 @@ const Index = ({}: Props) => {
                         join us on Discord. Browse and ask questions.
                       </p>
                       <p className="text-scale-1100 mt-2 text-sm">
-                        <span className="text-brand-900 text-sm font-bold">Use this for:</span>{' '}
-                        General questions
+                        <span className="text-brand text-sm font-bold">Use this for:</span> General
+                        questions
                       </p>
                     </p>
                   </div>
@@ -183,8 +181,8 @@ const Index = ({}: Props) => {
                         or have an issue, please contact us here.
                       </p>
                       <p className="text-scale-1100 mt-2 text-sm">
-                        <span className="text-brand-900 text-sm font-bold">Use this for:</span>{' '}
-                        Issues or questions specific to you
+                        <span className="text-brand text-sm font-bold">Use this for:</span> Issues
+                        or questions specific to you
                       </p>
                     </p>
                   </div>
diff --git a/apps/www/public/images/blog/2023-08-02-july-2023-beta-update/july-2023-beta-update.png b/apps/www/public/images/blog/2023-08-02-july-2023-beta-update/july-2023-beta-update.png
new file mode 100644
index 00000000000..1b75bf3f003
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-02-july-2023-beta-update/july-2023-beta-update.png differ
diff --git a/apps/www/public/images/launchweek/8/lw8-hackathon-thumb.svg b/apps/www/public/images/launchweek/8/lw8-hackathon-thumb.svg
new file mode 100644
index 00000000000..7914a72a43a
--- /dev/null
+++ b/apps/www/public/images/launchweek/8/lw8-hackathon-thumb.svg
@@ -0,0 +1,66 @@
+<svg width="132" height="76" viewBox="0 0 132 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2932_199528)">
+<path d="M135.023 -31.2891H-2.9375V106.672H135.023V-31.2891Z" fill="#020405" stroke="white"/>
+<g opacity="0.3" filter="url(#filter0_f_2932_199528)">
+<path d="M-12.1957 67.4624C2.39617 70.8852 14.3008 38.7141 18.4292 22.2007C27.8868 -9.77554 76.5265 2.15942 62.3399 -20.5841C48.1534 -43.3275 25.1847 -21.2597 -12.1957 -22.1604C-49.5761 -23.0611 -22.3289 12.743 -22.5541 37.5131C-22.7793 62.2832 -65.7892 62.7336 -63.7626 77.3705C-61.736 92.0074 -30.4355 63.184 -12.1957 67.4624Z" fill="#6F13A4"/>
+</g>
+<circle cx="84.4815" cy="49.1861" r="0.417039" transform="rotate(4.39775 84.4815 49.1861)" fill="#7E7E7E"/>
+<circle cx="70.6654" cy="50.5636" r="0.417039" transform="rotate(108.965 70.6654 50.5636)" fill="#7E7E7E"/>
+<circle cx="60.431" cy="61.7823" r="0.417039" transform="rotate(108.965 60.431 61.7823)" fill="#7E7E7E"/>
+<circle cx="52.849" cy="74.38" r="0.417039" transform="rotate(108.965 52.849 74.38)" fill="#7E7E7E"/>
+<circle cx="52.2982" cy="27.4893" r="0.417039" transform="rotate(108.965 52.2982 27.4893)" fill="#7E7E7E"/>
+<circle cx="109.712" cy="62.0753" r="0.417039" transform="rotate(108.965 109.712 62.0753)" fill="#7E7E7E"/>
+<circle cx="81.169" cy="47.1236" r="0.417039" transform="rotate(4.39775 81.169 47.1236)" fill="#7E7E7E"/>
+<circle cx="120.923" cy="24.7525" r="0.417039" transform="rotate(4.39775 120.923 24.7525)" fill="#7E7E7E"/>
+<circle cx="81.1416" cy="48.4634" r="0.417039" transform="rotate(4.39775 81.1416 48.4634)" fill="#7E7E7E"/>
+<circle cx="77.4659" cy="4.05716" r="0.417039" transform="rotate(4.39775 77.4659 4.05716)" fill="#7E7E7E"/>
+<circle cx="77.4971" cy="10.3579" r="0.417039" transform="rotate(4.39775 77.4971 10.3579)" fill="#7E7E7E"/>
+<circle cx="82.6182" cy="8.56888" r="0.417039" transform="rotate(4.39775 82.6182 8.56888)" fill="#7E7E7E"/>
+<circle cx="74.1849" cy="48.2198" r="0.417039" transform="rotate(108.965 74.1849 48.2198)" fill="#7E7E7E"/>
+<circle cx="112.642" cy="50.5574" r="0.417039" transform="rotate(169.398 112.642 50.5574)" fill="#7E7E7E"/>
+<circle cx="120.539" cy="29.4917" r="0.417039" transform="rotate(-86.0346 120.539 29.4917)" fill="#7E7E7E"/>
+<circle cx="124.281" cy="29.019" r="0.417039" transform="rotate(-86.0346 124.281 29.019)" fill="#7E7E7E"/>
+<circle cx="126.234" cy="20.0425" r="0.417039" transform="rotate(-86.0346 126.234 20.0425)" fill="#7E7E7E"/>
+<circle cx="62.8511" cy="25.3355" r="0.417039" transform="rotate(-86.0346 62.8511 25.3355)" fill="#7E7E7E"/>
+<circle cx="130.66" cy="35.4136" r="0.417039" transform="rotate(-86.0346 130.66 35.4136)" fill="#7E7E7E"/>
+<circle cx="126.968" cy="8.71436" r="0.417039" transform="rotate(-86.0346 126.968 8.71436)" fill="#7E7E7E"/>
+<circle cx="74.273" cy="11.9644" r="0.417039" transform="rotate(-86.0346 74.273 11.9644)" fill="#7E7E7E"/>
+<circle cx="89.2027" cy="-0.0864194" r="0.417039" transform="rotate(-86.0346 89.2027 -0.0864194)" fill="#7E7E7E"/>
+<circle cx="67.9839" cy="23.3433" r="0.417039" transform="rotate(-86.0346 67.9839 23.3433)" fill="#7E7E7E"/>
+<circle cx="68.5503" cy="25.4175" r="0.417039" transform="rotate(-86.0346 68.5503 25.4175)" fill="#7E7E7E"/>
+<circle cx="77.316" cy="29.8433" r="0.417039" transform="rotate(-86.0346 77.316 29.8433)" fill="#7E7E7E"/>
+<circle cx="76.0738" cy="32.1011" r="0.417039" transform="rotate(-86.0346 76.0738 32.1011)" fill="#7E7E7E"/>
+<circle cx="84.9293" cy="44.6362" r="0.417039" transform="rotate(-86.0346 84.9293 44.6362)" fill="#7E7E7E"/>
+<circle cx="116.373" cy="51.702" r="0.417039" transform="rotate(169.398 116.373 51.702)" fill="#7E7E7E"/>
+<circle cx="60.2868" cy="67.0926" r="0.417039" transform="rotate(169.398 60.2868 67.0926)" fill="#7E7E7E"/>
+<circle cx="51.7594" cy="33.7059" r="0.417039" transform="rotate(169.398 51.7594 33.7059)" fill="#7E7E7E"/>
+<circle cx="116.045" cy="50.3934" r="0.417039" transform="rotate(169.398 116.045 50.3934)" fill="#7E7E7E"/>
+<circle cx="124.845" cy="75.4598" r="0.417039" transform="rotate(169.398 124.845 75.4598)" fill="#7E7E7E"/>
+<g filter="url(#filter1_d_2932_199528)">
+<ellipse cx="0.0105357" cy="0.0118572" rx="0.0105357" ry="0.0118572" transform="matrix(0.999179 0.040507 -0.108737 0.994071 81.8594 17.4141)" fill="#EADEEC"/>
+<ellipse cx="0.0118517" cy="0.0105419" rx="0.0118517" ry="0.0105419" transform="matrix(0.102081 -0.994776 0.999487 0.0320441 80.8203 17.9219)" fill="#EADEEC"/>
+<ellipse cx="0.0118517" cy="0.0105419" rx="0.0118517" ry="0.0105419" transform="matrix(0.102081 -0.994776 0.999487 0.0320441 81.5117 17.3398)" fill="#EADEEC"/>
+</g>
+<path d="M30.5417 38.0921H26.5594V42.1641H25.535V33.2263H26.5594V37.1958H30.5417V33.2263H31.5661V42.1641H30.5417V38.0921ZM40.6412 42.1641L39.8473 39.4878H36.6332L35.8393 42.1641H34.815L37.6064 33.2263H38.8869L41.6912 42.1641H40.6412ZM38.5796 35.2494L38.2979 34.1354H38.1698L37.8881 35.2494L36.8765 38.6427H39.6168L38.5796 35.2494ZM47.6 42.3177C47.0963 42.3177 46.6439 42.2281 46.2427 42.0488C45.8415 41.861 45.5 41.5793 45.2183 41.2037C44.9451 40.8281 44.7317 40.35 44.578 39.7696C44.4329 39.1805 44.3604 38.4891 44.3604 37.6952C44.3604 36.9013 44.4329 36.2141 44.578 35.6336C44.7317 35.0446 44.9451 34.5623 45.2183 34.1866C45.5 33.811 45.8415 33.5336 46.2427 33.3543C46.6439 33.1665 47.0963 33.0726 47.6 33.0726C48.3341 33.0726 48.9232 33.2305 49.3671 33.5464C49.811 33.8537 50.161 34.3275 50.4171 34.9677L49.5975 35.4671C49.4354 34.9805 49.2006 34.6135 48.8933 34.3659C48.5945 34.1098 48.1634 33.9818 47.6 33.9818C46.9171 33.9818 46.3878 34.2293 46.0122 34.7244C45.6451 35.211 45.4616 35.8683 45.4616 36.6964V38.6939C45.4616 39.522 45.6451 40.1836 46.0122 40.6787C46.3878 41.1653 46.9171 41.4086 47.6 41.4086C48.1805 41.4086 48.6286 41.2763 48.9445 41.0116C49.2604 40.7385 49.4994 40.3458 49.6616 39.8336L50.4811 40.3458C50.225 40.986 49.8622 41.4769 49.3927 41.8183C48.9317 42.1513 48.3341 42.3177 47.6 42.3177ZM56.0454 37.7336L54.8801 39.1933V42.1641H53.8558V33.2263H54.8801V36.2098L54.8033 38.0537H54.9314L56.2503 36.2098L58.4783 33.2263H59.6564L56.7112 37.0549L59.8484 42.1641H58.6448L56.0454 37.7336ZM68.2866 42.1641L67.4927 39.4878H64.2787L63.4848 42.1641H62.4604L65.2519 33.2263H66.5324L69.3366 42.1641H68.2866ZM66.225 35.2494L65.9433 34.1354H65.8153L65.5336 35.2494L64.522 38.6427H67.2622L66.225 35.2494ZM74.5931 34.1226V42.1641H73.5687V34.1226H71.0462V33.2263H77.1157V34.1226H74.5931ZM85.37 38.0921H81.3877V42.1641H80.3633V33.2263H81.3877V37.1958H85.37V33.2263H86.3944V42.1641H85.37V38.0921ZM93.459 42.3177C92.3749 42.3177 91.534 41.9464 90.9365 41.2037C90.3389 40.461 90.0402 39.2915 90.0402 37.6952C90.0402 36.0988 90.3389 34.9293 90.9365 34.1866C91.534 33.444 92.3749 33.0726 93.459 33.0726C94.5432 33.0726 95.384 33.444 95.9816 34.1866C96.5792 34.9293 96.8779 36.0988 96.8779 37.6952C96.8779 39.2915 96.5792 40.461 95.9816 41.2037C95.384 41.9464 94.5432 42.3177 93.459 42.3177ZM93.459 41.4086C94.2017 41.4086 94.7737 41.1653 95.1749 40.6787C95.5761 40.1836 95.7767 39.522 95.7767 38.6939V36.6964C95.7767 35.8683 95.5761 35.211 95.1749 34.7244C94.7737 34.2293 94.2017 33.9818 93.459 33.9818C92.7164 33.9818 92.1444 34.2293 91.7432 34.7244C91.342 35.211 91.1414 35.8683 91.1414 36.6964V38.6939C91.1414 39.522 91.342 40.1836 91.7432 40.6787C92.1444 41.1653 92.7164 41.4086 93.459 41.4086ZM102.342 36.3635L101.561 34.5196H101.433L101.522 36.3635V42.1641H100.523V33.2263H101.778L104.749 39.0269L105.53 40.8708H105.658L105.569 39.0269V33.2263H106.567V42.1641H105.312L102.342 36.3635Z" fill="#9296AA"/>
+</g>
+<defs>
+<filter id="filter0_f_2932_199528" x="-111.277" y="-78.3514" width="223.636" height="207.347" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="23.7226" result="effect1_foregroundBlur_2932_199528"/>
+</filter>
+<filter id="filter1_d_2932_199528" x="79.6286" y="16.1247" width="3.44206" height="2.98893" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="0.595867"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980333 0 0 0 0 0.508333 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2932_199528"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2932_199528" result="shape"/>
+</filter>
+<clipPath id="clip0_2932_199528">
+<rect width="131.914" height="75.3795" fill="white" transform="translate(0.0859375)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/www/public/images/launchweek/8/twitter-spaces-thumb.svg b/apps/www/public/images/launchweek/8/twitter-spaces-thumb.svg
new file mode 100644
index 00000000000..040168b9ee6
--- /dev/null
+++ b/apps/www/public/images/launchweek/8/twitter-spaces-thumb.svg
@@ -0,0 +1,13 @@
+<svg width="132" height="76" viewBox="0 0 132 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2932_199515)">
+<path d="M135.707 -30.9727H-2.25391V106.988H135.707V-30.9727Z" fill="#020405" stroke="white"/>
+<path d="M53.5312 31.597C52.8096 31.925 52.0318 32.1405 51.2258 32.2436C52.0505 31.7469 52.6878 30.9597 52.9877 30.0132C52.2099 30.4818 51.3477 30.8098 50.4386 30.9972C49.6983 30.1912 48.658 29.7227 47.4772 29.7227C45.2748 29.7227 43.4755 31.522 43.4755 33.7431C43.4755 34.0617 43.513 34.371 43.5786 34.6615C40.2423 34.4928 37.2715 32.8903 35.294 30.463C34.9473 31.0534 34.7505 31.7469 34.7505 32.4779C34.7505 33.8743 35.4534 35.1113 36.5405 35.8142C35.8751 35.8142 35.2566 35.6268 34.713 35.3456C34.713 35.3456 34.713 35.3456 34.713 35.3738C34.713 37.3231 36.1 38.9537 37.9368 39.3192C37.5995 39.4129 37.2433 39.4598 36.8778 39.4598C36.6248 39.4598 36.3718 39.4317 36.1281 39.3848C36.6342 40.9686 38.1055 42.1495 39.8768 42.1776C38.5085 43.2647 36.7748 43.9019 34.8817 43.9019C34.5631 43.9019 34.2444 43.8832 33.9258 43.8457C35.7064 44.9891 37.8244 45.6544 40.0923 45.6544C47.4772 45.6544 51.5351 39.5254 51.5351 34.2117C51.5351 34.0336 51.5351 33.8649 51.5257 33.6869C52.3129 33.1246 52.9877 32.4123 53.5312 31.597Z" fill="#9296AA"/>
+<line x1="72.6041" y1="23.8327" x2="61.7657" y2="51.7278" stroke="#9296AA" stroke-opacity="0.3" stroke-width="0.5"/>
+<path d="M90.9633 36.3271L97.5885 28.7852H96.0188L90.2635 35.3323L85.6702 28.7852H80.3711L87.3187 38.6865L80.3711 46.5946H81.9408L88.0148 39.679L92.8666 46.5946H98.1657L90.9633 36.3271ZM88.8126 38.7734L88.1076 37.7868L82.5069 29.9441H84.9184L89.4396 36.2758L90.1417 37.2624L96.018 45.4922H93.6066L88.8126 38.7734Z" fill="#9296AA"/>
+</g>
+<defs>
+<clipPath id="clip0_2932_199515">
+<rect width="131.914" height="75.3795" fill="white" transform="translate(0.0859375)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/www/styles/index.css b/apps/www/styles/index.css
index 72a5293e5c9..9ec7db5d20f 100644
--- a/apps/www/styles/index.css
+++ b/apps/www/styles/index.css
@@ -95,11 +95,11 @@ h6:not(.overwrite) {
 }
 
 .heading-gradient-brand {
-  @apply text-[#3ECF8E00] bg-clip-text bg-gradient-to-b from-brand-1000 to-brand-900 dark:to-brand-800;
+  @apply text-[#3ECF8E00] bg-clip-text bg-gradient-to-b from-brand-600 to-brand dark:to-brand-300;
 }
 
 .toc-animate {
-  @apply !translate-x-1 !text-brand-900;
+  @apply !translate-x-1 !text-brand;
 }
 
 .prose-toc a {
@@ -328,7 +328,7 @@ launch week
 */
 
 .launch-week-timeline-border--approaching {
-  border-image: linear-gradient(to bottom, var(--colors-brand9), var(--colors-purple7)) 1 100%;
+  border-image: linear-gradient(to bottom, hsl(var(--brand-default)), var(--colors-purple7)) 1 100%;
 }
 
 .launch-week-gradientBg {
@@ -472,9 +472,9 @@ launch week
   filter: blur(calc(var(--auth-ui-card-height) / 6));
   background-image: linear-gradient(
     var(--rotate),
-    var(--colors-brand),
+    hsl(var(--brand-default)),
     #3c67e3 43%,
-    var(--colors-brand)
+    hsl(var(--brand-default))
   );
   opacity: 1;
   transition: opacity 0.5s;
@@ -683,19 +683,26 @@ launch week
 }
 
 [class*='gradient-text-']::selection {
-  background-color: var(--colors-brand9);
+  background-color: hsl(var(--brand-default));
   background-clip: unset;
   -webkit-text-fill-color: white;
 }
 
 @layer utilities {
   .gradient-text-brand-100 {
-    background-image: linear-gradient(45deg, var(--colors-brand8) 0%, var(--colors-brand9) 100%);
+    background-image: linear-gradient(
+      45deg,
+      hsl(var(--brand-500)) 0%,
+      hsl(var(--brand-default)) 100%
+    );
   }
-  .gradient-text-brand-500 {
-    background-image: linear-gradient(45deg, var(--colors-brand8) 0%, var(--colors-brand9) 100%);
+  .gradient-text-brand-300 {
+    background-image: linear-gradient(
+      45deg,
+      hsl(var(--brand-500)) 0%,
+      hsl(var(--brand-default)) 100%
+    );
   }
-
   .gradient-text-scale-100 {
     background-image: -webkit-linear-gradient(45deg, #fff 0%, var(--colors-green12) 100%);
   }
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
index 432c5409ee5..153418c7ab4 100644
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -61,7 +61,7 @@ services:
 
   auth:
     container_name: supabase-auth
-    image: supabase/gotrue:v2.62.1
+    image: supabase/gotrue:v2.82.4
     depends_on:
       db:
         # Disable this if you are using an external Postgres database
@@ -247,7 +247,7 @@ services:
 
   functions:
     container_name: supabase-edge-functions
-    image: supabase/edge-runtime:v1.6.6
+    image: supabase/edge-runtime:v1.8.1
     restart: unless-stopped
     environment:
       JWT_SECRET: ${JWT_SECRET}
@@ -267,7 +267,7 @@ services:
   # Comment out everything below this point if you are using an external Postgres database
   db:
     container_name: supabase-db
-    image: supabase/postgres:15.1.0.90
+    image: supabase/postgres:15.1.0.103
     healthcheck:
       test: pg_isready -U postgres -h localhost
       interval: 5s
diff --git a/package-lock.json b/package-lock.json
index b0c58cc3eca..5a328304632 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -87,6 +87,7 @@
         "rehype-slug": "^5.1.0",
         "remark": "^14.0.2",
         "remark-admonitions": "^1.2.1",
+        "remark-emoji": "^3.1.2",
         "remark-gfm": "^3.0.1",
         "remark-slug": "^7.0.1",
         "shiki": "^0.11.1",
@@ -20160,6 +20161,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/emoticon": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/emoticon/-/emoticon-4.0.1.tgz",
+      "integrity": "sha512-dqx7eA9YaqyvYtUhJwT4rC1HIp82j5ybS1/vQ42ur+jBe17dJMwZE4+gvL1XadSFfxaPFFGt3Xsw+Y8akThDlw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/encodeurl": {
       "version": "1.0.2",
       "dev": true,
@@ -29753,6 +29763,14 @@
         "node": ">=10.5.0"
       }
     },
+    "node_modules/node-emoji": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
+      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
+      "dependencies": {
+        "lodash": "^4.17.21"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.6.11",
       "license": "MIT",
@@ -34592,6 +34610,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-emoji": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/remark-emoji/-/remark-emoji-3.1.2.tgz",
+      "integrity": "sha512-QwhAzNk27Ol64uV4z/3n55MKrNz9bhr8wg+mO5aGqIYDS+jUarS1d8Y0ZIeEBVhfGkXj6gGYM+727sOgAPvV/A==",
+      "dependencies": {
+        "emoticon": "^4.0.1",
+        "mdast-util-find-and-replace": "^2.2.2",
+        "node-emoji": "^1.11.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
     "node_modules/remark-external-links": {
       "version": "8.0.0",
       "dev": true,
diff --git a/packages/config/code-hike.scss b/packages/config/code-hike.scss
index abae362e750..0a8d5970c18 100644
--- a/packages/config/code-hike.scss
+++ b/packages/config/code-hike.scss
@@ -5,9 +5,9 @@
   --ch-3: #ffcda1;
   --ch-4: #f8f8f2;
   --ch-5: #bda4ff;
-  --ch-6: var(--colors-brand10);
+  --ch-6: hsl(var(--brand-600));
   --ch-7: #569cd6;
-  --ch-8: var(--colors-brand9);
+  --ch-8: hsl(var(--brand-default));
   --ch-9: #ffa198;
   --ch-10: #f0f6fc;
   --ch-11: #490202;
@@ -15,7 +15,8 @@
   --ch-13: #5a1e02;
   --ch-14: #161b22;
   --ch-15: #8b949e;
-  --ch-16: var(--colors-scale1);
+  // --ch-16: hsl(var(--foreground-lighter));
+  --ch-16: #2a2929;
   --ch-17: #264f78;
   --ch-18: #3794ff;
   --ch-19: #ffffff0b;
@@ -34,9 +35,9 @@
   --ch-3: #953800;
   --ch-4: #24292f;
   --ch-5: #8250df;
-  --ch-6: var(--colors-brand10);
+  --ch-6: hsl(var(--brand-600));
   --ch-7: #cf222e;
-  --ch-8: var(--colors-brand9);
+  --ch-8: hsl(var(--brand-default));
   --ch-9: #82071e;
   --ch-10: #f6f8fa;
   --ch-11: #ffebe9;
@@ -44,7 +45,8 @@
   --ch-13: #ffd8b5;
   --ch-14: #eaeef2;
   --ch-15: #57606a;
-  --ch-16: var(--colors-scale1);
+  // --ch-16: hsl(var(--foreground-lighter));
+  --ch-16: #eeeeee;
   --ch-17: #add6ff;
   --ch-18: #1a85ff;
   --ch-19: #fdff0033;
diff --git a/packages/config/default-colors.js b/packages/config/default-colors.js
index 0fecc7196f1..3373e649d3b 100644
--- a/packages/config/default-colors.js
+++ b/packages/config/default-colors.js
@@ -28,8 +28,8 @@ module.exports = {
     brand12: 'hsla(153, 60%, 95%, 1)',
   },
   contrast: {
-    'brand-hiContrast': 'var(--colors-brand-9)',
-    'brand-loContrast': 'var(--colors-brand-4)',
+    'brand-hiContrast': 'hsl(var(--brand-default))',
+    'brand-loContrast': 'hsl(var(--brand-300))',
   },
   scale: {
     scale1: 'var(--colors-slate1)',
diff --git a/packages/config/tailwind.config.js b/packages/config/tailwind.config.js
index a089a489db7..68a6d2a82b8 100644
--- a/packages/config/tailwind.config.js
+++ b/packages/config/tailwind.config.js
@@ -216,12 +216,12 @@ const uiConfig = ui({
               fontWeight: '400',
               color: 'var(--colors-scale12)',
               textDecorationLine: 'underline',
-              textDecorationColor: 'var(--colors-brand7)',
+              textDecorationColor: 'hsl(var(--brand-400))',
               textDecorationThickness: '1px',
               textUnderlineOffset: '4px',
             },
             'a:hover': {
-              textDecorationColor: 'var(--colors-brand9)',
+              textDecorationColor: 'hsl(var(--brand-default))',
             },
             figcaption: {
               color: 'var(--colors-scale9)',
diff --git a/packages/config/ui.config.js b/packages/config/ui.config.js
index be34a9cf667..b9f24c04676 100644
--- a/packages/config/ui.config.js
+++ b/packages/config/ui.config.js
@@ -26,7 +26,7 @@ const excludedRadixColors = [
 
 // generates fixed scales
 // based on the root/light mode version
-const fixedOptions = ['scale', 'scaleA', 'brand']
+const fixedOptions = ['scale', 'scaleA']
 
 function radixColorKeys() {
   let keys = Object.keys(radixUiColors)
@@ -51,7 +51,7 @@ function radixColorKeys() {
 }
 
 function generateColorClasses() {
-  const brandColors = ['brand', 'scale', 'scaleA']
+  const brandColors = ['scale', 'scaleA']
   const colors = [...radixColorKeys(), ...brandColors]
 
   let mappedColors = {}
diff --git a/packages/shared-data/pricing.ts b/packages/shared-data/pricing.ts
index e339ea72275..5e0d5c1b83a 100644
--- a/packages/shared-data/pricing.ts
+++ b/packages/shared-data/pricing.ts
@@ -204,17 +204,6 @@ export const pricing: Pricing = {
         },
         usage_based: false,
       },
-      {
-        title: 'Supabase Auth emails',
-        tooltips: { main: 'Rate limits do not apply to Custom SMTP' },
-        plans: {
-          free: '30 / hour',
-          pro: '100 / hour',
-          team: '100 / hour',
-          enterprise: 'Contact Us',
-        },
-        usage_based: false,
-      },
       {
         title: 'Single Sign-On (SAML 2.0)',
         plans: {
diff --git a/packages/ui/build/css/source/global.css b/packages/ui/build/css/source/global.css
index 7116e19977a..8e37bddc961 100644
--- a/packages/ui/build/css/source/global.css
+++ b/packages/ui/build/css/source/global.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 17 Jul 2023 15:59:23 GMT
+ * Generated on Sun, 30 Jul 2023 09:03:47 GMT
  */
 
 :root {
diff --git a/packages/ui/build/css/themes/dark.css b/packages/ui/build/css/themes/dark.css
index 3748b607d97..8fd815c27c8 100644
--- a/packages/ui/build/css/themes/dark.css
+++ b/packages/ui/build/css/themes/dark.css
@@ -1,13 +1,15 @@
 /**
  * Do not edit directly
- * Generated on Mon, 17 Jul 2023 15:59:23 GMT
+ * Generated on Sun, 30 Jul 2023 09:03:47 GMT
  */
 
 .dark {
   --brand-default: 152.9deg 60% 52.9%;
-  --brand-400: 153.6deg 41% 12%;
-  --brand-300: 152.7deg 48.5% 26.7%;
-  --brand-200: 148.5deg 43.5% 82%;
+  --brand-600: 153deg 59.5% 70%;
+  --brand-500: 153.5deg 61.8% 21.6%;
+  --brand-400: 153.3deg 65.2% 13.5%;
+  --brand-300: 153.8deg 69.6% 9%;
+  --brand-200: 152.5deg 75% 6.3%;
   --warning-default: 38.9deg 100% 57.1%;
   --warning-600: 38.9deg 89.8% 49.8%;
   --warning-500: 34.8deg 90.9% 21.6%;
diff --git a/packages/ui/build/css/themes/light.css b/packages/ui/build/css/themes/light.css
index 41927d7bc60..71845ba29cd 100644
--- a/packages/ui/build/css/themes/light.css
+++ b/packages/ui/build/css/themes/light.css
@@ -1,13 +1,15 @@
 /**
  * Do not edit directly
- * Generated on Mon, 17 Jul 2023 15:59:23 GMT
+ * Generated on Sun, 30 Jul 2023 09:03:47 GMT
  */
 
 .light {
-  --brand-primary: 152.9deg 60% 52.9%;
-  --brand-400: 153.7deg 68.7% 83.7%;
-  --brand-300: 153deg 46% 65.9%;
-  --brand-200: 148.5deg 43.5% 82%;
+  --brand-default: 152.9deg 60% 52.9%;
+  --brand-600: 153.2deg 49.7% 33.5%;
+  --brand-500: 148.7deg 42.7% 69.2%;
+  --brand-400: 149.1deg 59.3% 88.4%;
+  --brand-300: 148.6deg 77.8% 94.7%;
+  --brand-200: 156deg 71.4% 98.6%;
   --warning-default: 38.9deg 100% 57.1%;
   --warning-600: 30.2deg 100% 33.9%;
   --warning-500: 36.3deg 85.7% 67.1%;
diff --git a/packages/ui/build/css/tw-extend/color.js b/packages/ui/build/css/tw-extend/color.js
index e9a280e3825..937addc4752 100644
--- a/packages/ui/build/css/tw-extend/color.js
+++ b/packages/ui/build/css/tw-extend/color.js
@@ -529,15 +529,23 @@ module.exports = {
 },
 "brand-200": {
   cssVariable: "var(--brand-200)",
-  value: "hsl(148.5, 43.5%, 82%)"
+  value: "hsl(152.5, 75%, 6.3%)"
 },
 "brand-300": {
   cssVariable: "var(--brand-300)",
-  value: "hsl(152.70000000000005, 48.5%, 26.7%)"
+  value: "hsl(153.79999999999995, 69.6%, 9%)"
 },
 "brand-400": {
   cssVariable: "var(--brand-400)",
-  value: "hsl(153.60000000000002, 41%, 12%)"
+  value: "hsl(153.29999999999995, 65.2%, 13.5%)"
+},
+"brand-500": {
+  cssVariable: "var(--brand-500)",
+  value: "hsl(153.5, 61.8%, 21.6%)"
+},
+"brand-600": {
+  cssVariable: "var(--brand-600)",
+  value: "hsl(153, 59.5%, 70%)"
 },
 "brand-DEFAULT": {
   cssVariable: "var(--brand-default)",
diff --git a/packages/ui/src/components/Admonition/index.tsx b/packages/ui/src/components/Admonition/index.tsx
index d4b2bec0686..1a076acf41c 100644
--- a/packages/ui/src/components/Admonition/index.tsx
+++ b/packages/ui/src/components/Admonition/index.tsx
@@ -21,7 +21,7 @@ export const Admonition = ({
             : type === 'info'
             ? 'bg-scale-500 border-scale-800'
             : type === 'tip'
-            ? 'bg-brand-300 border-brand-800'
+            ? 'bg-brand-300 border-brand-300'
             : type === 'caution'
             ? 'bg-yellow-400 border-yellow-800'
             : type === 'danger'
diff --git a/packages/ui/src/components/Badge/Badge.module.css b/packages/ui/src/components/Badge/Badge.module.css
index 38c8ed21ddf..79fbcf8ac93 100644
--- a/packages/ui/src/components/Badge/Badge.module.css
+++ b/packages/ui/src/components/Badge/Badge.module.css
@@ -1,5 +1,5 @@
 /* .sbui-badge {
-  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-500 bg-opacity-10 text-brand-800;
+  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-500 bg-opacity-10 text-brand-300;
 }
 
 .sbui-badge--large {
diff --git a/packages/ui/src/components/Breadcrumb/Breadcrumb.module.css b/packages/ui/src/components/Breadcrumb/Breadcrumb.module.css
index 60a6ec4e374..6296701e328 100644
--- a/packages/ui/src/components/Breadcrumb/Breadcrumb.module.css
+++ b/packages/ui/src/components/Breadcrumb/Breadcrumb.module.css
@@ -10,11 +10,11 @@
 .sbui-breadcrumb--item {
   @apply text-gray-500 hover:text-gray-600;
   @apply cursor-pointer;
-  @apply dark:text-dark-200 dark:hover:text-brand-700;
+  @apply dark:text-dark-200 dark:hover:text-brand-400;
 }
 
 .sbui-breadcrumb--item__active {
-  @apply text-brand-700 dark:text-brand-700;
+  @apply text-brand-400 dark:text-brand-400;
 }
 
 .sbui-breadcrumb--separator {
diff --git a/packages/ui/src/components/Button/Button.module.css b/packages/ui/src/components/Button/Button.module.css
index 8c4d9b48a9a..b3f7703ec93 100644
--- a/packages/ui/src/components/Button/Button.module.css
+++ b/packages/ui/src/components/Button/Button.module.css
@@ -50,8 +50,8 @@
   Button varients
 */
 /* .sbui-btn-primary {
-  @apply text-white bg-brand-800 hover:bg-brand-600;
-  @apply dark:hover:bg-brand-900;
+  @apply text-white bg-brand-300 hover:bg-brand-600;
+  @apply dark:hover:bg-brand;
 } */
 .dark .sbui-btn-primary {
   text-shadow: 0px 0px 4px rgba(38 111 78 / 50%);
@@ -87,7 +87,7 @@
   @apply dark:text-white dark:border-dark-400 dark:hover:text-white dark:hover:border-white;
 } */
 /* .sbui-btn-link {
-  @apply bg-transparent text-brand-800 border-none hover:bg-brand-900 hover:bg-opacity-25;
+  @apply bg-transparent text-brand-300 border-none hover:bg-brand hover:bg-opacity-25;
   box-shadow: none;
 } */
 /* .sbui-btn-text {
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index ae80a6835ae..202bad9b7bf 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -9,7 +9,7 @@ import { cn } from '@ui/lib/utils'
 export type ButtonVariantProps = VariantProps<typeof buttonVariants>
 const buttonVariants = cva(
   `relative 
-  flex iems-center justify-center
+  flex items-center justify-center
   cursor-pointer 
   inline-flex 
   items-center 
@@ -30,9 +30,9 @@ const buttonVariants = cva(
     variants: {
       type: {
         primary: `
-            bg-brand-fixed-1100 hover:bg-brand-fixed-1000
+            bg-brand-600 dark:bg-brand/70 hover:bg-brand-600/80 dark:hover:bg-brand
             text-white
-            border-brand-fixed-1000 hover:border-brand-fixed-900 dark:border-brand-fixed-1000 dark:hover:border-brand-fixed-1000
+            border-brand dark:border-brand
             focus-visible:outline-brand-600
             shadow-sm`,
         secondary: `
@@ -51,11 +51,11 @@ const buttonVariants = cva(
             focus-visible:outline-brand-600
             shadow-sm`,
         alternative: `
-            text-brand-1100
+            text-brand-600
             bg-brand-200 hover:bg-brand-400
-            border-brand-600 hover:border-brand-800
-            dark:border-brand-700 hover:dark:border-brand-800
-            focus-visible:border-brand-800
+            border-brand-600 hover:border-brand-300
+            dark:border-brand-400 hover:dark:border-brand-300
+            focus-visible:border-brand-300
             focus-visible:outline-brand-600
             shadow-sm`,
         outline: `
@@ -73,7 +73,7 @@ const buttonVariants = cva(
             focus-visible:outline-scale-700
             shadow-sm`,
         link: `
-            text-brand-1100
+            text-brand-600
             border
             border-transparent
             hover:bg-brand-400
diff --git a/packages/ui/src/components/Checkbox/Checkbox.module.css b/packages/ui/src/components/Checkbox/Checkbox.module.css
index 0055c0a1519..a955fe0b51d 100644
--- a/packages/ui/src/components/Checkbox/Checkbox.module.css
+++ b/packages/ui/src/components/Checkbox/Checkbox.module.css
@@ -27,8 +27,8 @@
 }
 
 .sbui-checkbox[type='checkbox']:checked {
-  @apply dark:bg-brand-700;
-  @apply bg-brand-700;
+  @apply dark:bg-brand-400;
+  @apply bg-brand-400;
   border-color: transparent;
   background-size: 100% 100%;
   background-position: center;
@@ -38,11 +38,11 @@
 /* .sbui-checkbox {
   @apply border border-solid rounded;
 
-  @apply text-brand-700 border-gray-300 transition-all;
-  @apply hover:border-brand-500 focus:ring-brand-500 focus:outline-none;
+  @apply text-brand-400 border-gray-300 transition-all;
+  @apply hover:border-brand-300 focus:ring-brand-300 focus:outline-none;
 
   @apply dark:bg-transparent dark:border-dark-400 dark:text-white;
-  @apply dark:hover:border-brand-500;
+  @apply dark:hover:border-brand-300;
 
   margin-top: 2px;
 } */
diff --git a/packages/ui/src/components/Command/Command.icons.tsx b/packages/ui/src/components/Command/Command.icons.tsx
index 9d0914765b0..2d259785f22 100644
--- a/packages/ui/src/components/Command/Command.icons.tsx
+++ b/packages/ui/src/components/Command/Command.icons.tsx
@@ -4,7 +4,7 @@ interface AiIconProps {
   className?: string
 }
 
-export const AiIcon = ({ className = 'text-brand-900' }: AiIconProps) => (
+export const AiIcon = ({ className = 'text-brand' }: AiIconProps) => (
   <svg
     className={`w-6 h-6 ${className}`}
     width="16"
@@ -30,7 +30,7 @@ export const AiIcon = ({ className = 'text-brand-900' }: AiIconProps) => (
 export const AiIconChat = () => (
   <div
     className="w-7 h-7
-    bg-gradient-to-r from-brand-900 to-brand-800
+    bg-gradient-to-r from-brand to-brand-300
 
     ring-brand-600
     ring-1
diff --git a/packages/ui/src/components/Command/CommandMenu.tsx b/packages/ui/src/components/Command/CommandMenu.tsx
index c76fb086872..918fdaf001d 100644
--- a/packages/ui/src/components/Command/CommandMenu.tsx
+++ b/packages/ui/src/components/Command/CommandMenu.tsx
@@ -122,7 +122,7 @@ const CommandMenu = ({ projectRef }: CommandMenuProps) => {
                   forceMount
                 >
                   <AiIcon />
-                  <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-900 to-brand-1100">
+                  <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand to-brand-600">
                     Ask Supabase AI
                     {search ? (
                       <>
diff --git a/packages/ui/src/components/Command/GenerateSQL/SQLOutputActions.tsx b/packages/ui/src/components/Command/GenerateSQL/SQLOutputActions.tsx
index fe59affa469..270c78f66de 100644
--- a/packages/ui/src/components/Command/GenerateSQL/SQLOutputActions.tsx
+++ b/packages/ui/src/components/Command/GenerateSQL/SQLOutputActions.tsx
@@ -81,7 +81,7 @@ const SQLOutputActions = ({ answer, messages }: SQLOutputActionsProps) => {
           type="default"
           icon={
             showCopied ? (
-              <IconCheck size="tiny" className="text-brand-900" strokeWidth={2} />
+              <IconCheck size="tiny" className="text-brand" strokeWidth={2} />
             ) : (
               <IconClipboard size="tiny" />
             )
@@ -98,7 +98,7 @@ const SQLOutputActions = ({ answer, messages }: SQLOutputActionsProps) => {
           disabled={isSaving}
           icon={
             isSaved ? (
-              <IconCheck size="tiny" className="text-brand-900" strokeWidth={2} />
+              <IconCheck size="tiny" className="text-brand" strokeWidth={2} />
             ) : (
               <IconSave size="tiny" />
             )
diff --git a/packages/ui/src/components/Form/Form.stories.tsx b/packages/ui/src/components/Form/Form.stories.tsx
index 277ae09180e..f46c9ac0c29 100644
--- a/packages/ui/src/components/Form/Form.stories.tsx
+++ b/packages/ui/src/components/Form/Form.stories.tsx
@@ -1,14 +1,5 @@
 import { Form } from '.'
-import {
-  Input,
-  Button,
-  InputNumber,
-  Toggle,
-  Checkbox,
-  Radio,
-  Select,
-  Listbox,
-} from '../../index'
+import { Input, Button, InputNumber, Toggle, Checkbox, Radio, Select, Listbox } from '../../index'
 
 import * as Yup from 'yup'
 import { User } from '../Icon/IconImportHandler'
@@ -103,14 +94,8 @@ export const InputLevelValidation = () => {
 export const InputLevelValidationYip = () => {
   // validation schema
   const SignupSchema = Yup.object().shape({
-    firstname: Yup.string()
-      .min(2, 'Too Short!')
-      .max(50, 'Too Long!')
-      .required('Required'),
-    lastname: Yup.string()
-      .min(2, 'Too Short!')
-      .max(50, 'Too Long!')
-      .required('Required'),
+    firstname: Yup.string().min(2, 'Too Short!').max(50, 'Too Long!').required('Required'),
+    lastname: Yup.string().min(2, 'Too Short!').max(50, 'Too Long!').required('Required'),
     email: Yup.string().email('Invalid email').required('Required'),
   })
 
@@ -131,24 +116,9 @@ export const InputLevelValidationYip = () => {
     >
       {({ isSubmitting }: any) => (
         <div className="space-y-4">
-          <Input
-            id="firstname"
-            name="firstname"
-            label="firstname"
-            placeholder="firstname"
-          />
-          <Input
-            id="lastname"
-            name="lastname"
-            label="lastname"
-            placeholder="lastname"
-          />
-          <Input
-            id="email"
-            name="email"
-            label="Email"
-            placeholder="This is your email"
-          />
+          <Input id="firstname" name="firstname" label="firstname" placeholder="firstname" />
+          <Input id="lastname" name="lastname" label="lastname" placeholder="lastname" />
+          <Input id="email" name="email" label="Email" placeholder="This is your email" />
           <Button loading={isSubmitting} type="primary" htmlType="submit">
             Submit
           </Button>
@@ -239,9 +209,7 @@ export const LargerExample = () => {
 
           if (!values.email) {
             errors.email = 'Required'
-          } else if (
-            !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
-          ) {
+          } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
             errors.email = 'Invalid email address'
           }
 
@@ -286,21 +254,9 @@ export const LargerExample = () => {
           <>
             <div className="space-y-8">
               <p>{isSubmitting ? 'submitting' : 'not submitting'}</p>
-              <Input
-                id="email"
-                label="Email"
-                placeholder="something@gmail.com"
-              />
-              <Input
-                id="last_name"
-                label="last name"
-                placeholder="something in here"
-              />
-              <Select
-                id="profession"
-                label="Profession"
-                placeholder="something in here"
-              >
+              <Input id="email" label="Email" placeholder="something@gmail.com" />
+              <Input id="last_name" label="last name" placeholder="something in here" />
+              <Select id="profession" label="Profession" placeholder="something in here">
                 <Select.Option key="empty-enum" value="">
                   ---
                 </Select.Option>
@@ -349,11 +305,7 @@ export const LargerExample = () => {
                 type="list"
               >
                 <Radio value="pizza" label="Pizza" description="hello world" />
-                <Radio
-                  value="burger"
-                  label="Burger"
-                  description="hello world"
-                />
+                <Radio value="burger" label="Burger" description="hello world" />
                 <Radio value="fries" label="Fries" description="hello world" />
               </Radio.Group>
 
@@ -370,20 +322,12 @@ export const LargerExample = () => {
                       value={person.value}
                       label={person.label}
                       addOnBefore={({ active, selected }: any) => (
-                        <img
-                          src={person.avatar}
-                          alt=""
-                          className="h-6 w-6 rounded-full"
-                        />
+                        <img src={person.avatar} alt="" className="h-6 w-6 rounded-full" />
                       )}
                       children={({ active, selected }: any) => {
                         // console.log('selected', selected)
                         // console.log('active', active)
-                        return (
-                          <span className={'font-normal block truncate'}>
-                            {person.label}
-                          </span>
-                        )
+                        return <span className={'font-normal block truncate'}>{person.label}</span>
                       }}
                     />
                   )
@@ -456,12 +400,10 @@ export const CardForm = () => {
           <Panel
             header={
               <>
-                <h3 className="text-scale-1200 text-xl font-semibold">
-                  Custom Options
-                </h3>
+                <h3 className="text-scale-1200 text-xl font-semibold">Custom Options</h3>
                 <p className="text-scale-900">
-                  These settings apply to payment pages you create using Stripe
-                  Checkout and Payment Links.
+                  These settings apply to payment pages you create using Stripe Checkout and Payment
+                  Links.
                 </p>
               </>
             }
@@ -469,18 +411,10 @@ export const CardForm = () => {
               <>
                 <div className="border-t border-scale-400"></div>
                 <div className="py-3 px-6 flex gap-2 justify-end">
-                  <Button
-                    loading={isSubmitting}
-                    type="secondary"
-                    htmlType="submit"
-                  >
+                  <Button loading={isSubmitting} type="secondary" htmlType="submit">
                     Cancel
                   </Button>
-                  <Button
-                    loading={isSubmitting}
-                    type="primary"
-                    htmlType="submit"
-                  >
+                  <Button loading={isSubmitting} type="primary" htmlType="submit">
                     Save
                   </Button>
                 </div>
@@ -490,11 +424,7 @@ export const CardForm = () => {
             {/* <p>{isSubmitting ? 'submitting' : 'not submitting'}</p> */}
             {/* <div className="border-t border-scale-400"></div> */}
             <Section
-              header={
-                <label className="text-sm text-scale-1200 col-span-4">
-                  Faster checkout
-                </label>
-              }
+              header={<label className="text-sm text-scale-1200 col-span-4">Faster checkout</label>}
             >
               <Toggle
                 className="col-span-8"
@@ -506,11 +436,7 @@ export const CardForm = () => {
             </Section>
             <div className="border-t border-scale-400"></div>
             <Section
-              header={
-                <label className="text-sm text-scale-1200 col-span-4">
-                  Faster checkout
-                </label>
-              }
+              header={<label className="text-sm text-scale-1200 col-span-4">Faster checkout</label>}
             >
               <Radio.Group
                 className="col-span-8"
@@ -537,11 +463,7 @@ export const CardForm = () => {
             </Section>
             <div className="border-t border-scale-400"></div>
             <Section
-              header={
-                <label className="text-sm text-scale-1200 col-span-4">
-                  Faster checkout
-                </label>
-              }
+              header={<label className="text-sm text-scale-1200 col-span-4">Faster checkout</label>}
             >
               <div className="col-span-8 space-y-4">
                 <Input name="app_id" label="Application ID in Stripe" />
@@ -551,7 +473,7 @@ export const CardForm = () => {
                   descriptionText={
                     <span>
                       This can be found in{' '}
-                      <span className="text-brand-900 underline cursor-pointer transition hover:text-brand-800">
+                      <span className="text-brand underline cursor-pointer transition hover:text-brand-300">
                         the developer settings
                       </span>
                     </span>
diff --git a/packages/ui/src/components/Form/examples/AuthForm.tsx b/packages/ui/src/components/Form/examples/AuthForm.tsx
index 5053216d6bb..1b4987e2387 100644
--- a/packages/ui/src/components/Form/examples/AuthForm.tsx
+++ b/packages/ui/src/components/Form/examples/AuthForm.tsx
@@ -40,7 +40,7 @@ const DocsButton = () => {
                 transition
               "
     >
-      <div className="bg-brand-900 h-10 w-10 rounded p-1 transition duration-500 group-hover:-rotate-3 group-hover:scale-110">
+      <div className="bg-brand h-10 w-10 rounded p-1 transition duration-500 group-hover:-rotate-3 group-hover:scale-110">
         {/* <img
             className="text-white w-12 h-12"
             src="/icons/docs-illustration.svg"
@@ -51,7 +51,7 @@ const DocsButton = () => {
         <p className="text-scale-900 text-xs">
           Learn how to use Supabase Auth with Auth Policies to pick and choose what users see what.
         </p>
-        <p className="text-brand-900 mt-2 flex items-center gap-1 text-xs">
+        <p className="text-brand mt-2 flex items-center gap-1 text-xs">
           See Documenation
           <span className="transition group-hover:translate-x-1">
             <IconArrowRight strokeWidth={2} width={12} />
@@ -338,8 +338,8 @@ const AuthForm = () => {
             </div>
             <div className="flex items-center gap-3">
               {active ? (
-                <div className="bg-brand-200 border-brand-700 text-brand-900 flex items-center gap-1 rounded-full border py-1 px-1 text-xs">
-                  <span className="bg-brand-900 text-brand-200 rounded-full p-0.5 text-xs">
+                <div className="bg-brand-200 border-brand-400 text-brand flex items-center gap-1 rounded-full border py-1 px-1 text-xs">
+                  <span className="bg-brand text-brand-200 rounded-full p-0.5 text-xs">
                     <IconCheck strokeWidth={2} size={12} />
                   </span>
                   <span className="px-1">Enabled</span>
@@ -1114,7 +1114,7 @@ export function WholeForm() {
                 transition
               "
             >
-              <div className="bg-brand-900 h-10 w-10 rounded p-1 transition duration-500 group-hover:-rotate-3 group-hover:scale-110">
+              <div className="bg-brand h-10 w-10 rounded p-1 transition duration-500 group-hover:-rotate-3 group-hover:scale-110">
                 {/* <img
             className="text-white w-12 h-12"
             src="/icons/docs-illustration.svg"
@@ -1126,7 +1126,7 @@ export function WholeForm() {
                   Learn how to use Supabase Auth with Auth Policies to pick and choose what users
                   see what.
                 </p>
-                <p className="text-brand-900 mt-2 flex items-center gap-1 text-xs">
+                <p className="text-brand mt-2 flex items-center gap-1 text-xs">
                   See Documenation
                   <span className="transition group-hover:translate-x-1">
                     <IconArrowRight strokeWidth={2} width={12} />
diff --git a/packages/ui/src/components/GlassPanel/GlassPanel.tsx b/packages/ui/src/components/GlassPanel/GlassPanel.tsx
index 4f84bb995da..043d9daf007 100644
--- a/packages/ui/src/components/GlassPanel/GlassPanel.tsx
+++ b/packages/ui/src/components/GlassPanel/GlassPanel.tsx
@@ -37,7 +37,9 @@ const GlassPanel = ({
     <div
       className={[
         'shrink-0',
-        showIconBg ? 'bg-green-600 w-8 h-8 flex items-center justify-center rounded' : '',
+        showIconBg
+          ? 'bg-brand-300 border border-brand-400 w-8 h-8 flex items-center justify-center rounded'
+          : '',
       ].join(' ')}
     >
       {props.children}
@@ -114,7 +116,7 @@ const GlassPanel = ({
         </div>
 
         {children && <span className="text-sm text-scale-1100 flex-grow">{children}</span>}
-        {showLink && <span className="text-brand-900 justify-end text-sm">Learn more</span>}
+        {showLink && <span className="text-brand justify-end text-sm">Learn more</span>}
       </div>
     </div>
   )
diff --git a/packages/ui/src/components/Icon/Icon.module.css b/packages/ui/src/components/Icon/Icon.module.css
index a9a9de6e63e..14798373b2d 100644
--- a/packages/ui/src/components/Icon/Icon.module.css
+++ b/packages/ui/src/components/Icon/Icon.module.css
@@ -3,7 +3,7 @@
 }
 
 .sbui-icon-container--brand {
-  @apply bg-brand-800 bg-opacity-10 text-brand-800;
+  @apply bg-brand-300 bg-opacity-10 text-brand-300;
 }
 
 .sbui-icon-container--gray {
diff --git a/packages/ui/src/components/Icon/IconBackground.tsx b/packages/ui/src/components/Icon/IconBackground.tsx
index 4b73319ba46..703fcb59848 100644
--- a/packages/ui/src/components/Icon/IconBackground.tsx
+++ b/packages/ui/src/components/Icon/IconBackground.tsx
@@ -1,5 +1,5 @@
 export const IconBackground: React.FC = (props) => (
-  <div className="shrink-0 bg-green-600 w-8 h-8 flex items-center justify-center rounded">
+  <div className="shrink-0 bg-brand-300 border border-brand-400 w-8 h-8 flex items-center justify-center rounded">
     {props.children}
   </div>
 )
diff --git a/packages/ui/src/components/IconPanel/IconPanel.tsx b/packages/ui/src/components/IconPanel/IconPanel.tsx
index 00fc05a700f..90eb83e55e4 100644
--- a/packages/ui/src/components/IconPanel/IconPanel.tsx
+++ b/packages/ui/src/components/IconPanel/IconPanel.tsx
@@ -70,7 +70,13 @@ const IconPanel = ({
                 <img
                   className={iconSize === 'lg' ? 'w-8' : 'w-5'}
                   src={`${icon}${hasLightIcon && !isDarkMode ? '-light' : ''}.svg`}
-                  alt={title !== undefined ? `${title} Icon` : tooltip !== undefined ? `${tooltip} Icon` : 'Icon'}
+                  alt={
+                    title !== undefined
+                      ? `${title} Icon`
+                      : tooltip !== undefined
+                      ? `${tooltip} Icon`
+                      : 'Icon'
+                  }
                 />
               </IconContainer>
             ) : (
@@ -92,7 +98,7 @@ const IconPanel = ({
                 )}
               </div>
               {children && <span className="text-sm text-scale-1100 not-prose">{children}</span>}
-              {showLink && <span className="text-brand-900 justify-end text-sm">Learn more</span>}
+              {showLink && <span className="text-brand justify-end text-sm">Learn more</span>}
             </div>
           </div>
         </div>
diff --git a/packages/ui/src/components/Listbox/SelectStyled.module.css b/packages/ui/src/components/Listbox/SelectStyled.module.css
index e2cc7c937ff..14b34d1c018 100644
--- a/packages/ui/src/components/Listbox/SelectStyled.module.css
+++ b/packages/ui/src/components/Listbox/SelectStyled.module.css
@@ -7,7 +7,7 @@
   @apply text-gray-700 border border-solid border-gray-300;
   @apply cursor-default focus:outline-none focus:ring-1 focus:ring-brand-600 focus:border-brand-600;
   @apply dark:bg-transparent dark:text-white dark:border-gray-500;
-  @apply dark:focus:border-brand-500;
+  @apply dark:focus:border-brand-300;
   -webkit-appearance: none;
   -moz-appearance: none;
   text-indent: 1px;
diff --git a/packages/ui/src/components/Loading/Loading.module.css b/packages/ui/src/components/Loading/Loading.module.css
index fe814195451..4f2c5d1503e 100644
--- a/packages/ui/src/components/Loading/Loading.module.css
+++ b/packages/ui/src/components/Loading/Loading.module.css
@@ -10,7 +10,7 @@
 }
 
 .sbui-loading-spinner {
-  @apply text-brand-800 animate-spin;
+  @apply text-brand-300 animate-spin;
   margin: auto;
   position: absolute;
   top: 0;
diff --git a/packages/ui/src/components/Menu/Menu.module.css b/packages/ui/src/components/Menu/Menu.module.css
index 189981a4242..a78c227d664 100644
--- a/packages/ui/src/components/Menu/Menu.module.css
+++ b/packages/ui/src/components/Menu/Menu.module.css
@@ -26,7 +26,7 @@
 }
 
 .sbui-menu__item--active--bar {
-  @apply border-l-4 border-brand-500;
+  @apply border-l-4 border-brand-300;
   border-left-style: solid;
 }
 
diff --git a/packages/ui/src/components/Modal/Modal.module.css b/packages/ui/src/components/Modal/Modal.module.css
index 447c46d3585..f7808e0531a 100644
--- a/packages/ui/src/components/Modal/Modal.module.css
+++ b/packages/ui/src/components/Modal/Modal.module.css
@@ -114,7 +114,7 @@
 }
 
 .sbui-modal-icon-container--success {
-  @apply text-brand-500 bg-brand-500 bg-opacity-20;
+  @apply text-brand-300 bg-brand-300 bg-opacity-20;
 }
 
 .sbui-modal-close-container {
diff --git a/packages/ui/src/components/Modal/Modal.stories.tsx b/packages/ui/src/components/Modal/Modal.stories.tsx
index 863c71ddef9..218bc53277f 100644
--- a/packages/ui/src/components/Modal/Modal.stories.tsx
+++ b/packages/ui/src/components/Modal/Modal.stories.tsx
@@ -147,7 +147,7 @@ export const Default = (args: any) => (
     {...args}
     header={
       <div className="flex items-center gap-2 text-scale-1200">
-        <div className="text-brand-700">
+        <div className="text-brand-400">
           <IconLink2 />
         </div>
         <div className="flex items-baseline gap-2">
diff --git a/packages/ui/src/components/Radio/Radio.module.css b/packages/ui/src/components/Radio/Radio.module.css
index cf7cee7cc14..79a393d9617 100644
--- a/packages/ui/src/components/Radio/Radio.module.css
+++ b/packages/ui/src/components/Radio/Radio.module.css
@@ -43,9 +43,9 @@
   @apply h-4 w-4 ml-0 mr-3.5 rounded-2xl border border-solid transition-all;
 
   @apply text-brand-600 cursor-pointer border-gray-500;
-  @apply focus:ring-brand-500 hover:border-brand-700 focus:outline-none;
+  @apply focus:ring-brand-300 hover:border-brand-400 focus:outline-none;
 
-  @apply dark:bg-transparent dark:hover:border-brand-700;
+  @apply dark:bg-transparent dark:hover:border-brand-400;
 } */
 
 /* .sbui-radio:checked {
diff --git a/packages/ui/src/components/Tabs/Tabs.module.css b/packages/ui/src/components/Tabs/Tabs.module.css
index 9769765d554..f5cc40ac1ff 100644
--- a/packages/ui/src/components/Tabs/Tabs.module.css
+++ b/packages/ui/src/components/Tabs/Tabs.module.css
@@ -12,7 +12,7 @@
 }
 
 .sbui-tab-button-underline--active {
-  @apply border-brand-700;
+  @apply border-brand-400;
   @apply rounded-none;
   @apply text-gray-600;
   @apply dark:text-white;
diff --git a/packages/ui/src/components/Typography/Link.module.css b/packages/ui/src/components/Typography/Link.module.css
index afc0911abfc..448eb19b3f4 100644
--- a/packages/ui/src/components/Typography/Link.module.css
+++ b/packages/ui/src/components/Typography/Link.module.css
@@ -1,3 +1,3 @@
 a.sbui-typography-link {
-  @apply text-sm text-brand-700 dark:text-brand-700 cursor-pointer;
+  @apply text-sm text-brand-400 dark:text-brand-400 cursor-pointer;
 }
diff --git a/packages/ui/src/components/Typography/Typography.module.css b/packages/ui/src/components/Typography/Typography.module.css
index 95a20672200..33f2cabca71 100644
--- a/packages/ui/src/components/Typography/Typography.module.css
+++ b/packages/ui/src/components/Typography/Typography.module.css
@@ -91,6 +91,6 @@
 }
 
 .dark .sbui-typography::selection {
-  /* @apply bg-brand-500; */
+  /* @apply bg-brand-300; */
   backgroundcolor: '#6f7bb635';
 }
diff --git a/packages/ui/src/components/shadcn/ui/badge.tsx b/packages/ui/src/components/shadcn/ui/badge.tsx
index 6846cabce76..2b4eaf92bf3 100644
--- a/packages/ui/src/components/shadcn/ui/badge.tsx
+++ b/packages/ui/src/components/shadcn/ui/badge.tsx
@@ -9,7 +9,7 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default: 'bg-surface-200 text-light border border-scale-700',
-        brand: 'bg-brand-200 text-brand-primary border border-brand-700',
+        brand: 'bg-brand-200 text-brand-primary border border-brand-400',
         secondary:
           'bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground',
         destructive: 'bg-destructive-400 text-destructive border border-destructive-300',
@@ -56,7 +56,7 @@ const badgeVariants = cva(
 //         },
 //         dot: '-ml-0.5 mr-1.5 h-2 w-2 rounded-full',
 //         color: {
-//           brand: 'bg-brand-200 text-brand-1100 border border-brand-700',
+//           brand: 'bg-brand-200 text-brand-600 border border-brand-400',
 //           scale: 'bg-scale-200 text-scale-1100 border border-scale-700',
 //           tomato: `bg-tomato-200 text-tomato-1100 border border-tomato-700`,
 //           red: `bg-red-200 text-red-1100 border border-red-700`,
diff --git a/packages/ui/src/lib/tailwind-demo-classes.ts b/packages/ui/src/lib/tailwind-demo-classes.ts
index 8fd22a61deb..e9d0afb240a 100644
--- a/packages/ui/src/lib/tailwind-demo-classes.ts
+++ b/packages/ui/src/lib/tailwind-demo-classes.ts
@@ -41,6 +41,8 @@ export default {
     "bg-brand-200",
     "bg-brand-300",
     "bg-brand-400",
+    "bg-brand-500",
+    "bg-brand-600",
     "bg-brand"
   ],
   "palletes": [
diff --git a/packages/ui/src/lib/theme/customThemeExample.ts b/packages/ui/src/lib/theme/customThemeExample.ts
index 284a945e2d8..91eb4ad1bcd 100644
--- a/packages/ui/src/lib/theme/customThemeExample.ts
+++ b/packages/ui/src/lib/theme/customThemeExample.ts
@@ -35,7 +35,7 @@ const default__padding_and_text = {
 export default {
   button: {
     type: {
-      primary: `${defaults.brandBackground} text-white hover:bg-brand-600 dark:hover:bg-brand-900`,
+      primary: `${defaults.brandBackground} text-white hover:bg-brand-600 dark:hover:bg-brand`,
     },
   },
 }
diff --git a/packages/ui/src/lib/theme/defaultTheme.ts b/packages/ui/src/lib/theme/defaultTheme.ts
index dc20809681e..832713fae83 100644
--- a/packages/ui/src/lib/theme/defaultTheme.ts
+++ b/packages/ui/src/lib/theme/defaultTheme.ts
@@ -210,13 +210,13 @@ export default {
    */
 
   badge: {
-    base: 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-opacity-10',
+    base: 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-normal bg-opacity-10',
     size: {
       large: 'px-3 py-0.5 rounded-full text-sm',
     },
     dot: '-ml-0.5 mr-1.5 h-2 w-2 rounded-full',
     color: {
-      brand: 'bg-brand-200 text-brand-1100 border border-brand-700',
+      brand: 'bg-brand-500 text-brand-600 border border-brand-400',
       scale: 'bg-scale-200 text-scale-1100 border border-scale-700',
       tomato: `bg-tomato-200 text-tomato-1100 border border-tomato-700`,
       red: `bg-red-200 text-red-1100 border border-red-700`,
@@ -269,10 +269,10 @@ export default {
         description: `text-scale-1100`,
       },
       success: {
-        base: `bg-brand-300 dark:bg-brand-100 border-brand-700`,
-        icon: `text-brand-900`,
-        header: `text-brand-1200`,
-        description: `text-brand-1100`,
+        base: `bg-brand-300 dark:bg-brand-100 border-brand-400`,
+        icon: `text-brand`,
+        header: `text-brand-600`,
+        description: `text-brand-600`,
       },
       neutral: {
         base: `bg-scale-300 dark:bg-scale-300 border-scale-500`,
@@ -568,7 +568,7 @@ export default {
       bg-transparent
       ${defaults.focus}
       focus:ring-scale-400
-      text-brand-900
+      text-brand
       border-scale-700
       shadow-sm
       rounded
@@ -629,7 +629,7 @@ export default {
       focus:ring-brand-400
       border-scale-700
 
-      text-brand-900
+      text-brand
       shadow-sm
       cursor-pointer
       peer
@@ -934,8 +934,8 @@ export default {
       hover:bg-scale-700
     `,
     active: `
-      !bg-brand-900
-      !hover:bg-brand-900
+      !bg-brand
+      !hover:bg-brand
     `,
     handle_container: {
       tiny: 'h-4 w-7',
@@ -1268,8 +1268,8 @@ export default {
             z-10
 
             border-l
-            border-brand-900
-            group-hover:border-brand-900
+            border-brand
+            group-hover:border-brand
           `,
           rounded: `rounded-md`,
         },
@@ -1455,8 +1455,8 @@ export default {
     option_active: `text-scale-1200 bg-scale-600`,
     option_disabled: `cursor-not-allowed opacity-50`,
     option_inner: `flex items-center space-x-3`,
-    option_check: `absolute inset-y-0 right-0 flex items-center pr-3 text-brand-900`,
-    option_check_active: `text-brand-900`,
+    option_check: `absolute inset-y-0 right-0 flex items-center pr-3 text-brand`,
+    option_check_active: `text-brand`,
     option_check_icon: `h-5 w-5`,
   },
 
@@ -1500,7 +1500,7 @@ export default {
     },
     spinner: `
       absolute
-      text-brand-900 animate-spin
+      text-brand animate-spin
       inset-0
       m-auto
     `,
diff --git a/spec/supabase_kt_v0.yml b/spec/supabase_kt_v0.yml
index 256778c0e98..265d6a037c9 100644
--- a/spec/supabase_kt_v0.yml
+++ b/spec/supabase_kt_v0.yml
@@ -2563,7 +2563,7 @@ functions:
           - `NotAuthenticated`, 
           - `LoadingFromStorage`, 
           - `NetworkError`, 
-          - `Authenticated(sesssion)`
+          - `Authenticated(session)`
   - id: reset-password-for-email
     title: 'Send a password reset request'
     notes: |
@@ -2571,12 +2571,10 @@ functions:
       - The password reset flow consist of 2 broad steps: (i) Allow the user to login via the password reset link; (ii) Update the user's password.
       - The `sendRecoveryEmail()` only sends a password reset link to the user's email.
       To update the user's password, see [`modifyUser()`](/docs/reference/kotlin/auth-updateuser).
-      - When the user clicks the reset link in the email they are redirected back to your application.
-      You can configure the URL that the user is redirected to with the `redirectUrl` parameter.
-      See [redirect URLs and wildcards](/docs/guides/auth#redirect-urls-and-wildcards) to add additional redirect URLs to your project.
+      - The user gets redirected back to your app, assuming you setup [OTP handling](/docs/reference/kotlin/initializing)
       - After the user has been redirected successfully, prompt them for a new password and call `modifyUser()`:
         ```kotlin
-        client.gotrue.modifyUser(Email) {
+        client.gotrue.modifyUser {
             password = "1234567"
         }
         ```
@@ -3098,9 +3096,10 @@ functions:
           function()
           //invoke it with a body:
           function(body)
-          //invoke it with custom headers:
+          //invoke it with custom request options:
           function(body) {
-              set("Header", "Value")
+              header("Header", "Value")
+              parameter("Key", "Value") //url parameter
           }
           ```
   - id: subscribe
diff --git a/studio/.storybook/preview.css b/studio/.storybook/preview.css
index c12137dbd9d..7838b9a4816 100644
--- a/studio/.storybook/preview.css
+++ b/studio/.storybook/preview.css
@@ -85,11 +85,11 @@
 }
 
 .react-datepicker__day--in-range {
-  @apply bg-brand-800 text-scale-fixed-100 border-brand-800;
+  @apply bg-brand-300 text-scale-fixed-100 border-brand-300;
 }
 
 .react-datepicker__day--in-selecting-range {
-  @apply bg-brand-700 text-scale-fixed-100 border-brand-700;
+  @apply bg-brand-400 text-scale-fixed-100 border-brand-400;
 }
 
 .react-datepicker__day--selecting-range-start {
@@ -101,13 +101,13 @@
 }
 
 .react-datepicker__day--selected {
-  @apply bg-brand-800 text-white;
+  @apply bg-brand-300 text-white;
 }
 
 .react-datepicker__day--range-start {
-  @apply bg-brand-900 text-white hover:text-scale-700 hover:bg-white;
+  @apply bg-brand text-white hover:text-scale-700 hover:bg-white;
 }
 
 .react-datepicker__day--range-end {
-  @apply bg-brand-900 text-white hover:text-scale-700 hover:bg-white;
+  @apply bg-brand text-white hover:text-scale-700 hover:bg-white;
 }
diff --git a/studio/components/grid/components/header/Header.tsx b/studio/components/grid/components/header/Header.tsx
index 1a27e3a5fff..029dd615bda 100644
--- a/studio/components/grid/components/header/Header.tsx
+++ b/studio/components/grid/components/header/Header.tsx
@@ -142,7 +142,7 @@ const DefaultHeader = ({
                               <div
                                 className={[
                                   'border border-scale-1100 w-[15px] h-[4px] translate-x-0.5',
-                                  'transition duration-200 group-data-[highlighted]:border-brand-900 group-data-[highlighted]:translate-x-0',
+                                  'transition duration-200 group-data-[highlighted]:border-brand group-data-[highlighted]:translate-x-0',
                                 ].join(' ')}
                               />
                             </div>
@@ -168,7 +168,7 @@ const DefaultHeader = ({
                               <div
                                 className={[
                                   'border border-scale-1100 w-[4px] h-[15px] -translate-y-0.5',
-                                  'transition duration-200 group-data-[highlighted]:border-brand-900 group-data-[highlighted]:translate-y-0',
+                                  'transition duration-200 group-data-[highlighted]:border-brand group-data-[highlighted]:translate-y-0',
                                 ].join(' ')}
                               />
                             </div>
@@ -192,8 +192,8 @@ const DefaultHeader = ({
                               <IconFileText className="-translate-x-[2px]" />
                               <IconArrowUp
                                 className={clsx(
-                                  'transition duration-200 absolute bottom-0 right-0 translate-y-1 opacity-0 bg-brand-700 rounded-full',
-                                  'group-data-[highlighted]:translate-y-0 group-data-[highlighted]:text-brand-900 group-data-[highlighted]:opacity-100'
+                                  'transition duration-200 absolute bottom-0 right-0 translate-y-1 opacity-0 bg-brand-400 rounded-full',
+                                  'group-data-[highlighted]:translate-y-0 group-data-[highlighted]:text-brand group-data-[highlighted]:opacity-100'
                                 )}
                                 strokeWidth={3}
                                 size={12}
diff --git a/studio/components/grid/components/header/RefreshButton.tsx b/studio/components/grid/components/header/RefreshButton.tsx
index 27bd851fcac..ae4f21faa4b 100644
--- a/studio/components/grid/components/header/RefreshButton.tsx
+++ b/studio/components/grid/components/header/RefreshButton.tsx
@@ -51,7 +51,7 @@ const RefreshButton = ({ table, isRefetching }: RefreshButtonProps) => {
         !status ? (
           <IconRefreshCw className="text-scale-1000" strokeWidth={1.5} />
         ) : status === 'saved' ? (
-          <IconCheck className="text-brand-900" strokeWidth={3} />
+          <IconCheck className="text-brand" strokeWidth={3} />
         ) : (
           <></>
         )
diff --git a/studio/components/interfaces/App/RouteValidationWrapper.tsx b/studio/components/interfaces/App/RouteValidationWrapper.tsx
index f2bb8a31b74..3b82a9b1679 100644
--- a/studio/components/interfaces/App/RouteValidationWrapper.tsx
+++ b/studio/components/interfaces/App/RouteValidationWrapper.tsx
@@ -7,7 +7,7 @@ import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useProjectsQuery } from 'data/projects/projects-query'
 import { useFlag, useStore } from 'hooks'
 import useLatest from 'hooks/misc/useLatest'
-import { DEFAULT_HOME, LOCAL_STORAGE_KEYS } from 'lib/constants'
+import { DEFAULT_HOME, IS_PLATFORM, LOCAL_STORAGE_KEYS } from 'lib/constants'
 
 // Ideally these could all be within a _middleware when we use Next 12
 const RouteValidationWrapper = ({ children }: PropsWithChildren<{}>) => {
@@ -68,7 +68,9 @@ const RouteValidationWrapper = ({ children }: PropsWithChildren<{}>) => {
       // Check validity of project that the user is trying to access
       const projects = projectsRef.current ?? []
       const isValidProject = projects.some((project) => project.ref === ref)
-      const isValidBranch = projects.some((project) => project.preview_branch_refs.includes(ref))
+      const isValidBranch = IS_PLATFORM
+        ? projects.some((project) => project.preview_branch_refs.includes(ref))
+        : true
 
       if (!isValidProject && !isValidBranch) {
         ui.setNotification({ category: 'error', message: 'This project does not exist' })
diff --git a/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx b/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
index 0851c3e397f..72177f07f78 100644
--- a/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
+++ b/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
@@ -104,8 +104,8 @@ const ProviderForm = ({ provider }: ProviderFormProps) => {
           </div>
           <div className="flex items-center gap-3">
             {isActive ? (
-              <div className="flex items-center gap-1 rounded-full border border-brand-700 bg-brand-200 py-1 px-1 text-xs text-brand-900">
-                <span className="rounded-full bg-brand-900 p-0.5 text-xs text-brand-200">
+              <div className="flex items-center gap-1 rounded-full border border-brand-400 bg-brand-200 py-1 px-1 text-xs text-brand">
+                <span className="rounded-full bg-brand p-0.5 text-xs text-brand-200">
                   <IconCheck strokeWidth={2} size={12} />
                 </span>
                 <span className="px-1">Enabled</span>
diff --git a/studio/components/interfaces/Auth/Policies/PolicySelection.tsx b/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
index af4727eeb8f..5598c600550 100644
--- a/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
@@ -62,7 +62,7 @@ const PolicySelection: FC<Props> = ({
           <a
             target="_blank"
             rel="noreferrer"
-            className="text-brand-900 transition-colors hover:text-brand-1200"
+            className="text-brand transition-colors hover:text-brand-600"
             href="https://supabase.com/docs/guides/auth#policies"
           >
             here
diff --git a/studio/components/interfaces/BillingV2/SpendCapModal.tsx b/studio/components/interfaces/BillingV2/SpendCapModal.tsx
index 81e06529ddd..e3bb6b7f7ee 100644
--- a/studio/components/interfaces/BillingV2/SpendCapModal.tsx
+++ b/studio/components/interfaces/BillingV2/SpendCapModal.tsx
@@ -165,7 +165,7 @@ const SpendCapModal: FC<Props> = ({ visible, onHide }) => {
             <p>
               See{' '}
               <Link href="https://supabase.com/pricing" passHref>
-                <a className="text-brand-900" target="_blank" rel="noreferrer">
+                <a className="text-brand" target="_blank" rel="noreferrer">
                   <span>pricing page</span>
                 </a>
               </Link>{' '}
diff --git a/studio/components/interfaces/BillingV2/Subscription/Tier/EnterpriseCard.tsx b/studio/components/interfaces/BillingV2/Subscription/Tier/EnterpriseCard.tsx
index af9608f0dd0..cbf139f924b 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Tier/EnterpriseCard.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Tier/EnterpriseCard.tsx
@@ -18,13 +18,13 @@ const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) => {
     >
       <div className="flex flex-col justify-center px-4">
         <div className="flex items-center space-x-2">
-          <p className={clsx('text-brand-900 text-sm uppercase')}>{plan.name}</p>
+          <p className={clsx('text-brand text-sm uppercase')}>{plan.name}</p>
           {isCurrentPlan ? (
             <div className="text-xs bg-scale-500 text-scale-1000 rounded px-2 py-0.5">
               Current plan
             </div>
           ) : plan.nameBadge ? (
-            <div className="text-xs bg-brand-400 text-brand-900 rounded px-2 py-0.5">
+            <div className="text-xs bg-brand-400 text-brand rounded px-2 py-0.5">
               {plan.nameBadge}
             </div>
           ) : null}
@@ -43,7 +43,7 @@ const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) => {
         <ul role="list" className="text-xs text-scale-1000 md:grid md:grid-cols-2 md:gap-x-10">
           {plan.features.map((feature) => (
             <li key={feature} className="flex items-center py-2 first:mt-0">
-              <IconCheck className="text-brand-900 h-4 w-4" aria-hidden="true" strokeWidth={3} />
+              <IconCheck className="text-brand h-4 w-4" aria-hidden="true" strokeWidth={3} />
               <span className="dark:text-scale-1200 mb-0 ml-3 ">{feature}</span>
             </li>
           ))}
diff --git a/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionTier.tsx b/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionTier.tsx
index 443c4b9b08a..0bfde8d1793 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionTier.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionTier.tsx
@@ -75,7 +75,7 @@ const SubscriptionTier = ({}: SubscriptionTierProps) => {
           <div className="col-span-12 lg:col-span-7 space-y-6">
             <div>
               <p className="text-sm">This project is currently on the plan:</p>
-              <p className="text-2xl text-brand-900 uppercase">{tierName}</p>
+              <p className="text-2xl text-brand uppercase">{tierName}</p>
             </div>
             <div>
               <ProjectUpdateDisabledTooltip projectUpdateDisabled={projectUpdateDisabled}>
diff --git a/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx b/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx
index 2472ed8332c..b2c2c5c914a 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx
@@ -155,13 +155,13 @@ const TierUpdateSidePanel = () => {
                 >
                   <div className="w-full">
                     <div className="flex items-center space-x-2">
-                      <p className={clsx('text-brand-900 text-sm uppercase')}>{plan.name}</p>
+                      <p className={clsx('text-brand text-sm uppercase')}>{plan.name}</p>
                       {isCurrentPlan ? (
                         <div className="text-xs bg-scale-500 text-scale-1000 rounded px-2 py-0.5">
                           Current plan
                         </div>
                       ) : plan.nameBadge ? (
-                        <div className="text-xs bg-brand-400 text-brand-900 rounded px-2 py-0.5">
+                        <div className="text-xs bg-brand-400 text-brand rounded px-2 py-0.5">
                           {plan.nameBadge}
                         </div>
                       ) : (
@@ -180,7 +180,7 @@ const TierUpdateSidePanel = () => {
                       <p className="text-scale-1000 text-sm">{tierMeta?.costUnit}</p>
                     </div>
                     <div className={clsx('flex mt-1 mb-4', !tierMeta?.warning && 'opacity-0')}>
-                      <div className="bg-scale-200 text-brand-1100 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-xs">
+                      <div className="bg-scale-200 text-brand-600 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-xs">
                         {tierMeta?.warning}
                       </div>
                     </div>
@@ -258,7 +258,7 @@ const TierUpdateSidePanel = () => {
                         <li key={feature} className="flex py-2">
                           <div className="w-[12px]">
                             <IconCheck
-                              className="h-3 w-3 text-brand-900 translate-y-[2.5px]"
+                              className="h-3 w-3 text-brand translate-y-[2.5px]"
                               aria-hidden="true"
                               strokeWidth={3}
                             />
diff --git a/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx b/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx
index abb971d2db1..0aab04f6ba7 100644
--- a/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx
+++ b/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx
@@ -195,7 +195,7 @@ export const USAGE_CATEGORIES: CategoryMeta[] = [
                 The disk is expanded to be 50% larger. Auto-scaling can only take place once every 6
                 hours. You can also{' '}
                 <Link passHref href={`/project/${ref}/settings/database#diskManagement`}>
-                  <a className="text-brand-900 transition hover:text-brand-1000">preprovision</a>
+                  <a className="text-brand transition hover:text-brand-600">preprovision</a>
                 </Link>{' '}
                 disk for loading larger amounts of data.
               </p>
diff --git a/studio/components/interfaces/Database/Backups/BackupsError.tsx b/studio/components/interfaces/Database/Backups/BackupsError.tsx
index 1587d28fa87..8325dc6f8a0 100644
--- a/studio/components/interfaces/Database/Backups/BackupsError.tsx
+++ b/studio/components/interfaces/Database/Backups/BackupsError.tsx
@@ -9,7 +9,7 @@ const BackupsError = () => {
         <p className="text-sm">
           Failed to retrieve backups for this project. Please contact{' '}
           <Link href="/support/new">
-            <a className="text-brand-900">support</a>
+            <a className="text-brand">support</a>
           </Link>
           .
         </p>
diff --git a/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx b/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
index 9a1e23206e7..cdb28c620c3 100644
--- a/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
+++ b/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
@@ -67,7 +67,7 @@ const PITRNotice = ({}) => {
           <p className="text-sm text-scale-1100">
             Database changes are logged every <span className="text-scale-1200">2 minutes</span>,
             with a total recovery period of up to{' '}
-            <span className="text-brand-900">{retentionPeriod} days</span>.
+            <span className="text-brand">{retentionPeriod} days</span>.
           </p>
         </div>
       </div>
diff --git a/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx b/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx
index b4f2153339c..ab1d31a5941 100644
--- a/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx
+++ b/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx
@@ -16,7 +16,7 @@ const MigrationsEmptyState = () => {
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> link --project-ref {ref}
+            <span className="text-brand-600">supabase</span> link --project-ref {ref}
           </>
         )
       },
@@ -27,7 +27,7 @@ const MigrationsEmptyState = () => {
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> migration new new-migration
+            <span className="text-brand-600">supabase</span> migration new new-migration
           </>
         )
       },
@@ -38,7 +38,7 @@ const MigrationsEmptyState = () => {
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> db push
+            <span className="text-brand-600">supabase</span> db push
           </>
         )
       },
diff --git a/studio/components/interfaces/Database/Roles/RoleRow.tsx b/studio/components/interfaces/Database/Roles/RoleRow.tsx
index cd2de5f63be..f069754cb84 100644
--- a/studio/components/interfaces/Database/Roles/RoleRow.tsx
+++ b/studio/components/interfaces/Database/Roles/RoleRow.tsx
@@ -114,8 +114,8 @@ const RoleRow: FC<Props> = ({ role, disabled = false, onSelectDelete }) => {
                   {role.active_connections > 0 && (
                     <div className="relative h-2 w-2">
                       <span className="flex h-2 w-2">
-                        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-900 opacity-75"></span>
-                        <span className="relative inline-flex h-2 w-2 rounded-full bg-brand-900 opacity-75"></span>
+                        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand opacity-75"></span>
+                        <span className="relative inline-flex h-2 w-2 rounded-full bg-brand opacity-75"></span>
                       </span>
                     </div>
                   )}
diff --git a/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx b/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
index 4a9dfc3ac67..cd5467b1fde 100644
--- a/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
+++ b/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
@@ -205,7 +205,7 @@ function TableNode({ data, targetPosition, sourcePosition }: NodeProps<TableNode
     <>
       {data.isForeign ? (
         <div className="rounded-lg overflow-hidden">
-          <header className="text-[0.5rem] leading-5 font-bold px-2 text-center bg-brand-900 text-gray-300">
+          <header className="text-[0.5rem] leading-5 font-bold px-2 text-center bg-brand text-gray-300">
             {data.name}
             {targetPosition && (
               <Handle
@@ -219,7 +219,7 @@ function TableNode({ data, targetPosition, sourcePosition }: NodeProps<TableNode
         </div>
       ) : (
         <div className="rounded-lg overflow-hidden" style={{ width: NODE_WIDTH / 2 }}>
-          <header className="text-[0.5rem] leading-5 font-bold px-2 text-center bg-brand-900 text-gray-300">
+          <header className="text-[0.5rem] leading-5 font-bold px-2 text-center bg-brand text-gray-300">
             {data.name}
           </header>
 
@@ -230,7 +230,7 @@ function TableNode({ data, targetPosition, sourcePosition }: NodeProps<TableNode
             >
               <span
                 className={clsx(
-                  column.isPrimary && 'border-l-2 border-l-brand-900 pl-[6px] pr-2',
+                  column.isPrimary && 'border-l-2 border-l-brand pl-[6px] pr-2',
                   'pl-2 text-ellipsis overflow-hidden whitespace-nowrap'
                 )}
               >
diff --git a/studio/components/interfaces/Database/Wrappers/WrapperTableEditor.tsx b/studio/components/interfaces/Database/Wrappers/WrapperTableEditor.tsx
index 42d4f0c4a1a..c25c1bc3397 100644
--- a/studio/components/interfaces/Database/Wrappers/WrapperTableEditor.tsx
+++ b/studio/components/interfaces/Database/Wrappers/WrapperTableEditor.tsx
@@ -254,7 +254,7 @@ const TableForm = ({
                         key={column.name}
                         className={[
                           'px-2 py-1 rounded cursor-pointer transition',
-                          `${isSelected ? 'bg-brand-800' : 'bg-scale-500 hover:bg-scale-700'}`,
+                          `${isSelected ? 'bg-brand-300' : 'bg-scale-500 hover:bg-scale-700'}`,
                         ].join(' ')}
                         onClick={() => {
                           if (isSelected) {
diff --git a/studio/components/interfaces/Functions/CommandRender.tsx b/studio/components/interfaces/Functions/CommandRender.tsx
index 6a3b83b2a86..c56be3351b5 100644
--- a/studio/components/interfaces/Functions/CommandRender.tsx
+++ b/studio/components/interfaces/Functions/CommandRender.tsx
@@ -38,7 +38,7 @@ const Command = ({ item }: any) => {
               }}
             >
               {isCopied ? (
-                <div className="text-brand-900">
+                <div className="text-brand">
                   <IconCheck size={14} strokeWidth={3} />
                 </div>
               ) : (
diff --git a/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx b/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
index a601e794816..3d984779e4e 100644
--- a/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
+++ b/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
@@ -181,9 +181,7 @@ const EdgeFunctionDetails = () => {
                         <div className="flex items-center space-x-2">
                           <p className="text-sm">
                             Import maps are{' '}
-                            <span
-                              className={clsx(hasImportMap ? 'text-brand-900' : 'text-amber-900')}
-                            >
+                            <span className={clsx(hasImportMap ? 'text-brand' : 'text-amber-900')}>
                               {hasImportMap ? 'used' : 'not used'}
                             </span>{' '}
                             for this function
diff --git a/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.utils.tsx b/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.utils.tsx
index bc2ae902432..e8ec2079990 100644
--- a/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.utils.tsx
+++ b/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.utils.tsx
@@ -10,7 +10,7 @@ export const generateCLICommands = (
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> functions deploy{' '}
+            <span className="text-brand-600">supabase</span> functions deploy{' '}
             {selectedFunction?.slug}
           </>
         )
@@ -23,7 +23,7 @@ export const generateCLICommands = (
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> functions delete{' '}
+            <span className="text-brand-600">supabase</span> functions delete{' '}
             {selectedFunction?.slug}
           </>
         )
@@ -39,7 +39,7 @@ export const generateCLICommands = (
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> secrets list
+            <span className="text-brand-600">supabase</span> secrets list
           </>
         )
       },
@@ -51,7 +51,7 @@ export const generateCLICommands = (
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> secrets set NAME1=VALUE1 NAME2=VALUE2
+            <span className="text-brand-600">supabase</span> secrets set NAME1=VALUE1 NAME2=VALUE2
           </>
         )
       },
@@ -63,7 +63,7 @@ export const generateCLICommands = (
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> secrets unset NAME1 NAME2
+            <span className="text-brand-600">supabase</span> secrets unset NAME1 NAME2
           </>
         )
       },
@@ -80,7 +80,7 @@ export const generateCLICommands = (
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">curl</span> -L -X POST '{functionUrl}' -H
+            <span className="text-brand-600">curl</span> -L -X POST '{functionUrl}' -H
             'Authorization: Bearer [YOUR ANON KEY]' {`--data '{"name":"Functions"}'`}
           </>
         )
diff --git a/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx b/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
index 4237781074c..e968c6e115e 100644
--- a/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
+++ b/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
@@ -55,7 +55,7 @@ const EdgeFunctionsListItem: FC<Props> = ({ function: item }) => {
             }}
           >
             {isCopied ? (
-              <div className="text-brand-900">
+              <div className="text-brand">
                 <IconCheck size={14} strokeWidth={3} />
               </div>
             ) : (
diff --git a/studio/components/interfaces/Functions/TerminalInstructions.tsx b/studio/components/interfaces/Functions/TerminalInstructions.tsx
index 3862be68f51..71cd7cb22e1 100644
--- a/studio/components/interfaces/Functions/TerminalInstructions.tsx
+++ b/studio/components/interfaces/Functions/TerminalInstructions.tsx
@@ -39,7 +39,7 @@ const TerminalInstructions: FC<Props> = ({ closable = false, removeBorder = fals
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> functions new hello-world
+            <span className="text-brand-600">supabase</span> functions new hello-world
           </>
         )
       },
@@ -51,7 +51,7 @@ const TerminalInstructions: FC<Props> = ({ closable = false, removeBorder = fals
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> functions deploy hello-world
+            <span className="text-brand-600">supabase</span> functions deploy hello-world
             --project-ref {projectRef}
           </>
         )
@@ -66,7 +66,7 @@ const TerminalInstructions: FC<Props> = ({ closable = false, removeBorder = fals
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">curl</span> -L -X POST 'https://{functionsEndpoint}
+            <span className="text-brand-600">curl</span> -L -X POST 'https://{functionsEndpoint}
             /hello-world' -H 'Authorization: Bearer [YOUR ANON KEY]'{' '}
             {`--data '{"name":"Functions"}'`}
           </>
diff --git a/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
index 815ac8cec05..c0847e3788d 100644
--- a/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
+++ b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
@@ -139,7 +139,7 @@ const APIKeys = () => {
                   for your tables and configured policies. You may also use the service key which
                   can be found{' '}
                   <Link href={`/project/${projectRef}/settings/api`}>
-                    <a className="transition text-brand-800 hover:text-brand-900">here</a>
+                    <a className="transition text-brand hover:text-brand-600">here</a>
                   </Link>{' '}
                   to bypass RLS.
                 </p>
diff --git a/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx b/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
index 090b720fb29..d8a76c8ef54 100644
--- a/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
+++ b/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
@@ -242,7 +242,7 @@ const NewProjectPanel: FC<Props> = ({}) => {
             <p className="text-base text-scale-1100 lg:max-w-sm">
               Interact with your database through the{' '}
               <Link href="https://supabase.com/docs/reference">
-                <a className="text-brand-900">Supabase client libraries</a>
+                <a className="text-brand">Supabase client libraries</a>
               </Link>{' '}
               with your API keys.
             </p>
diff --git a/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx b/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
index c463ce98397..7a864aef626 100644
--- a/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
+++ b/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
@@ -132,7 +132,7 @@ const AuditLogs = () => {
                   return (
                     <Alert title="" variant="info" className="mx-3 pl-2 pr-2 pt-1 pb-2">
                       Your organization has a log retention period of{' '}
-                      <span className="text-brand-900">
+                      <span className="text-brand">
                         {retentionPeriod} day
                         {retentionPeriod > 1 ? 's' : ''}
                       </span>
diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/EnterpriseCard.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/EnterpriseCard.tsx
index af9608f0dd0..cbf139f924b 100644
--- a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/EnterpriseCard.tsx
+++ b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/EnterpriseCard.tsx
@@ -18,13 +18,13 @@ const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) => {
     >
       <div className="flex flex-col justify-center px-4">
         <div className="flex items-center space-x-2">
-          <p className={clsx('text-brand-900 text-sm uppercase')}>{plan.name}</p>
+          <p className={clsx('text-brand text-sm uppercase')}>{plan.name}</p>
           {isCurrentPlan ? (
             <div className="text-xs bg-scale-500 text-scale-1000 rounded px-2 py-0.5">
               Current plan
             </div>
           ) : plan.nameBadge ? (
-            <div className="text-xs bg-brand-400 text-brand-900 rounded px-2 py-0.5">
+            <div className="text-xs bg-brand-400 text-brand rounded px-2 py-0.5">
               {plan.nameBadge}
             </div>
           ) : null}
@@ -43,7 +43,7 @@ const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) => {
         <ul role="list" className="text-xs text-scale-1000 md:grid md:grid-cols-2 md:gap-x-10">
           {plan.features.map((feature) => (
             <li key={feature} className="flex items-center py-2 first:mt-0">
-              <IconCheck className="text-brand-900 h-4 w-4" aria-hidden="true" strokeWidth={3} />
+              <IconCheck className="text-brand h-4 w-4" aria-hidden="true" strokeWidth={3} />
               <span className="dark:text-scale-1200 mb-0 ml-3 ">{feature}</span>
             </li>
           ))}
diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx
index fd50323a60e..9ec255913b8 100644
--- a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx
+++ b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx
@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { useOrgPlansQuery } from 'data/subscriptions/org-plans-query'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
-import { useOrgSubscriptionUpdateMutation } from 'data/subscriptions/org-subscription-update-mutation'
+import { SubscriptionTier, useOrgSubscriptionUpdateMutation } from 'data/subscriptions/org-subscription-update-mutation'
 import { useCheckPermissions, useSelectedOrganization, useStore } from 'hooks'
 import { PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
 import Telemetry from 'lib/telemetry'
@@ -110,9 +110,14 @@ const PlanUpdateSidePanel = () => {
       return ui.setNotification({ category: 'error', message: 'Please select a payment method' })
     }
 
-    updateOrgSubscription({ slug, tier: selectedTier, paymentMethod: selectedPaymentMethod })
+    // If the user is downgrading from team, should have spend cap disabled by default 
+    const tier = subscription?.plan?.id === 'team' && selectedTier === PRICING_TIER_PRODUCT_IDS.PRO ? PRICING_TIER_PRODUCT_IDS.PAYG as SubscriptionTier : selectedTier
+
+    updateOrgSubscription({ slug, tier, paymentMethod: selectedPaymentMethod })
   }
 
+  const planMeta = selectedTier ? availablePlans.find((p) => p.id === selectedTier.split('tier_')[1]) : null
+
   return (
     <>
       <SidePanel
@@ -157,13 +162,13 @@ const PlanUpdateSidePanel = () => {
                 >
                   <div className="w-full">
                     <div className="flex items-center space-x-2">
-                      <p className={clsx('text-brand-900 text-sm uppercase')}>{plan.name}</p>
+                      <p className={clsx('text-brand text-sm uppercase')}>{plan.name}</p>
                       {isCurrentPlan ? (
                         <div className="text-xs bg-scale-500 text-scale-1000 rounded px-2 py-0.5">
                           Current plan
                         </div>
                       ) : plan.nameBadge ? (
-                        <div className="text-xs bg-brand-400 text-brand-900 rounded px-2 py-0.5">
+                        <div className="text-xs bg-brand-400 text-brand rounded px-2 py-0.5">
                           {plan.nameBadge}
                         </div>
                       ) : (
@@ -182,7 +187,7 @@ const PlanUpdateSidePanel = () => {
                       <p className="text-scale-1000 text-sm">{tierMeta?.costUnitOrg}</p>
                     </div>
                     <div className={clsx('flex mt-1 mb-4', !tierMeta?.warning && 'opacity-0')}>
-                      <div className="bg-scale-200 text-brand-1100 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-xs">
+                      <div className="bg-scale-200 text-brand-600 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-xs">
                         {tierMeta?.warning}
                       </div>
                     </div>
@@ -250,7 +255,7 @@ const PlanUpdateSidePanel = () => {
                         <li key={feature} className="flex py-2">
                           <div className="w-[12px]">
                             <IconCheck
-                              className="h-3 w-3 text-brand-900 translate-y-[2.5px]"
+                              className="h-3 w-3 text-brand translate-y-[2.5px]"
                               aria-hidden="true"
                               strokeWidth={3}
                             />
@@ -289,7 +294,7 @@ const PlanUpdateSidePanel = () => {
         onCancel={() => setSelectedTier(undefined)}
         onConfirm={onUpdateSubscription}
         overlayClassName="pointer-events-none"
-        header={`Confirm to upgrade to ${subscriptionPlanMeta?.name}`}
+        header={`Confirm ${planMeta?.change_type === 'downgrade' ? 'downgrade' : 'upgrade'} to ${subscriptionPlanMeta?.name}`}
       >
         <Modal.Content>
           <div className="py-6 space-y-2">
diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/Subscription.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/Subscription.tsx
index c5b258bcca0..c5c07a0f72f 100644
--- a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/Subscription.tsx
+++ b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/Subscription.tsx
@@ -75,9 +75,7 @@ const Subscription = () => {
             <div className="space-y-6">
               <div>
                 <p className="text-sm">This organization is currently on the plan:</p>
-                <p className="text-2xl text-brand-900 uppercase">
-                  {currentPlan?.name ?? 'Unknown'}
-                </p>
+                <p className="text-2xl text-brand uppercase">{currentPlan?.name ?? 'Unknown'}</p>
               </div>
 
               <div>
diff --git a/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx b/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
index 00489485bea..adba0bbc199 100644
--- a/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
+++ b/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
@@ -172,7 +172,7 @@ const GeneralSettings = () => {
                                 <a
                                   target="_blank"
                                   rel="noreferrer"
-                                  className="text-brand-900 border-b border-brand-900"
+                                  className="text-brand border-b border-brand"
                                 >
                                   privacy policy
                                 </a>
diff --git a/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx b/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx
index ffd8d671337..08ee496acad 100644
--- a/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx
+++ b/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx
@@ -12,6 +12,7 @@ import {
   ScaffoldSectionDetail,
 } from 'components/layouts/Scaffold'
 import ConfirmationModal from 'components/ui/ConfirmationModal'
+import { useIntegrationsVercelConnectionSyncEnvsMutation } from 'data/integrations/integrations-vercel-connection-sync-envs-mutation'
 import {
   IntegrationName,
   IntegrationProjectConnection,
@@ -21,7 +22,7 @@ import { BASE_PATH } from 'lib/constants'
 import { pluralize } from 'lib/helpers'
 import { EMPTY_ARR } from 'lib/void'
 import { useCallback, useState } from 'react'
-import { Button, Dropdown, IconChevronDown, IconTrash, Modal } from 'ui'
+import { Button, Dropdown, IconChevronDown, IconLoader, IconRefreshCw, IconTrash, Modal } from 'ui'
 
 export interface IntegrationProps {
   title: string
@@ -123,6 +124,7 @@ const IntegrationConnectionItem = ({
   onDeleteConnection,
 }: IntegrationConnectionItemProps) => {
   const [isOpen, setIsOpen] = useState(false)
+  const [dropdownVisible, setDropdownVisible] = useState(false)
 
   const onConfirm = useCallback(async () => {
     try {
@@ -136,6 +138,17 @@ const IntegrationConnectionItem = ({
     setIsOpen(false)
   }, [])
 
+  const { mutateAsync: syncEnvs, isLoading: isSyncEnvLoading } =
+    useIntegrationsVercelConnectionSyncEnvsMutation()
+
+  const onReSyncEnvVars = useCallback(async () => {
+    try {
+      await syncEnvs({ connectionId: connection.id })
+    } finally {
+      setDropdownVisible(false)
+    }
+  }, [connection, syncEnvs])
+
   return (
     <>
       <IntegrationConnection
@@ -143,13 +156,37 @@ const IntegrationConnectionItem = ({
         type={type}
         actions={
           <Dropdown
+            open={dropdownVisible}
+            onOpenChange={() => setDropdownVisible(!dropdownVisible)}
+            modal={false}
             side="bottom"
             align="end"
-            size="large"
+            size="medium"
             overlay={
               <>
+                {type === 'Vercel' && (
+                  <>
+                    <Dropdown.Item
+                      icon={
+                        isSyncEnvLoading ? (
+                          <IconLoader className="animate-spin" size={14} />
+                        ) : (
+                          <IconRefreshCw size={14} />
+                        )
+                      }
+                      onSelect={(event) => {
+                        event.preventDefault()
+                        onReSyncEnvVars()
+                      }}
+                      disabled={isSyncEnvLoading}
+                    >
+                      Resync environment variables
+                    </Dropdown.Item>
+                    <Dropdown.Separator />
+                  </>
+                )}
                 <Dropdown.Item icon={<IconTrash size={14} />} onSelect={() => setIsOpen(true)}>
-                  Delete
+                  Delete connection
                 </Dropdown.Item>
               </>
             }
diff --git a/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx b/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx
index d8b4360ef66..6f45bc8ca34 100644
--- a/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx
+++ b/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx
@@ -28,9 +28,7 @@ const AuthorizedAppRow = ({ app, onSelectRevoke }: AuthorizedAppRowProps) => {
         <span className="font-mono truncate">{app.id}</span>
         <Button
           type="default"
-          icon={
-            isCopied ? <IconCheck className="text-brand-900" strokeWidth={3} /> : <IconClipboard />
-          }
+          icon={isCopied ? <IconCheck className="text-brand" strokeWidth={3} /> : <IconClipboard />}
           className="ml-2 px-1"
           onClick={() => {
             copyToClipboard(app.id)
diff --git a/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx b/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx
index 6157cf4748d..44d4a7851f1 100644
--- a/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx
+++ b/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx
@@ -45,11 +45,7 @@ const OAuthAppRow = ({ app, onSelectEdit, onSelectDelete }: OAuthAppRowProps) =>
           <Button
             type="default"
             icon={
-              isCopied ? (
-                <IconCheck className="text-brand-900" strokeWidth={3} />
-              ) : (
-                <IconClipboard />
-              )
+              isCopied ? <IconCheck className="text-brand" strokeWidth={3} /> : <IconClipboard />
             }
             className="ml-2 px-1"
             onClick={() => {
diff --git a/studio/components/interfaces/Organization/Usage/Usage.constants.tsx b/studio/components/interfaces/Organization/Usage/Usage.constants.tsx
index 0743b1ac3d8..d38ad187a07 100644
--- a/studio/components/interfaces/Organization/Usage/Usage.constants.tsx
+++ b/studio/components/interfaces/Organization/Usage/Usage.constants.tsx
@@ -103,10 +103,11 @@ export const USAGE_CATEGORIES: CategoryMeta[] = [
 
           const isApproachingLimit = hasLimit && usageRatio >= USAGE_APPROACHING_THRESHOLD
           const isExceededLimit = hasLimit && usageRatio >= 1
+          const isCapped = usageMeta?.capped
 
           return (
             <div>
-              {(isApproachingLimit || isExceededLimit) && (
+              {(isApproachingLimit || isExceededLimit) && isCapped && (
                 <Alert
                   withIcon
                   variant={isExceededLimit ? 'danger' : 'warning'}
diff --git a/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx b/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
index a39a293c3c7..05bc9c02c20 100644
--- a/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
+++ b/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
@@ -47,7 +47,7 @@ const SavingIndicator = ({ id }: SavingIndicatorProps) => {
       {showSavedText ? (
         <Tooltip.Root delayDuration={0}>
           <Tooltip.Trigger>
-            <IconCheck className="text-brand-800" size={14} strokeWidth={3} />
+            <IconCheck className="text-brand-300" size={14} strokeWidth={3} />
           </Tooltip.Trigger>
           <Tooltip.Content side="bottom">
             <Tooltip.Arrow className="radix-tooltip-arrow" />
diff --git a/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx b/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx
index ed3a3240a09..9104db59821 100644
--- a/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx
+++ b/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx
@@ -145,7 +145,7 @@ const CustomDomainSidePanel = () => {
             Custom domains allow you to present a branded experience to your users. You may set up
             your custom domain in the{' '}
             <Link href={`/project/${projectRef}/settings/general`}>
-              <a className="text-brand-900">General Settings</a>
+              <a className="text-brand">General Settings</a>
             </Link>{' '}
             page after enabling the add-on.
           </p>
diff --git a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx
index f1512f48028..ebeb95f35c8 100644
--- a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx
+++ b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx
@@ -36,7 +36,7 @@ const CustomDomainDelete = ({ projectRef, customDomain }: CustomDomainDeleteProp
           <p className="text-xs text-scale-1100">Active custom domain:</p>
           <div className="flex items-center space-x-2">
             <code className="text-lg mx-0 flex items-center space-x-2">
-              <div className="h-2 w-2 rounded-full bg-brand-900" />
+              <div className="h-2 w-2 rounded-full bg-brand" />
               <span>{customDomain.hostname}</span>
             </code>
           </div>
diff --git a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx
index ebf5ff5e3ec..3cce8d4f062 100644
--- a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx
+++ b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx
@@ -84,7 +84,7 @@ const CustomDomainVerify = ({ projectRef, customDomain, settings }: CustomDomain
                     <p>
                       You may also visit{' '}
                       <Link href={`https://whatsmydns.net/#TXT/${customDomain.hostname}`}>
-                        <a className="text-brand-900">here</a>
+                        <a className="text-brand">here</a>
                       </Link>{' '}
                       to check if your DNS has been propagated successfully before clicking verify.
                     </p>
@@ -93,7 +93,7 @@ const CustomDomainVerify = ({ projectRef, customDomain, settings }: CustomDomain
                   <p>
                     You may also visit{' '}
                     <Link href={`https://whatsmydns.net/#TXT/${customDomain.hostname}`}>
-                      <a className="text-brand-900">here</a>
+                      <a className="text-brand">here</a>
                     </Link>{' '}
                     to check if your DNS has been propagated successfully before clicking verify.
                   </p>
diff --git a/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx b/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx
index b4ba127f6c1..c0d00b54c24 100644
--- a/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx
+++ b/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx
@@ -67,7 +67,7 @@ const ProjectUpgradeAlert = () => {
   return (
     <>
       <Alert
-        icon={<IconPackage className="text-brand-900" strokeWidth={1.5} />}
+        icon={<IconPackage className="text-brand" strokeWidth={1.5} />}
         variant="success"
         title="Your project can be upgraded to the latest version of Postgres"
       >
@@ -114,7 +114,7 @@ const ProjectUpgradeAlert = () => {
                                       <p className="flex items-center space-x-1">
                                         <span>This update has breaking changes. Read more </span>
                                         <Link href={change.url}>
-                                          <a className="text-brand-900 opacity-90 flex items-center space-x-1">
+                                          <a className="text-brand opacity-90 flex items-center space-x-1">
                                             <span>here</span>
                                             <IconExternalLink size="tiny" strokeWidth={2} />
                                           </a>
diff --git a/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx b/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
index 896cb36b6bf..d599cb2cc96 100644
--- a/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
+++ b/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
@@ -262,7 +262,7 @@ const TransferProjectButton = () => {
                         <span>
                           {' '}
                           Your current organization will be granted{' '}
-                          <span className="text-brand-900">
+                          <span className="text-brand">
                             ${transferPreviewData.credits_on_source_organization}
                           </span>{' '}
                           in credits as proration.
@@ -277,7 +277,7 @@ const TransferProjectButton = () => {
                         <span>
                           {' '}
                           The target organization will be billed{' '}
-                          <span className="text-brand-900">
+                          <span className="text-brand">
                             ${transferPreviewData.costs_on_target_organization}
                           </span>{' '}
                           immediately to prorate for the remainder of the billing period.
diff --git a/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx b/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
index 6ea93cd06f8..9a31cbe0b2d 100644
--- a/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
@@ -276,7 +276,7 @@ export function jsonSyntaxHighlight(input: Object) {
         if (/:$/.test(match)) {
           cls = 'key text-scale-1200'
         } else {
-          cls = 'string text-brand-1100'
+          cls = 'string text-brand-600'
         }
       } else if (/true|false/.test(match)) {
         cls = 'boolean text-blue-900'
diff --git a/studio/components/interfaces/Settings/Vault/Secrets/SecretRow.tsx b/studio/components/interfaces/Settings/Vault/Secrets/SecretRow.tsx
index c0a9419c7e8..530286775ea 100644
--- a/studio/components/interfaces/Settings/Vault/Secrets/SecretRow.tsx
+++ b/studio/components/interfaces/Settings/Vault/Secrets/SecretRow.tsx
@@ -66,11 +66,11 @@ const SecretRow: FC<Props> = ({ secret, onSelectEdit, onSelectRemove }) => {
           <IconKey
             size={14}
             strokeWidth={2}
-            className="text-scale-1000 transition group-hover:text-brand-900"
+            className="text-scale-1000 transition group-hover:text-brand"
           />
           <Link href={`/project/${ref}/settings/vault/keys?id=${secret.key_id}`}>
             <a
-              className="text-scale-1100 font-mono text-xs cursor-pointer transition group-hover:text-brand-900"
+              className="text-scale-1100 font-mono text-xs cursor-pointer transition group-hover:text-brand"
               title={secret.key_id}
             >
               {secret.key_id}
diff --git a/studio/components/interfaces/Storage/CreateBucketModal.tsx b/studio/components/interfaces/Storage/CreateBucketModal.tsx
index 3d098675683..abb5cb45596 100644
--- a/studio/components/interfaces/Storage/CreateBucketModal.tsx
+++ b/studio/components/interfaces/Storage/CreateBucketModal.tsx
@@ -209,7 +209,7 @@ const CreateBucketModal = ({ visible, onClose }: CreateBucketModalProps) => {
                               <p className="text-scale-1000 text-sm">
                                 Note: The{' '}
                                 <Link href={`/project/${ref}/settings/storage`}>
-                                  <a className="text-brand-900 opacity-80 hover:opacity-100 transition">
+                                  <a className="text-brand opacity-80 hover:opacity-100 transition">
                                     global upload limit
                                   </a>
                                 </Link>{' '}
diff --git a/studio/components/interfaces/Storage/EditBucketModal.tsx b/studio/components/interfaces/Storage/EditBucketModal.tsx
index 650c68f2828..59b691e7435 100644
--- a/studio/components/interfaces/Storage/EditBucketModal.tsx
+++ b/studio/components/interfaces/Storage/EditBucketModal.tsx
@@ -221,7 +221,7 @@ const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalProps) =>
                               <p className="text-scale-1000 text-sm">
                                 Note: The{' '}
                                 <Link href={`/project/${ref}/settings/storage`}>
-                                  <a className="text-brand-900 opacity-80 hover:opacity-100 transition">
+                                  <a className="text-brand opacity-80 hover:opacity-100 transition">
                                     global upload limit
                                   </a>
                                 </Link>{' '}
diff --git a/studio/components/interfaces/Support/Success.tsx b/studio/components/interfaces/Support/Success.tsx
index 1fcd9d937e3..7fad08f1770 100644
--- a/studio/components/interfaces/Support/Success.tsx
+++ b/studio/components/interfaces/Support/Success.tsx
@@ -18,8 +18,8 @@ const Success: FC<Props> = ({ sentCategory = '' }) => {
   return (
     <div className="mt-10 w-[620px] flex flex-col items-center space-y-4">
       <div className="relative">
-        <IconMail strokeWidth={1.5} size={60} className="text-brand-900" />
-        <div className="h-6 w-6 rounded-full bg-brand-900 absolute bottom-1 -right-1.5 flex items-center justify-center">
+        <IconMail strokeWidth={1.5} size={60} className="text-brand" />
+        <div className="h-6 w-6 rounded-full bg-brand absolute bottom-1 -right-1.5 flex items-center justify-center">
           <IconCheck strokeWidth={4} size={18} />
         </div>
       </div>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
index fb4c5d6f350..c98ba5e41fa 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
@@ -367,7 +367,7 @@ const ColumnEditor = ({
                       <p>
                         You will need to{' '}
                         <Link href={`/project/${ref}/database/extensions?filter=pgsodium`}>
-                          <a className="text-brand-800 hover:text-brand-900 transition">install</a>
+                          <a className="text-brand-300 hover:text-brand transition">install</a>
                         </Link>{' '}
                         the extension <code className="text-xs">pgsodium</code> first before being
                         able to encrypt your column.
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
index df57a2cf8f2..9c9dc4f4d08 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
@@ -134,8 +134,7 @@ const ColumnForeignKeyAdded: FC<{
         <div className="flex flex-col space-y-4 text-scale-1100">
           <div className="space-y-2">
             <span>
-              The following foreign key relation will be{' '}
-              <span className="text-brand-900">added</span>:
+              The following foreign key relation will be <span className="text-brand">added</span>:
             </span>
             <div className="flex items-center space-x-2 text-scale-1200">
               <span
@@ -234,8 +233,7 @@ const ColumnForeignKeyUpdated: FC<{
         <div className="flex flex-col space-y-4">
           <div className="space-y-2">
             <p>
-              The foreign key relation will be <span className="text-brand-900">updated</span> as
-              such:
+              The foreign key relation will be <span className="text-brand">updated</span> as such:
             </p>
             <div className="flex items-start space-x-2">
               <code className="text-xs font-mono">{columnName}</code>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
index d40c56df3ee..3a6fb96cc55 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
@@ -330,7 +330,7 @@ const ForeignKeySelector: FC<Props> = ({ column, visible = false, closePanel, sa
                         href="https://supabase.com/docs/guides/database/postgres/cascade-deletes"
                         target="_blank"
                         rel="noreferrer"
-                        className="text-brand-900 opacity-75"
+                        className="text-brand opacity-75"
                       >
                         Learn more about cascade deletes
                       </a>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx
index a77e38a9039..a878ab46238 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx
@@ -20,7 +20,7 @@ const columnRender = (name: string, isPrimaryKey = false) => {
       {isPrimaryKey && (
         <Tooltip.Root delayDuration={0}>
           <Tooltip.Trigger>
-            <div className="text-brand-900">
+            <div className="text-brand">
               <IconKey size="tiny" strokeWidth={2} />
             </div>
           </Tooltip.Trigger>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts
index 585853061ee..ddee6d5ee0c 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts
@@ -2,7 +2,15 @@ import { sortBy, concat } from 'lodash'
 import { PostgresDataTypeOption } from './SidePanelEditor.types'
 
 export const DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ssZ'
-export const NUMERICAL_TYPES = ['int2', 'int4', 'int8', 'float4', 'float8', 'numeric']
+export const NUMERICAL_TYPES = [
+  'int2',
+  'int4',
+  'int8',
+  'float4',
+  'float8',
+  'numeric',
+  'double precision',
+]
 export const JSON_TYPES = ['json', 'jsonb']
 export const TEXT_TYPES = ['text', 'varchar']
 
@@ -11,7 +19,7 @@ export const DATE_TYPES = ['date']
 export const TIME_TYPES = ['time', 'timetz']
 export const DATETIME_TYPES = concat(TIMESTAMP_TYPES, DATE_TYPES, TIME_TYPES)
 
-export const OTHER_DATA_TYPES = ['uuid', 'bool']
+export const OTHER_DATA_TYPES = ['uuid', 'bool', 'vector']
 export const POSTGRES_DATA_TYPES = sortBy(
   concat(NUMERICAL_TYPES, JSON_TYPES, TEXT_TYPES, DATETIME_TYPES, OTHER_DATA_TYPES)
 )
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx
index 286d80c2665..73506ebc68e 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx
@@ -57,7 +57,7 @@ const SpreadSheetFileUpload: FC<Props> = ({
           onClick={() => (uploadButtonRef.current as any)?.click()}
         >
           <p className="text-sm">
-            Drag and drop, or <span className="text-brand-900">browse</span> your files
+            Drag and drop, or <span className="text-brand">browse</span> your files
           </p>
         </div>
       ) : (
diff --git a/studio/components/layouts/FunctionsLayout.tsx b/studio/components/layouts/FunctionsLayout.tsx
index caa3776b772..d1ed493472a 100644
--- a/studio/components/layouts/FunctionsLayout.tsx
+++ b/studio/components/layouts/FunctionsLayout.tsx
@@ -75,7 +75,7 @@ const FunctionsLayout: FC<Props> = ({ title, children }) => {
                 <div
                   className={[
                     'h-6 w-6 rounded border border-brand-600 bg-brand-300',
-                    'flex items-center justify-center text-brand-900',
+                    'flex items-center justify-center text-brand',
                   ].join(' ')}
                 >
                   <IconCode size={14} strokeWidth={3} />
diff --git a/studio/components/layouts/ProjectLayout/BuildingState.tsx b/studio/components/layouts/ProjectLayout/BuildingState.tsx
index a41e89137a2..908c1578a2f 100644
--- a/studio/components/layouts/ProjectLayout/BuildingState.tsx
+++ b/studio/components/layouts/ProjectLayout/BuildingState.tsx
@@ -3,7 +3,7 @@ import ClientLibrary from 'components/interfaces/Home/ClientLibrary'
 import ExampleProject from 'components/interfaces/Home/ExampleProject'
 import { CLIENT_LIBRARIES, EXAMPLE_PROJECTS } from 'components/interfaces/Home/Home.constants'
 import Link from 'next/link'
-import { FC, useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { Badge, Button, IconArrowRight, IconLoader } from 'ui'
 
 import { DisplayApiSettings, DisplayConfigSettings } from 'components/ui/ProjectSettings'
@@ -55,8 +55,8 @@ const BuildingState = ({ project }: BuildingStateProps) => {
               <div className="flex items-center gap-2">
                 <IconLoader className="animate-spin" size={12} />
                 <span>
-                  {project.status === PROJECT_STATUS.RESTORING
-                    ? 'Restoring project'
+                  {project.status === PROJECT_STATUS.UNKNOWN
+                    ? 'Initiating project set up'
                     : 'Setting up project'}
                 </span>
               </div>
@@ -82,7 +82,7 @@ const BuildingState = ({ project }: BuildingStateProps) => {
                       Browse the Supabase{' '}
                       <Link href="https://supabase.com/docs">
                         <a
-                          className="mb-0 text-brand-900 transition-colors hover:text-brand-1200"
+                          className="mb-0 text-brand transition-colors hover:text-brand-600"
                           target="_blank"
                           rel="noreferrer"
                         >
diff --git a/studio/components/layouts/ProjectLayout/ConnectingState.tsx b/studio/components/layouts/ProjectLayout/ConnectingState.tsx
index ba2ae591e0b..f9da7b84d57 100644
--- a/studio/components/layouts/ProjectLayout/ConnectingState.tsx
+++ b/studio/components/layouts/ProjectLayout/ConnectingState.tsx
@@ -106,13 +106,13 @@ const ConnectingState = ({ project }: ConnectingStateProps) => {
               <p className="text-sm text-scale-1200">
                 Your project might be facing resource constraints and hence is having trouble
                 connecting. You can verify this by checking your{' '}
-                <span className="text-brand-1000">
+                <span className="text-brand-600">
                   <Link href={`/project/${project.ref}/settings/database`}>
                     <a>database's health</a>
                   </Link>
                 </span>{' '}
                 or your remaining daily disk IO budget via a{' '}
-                <span className="text-brand-1000">
+                <span className="text-brand-600">
                   <Link href={`/project/${project.ref}/reports`}>
                     <a>customizable project report</a>
                   </Link>
@@ -121,7 +121,7 @@ const ConnectingState = ({ project }: ConnectingStateProps) => {
               </p>
               <p className="text-sm text-scale-1200">
                 If your project is facing resource constraints, you can{' '}
-                <span className="text-brand-1000">
+                <span className="text-brand-600">
                   <Link href={`/project/${project.ref}/reports`}>
                     <a>upgrade</a>
                   </Link>
@@ -131,7 +131,7 @@ const ConnectingState = ({ project }: ConnectingStateProps) => {
               <p className="text-sm text-scale-1200">
                 However, if your project still fails to connect thereafter, you can open a support
                 ticket{' '}
-                <span className="text-brand-1000">
+                <span className="text-brand-600">
                   <Link href={`/support/new?ref=${project.ref}`}>here</Link>
                 </span>
                 .
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
index 39851aa93b4..cb18ee373cc 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
@@ -222,14 +222,14 @@ const FeedbackWidget: FC<Props> = ({
           Have a technical issue? Contact{' '}
           <Link href="/support/new">
             <a>
-              <span className="cursor-pointer text-brand-900 transition-colors hover:text-brand-1200">
+              <span className="cursor-pointer text-brand transition-colors hover:text-brand-600">
                 Supabase support
               </span>
             </a>
           </Link>{' '}
           or{' '}
           <a href="https://supabase.com/docs" target="_blank" rel="noreferrer">
-            <span className="cursor-pointer text-brand-900 transition-colors hover:text-brand-1200">
+            <span className="cursor-pointer text-brand transition-colors hover:text-brand-600">
               browse our docs
             </span>
           </a>
diff --git a/studio/components/layouts/ProjectLayout/ProjectLayout.tsx b/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
index 0ce4030e476..90d627cc098 100644
--- a/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
+++ b/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
@@ -171,7 +171,9 @@ const ContentWrapper = ({ isLoading, children }: ContentWrapperProps) => {
 
   const isProjectUpgrading = selectedProject?.status === PROJECT_STATUS.UPGRADING
   const isProjectRestoring = selectedProject?.status === PROJECT_STATUS.RESTORING
-  const isProjectBuilding = selectedProject?.status === PROJECT_STATUS.COMING_UP
+  const isProjectBuilding =
+    selectedProject?.status === PROJECT_STATUS.COMING_UP ||
+    selectedProject?.status === PROJECT_STATUS.UNKNOWN
   const isProjectPausing =
     selectedProject?.status === PROJECT_STATUS.GOING_DOWN ||
     selectedProject?.status === PROJECT_STATUS.PAUSING
diff --git a/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx b/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
index 77527ba7c50..81e4a6e7a39 100644
--- a/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
+++ b/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
@@ -90,7 +90,7 @@ const ProjectPausedState = ({ product }: ProjectPausedStateProps) => {
                   {product !== undefined ? (
                     <>
                       Restore this project to access the{' '}
-                      <span className="text-brand-900">{product}</span> page
+                      <span className="text-brand">{product}</span> page
                     </>
                   ) : (
                     'Restore this project and get back to building the next big thing!'
diff --git a/studio/components/layouts/ProjectLayout/RestoringState.tsx b/studio/components/layouts/ProjectLayout/RestoringState.tsx
index 12cd01d836a..19c19c4a590 100644
--- a/studio/components/layouts/ProjectLayout/RestoringState.tsx
+++ b/studio/components/layouts/ProjectLayout/RestoringState.tsx
@@ -59,7 +59,7 @@ const RestoringState: FC<Props> = ({}) => {
           <div className="space-y-6 pt-6">
             <div className="flex px-8 space-x-8">
               <div className="mt-1">
-                <IconCheckCircle className="text-brand-900" size={18} strokeWidth={2} />
+                <IconCheckCircle className="text-brand" size={18} strokeWidth={2} />
               </div>
               <div className="space-y-1">
                 <p>Restoration complete!</p>
diff --git a/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx b/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
index 2f6b15649e5..dc7e4cd26cc 100644
--- a/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
+++ b/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
@@ -74,7 +74,7 @@ const UpgradingState = () => {
             {isCompleted ? (
               <div className="grid gap-4">
                 <div className="relative mx-auto max-w-[300px]">
-                  <IconCheckCircle className="text-brand-900" size={40} strokeWidth={1.5} />
+                  <IconCheckCircle className="text-brand" size={40} strokeWidth={1.5} />
                 </div>
                 <div className="space-y-2">
                   <p className="text-center">Upgrade completed!</p>
@@ -176,7 +176,7 @@ const UpgradingState = () => {
                                 />
                               </div>
                             ) : isCompleted ? (
-                              <div className="flex items-center justify-center w-5 h-5 border rounded-full bg-brand-800 border-brand-700">
+                              <div className="flex items-center justify-center w-5 h-5 border rounded-full bg-brand-300 border-brand-400">
                                 <IconCheck size={12} className="text-white" strokeWidth={2} />
                               </div>
                             ) : (
diff --git a/studio/components/layouts/SettingsLayout/OrganizationSettingsMenu.tsx b/studio/components/layouts/SettingsLayout/OrganizationSettingsMenu.tsx
index ee1ff6fe3d7..bf8a585a2e6 100644
--- a/studio/components/layouts/SettingsLayout/OrganizationSettingsMenu.tsx
+++ b/studio/components/layouts/SettingsLayout/OrganizationSettingsMenu.tsx
@@ -28,7 +28,9 @@ const OrganizationSettingsMenu = () => {
           <SettingsMenuItem
             key={link.label}
             label={link.label}
-            href={link.pathname.replace('[slug]', organization?.slug ?? '')}
+            href={
+              organization !== undefined ? link.pathname.replace('[slug]', organization.slug) : '/'
+            }
             isActive={link.pathname === router.pathname}
           />
         ))}
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx
index 2f7227836d3..fa14c67cd88 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx
@@ -13,7 +13,7 @@ const FileExplorerHeaderSelection = () => {
   } = storageExplorerStore
 
   return (
-    <div className="z-10 flex h-[40px] items-center rounded-t-md bg-brand-700 px-2 py-1 shadow dark:bg-brand-600">
+    <div className="z-10 flex h-[40px] items-center rounded-t-md bg-brand-400 px-2 py-1 shadow dark:bg-brand-600">
       <Button
         icon={<IconX size={16} strokeWidth={2} />}
         type="text"
diff --git a/studio/components/ui/Charts/Charts.constants.ts b/studio/components/ui/Charts/Charts.constants.ts
index 7aa3a6de752..d760c7bf7e6 100644
--- a/studio/components/ui/Charts/Charts.constants.ts
+++ b/studio/components/ui/Charts/Charts.constants.ts
@@ -5,8 +5,8 @@
 export const CHART_COLORS = {
   TICK: 'var(--colors-scale6)',
   AXIS: 'var(--colors-scale6)',
-  GREEN_1: 'var(--colors-brand9)', // #3ECF8E
-  GREEN_2: 'var(--colors-brand6)',
+  GREEN_1: 'hsl(var(--brand-default))', // #3ECF8E
+  GREEN_2: 'hsl(var(--brand-500))',
 }
 
 // refer to packages/ui/radix-colors.js for full list of colors
@@ -25,8 +25,8 @@ export const STACK_COLORS = [
 }))
 
 export const USAGE_COLORS = {
-  200: 'var(--colors-brand9)',
-  201: 'var(--colors-brand8)',
+  200: 'hsl(var(--brand-default))',
+  201: 'hsl(var(--brand-500))',
   400: 'var(--colors-amber9)',
   401: 'var(--colors-amber8)',
   404: 'var(--colors-amber7)',
diff --git a/studio/components/ui/DisabledWarningDueToIncident.tsx b/studio/components/ui/DisabledWarningDueToIncident.tsx
index eb23010dce8..ffca14cef6e 100644
--- a/studio/components/ui/DisabledWarningDueToIncident.tsx
+++ b/studio/components/ui/DisabledWarningDueToIncident.tsx
@@ -17,7 +17,7 @@ const DisabledWarningDueToIncident: FC<Props> = ({ title }) => {
         <div className="space-y-3">
           <p className="text-sm leading-normal">
             Our engineers are currently working on a fix. You can follow updates on{' '}
-            <a className="text-brand-900" href="https://status.supabase.com/">
+            <a className="text-brand" href="https://status.supabase.com/">
               https://status.supabase.com/
             </a>
           </p>
diff --git a/studio/components/ui/Logs/LogsExplorerHeader.tsx b/studio/components/ui/Logs/LogsExplorerHeader.tsx
index a57a5c76f0f..2425c0e48cb 100644
--- a/studio/components/ui/Logs/LogsExplorerHeader.tsx
+++ b/studio/components/ui/Logs/LogsExplorerHeader.tsx
@@ -29,7 +29,7 @@ const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
       <div className="flex items-center gap-3">
         <div
           className="flex h-6 w-6 items-center justify-center rounded border
-            border-brand-600 bg-brand-300 text-brand-900
+            border-brand-600 bg-brand-300 text-brand
           "
         >
           <IconList size={14} strokeWidth={3} />
@@ -81,7 +81,7 @@ const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
                 respective source. Do note that to access nested keys, you would need to perform the
                 necessary{' '}
                 <Link href="https://supabase.com/docs/guides/platform/logs#unnesting-arrays">
-                  <a target="_blank" rel="noreferrer" className="text-brand-900">
+                  <a target="_blank" rel="noreferrer" className="text-brand">
                     unnesting joins
                     <IconExternalLink
                       size="tiny"
@@ -159,7 +159,7 @@ const Field = ({
         {isCopied ? (
           <Tooltip.Root delayDuration={0}>
             <Tooltip.Trigger>
-              <IconCheck size={14} strokeWidth={3} className="text-brand-900" />
+              <IconCheck size={14} strokeWidth={3} className="text-brand" />
             </Tooltip.Trigger>
             <Tooltip.Portal>
               <Tooltip.Content side="bottom">
diff --git a/studio/components/ui/PasswordStrengthBar.tsx b/studio/components/ui/PasswordStrengthBar.tsx
index d69993f4ab9..38ba5a101fd 100644
--- a/studio/components/ui/PasswordStrengthBar.tsx
+++ b/studio/components/ui/PasswordStrengthBar.tsx
@@ -39,7 +39,7 @@ const PasswordStrengthBar = ({
           ? passwordStrengthMessage
           : 'This is the password to your postgres database, so it must be strong and hard to guess.'}{' '}
         <span
-          className="text-brand-800 underline hover:text-brand-900 transition cursor-pointer"
+          className="text-brand opacity-50 underline hover:opacity-100 transition cursor-pointer"
           onClick={generateStrongPassword}
         >
           Generate a password
diff --git a/studio/data/database/database-size-query.ts b/studio/data/database/database-size-query.ts
new file mode 100644
index 00000000000..3676d47365d
--- /dev/null
+++ b/studio/data/database/database-size-query.ts
@@ -0,0 +1,36 @@
+import { UseQueryOptions } from '@tanstack/react-query'
+import { ExecuteSqlData, useExecuteSqlQuery } from '../sql/execute-sql-query'
+
+export const getDatabaseSizeQuery = () => {
+  const sql = /* SQL */ `
+select sum(pg_database_size(pg_database.datname))::bigint as db_size from pg_database;
+`.trim()
+
+  return sql
+}
+
+export type DatabaseSizeVariables = {
+  projectRef?: string
+  connectionString?: string
+}
+
+export type DatabaseSizeData = { result: { db_size: number }[] }
+export type DatabaseSizeError = unknown
+
+export const useDatabaseSizeQuery = <TData extends DatabaseSizeData = DatabaseSizeData>(
+  { projectRef, connectionString }: DatabaseSizeVariables,
+  options: UseQueryOptions<ExecuteSqlData, DatabaseSizeError, TData> = {}
+) => {
+  return useExecuteSqlQuery(
+    {
+      projectRef,
+      connectionString,
+      sql: getDatabaseSizeQuery(),
+      queryKey: ['database-size'],
+    },
+    {
+      ...options,
+      staleTime: 1000 * 60, // default good for a minute
+    }
+  )
+}
diff --git a/studio/data/integrations/integrations-vercel-connection-sync-envs-mutation.ts b/studio/data/integrations/integrations-vercel-connection-sync-envs-mutation.ts
index 357bc3b6438..78240f76f43 100644
--- a/studio/data/integrations/integrations-vercel-connection-sync-envs-mutation.ts
+++ b/studio/data/integrations/integrations-vercel-connection-sync-envs-mutation.ts
@@ -1,5 +1,8 @@
-import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { toast } from 'react-hot-toast'
+
 import { post } from 'data/fetchers'
+import { ResponseError } from 'types'
 
 export type IntegrationsVercelConnectionSyncEnvsVariables = {
   connectionId: string
@@ -29,25 +32,31 @@ type IntegrationsVercelConnectionSyncEnvsData = Awaited<
 
 export const useIntegrationsVercelConnectionSyncEnvsMutation = ({
   onSuccess,
+  onError,
   ...options
 }: Omit<
   UseMutationOptions<
     IntegrationsVercelConnectionSyncEnvsData,
-    unknown,
+    ResponseError,
     IntegrationsVercelConnectionSyncEnvsVariables
   >,
   'mutationFn'
 > = {}) => {
-  const queryClient = useQueryClient()
-
   return useMutation<
     IntegrationsVercelConnectionSyncEnvsData,
-    unknown,
+    ResponseError,
     IntegrationsVercelConnectionSyncEnvsVariables
   >((vars) => syncEnvsIntegrationsVercelConnection(vars), {
     async onSuccess(data, variables, context) {
       await onSuccess?.(data, variables, context)
     },
+    async onError(data, variables, context) {
+      if (onError === undefined) {
+        toast.error(`Failed to sync environment variables: ${data.message}`)
+      } else {
+        onError(data, variables, context)
+      }
+    },
     ...options,
   })
 }
diff --git a/studio/hooks/misc/useStore.tsx b/studio/hooks/misc/useStore.tsx
index 025301498b5..411821dd8f9 100644
--- a/studio/hooks/misc/useStore.tsx
+++ b/studio/hooks/misc/useStore.tsx
@@ -55,7 +55,7 @@ export const StoreProvider: FC<StoreProvider> = ({ children, rootStore }) => {
                     value={progress}
                     max={100}
                     type="horizontal"
-                    barClass="bg-brand-900"
+                    barClass="bg-brand"
                     labelBottom={message}
                     labelTop={`${progress.toFixed(2)}%`}
                   />
diff --git a/studio/lib/gotrue.ts b/studio/lib/gotrue.ts
index d83f9e902c9..9a285edf300 100644
--- a/studio/lib/gotrue.ts
+++ b/studio/lib/gotrue.ts
@@ -1,6 +1,5 @@
 import { User } from '@supabase/gotrue-js'
 import { gotrueClient } from 'common'
-import { DEFAULT_HOME, IS_PLATFORM } from './constants'
 export { STORAGE_KEY } from 'common'
 
 export const auth = gotrueClient
@@ -37,7 +36,7 @@ export const getIdentity = (gotrueUser: User) => {
 
 // NOTE: do not use any imports in this function as it is used standalone in the documents head
 // [Joshen] Potentially can remove after full move over to /dashboard
-export const getReturnToPath = (fallback = DEFAULT_HOME) => {
+export const getReturnToPath = (fallback = '/projects') => {
   const searchParams = new URLSearchParams(location.search)
 
   // [Joshen] Remove base path value ("/dashboard") from returnTo
diff --git a/studio/pages/join/index.tsx b/studio/pages/join/index.tsx
index 56130ed0c13..dc9b553a419 100644
--- a/studio/pages/join/index.tsx
+++ b/studio/pages/join/index.tsx
@@ -137,7 +137,7 @@ const JoinOrganizationPage = () => {
         <p className="text-scale-900">
           To accept this invitation, you will need to{' '}
           <a
-            className="cursor-pointer text-brand-900"
+            className="cursor-pointer text-brand"
             onClick={async () => {
               await signOut()
               router.reload()
diff --git a/studio/pages/new/[slug].tsx b/studio/pages/new/[slug].tsx
index a73d3a53d2a..57f14d45c7b 100644
--- a/studio/pages/new/[slug].tsx
+++ b/studio/pages/new/[slug].tsx
@@ -483,7 +483,7 @@ const Wizard: NextPageWithLayout = () => {
                     <div className="space-y-3">
                       <p className="text-sm leading-normal">
                         This organization uses organization level billing and is on the{' '}
-                        <span className="text-brand-900">{orgSubscription?.plan?.name} plan</span>.
+                        <span className="text-brand">{orgSubscription?.plan?.name} plan</span>.
                       </p>
 
                       {orgSubscription?.plan?.id !== 'free' && (
diff --git a/studio/pages/org/[slug]/index.tsx b/studio/pages/org/[slug]/index.tsx
index b1e1245555c..c1e599eca39 100644
--- a/studio/pages/org/[slug]/index.tsx
+++ b/studio/pages/org/[slug]/index.tsx
@@ -23,7 +23,7 @@ const ProjectsPage: NextPageWithLayout = () => {
   const projects = allProjects?.filter((project) => project.organization_id === organization?.id)
 
   return (
-    <ScaffoldContainer>
+    <ScaffoldContainer className="h-full overflow-y-auto">
       <ScaffoldSection>
         <div className="col-span-12 space-y-8">
           <Link href={`/new/${organization?.slug}`}>
diff --git a/studio/pages/project/[ref]/database/backups/scheduled.tsx b/studio/pages/project/[ref]/database/backups/scheduled.tsx
index a4f83a5ca93..2a6fe5fbd3b 100644
--- a/studio/pages/project/[ref]/database/backups/scheduled.tsx
+++ b/studio/pages/project/[ref]/database/backups/scheduled.tsx
@@ -64,7 +64,7 @@ const DatabaseScheduledBackups: NextPageWithLayout = () => {
                   needed, as PITR supports a superset of functionality, in terms of the granular
                   recovery that can be performed.{' '}
                   <a
-                    className="text-brand-900 transition-colors hover:text-brand-1200"
+                    className="text-brand transition-colors hover:text-brand-600"
                     href="https://supabase.com/docs/guides/platform/backups"
                   >
                     Learn more
diff --git a/studio/pages/project/[ref]/logs/explorer/templates.tsx b/studio/pages/project/[ref]/logs/explorer/templates.tsx
index db2173b63f4..7eb8d932f42 100644
--- a/studio/pages/project/[ref]/logs/explorer/templates.tsx
+++ b/studio/pages/project/[ref]/logs/explorer/templates.tsx
@@ -41,8 +41,8 @@ const Template = ({ projectRef, template }: { projectRef?: string; template: Log
           bg-scale-1200
           text-scale-100
           transition-colors
-          group-hover:bg-brand-900
-          group-hover:text-brand-1200
+          group-hover:bg-brand
+          group-hover:text-brand-600
         "
         >
           <div className="scale-100 group-hover:scale-110">
diff --git a/studio/pages/project/[ref]/reports/database.tsx b/studio/pages/project/[ref]/reports/database.tsx
index 045faf731bf..49367c6f4e5 100644
--- a/studio/pages/project/[ref]/reports/database.tsx
+++ b/studio/pages/project/[ref]/reports/database.tsx
@@ -1,9 +1,8 @@
 import dayjs from 'dayjs'
 import { observer } from 'mobx-react-lite'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 
 import { useParams } from 'common/hooks'
-import { useStore } from 'hooks'
 import { TIME_PERIODS_INFRA, USAGE_APPROACHING_THRESHOLD } from 'lib/constants'
 import { formatBytes } from 'lib/helpers'
 import { NextPageWithLayout } from 'types'
@@ -15,8 +14,9 @@ import ChartHandler from 'components/to-be-cleaned/Charts/ChartHandler'
 import DateRangePicker from 'components/to-be-cleaned/DateRangePicker'
 import Panel from 'components/ui/Panel'
 import SparkBar from 'components/ui/SparkBar'
-import { useProjectUsageQuery } from 'data/usage/project-usage-query'
+import { useDatabaseSizeQuery } from 'data/database/database-size-query'
 import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
+import { useProjectUsageQuery } from 'data/usage/project-usage-query'
 
 const DatabaseReport: NextPageWithLayout = () => {
   return (
@@ -35,36 +35,21 @@ DatabaseReport.getLayout = (page) => <ReportsLayout title="Database">{page}</Rep
 export default DatabaseReport
 
 const DatabaseUsage = observer(() => {
-  const { meta, ui } = useStore()
-  const { project } = useProjectContext()
-  const [databaseSize, setDatabaseSize] = useState<any>(0)
-  const [dateRange, setDateRange] = useState<any>(undefined)
-
   const { ref: projectRef } = useParams()
+  const { project } = useProjectContext()
   const { data: usage } = useProjectUsageQuery({ projectRef })
   const { data: subscription } = useProjectSubscriptionV2Query({ projectRef })
 
+  const [dateRange, setDateRange] = useState<any>(undefined)
+
   const databaseSizeLimit = usage?.db_size?.limit ?? 0
   const databaseEgressLimit = usage?.db_egress?.limit ?? 0
 
-  useEffect(() => {
-    let cancel = false
-    const getDatabaseSize = async () => {
-      const res = await meta.query(
-        'select sum(pg_database_size(pg_database.datname))::bigint as db_size from pg_database;'
-      )
-      if (!res.error && !cancel) {
-        setDatabaseSize(res[0].db_size)
-      } else {
-        ui.setNotification({ category: 'error', message: 'Failed to retrieve database size' })
-      }
-    }
-    getDatabaseSize()
-
-    return () => {
-      cancel = true
-    }
-  }, [])
+  const { data } = useDatabaseSizeQuery({
+    projectRef: project?.ref,
+    connectionString: project?.connectionString,
+  })
+  const databaseSize = data?.result[0].db_size ?? 0
 
   const databaseSizeUsageRatio = databaseSize / databaseSizeLimit
   const sizeIsApproaching = databaseSizeUsageRatio >= USAGE_APPROACHING_THRESHOLD
@@ -90,11 +75,7 @@ const DatabaseUsage = observer(() => {
                   value={databaseSize}
                   max={databaseSizeLimit > 0 ? databaseSizeLimit : Infinity}
                   barClass={`${
-                    sizeIsExceeded
-                      ? 'bg-red-900'
-                      : sizeIsApproaching
-                      ? 'bg-yellow-900'
-                      : 'bg-brand-900'
+                    sizeIsExceeded ? 'bg-red-900' : sizeIsApproaching ? 'bg-yellow-900' : 'bg-brand'
                   }`}
                   labelBottom={formatBytes(databaseSize)}
                   labelTop={databaseSizeLimit > 0 ? formatBytes(databaseSizeLimit) : ''}
@@ -134,7 +115,7 @@ const DatabaseUsage = observer(() => {
                       ? 'bg-red-900'
                       : egressIsApproaching
                       ? 'bg-yellow-900'
-                      : 'bg-brand-900'
+                      : 'bg-brand'
                   }`}
                   labelBottom={formatBytes(usage?.db_egress?.usage ?? 0)}
                   labelTop={databaseEgressLimit > 0 ? formatBytes(databaseEgressLimit) : ''}
diff --git a/studio/pages/project/[ref]/reports/query-performance.tsx b/studio/pages/project/[ref]/reports/query-performance.tsx
index e23ede36487..a8c3b156bd2 100644
--- a/studio/pages/project/[ref]/reports/query-performance.tsx
+++ b/studio/pages/project/[ref]/reports/query-performance.tsx
@@ -45,7 +45,7 @@ const QueryPerformanceReport: NextPageWithLayout = () => {
   }
 
   const checkAlert = (
-    <div className="w-5 h-5 text-brand-1400 text-brand-900 flex items-center justify-center">
+    <div className="w-5 h-5 text-brand-1400 text-brand flex items-center justify-center">
       <IconCheckCircle strokeWidth={2} size={16} />
     </div>
   )
diff --git a/studio/pages/project/[ref]/settings/addons.tsx b/studio/pages/project/[ref]/settings/addons.tsx
index db292501c79..d8cd7e0fac3 100644
--- a/studio/pages/project/[ref]/settings/addons.tsx
+++ b/studio/pages/project/[ref]/settings/addons.tsx
@@ -21,7 +21,7 @@ const ProjectAddons: NextPageWithLayout = () => {
         >
           You might be looking for the{' '}
           <Link href={`/project/${ref}/settings/billing/subscription`}>
-            <a className="text-brand-900">project's subscription</a>
+            <a className="text-brand">project's subscription</a>
           </Link>{' '}
           page instead.
         </Alert>
diff --git a/studio/pages/project/[ref]/settings/infrastructure.tsx b/studio/pages/project/[ref]/settings/infrastructure.tsx
index 629177a1dcc..ea2bdbcf75e 100644
--- a/studio/pages/project/[ref]/settings/infrastructure.tsx
+++ b/studio/pages/project/[ref]/settings/infrastructure.tsx
@@ -23,7 +23,7 @@ const ProjectInfrastructure: NextPageWithLayout = () => {
         >
           You might be looking for the{' '}
           <Link href={`/project/${ref}/settings/billing/usage`}>
-            <a className="text-brand-900">project's usage</a>
+            <a className="text-brand">project's usage</a>
           </Link>{' '}
           page instead.
         </Alert>
diff --git a/studio/pages/support/new.tsx b/studio/pages/support/new.tsx
index 8d042dbddad..159151dc291 100644
--- a/studio/pages/support/new.tsx
+++ b/studio/pages/support/new.tsx
@@ -50,7 +50,7 @@ const SupportPage = () => {
                           isLoading ? (
                             <IconLoader className="animate-spin" />
                           ) : isHealthy ? (
-                            <div className="h-2 w-2 bg-brand-900 rounded-full" />
+                            <div className="h-2 w-2 bg-brand rounded-full" />
                           ) : (
                             <div className="h-2 w-2 bg-yellow-900 rounded-full" />
                           )
diff --git a/studio/pages/vercel/integrate.tsx b/studio/pages/vercel/integrate.tsx
index 93150b6eec1..db220547025 100644
--- a/studio/pages/vercel/integrate.tsx
+++ b/studio/pages/vercel/integrate.tsx
@@ -218,7 +218,7 @@ const ProjectLinksEmptyState = () => (
       then close this window and retry adding integration.
     </p>
     <Link href="https://supabase.com/dashboard">
-      <a className="text-brand-900">
+      <a className="text-brand">
         Start a new Supabase project<span aria-hidden="true"> &rarr;</span>
       </a>
     </Link>
diff --git a/studio/styles/code.scss b/studio/styles/code.scss
index e98880bd3bc..d679eb8e7c6 100644
--- a/studio/styles/code.scss
+++ b/studio/styles/code.scss
@@ -46,7 +46,7 @@
 
   .token.string {
     font-style: normal !important;
-    @apply text-brand-900 #{!important};
+    @apply text-brand #{!important};
   }
 
   .token.constant {
@@ -60,12 +60,12 @@
   }
 
   .token.number {
-    @apply text-brand-900 #{!important};
+    @apply text-brand #{!important};
   }
 
   .token.boolean,
   .token.doc-comment.class-name {
-    @apply text-brand-900;
+    @apply text-brand;
   }
 
   .codeBlock {
diff --git a/studio/styles/date-picker.scss b/studio/styles/date-picker.scss
index d43d5286e2a..491e5a5e1f8 100644
--- a/studio/styles/date-picker.scss
+++ b/studio/styles/date-picker.scss
@@ -73,11 +73,11 @@
 }
 
 .react-datepicker__day--in-range {
-  @apply bg-brand-800 text-scale-fixed-100 border-brand-800;
+  @apply bg-brand-300 text-scale-fixed-100 border-brand-300;
 }
 
 .react-datepicker__day--in-selecting-range {
-  @apply bg-brand-700 text-scale-fixed-100 border-brand-700;
+  @apply bg-brand-400 text-scale-fixed-100 border-brand-400;
 }
 
 .react-datepicker__day--selecting-range-start {
@@ -90,17 +90,17 @@
 
 .react-datepicker__day--selected,
 .react-datepicker__day--selected.react-datepicker__day--highlighted {
-  @apply bg-brand-800 text-white;
+  @apply bg-brand-300 text-white;
 }
 
 .react-datepicker__day--range-start {
-  @apply bg-brand-900 text-white hover:text-scale-700 hover:bg-white;
+  @apply bg-brand text-white hover:text-scale-700 hover:bg-white;
 }
 
 .react-datepicker__day--range-end {
-  @apply bg-brand-900 text-white hover:text-scale-700 hover:bg-white;
+  @apply bg-brand text-white hover:text-scale-700 hover:bg-white;
 }
 
 .react-datepicker__day--highlighted {
   @apply bg-brand-600 text-scale-1100;
-}
\ No newline at end of file
+}
diff --git a/studio/styles/grid.scss b/studio/styles/grid.scss
index 9ac86a2ddc3..831262f414a 100644
--- a/studio/styles/grid.scss
+++ b/studio/styles/grid.scss
@@ -174,8 +174,8 @@
   }
 
   [type='checkbox']:checked {
-    @apply dark:bg-brand-900;
-    @apply bg-brand-900;
+    @apply dark:bg-brand;
+    @apply bg-brand;
     border-color: transparent;
     background-size: 100% 100%;
     background-position: center;
@@ -186,7 +186,7 @@
     @apply cursor-pointer rounded border border-solid;
 
     @apply text-brand-600 border-scale-400 transition-all;
-    @apply hover:border-brand-900 focus:ring-brand-500 focus:outline-none;
+    @apply hover:border-brand focus:ring-brand-300 focus:outline-none;
 
     @apply dark:border-scale-500 dark:bg-transparent dark:text-white;
     @apply dark:hover:border-green-900;
@@ -388,7 +388,7 @@
 .sb-grid-select-editor {
   button {
     @apply border-none rounded-none shadow-none;
-    box-shadow: none !important
+    box-shadow: none !important;
   }
 }
 
@@ -491,7 +491,7 @@
 }
 
 .sb-grid-column-header__inner svg {
-  @apply border-brand-900 text-brand-900 dark:border-brand-900 dark:text-brand-900;
+  @apply border-brand text-brand dark:border-brand dark:text-brand;
 }
 
 /*
@@ -523,7 +523,7 @@
 }
 
 .sb-grid-select-cell__header__input {
-  /* @apply focus:ring-brand-500; */
+  /* @apply focus:ring-brand-300; */
   @apply border-scale-300;
 }
 
diff --git a/studio/styles/react-data-grid-logs.scss b/studio/styles/react-data-grid-logs.scss
index ede173ea6af..723030f95b7 100644
--- a/studio/styles/react-data-grid-logs.scss
+++ b/studio/styles/react-data-grid-logs.scss
@@ -15,7 +15,7 @@
 
   .rdg-row {
     &.rdg-row--focused {
-      @apply border-r border-brand-900;
+      @apply border-r border-brand;
       border-right-width: 4px;
     }
 
@@ -43,7 +43,7 @@
 
   .rdg-row {
     &.rdg-row--focused {
-      @apply border-r border-brand-900;
+      @apply border-r border-brand;
       border-right-width: 4px;
     }
 
@@ -77,8 +77,8 @@
   background: linear-gradient(
     to right,
     var(--colors-scale2) 0%,
-    var(--colors-brand9) 25%,
-    var(--colors-brand4) 35%,
+    hsl(var(--brand-default)) 25%,
+    hsl(var(--brand-300)) 35%,
     var(--colors-scale2) 45%,
     var(--colors-scale3) 75%
   );
diff --git a/studio/styles/ui.scss b/studio/styles/ui.scss
index 2a122876c3d..afe63893d05 100644
--- a/studio/styles/ui.scss
+++ b/studio/styles/ui.scss
@@ -263,7 +263,7 @@
     }
 
     a:hover {
-      @apply text-brand-1000;
+      @apply text-brand-600;
     }
 
     p:last-child {
@@ -289,7 +289,7 @@
     }
 
     .is-highlighted {
-      @apply text-brand-900;
+      @apply text-brand;
     }
   }
   .codeblock-container + .codeblock-container {
@@ -299,7 +299,7 @@
 
 ::-moz-selection {
   /* Code for Firefox */
-  @apply bg-brand-900;
+  @apply bg-brand;
   color: #333 !important;
 }
 
@@ -408,7 +408,7 @@
 
 .form-field-markdown {
   a {
-    @apply text-brand-900 transition opacity-75 hover:opacity-100 underline;
+    @apply text-brand transition opacity-75 hover:opacity-100 underline;
   }
 }
 
diff --git a/studio/tests/unit/get-return-to-path.test.ts b/studio/tests/unit/get-return-to-path.test.ts
index 5b11a40ae13..f7951444c17 100644
--- a/studio/tests/unit/get-return-to-path.test.ts
+++ b/studio/tests/unit/get-return-to-path.test.ts
@@ -1,9 +1,8 @@
 import { getReturnToPath } from 'lib/gotrue'
-import { DEFAULT_HOME } from 'lib/constants'
 
 describe(`getReturnToPath`, () => {
   it(`returns to /projects when no fallback is provided`, () => {
-    expect(getReturnToPath()).toBe(DEFAULT_HOME)
+    expect(getReturnToPath()).toBe('/projects')
   })
 
   it(`returns to /custom when fallback is provided`, () => {
@@ -34,7 +33,7 @@ describe(`getReturnToPath`, () => {
     // @ts-ignore
     window.location = { search: `?returnTo=https://google.com` }
 
-    expect(getReturnToPath()).toBe(DEFAULT_HOME)
+    expect(getReturnToPath()).toBe('/projects')
   })
 
   it(`does not allow XSS`, () => {
@@ -43,7 +42,7 @@ describe(`getReturnToPath`, () => {
     // @ts-ignore
     window.location = { search: `?returnTo=javascript:alert(1)` }
 
-    expect(getReturnToPath()).toBe(DEFAULT_HOME)
+    expect(getReturnToPath()).toBe('/projects')
   })
 
   it(`does not allow XSS with encoded characters`, () => {
@@ -52,6 +51,6 @@ describe(`getReturnToPath`, () => {
     // @ts-ignore
     window.location = { search: `?returnTo=javascript%3Aalert%281%29` }
 
-    expect(getReturnToPath()).toBe(DEFAULT_HOME)
+    expect(getReturnToPath()).toBe('/projects')
   })
 })