Merge branch 'chore/update-brand-colors' into feat/ai-sql-editor-styling--with-new-brand-tailwind-tokens

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')
     }
   })
 }

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>

apps/docs/components/HomePageCover.tsx

@@ -69,7 +69,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>

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>

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>

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">

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>

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">

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>

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(' ')}

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}

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>

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>

apps/docs/components/reference/OldVersionAlert.tsx

@@ -27,7 +27,7 @@ const OldVersionAlert = ({ sections }: OldVersionAlertProps) => {
         You'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>

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">

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>
   )

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}

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>
       )}

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>

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>
 

apps/docs/pages/reference/cli/config.tsx

@@ -29,7 +29,7 @@ export default function Config() {
         <div className="relative col-span-12 md:col-span-9 transition-all ease-out duration-100">
           <div className="w-full prose">
             <h1 className="">CLI configuration</h1>
-            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand-900 my-8"></div>
+            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-300 to-brand my-8"></div>
             <ReactMarkdown>{specFile.info.description}</ReactMarkdown>
             <div>
               {TAGS.map((tag) =>

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 {

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>

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'
 

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)',

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>
                   ) : (

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>

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)'

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>
               .

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>

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"

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>

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(' ')}

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,

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(' ')}
           />
         }

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,

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>

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>

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

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 = (

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' ? (

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"

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>
   )

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>

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)`,

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>
   )

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>

apps/www/components/Sections/ProductHeaderCentered.tsx

@@ -47,7 +47,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}

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}%` }}

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:

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>

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>{' '}

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>

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>

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}

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>
 

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}

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>

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)}
                     >

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>

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>

apps/www/pages/partners/integrations/index.tsx

@@ -200,10 +200,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>

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>

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(' ')}
               >

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>

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;
@@ -674,19 +674,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%);
   }

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,7 @@
   --ch-13: #5a1e02;
   --ch-14: #161b22;
   --ch-15: #8b949e;
-  --ch-16: var(--colors-scale1);
+  --ch-16: hsl(var(--foreground-lighter));
   --ch-17: #264f78;
   --ch-18: #3794ff;
   --ch-19: #ffffff0b;
@@ -34,9 +34,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 +44,7 @@
   --ch-13: #ffd8b5;
   --ch-14: #eaeef2;
   --ch-15: #57606a;
-  --ch-16: var(--colors-scale1);
+  --ch-16: hsl(var(--foreground-lighter));
   --ch-17: #add6ff;
   --ch-18: #1a85ff;
   --ch-19: #fdff0033;

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)',

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)',

packages/config/ui.config.js

@@ -51,7 +51,7 @@ function radixColorKeys() {
 }
 
 function generateColorClasses() {
-  const brandColors = ['brand', 'scale', 'scaleA']
+  const brandColors = ['scale', 'scaleA']
   const colors = [...radixColorKeys(), ...brandColors]
 
   let mappedColors = {}

packages/ui/build/css/source/global.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 30 Jul 2023 10:24:00 GMT
+ * Generated on Sun, 30 Jul 2023 13:51:05 GMT
  */
 
 :root {

packages/ui/build/css/themes/dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 30 Jul 2023 10:24:00 GMT
+ * Generated on Sun, 30 Jul 2023 13:51:05 GMT
  */
 
 .dark {

packages/ui/build/css/themes/light.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 30 Jul 2023 10:24:00 GMT
+ * Generated on Sun, 30 Jul 2023 13:51:05 GMT
  */
 
 .light {

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'

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 {

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 {

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 {

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

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;
 } */

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" />
             )

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>

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} />

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>
   )

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 {

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>
 )

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>

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;

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;

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;
 }
 

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 {

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">

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 {

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;

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;
 }

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';
 }

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`,

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`,
     },
   },
 }

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
     `,

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;
 }

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}