refactor(ui): rename text-brand to text-primary (#50564)

## What kind of change does this PR introduce?

Refactor. Follow-up to #49871.

## What is the current behavior?

Branded (green) text still uses the `text-brand` classname while the
colour comes from `--primary`.

## What is the new behavior?

**Rename-only:** `text-brand` → `text-primary` across callsites and
docs. Leftover `bg-brand` / `border-brand` alias to `brand-default`. No
intentional colour changes in this PR.

This better matches how we treat our green in other components and
props, like `variant="primary"` for green buttons.

## To test

On light mode: smoke-test that branded text still looks like #49871
(readable green, not the bright fill).

-
[Homepage](https://zone-www-dot-com-git-dnywh-depr-316-text-brand-de2380-supabase.vercel.app/):
“Scale to millions” uses `text-primary`
- [Docs
homepage](https://docs-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/docs):
branded links like “More on self-hosting” are still readable
- [Typography
docs](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/typography):
documents `text-primary`
- [Colour
usage](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/color-usage):
`text-primary` is visibly darker than `bg-brand-default` _on light mode_
- [Studio auth
providers](https://studio-staging-git-dnywh-depr-316-text-brand-to-60fa6c-supabase.vercel.app/dashboard/project/_/auth/providers):
enabled provider badge text readable; status dot stays bright green

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Updated branded text, link hover states, icons, badges, indicators,
and highlighted content across the Design System, Docs, Studio, Learn,
UI Library, and marketing experiences to use the primary theme color.
* Updated syntax highlighting and table-of-contents styling for
consistent primary-color presentation.
  * Refined brand color fallback behavior for bright fills and borders.

* **Documentation**
* Updated color-usage and typography guidance to recommend the primary
text utility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/design-system/app/(app)/page.tsx

@@ -30,7 +30,7 @@ export default function Home() {
 
           <Link href="/docs/icons" className="h-full flex">
             <div className="p-6 gap-4 flex flex-col justify-between h-full w-full bg-surface-75 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
-              <div className="flex items-center justify-start min-h-[24px] gap-3 text-brand">
+              <div className="flex items-center justify-start min-h-[24px] gap-3 text-primary">
                 <Realtime className="w-5 h-5" strokeWidth={1.5} stroke="currentColor" />
                 <Database className="w-5 h-5 opacity-60" strokeWidth={1.5} stroke="currentColor" />
                 <Auth className="w-5 h-5 opacity-30" strokeWidth={1.5} stroke="currentColor" />
@@ -44,7 +44,7 @@ export default function Home() {
 
           <Link href="/docs/theming" className="h-full flex">
             <div className="p-6 gap-4 flex flex-col justify-between h-full w-full bg-surface-75 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
-              <div className="flex items-center justify-start min-h-[24px] text-brand">
+              <div className="flex items-center justify-start min-h-[24px] text-primary">
                 <Paintbrush className="w-6 h-6" strokeWidth={1.5} stroke="currentColor" />
               </div>
               <div>

apps/design-system/components/mdx-components.tsx

@@ -87,7 +87,7 @@ const components = {
   a: ({ className, ...props }: React.HTMLAttributes<HTMLAnchorElement>) => (
     <a
       className={cn(
-        'text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-brand hover:decoration-2',
+        'text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-primary hover:decoration-2',
         className
       )}
       {...props}

apps/design-system/content/docs/color-usage.mdx

@@ -9,7 +9,7 @@ The shorthand utility classes below simplify our full color palette by providing
 
 Use accent text colors (e.g. text-destructive, text-warning) sparingly to avoid visual overload.
 
-Use `text-brand` for readable branded text such as links, labels, and statuses. On light-theme
+Use `text-primary` for readable branded text such as links, labels, and statuses. On light-theme
 surfaces it meets the 4.5:1 WCAG AA requirement for normal text. Use `bg-brand-default` /
 `border-brand-default` when you need the canonical bright Supabase green as a fill or border.
 

apps/design-system/content/docs/typography.mdx

@@ -12,6 +12,6 @@ The shorthands below are composed of core [Tailwind utility classes](../docs/tai
 | Value              | Usage                                                                      |
 | ------------------ | -------------------------------------------------------------------------- |
 | `text-code-inline` | Apply to a `code` element for inline code or similar custom inline content |
-| `text-brand`       | Accessible Supabase green for readable branded text                        |
+| `text-primary`     | Accessible Supabase green for readable branded text                        |
 
-`text-brand` is independent from `bg-brand-default`, `border-brand-default`, and other non-text brand utilities. Its light-mode value has at least 4.5:1 contrast against the light surfaces used by the apps, meeting WCAG AA for normal text.
+`text-primary` is independent from `bg-brand-default`, `border-brand-default`, and other non-text brand utilities. Its light-mode value has at least 4.5:1 contrast against the light surfaces used by the apps, meeting WCAG AA for normal text.

apps/design-system/registry/default/example/page-layout-edge-function.tsx

@@ -435,7 +435,7 @@ function OverviewPage() {
                 <Check
                   size={16}
                   strokeWidth={1.5}
-                  className="mt-0.5 shrink-0 text-brand"
+                  className="mt-0.5 shrink-0 text-primary"
                   aria-hidden="true"
                 />
                 <div>

apps/design-system/registry/default/example/page-layout-logs-content.tsx

@@ -141,7 +141,7 @@ export function PageLayoutLogsContent() {
               <TableCell
                 className={cn(
                   'font-mono text-xs',
-                  status === '500' ? 'text-destructive' : 'text-brand'
+                  status === '500' ? 'text-destructive' : 'text-primary'
                 )}
               >
                 {status}

apps/docs/app/page.tsx

@@ -330,7 +330,7 @@ const HomePage = () => (
             <TextLink
               label="Explore more resources"
               url="/guides/resources"
-              className="no-underline text-brand text-sm"
+              className="no-underline text-primary text-sm"
             />
           </div>
 
@@ -388,7 +388,7 @@ const HomePage = () => (
               <TextLink
                 label="More on self-hosting"
                 url="/guides/self-hosting"
-                className="no-underline text-brand text-sm"
+                className="no-underline text-primary text-sm"
               />
             </div>
           </div>

apps/docs/components/Feedback/FeedbackModal.tsx

@@ -94,7 +94,7 @@ function FeedbackModal({ visible, page, onCancel, onSubmit }: FeedbackModalProps
                     href="https://supabase.com/dashboard/support/new"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="text-brand hover:underline"
+                    className="text-primary hover:underline"
                   >
                     support request
                   </a>

apps/docs/components/GuidesSidebar.tsx

@@ -62,7 +62,7 @@ function AiTools({ className }: { className?: string }) {
           className="flex cursor-pointer items-center gap-1.5 text-xs text-foreground-lighter hover:text-foreground text-left transition-colors"
         >
           {copied ? (
-            <Check size={14} strokeWidth={1.5} className="text-brand" aria-hidden />
+            <Check size={14} strokeWidth={1.5} className="text-primary" aria-hidden />
           ) : (
             <Copy size={14} strokeWidth={1.5} aria-hidden />
           )}

apps/docs/components/MetricsStackCards.tsx

@@ -35,7 +35,7 @@ export function MetricsStackCards() {
                   className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium ${
                     badge.variant === 'community'
                       ? 'border-warning/40 text-warning'
-                      : 'border-brand-500/50 text-brand'
+                      : 'border-brand-500/50 text-primary'
                   }`}
                 >
                   {badge.label}

apps/docs/components/Navigation/Footer.tsx

@@ -14,7 +14,7 @@ const Footer = ({ className }: { className?: string }) => (
               <p>{text}</p>
               <Link
                 href={url}
-                className="text-brand hover:underline"
+                className="text-primary hover:underline"
                 target="_blank"
                 rel="noreferrer noopener"
               >

apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx

@@ -137,7 +137,7 @@ const GlobalMobileMenu = ({ open, setOpen }: Props) => {
                   height={24}
                   alt="Supabase Logo"
                 />
-                <span className="font-mono text-sm font-medium text-brand mb-px">DOCS</span>
+                <span className="font-mono text-sm font-medium text-primary mb-px">DOCS</span>
               </Link>
               <div className="flex gap-4 items-center">
                 <ThemeToggle contentClassName="bg-surface-200" />

apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx

@@ -22,7 +22,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
       <li key={id} className="function-link-item text-foreground-lighter leading-3">
         <Link
           href={`#${id}`}
-          className="cursor-pointer transition text-foreground-lighter text-sm hover:text-brand flex gap-3"
+          className="cursor-pointer transition text-foreground-lighter text-sm hover:text-primary flex gap-3"
         >
           {icon && <img className="w-3" src={`${BASE_PATH}${icon}`} />}
           {title}
@@ -99,7 +99,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
           href={`${menu.parent ?? '/'}`}
           className={[
             'flex items-center gap-1 text-xs group mb-3',
-            'text-base transition-all duration-200 text-brand hover:text-brand-600 hover:cursor-pointer ',
+            'text-base transition-all duration-200 text-primary hover:text-brand-600 hover:cursor-pointer ',
           ].join(' ')}
         >
           <div className="relative w-2">

apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx

@@ -43,7 +43,7 @@ const HeaderLink = React.memo(function HeaderLink(props: {
       className={[
         ' ',
         !props.title && 'capitalize',
-        props.url === pathname ? 'text-brand' : 'hover:text-brand text-foreground',
+        props.url === pathname ? 'text-primary' : 'hover:text-primary text-foreground',
       ].join(' ')}
     >
       {props.title ?? props.id}
@@ -111,7 +111,7 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
                 'cursor-pointer transition text-sm',
                 'focus-inset rounded-md',
                 activeItem
-                  ? 'text-brand font-medium'
+                  ? 'text-primary font-medium'
                   : 'hover:text-foreground text-foreground-lighter',
               ].join(' ')}
             >
@@ -146,8 +146,8 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
                             'relative block py-1.25 pl-1 -ml-1 cursor-pointer transition text-sm',
                             'focus-inset rounded-md',
                             child.url === pathname
-                              ? 'text-brand'
-                              : 'hover:text-brand text-foreground-lighter',
+                              ? 'text-primary'
+                              : 'hover:text-primary text-foreground-lighter',
                           ].join(' ')}
                         >
                           {child.url === pathname && (
@@ -173,7 +173,9 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
             'flex items-center gap-2',
             'cursor-pointer transition text-sm',
             'focus-inset rounded-md',
-            activeItem ? 'text-brand font-medium' : 'hover:text-foreground text-foreground-lighter',
+            activeItem
+              ? 'text-primary font-medium'
+              : 'hover:text-foreground text-foreground-lighter',
           ].join(' ')}
           parent={props.subItem.parent}
         >
@@ -204,7 +206,7 @@ const ContentLink = React.memo(function ContentLink(props: any) {
         className={[
           'cursor-pointer transition text-sm',
           'focus-inset rounded-md',
-          props.url === pathname ? 'text-brand' : 'hover:text-foreground text-foreground-lighter',
+          props.url === pathname ? 'text-primary' : 'hover:text-foreground text-foreground-lighter',
         ].join(' ')}
       >
         {props.icon && (
@@ -226,7 +228,7 @@ const Content = (props) => {
   return (
     <div className="relative w-full flex flex-col gap-0 pb-5">
       <Link href={menu.url ?? ''}>
-        <div className="flex items-center gap-3 my-3 text-brand">
+        <div className="flex items-center gap-3 my-3 text-primary">
           <MenuIconPicker icon={menu.icon} />
           <HeaderLink title={menu.title} url={menu.url} id={id} />
         </div>

apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx

@@ -70,7 +70,7 @@ const FunctionLink = memo(function FunctionLink({
         className={cn(
           'cursor-pointer transition text-sm hover:text-foreground gap-3 relative',
           isParent ? 'flex justify-between' : 'leading-3',
-          active ? 'text-brand' : 'text-foreground-lighter'
+          active ? 'text-primary' : 'text-foreground-lighter'
         )}
       >
         {icon && <Image width={16} height={16} alt={icon} src={`${BASE_PATH}${icon}`} />}

apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx

@@ -132,7 +132,7 @@ const HeaderLogo = memo(() => {
         height={navigationLogo?.height ?? 18}
         alt="Supabase wordmark"
       />
-      <span className="font-mono text-sm font-medium text-brand mb-px">DOCS</span>
+      <span className="font-mono text-sm font-medium text-primary mb-px">DOCS</span>
     </Link>
   )
 })

apps/docs/components/Navigation/SideBar.tsx

@@ -80,7 +80,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                   'py-1.5 px-5 rounded-sm text-sm transition',
                   `${
                     item.url === pathname
-                      ? 'bg-background text-brand'
+                      ? 'bg-background text-primary'
                       : 'text-foreground-light hover:text-foreground'
                   }`,
                 ].join(' ')}
@@ -105,7 +105,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                   size={14}
                   strokeWidth={2}
                 />
-                <span className="text-foreground text-sm group-hover:text-brand transition">
+                <span className="text-foreground text-sm group-hover:text-primary transition">
                   {group.label}
                 </span>
               </Accordion.Trigger>
@@ -119,7 +119,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                             'py-1.5 px-5 rounded-sm text-sm transition',
                             `${
                               section.url === pathname
-                                ? 'bg-background text-brand'
+                                ? 'bg-background text-primary'
                                 : 'text-foreground-light hover:text-foreground'
                             }`,
                           ].join(' ')}
@@ -144,7 +144,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                               size={14}
                               strokeWidth={2}
                             />
-                            <span className="text-foreground text-sm group-hover:text-brand transition">
+                            <span className="text-foreground text-sm group-hover:text-primary transition">
                               {section.name}
                             </span>
                           </Accordion.Trigger>
@@ -157,7 +157,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                                     'py-1.5 ml-4 px-5 rounded-sm text-sm transition',
                                     `${
                                       item.url === pathname
-                                        ? 'bg-background text-brand'
+                                        ? 'bg-background text-primary'
                                         : 'text-foreground-light hover:text-foreground'
                                     }`,
                                   ].join(' ')}

apps/docs/features/docs/Reference.header.tsx

@@ -40,7 +40,7 @@ function ClientLibHeader({ menuData, className }: ClientLibHeaderProps) {
             href={menuData.pkg.repo}
             target="_blank"
             rel="noreferrer noopener"
-            className="hover:text-brand focus-visible:text-brand transition-colors"
+            className="hover:text-primary focus-visible:text-primary transition-colors"
           >
             <span className="sr-only">View on GitHub</span>
             <Github size={18} />

apps/docs/features/docs/Reference.navigation.client.tsx

@@ -188,7 +188,7 @@ function getLinkStyles(isActive: boolean, className?: string) {
   return cn(
     'text-sm text-foreground-lighter',
     !isActive && 'hover:text-foreground',
-    isActive && 'text-brand',
+    isActive && 'text-primary',
     'transition-colors',
     className
   )

apps/docs/features/ui/AgentPluginsPanel.tsx

@@ -18,7 +18,7 @@ function PluginInstructions({ client }: { client: PluginClient }) {
             href="https://claude.com/plugins/supabase"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-brand hover:underline"
+            className="text-primary hover:underline"
           >
             official Anthropic marketplace
           </a>
@@ -53,7 +53,7 @@ function PluginInstructions({ client }: { client: PluginClient }) {
               href="https://developers.openai.com/codex/plugins#plugin-directory-in-the-codex-app"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-brand hover:underline"
+              className="text-primary hover:underline"
             >
               Codex desktop app plugin directory
             </a>
@@ -83,7 +83,7 @@ function PluginInstructions({ client }: { client: PluginClient }) {
             href="https://cursor.com/marketplace/supabase"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-brand hover:underline"
+            className="text-primary hover:underline"
           >
             Supabase
           </a>{' '}
@@ -118,7 +118,7 @@ function PluginInstructions({ client }: { client: PluginClient }) {
             href="https://geminicli.com/extensions/?name=supabase-communitysupabase-plugin"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-brand hover:underline"
+            className="text-primary hover:underline"
           >
             Gemini CLI extensions directory
           </a>
@@ -178,7 +178,7 @@ function PluginInstructions({ client }: { client: PluginClient }) {
             href="https://github.com/anthropics/claude-plugins-official"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-brand-link hover:underline"
+            className="text-primary hover:underline"
           >
             official Anthropic marketplace
           </a>
@@ -222,7 +222,7 @@ function PluginInstructions({ client }: { client: PluginClient }) {
             href="https://github.com/vercel-labs/open-plugin-spec"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-brand hover:underline"
+            className="text-primary hover:underline"
           >
             Open Plugin
           </a>{' '}
@@ -243,7 +243,7 @@ function PluginInstructions({ client }: { client: PluginClient }) {
               href="https://github.com/supabase-community/supabase-plugin"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-brand hover:underline"
+              className="text-primary hover:underline"
             >
               GitHub repository
             </a>
@@ -290,7 +290,7 @@ export function AgentPluginsPanel() {
               href={selectedClient.docsUrl}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-brand hover:underline inline-flex items-center"
+              className="text-primary hover:underline inline-flex items-center"
             >
               {selectedClient.docsLinkText ?? `View ${selectedClient.label} extensions docs`}
               <ExternalLink className="h-3 w-3 ml-1" />
@@ -302,7 +302,7 @@ export function AgentPluginsPanel() {
             href={selectedClient.repoUrl}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-brand hover:underline inline-flex items-center"
+            className="text-primary hover:underline inline-flex items-center"
           >
             Give feedback
             <ExternalLink className="h-3 w-3 ml-1" />

apps/docs/features/ui/AgentSetup.tsx

@@ -27,7 +27,7 @@ const markdownComponents = {
     return (
       <a
         href={href}
-        className="text-brand-link hover:underline"
+        className="text-primary hover:underline"
         {...(external ? { target: '_blank', rel: 'noreferrer noopener' } : {})}
       >
         {children}
@@ -56,7 +56,7 @@ function HarnessBody({ harness }: { harness: MonitoringAgentHarnessSetup }) {
       <p>
         <a
           href={harness.docsUrl}
-          className="text-brand-link hover:underline"
+          className="text-primary hover:underline"
           target="_blank"
           rel="noreferrer noopener"
         >

apps/kb/src/components/Logo.tsx

@@ -23,7 +23,7 @@ function Logo() {
         height={18}
         alt="Supabase logo"
       />
-      <span className="font-mono text-sm font-medium text-brand mb-px">KB</span>
+      <span className="font-mono text-sm font-medium text-primary mb-px">KB</span>
     </a>
   )
 }

apps/learn/components/mdx-components.tsx

@@ -44,7 +44,7 @@ const components = {
   a: ({ className, ...props }: React.HTMLAttributes<HTMLAnchorElement>) => (
     <a
       className={cn(
-        'text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-brand hover:decoration-2',
+        'text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-primary hover:decoration-2',
         className
       )}
       {...props}

apps/learn/components/tanstack-beta.tsx

@@ -19,7 +19,7 @@ export default function TanStackBeta() {
             href="https://tanstack.com/start/latest/docs/framework/react/quick-start"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-brand hover:decoration-2"
+            className="text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-primary hover:decoration-2"
           >
             TanStack Quickstart guide
           </a>

apps/studio/components/grid/components/footer/pagination/Pagination.tsx

@@ -345,7 +345,9 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
                   ? `This is an estimated value as your table has more than ${THRESHOLD_COUNT.toLocaleString()} rows.`
                   : `Count not automatically loaded as your table has more than ${THRESHOLD_COUNT.toLocaleString()} rows.`}{' '}
                 <br />
-                <span className="text-brand">Click to retrieve the exact count of the table.</span>
+                <span className="text-primary">
+                  Click to retrieve the exact count of the table.
+                </span>
               </TooltipContent>
             </Tooltip>
           )}

apps/studio/components/grid/components/formatter/ReferenceRecordPeek.tsx

@@ -91,7 +91,7 @@ export const ReferenceRecordPeek = ({ table, filters }: ReferenceRecordPeekProps
             {isPrimaryKey && (
               <Tooltip>
                 <TooltipTrigger>
-                  <Key size={14} strokeWidth={2} className="text-brand rotate-45" />
+                  <Key size={14} strokeWidth={2} className="text-primary rotate-45" />
                 </TooltipTrigger>
                 <TooltipContent side="bottom">Primary key</TooltipContent>
               </Tooltip>

apps/studio/components/grid/components/header/filter/FilterPopoverNew.tsx

@@ -227,7 +227,10 @@ export const FilterPopoverNew = ({
   const icon = isGenerating ? (
     <AiIconAnimation size={16} loading />
   ) : isRefetching ? (
-    <Loader2 className="animate-spin text-brand h-4 w-4 shrink-0" aria-label="Loading table data" />
+    <Loader2
+      className="animate-spin text-primary h-4 w-4 shrink-0"
+      aria-label="Loading table data"
+    />
   ) : null
 
   return (

apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/EndpointRow.tsx

@@ -95,7 +95,7 @@ export const EndpointRow = ({
       </span>
       <span className="shrink-0 pl-2">
         {showCopiedIcon ? (
-          <Check size={14} className="text-brand" />
+          <Check size={14} className="text-primary" />
         ) : (
           <Copy
             size={14}

apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx

@@ -159,8 +159,8 @@ export const CreateRuleSheet = ({ lint, open, onOpenChange }: CreateRuleSheetPro
                         <TooltipContent side="bottom" className="w-72">
                           Assign this rule to a specific project member before toggling this option
                           off. This will then configure the rule to{' '}
-                          <span className="text-brand">only be visible</span> to that member in the
-                          advisor reports.
+                          <span className="text-primary">only be visible</span> to that member in
+                          the advisor reports.
                         </TooltipContent>
                       )}
                     </Tooltip>

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx

@@ -176,7 +176,7 @@ export const FeaturePreviewModal = () => {
                   <SelectTrigger id="feature-preview-select">
                     <div className="flex items-center gap-x-2">
                       {(flags[selectedFeature.key] ?? false) ? (
-                        <Eye size={14} strokeWidth={2} className="text-brand" />
+                        <Eye size={14} strokeWidth={2} className="text-primary" />
                       ) : (
                         <EyeOff size={14} strokeWidth={1.5} className="text-foreground-light" />
                       )}
@@ -310,7 +310,7 @@ const FeaturePreviewItem = ({
     >
       <div className="flex items-center gap-x-3">
         {isEnabled ? (
-          <Eye size={14} strokeWidth={2} className="text-brand" />
+          <Eye size={14} strokeWidth={2} className="text-primary" />
         ) : (
           <EyeOff size={14} strokeWidth={1.5} className="text-foreground-light" />
         )}

apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx

@@ -189,7 +189,7 @@ export const ProviderForm = ({ config, provider, isActive }: ProviderFormProps)
         }
         meta={
           isActive ? (
-            <div className="flex items-center gap-1 rounded-full border border-brand-400 bg-brand-200 py-1 px-1 text-xs text-brand">
+            <div className="flex items-center gap-1 rounded-full border border-brand-400 bg-brand-200 py-1 px-1 text-xs text-primary">
               <span className="rounded-full bg-brand-default p-0.5 text-xs text-brand-200">
                 <Check strokeWidth={2} size={12} />
               </span>

apps/studio/components/interfaces/Auth/Overview/OverviewUsage.constants.ts

@@ -111,5 +111,5 @@ export const calculatePercentagePointChange = (
 }
 
 export const getChangeColor = (percentageChange: number): string => {
-  return percentageChange >= 0 ? 'text-brand' : 'text-destructive'
+  return percentageChange >= 0 ? 'text-primary' : 'text-destructive'
 }

apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/IntegrationCard.tsx

@@ -28,7 +28,7 @@ export const getIntegrationTypeDescription = (type: INTEGRATION_TYPES) => {
           add custom code to set the <code>authenticated</code> role to all your present and future
           users. You can read more in the{' '}
           <a
-            className="hover:decoration-brand underline hover:text-foreground transition"
+            className="hover:decoration-primary underline hover:text-foreground transition"
             href={`${DOCS_URL}/guides/auth`}
           >
             documentation
@@ -43,7 +43,7 @@ export const getIntegrationTypeDescription = (type: INTEGRATION_TYPES) => {
           Allow users to use Supabase with Auth0 project. Additional setup may be required. You can
           read more in the{' '}
           <a
-            className="hover:decoration-brand underline hover:text-foreground transition"
+            className="hover:decoration-primary underline hover:text-foreground transition"
             href={`${DOCS_URL}/guides/auth`}
           >
             documentation
@@ -57,7 +57,7 @@ export const getIntegrationTypeDescription = (type: INTEGRATION_TYPES) => {
           Allow users to use Supabase with an Amazon Cognito. Additional setup may be required. You
           can read more in the{' '}
           <a
-            className="hover:decoration-brand underline hover:text-foreground transition"
+            className="hover:decoration-primary underline hover:text-foreground transition"
             href={`${DOCS_URL}/guides/auth/third-party/aws-cognito`}
           >
             documentation
@@ -72,7 +72,7 @@ export const getIntegrationTypeDescription = (type: INTEGRATION_TYPES) => {
           Allow users to use Supabase with Clerk. Additional setup may be required. You can read
           more in the{' '}
           <a
-            className="hover:decoration-brand underline hover:text-foreground transition"
+            className="hover:decoration-primary underline hover:text-foreground transition"
             href={`${DOCS_URL}/guides/auth/third-party/clerk`}
           >
             documentation
@@ -87,7 +87,7 @@ export const getIntegrationTypeDescription = (type: INTEGRATION_TYPES) => {
           Allow users to use Supabase with WorkOS. Additional setup may be required. You can read
           more in the{' '}
           <a
-            className="hover:decoration-brand underline hover:text-foreground transition"
+            className="hover:decoration-primary underline hover:text-foreground transition"
             href={`${DOCS_URL}/guides/auth/third-party/workos`}
           >
             documentation

apps/studio/components/interfaces/Auth/Users/UserOverview.tsx

@@ -273,7 +273,7 @@ export const UserOverview = ({ user, onDeleteSuccess }: UserOverviewProps) => {
                   )}
                 </div>
                 {isActive ? (
-                  <div className="flex items-center gap-1 rounded-full border border-brand-400 bg-brand-200 py-1 px-1 text-xs text-brand">
+                  <div className="flex items-center gap-1 rounded-full border border-brand-400 bg-brand-200 py-1 px-1 text-xs text-primary">
                     <span className="rounded-full bg-brand-default p-0.5 text-xs text-brand-200">
                       <Check strokeWidth={2} size={12} />
                     </span>
@@ -555,7 +555,7 @@ export const RowAction = ({
 
       <ButtonTooltip
         variant={button?.variant ?? 'default'}
-        icon={success ? <Check className="text-brand" /> : button.icon}
+        icon={success ? <Check className="text-primary" /> : button.icon}
         loading={button.isLoading ?? false}
         onClick={button.onClick}
         disabled={disabled}

apps/studio/components/interfaces/Auth/Users/UsersFooter.tsx

@@ -98,7 +98,9 @@ export const UsersFooter = ({
                         This is an estimated value as your project has more than{' '}
                         {THRESHOLD_COUNT.toLocaleString()} users.
                         <br />
-                        <span className="text-brand">Click to retrieve the exact count.</span>{' '}
+                        <span className="text-primary">
+                          Click to retrieve the exact count.
+                        </span>{' '}
                       </>
                     ) : (
                       <>

apps/studio/components/interfaces/BranchManagement/BranchSelector.tsx

@@ -89,7 +89,7 @@ export const BranchSelector = ({
                       </span>
                     </div>
                     {selectedBranch?.id === branch.id && (
-                      <Check size={14} strokeWidth={1.5} className="text-brand" />
+                      <Check size={14} strokeWidth={1.5} className="text-primary" />
                     )}
                     {branch.git_branch && <span>Synced to a Git branch</span>}
                     {branch.review_requested_at && <span>Merge request opened</span>}

apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx

@@ -401,7 +401,7 @@ export const CreateBranchModal = () => {
                               isCheckingGHBranchValidity ? (
                                 <Loader2 size={14} className="animate-spin" />
                               ) : isGitBranchValid ? (
-                                <Check size={14} className="text-brand" strokeWidth={2} />
+                                <Check size={14} className="text-primary" strokeWidth={2} />
                               ) : null
                             ) : null}
                           </div>

apps/studio/components/interfaces/BranchManagement/EdgeFunctionsDiffPanel.tsx

@@ -35,7 +35,7 @@ interface FunctionDiffProps {
 const getStatusColor = (status: FileStatus): string => {
   switch (status) {
     case 'added':
-      return 'text-brand'
+      return 'text-primary'
     case 'removed':
       return 'text-destructive'
     case 'modified':

apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx

@@ -299,7 +299,7 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro
                               isChecking ? (
                                 <Loader2 size={14} className="animate-spin" />
                               ) : isGitBranchValid ? (
-                                <Check size={14} className="text-brand" strokeWidth={2} />
+                                <Check size={14} className="text-primary" strokeWidth={2} />
                               ) : null
                             ) : null}
                           </div>

apps/studio/components/interfaces/BranchManagement/WorkflowLogsCard.tsx

@@ -61,12 +61,12 @@ export const WorkflowLogsCard = ({
         <CircleDotDashed size={16} strokeWidth={1.5} className="text-warning" />
       </motion.div>
     ) : isSuccess ? (
-      <GitMerge size={16} strokeWidth={1.5} className="text-brand" />
+      <GitMerge size={16} strokeWidth={1.5} className="text-primary" />
     ) : null)
 
   return (
     <Card className="bg-background overflow-hidden h-64 flex flex-col">
-      <CardHeader className={isSuccess ? 'text-brand' : isFailed ? 'text-destructive' : ''}>
+      <CardHeader className={isSuccess ? 'text-primary' : isFailed ? 'text-destructive' : ''}>
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-4">
             {displayIcon}

apps/studio/components/interfaces/Branching/MergeRequest.tsx

@@ -195,7 +195,7 @@ export const MergeActions = ({
           loading={isSubmitting}
           disabled={isMergeDisabled}
           onClick={onSelectMerge}
-          icon={<GitMerge size={16} strokeWidth={1.5} className="text-brand" />}
+          icon={<GitMerge size={16} strokeWidth={1.5} className="text-primary" />}
         >
           Merge branch
         </ButtonTooltip>
@@ -204,7 +204,7 @@ export const MergeActions = ({
           variant="primary"
           loading={isSubmitting}
           onClick={onSelectMerge}
-          icon={<GitMerge size={16} strokeWidth={1.5} className="text-brand" />}
+          icon={<GitMerge size={16} strokeWidth={1.5} className="text-primary" />}
         >
           Merge branch
         </Button>

apps/studio/components/interfaces/ConfigDrift/ConfigurationDriftPage.tsx

@@ -302,7 +302,7 @@ export function ConfigurationDriftPage() {
       ) : driftRows.length === 0 ? (
         <Card className="flex min-h-44 items-center justify-center px-6 text-center">
           <div className="max-w-lg">
-            <CheckCircle2 className="mx-auto mb-3 h-6 w-6 text-brand" />
+            <CheckCircle2 className="mx-auto mb-3 h-6 w-6 text-primary" />
             <h2 className="text-sm font-medium">All compared settings match</h2>
             <p className="mt-1 text-sm text-foreground-light">
               The current environment matches all {summary.matchedFields.length} comparable settings

apps/studio/components/interfaces/ConnectSheet/CopyPromptAdmonition.tsx

@@ -140,7 +140,7 @@ export function CopyPromptButton({ stepsContainerRef, customPrompt }: CopyPrompt
   return (
     <>
       <ButtonTooltip
-        icon={showCopied ? <Check strokeWidth={2} className="text-brand" /> : <Copy />}
+        icon={showCopied ? <Check strokeWidth={2} className="text-primary" /> : <Copy />}
         onClick={() => {
           const textToCopy = customPrompt ?? buildConnectPrompt(stepsContainerRef.current)
           copyToClipboard(textToCopy, () => setShowCopied(true))

apps/studio/components/interfaces/ConnectSheet/content/steps/direct-connection/content.tsx

@@ -178,7 +178,7 @@ function DirectConnectionContent({ state, deploymentMode }: StepContentProps) {
         </div>
         {deploymentMode.isPlatform && temporaryDatabasePassword && (
           <div className="flex items-center gap-2 border-t px-4 py-3 text-sm text-foreground-light">
-            <Check size={16} className="text-brand shrink-0" />
+            <Check size={16} className="text-primary shrink-0" />
             <span>New password shown until refresh.</span>
           </div>
         )}

apps/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx

@@ -55,7 +55,7 @@ export const PITRNotice = () => {
           <p className="text-sm text-foreground-light">
             Database changes are logged every <span className="text-foreground">2 minutes</span>,
             with a total recovery period of up to{' '}
-            <span className="text-brand">{retentionPeriod} days</span>.
+            <span className="text-primary">{retentionPeriod} days</span>.
           </p>
         </div>
       </div>

apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/AdditionalMonthlySpend.tsx

@@ -27,7 +27,7 @@ export const AdditionalMonthlySpend = ({
         </div>
         <div className="flex justify-between border-t pt-2">
           <p>Total</p>
-          <p className="font-mono text-right text-brand">
+          <p className="font-mono text-right text-primary">
             ${additionalMonthlySpend.computePrice + additionalMonthlySpend.diskPrice}
           </p>
         </div>

apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx

@@ -259,7 +259,7 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
                                 >
                                   <Check
                                     className={cn(
-                                      'text-brand',
+                                      'text-primary',
                                       schema.name === field.value ? 'opacity-100' : 'opacity-0'
                                     )}
                                     strokeWidth={2}
@@ -370,7 +370,7 @@ CREATE INDEX ON "${selectedSchema}"."${selectedEntity}" USING ${selectedIndexTyp
                                 >
                                   <Check
                                     className={cn(
-                                      'text-brand',
+                                      'text-primary',
                                       entity.name === field.value ? 'opacity-100' : 'opacity-0'
                                     )}
                                     strokeWidth={2}

apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx

@@ -94,7 +94,7 @@ const DuckLakeModeSelector = ({
             <div className="flex items-start justify-between">
               <Icon size={18} strokeWidth={1.5} className="text-foreground-light" />
               {selected ? (
-                <Check size={16} className="text-brand" />
+                <Check size={16} className="text-primary" />
               ) : (
                 <span className="h-4 w-4 rounded-full border border-strong" />
               )}

apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationsComboBox.tsx

@@ -132,7 +132,7 @@ export const PublicationsComboBox = ({
                     >
                       <span>{pub.name}</span>
                       {selectedPublication === pub.name && (
-                        <Check className="text-brand" strokeWidth={2} size={13} />
+                        <Check className="text-primary" strokeWidth={2} size={13} />
                       )}
                     </CommandItem>
                   ))}

apps/studio/components/interfaces/Database/Schemas/SchemaTableNode.tsx

@@ -275,7 +275,7 @@ const TableNodeComponent = ({
                     'text-ellipsis overflow-hidden whitespace-nowrap min-w-0 max-w-[80%]',
                     schemaGraphContext.selectedEdge?.sourceHandle === column.id ||
                       schemaGraphContext.selectedEdge?.targetHandle === column.id
-                      ? 'text-brand'
+                      ? 'text-primary'
                       : undefined
                   )}
                   title={column.name}

apps/studio/components/interfaces/Database/Tables/TableList.tsx

@@ -498,7 +498,7 @@ export const TableList = ({
                             (table) => table.id === x.id
                           ) ? (
                             <div className="flex items-center gap-x-2">
-                              <Check size={16} strokeWidth={2} className="text-brand" />
+                              <Check size={16} strokeWidth={2} className="text-primary" />
                               <p className="text-foreground-light">Enabled</p>
                             </div>
                           ) : (

apps/studio/components/interfaces/Database/Triggers/EventTriggersList/EventTriggerList.tsx

@@ -133,7 +133,7 @@ export const EventTriggerList = ({
             <TableCell>
               <div className="flex items-center justify-center">
                 {trigger.enabled_mode !== 'DISABLED' ? (
-                  <Check strokeWidth={2} className="text-brand" />
+                  <Check strokeWidth={2} className="text-primary" />
                 ) : (
                   <X strokeWidth={2} />
                 )}

apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx

@@ -157,7 +157,7 @@ export const TriggerList = ({ editTrigger, duplicateTrigger, deleteTrigger }: Tr
           <TableCell>
             <div className="flex items-center justify-center">
               {x.enabled_mode !== 'DISABLED' ? (
-                <Check strokeWidth={2} className="text-brand" />
+                <Check strokeWidth={2} className="text-primary" />
               ) : (
                 <X strokeWidth={2} />
               )}

apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.components.tsx

@@ -27,7 +27,7 @@ export const ValueChange = ({ from, to }: { from: string; to: string }) => (
 )
 
 export const PriceDelta = ({ delta }: { delta: number }) => (
-  <span className={cn('text-xs', delta >= 0 ? 'text-brand' : 'text-destructive')}>
+  <span className={cn('text-xs', delta >= 0 ? 'text-primary' : 'text-destructive')}>
     {delta >= 0 ? `+${formatCurrency(delta)}` : `-${formatCurrency(Math.abs(delta))}`}{' '}
     <span className="text-foreground-lighter">per month</span>
   </span>

apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.RowCountIndicator.tsx

@@ -34,7 +34,7 @@ export function RowCountIndicator({
               -{formatRowCount(rowsRemovedByFilter)}
             </span>
             <ArrowRight size={10} className="text-foreground-muted" />
-            <span className="text-brand font-medium">
+            <span className="text-primary font-medium">
               {formatRowCount(actualRows)} {actualRows === 1 ? 'row' : 'rows'}
             </span>
           </div>

apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.utils.ts

@@ -120,7 +120,7 @@ export function getOperationIcon(operation: string): LucideIcon {
 export function getOperationColor(operation: string): string {
   const op = operation.toLowerCase()
   if (op.includes('seq scan')) return 'text-warning'
-  if (op.includes('index')) return 'text-brand'
+  if (op.includes('index')) return 'text-primary'
   if (op.includes('join')) return 'text-foreground-light'
   if (op.includes('sort') || op.includes('aggregate')) return 'text-foreground-light'
   return 'text-foreground-light'

apps/studio/components/interfaces/Explorer/ExplorerNotebookTab.tsx

@@ -402,7 +402,7 @@ export const ExplorerNotebookTab = () => {
             icon={
               <AiIconAnimation
                 size={16}
-                className="text-tertiary-foreground group-hover:text-brand"
+                className="text-tertiary-foreground group-hover:text-primary"
               />
             }
             loading={isCreating}
@@ -436,7 +436,7 @@ export const ExplorerNotebookTab = () => {
                     <Keyboard size={14} />
                     <span>Intellisense enabled</span>
                   </div>
-                  {isIntellisenseEnabled && <Check className="text-brand" size={16} />}
+                  {isIntellisenseEnabled && <Check className="text-primary" size={16} />}
                 </DropdownMenuItem>
                 <DropdownMenuItem className="gap-x-2" onClick={handleCopyAsMarkdown}>
                   <Copy size={14} />

apps/studio/components/interfaces/Explorer/ExplorerQueryTab.tsx

@@ -183,7 +183,7 @@ export const ExplorerQueryTab = () => {
                   <Keyboard size={14} />
                   <span>Intellisense enabled</span>
                 </div>
-                {isIntellisenseEnabled && <Check className="text-brand" size={16} />}
+                {isIntellisenseEnabled && <Check className="text-primary" size={16} />}
               </DropdownMenuItem>
               <DropdownMenuSeparator />
               <DropdownMenuItem

apps/studio/components/interfaces/Functions/CommandRender.tsx

@@ -43,7 +43,7 @@ const Command = ({ item }: any) => {
               }}
             >
               {isCopied ? (
-                <Check size={14} strokeWidth={3} className="text-brand" />
+                <Check size={14} strokeWidth={3} className="text-primary" />
               ) : (
                 <Copy size={14} />
               )}

apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx

@@ -322,7 +322,7 @@ export const EdgeFunctionDetails = () => {
                         description: 'Download the function to your local machine',
                         jsx: () => (
                           <>
-                            <span className="text-brand">supabase</span> functions download{' '}
+                            <span className="text-primary">supabase</span> functions download{' '}
                             {selectedFunction?.slug}
                           </>
                         ),

apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.utils.tsx

@@ -19,7 +19,7 @@ export const generateCLICommands = ({
       jsx: () => {
         return (
           <>
-            <span className="text-brand">supabase</span> functions deploy {selectedFunction?.slug}
+            <span className="text-primary">supabase</span> functions deploy {selectedFunction?.slug}
           </>
         )
       },
@@ -31,7 +31,7 @@ export const generateCLICommands = ({
       jsx: () => {
         return (
           <>
-            <span className="text-brand">supabase</span> functions delete {selectedFunction?.slug}
+            <span className="text-primary">supabase</span> functions delete {selectedFunction?.slug}
           </>
         )
       },
@@ -46,7 +46,7 @@ export const generateCLICommands = ({
       jsx: () => {
         return (
           <>
-            <span className="text-brand">supabase</span> secrets list
+            <span className="text-primary">supabase</span> secrets list
           </>
         )
       },
@@ -58,7 +58,7 @@ export const generateCLICommands = ({
       jsx: () => {
         return (
           <>
-            <span className="text-brand">supabase</span> secrets set NAME1=VALUE1 NAME2=VALUE2
+            <span className="text-primary">supabase</span> secrets set NAME1=VALUE1 NAME2=VALUE2
           </>
         )
       },
@@ -70,7 +70,7 @@ export const generateCLICommands = ({
       jsx: () => {
         return (
           <>
-            <span className="text-brand">supabase</span> secrets unset NAME1 NAME2
+            <span className="text-primary">supabase</span> secrets unset NAME1 NAME2
           </>
         )
       },
@@ -87,7 +87,7 @@ export const generateCLICommands = ({
       jsx: () => {
         return (
           <>
-            <span className="text-brand">curl</span> -L -X POST '{functionUrl}'{' '}
+            <span className="text-primary">curl</span> -L -X POST '{functionUrl}'{' '}
             {selectedFunction?.verify_jwt
               ? `-H
             'Authorization: Bearer [YOUR ANON KEY]' `

apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionRecentErrors.tsx

@@ -176,7 +176,7 @@ export const EdgeFunctionRecentErrors = ({
         <Check
           size={16}
           strokeWidth={1.5}
-          className="mt-0.5 shrink-0 text-brand"
+          className="mt-0.5 shrink-0 text-primary"
           aria-hidden="true"
         />
       ) : (

apps/studio/components/interfaces/Functions/EdgeFunctionRecentInvocations.tsx

@@ -90,7 +90,7 @@ export const EdgeFunctionRecentInvocations = ({
                     <div
                       className={cn(
                         'flex items-center justify-center border px-1.5 py-0.5 rounded-sm text-xs font-mono',
-                        is2xx && 'text-brand border-brand-default bg-brand-300',
+                        is2xx && 'text-primary border-brand-default bg-brand-300',
                         is4xx && 'text-warning border-warning bg-warning-300',
                         is5xx && 'text-destructive border-destructive bg-destructive-300',
                         !is2xx &&

apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx

@@ -87,7 +87,7 @@ export const EdgeFunctionsListItem = ({ function: item }: EdgeFunctionsListItemP
             }}
           >
             {isCopied ? (
-              <div className="text-brand">
+              <div className="text-primary">
                 <Check size={14} strokeWidth={3} />
               </div>
             ) : (

apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx

@@ -100,7 +100,7 @@ export const ProjectTableRow = ({
                   >
                     {projectRef}
                     {isCopied ? (
-                      <Check size={12} strokeWidth={1.25} className="text-brand" />
+                      <Check size={12} strokeWidth={1.25} className="text-primary" />
                     ) : (
                       <Copy
                         size={12}

apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.CleanupNotice.tsx

@@ -240,7 +240,7 @@ interface DeletionSuccessProps {
 }
 
 const DeletionSuccess = ({ totalRowsDeleted }: DeletionSuccessProps) => (
-  <div className="flex items-center gap-2 text-brand">
+  <div className="flex items-center gap-2 text-primary">
     <CheckCircle2 size={16} />
     <span className="text-sm">Successfully deleted {totalRowsDeleted.toLocaleString()} rows.</span>
   </div>
@@ -265,7 +265,7 @@ const DeletionError = ({ error, onRetry }: DeletionErrorProps) => (
 
 const ScheduleSuccess = () => (
   <div className="space-y-2">
-    <div className="flex items-center gap-2 text-brand">
+    <div className="flex items-center gap-2 text-primary">
       <CheckCircle2 size={16} />
       <span className="text-sm">Daily cleanup job scheduled successfully.</span>
     </div>

apps/studio/components/interfaces/Integrations/Landing/IntegrationCard.tsx

@@ -92,8 +92,8 @@ export const IntegrationCard = ({
             </div>
             {isInstalled && (
               <div className="flex items-center gap-x-1">
-                <BadgeCheck size={14} className="text-brand" />
-                <span className="text-brand text-xs">Installed</span>
+                <BadgeCheck size={14} className="text-primary" />
+                <span className="text-primary text-xs">Installed</span>
               </div>
             )}
           </div>

apps/studio/components/interfaces/Integrations/Queues/QueueCells.tsx

@@ -49,7 +49,7 @@ export const QueueRLSCell = ({ queue }: QueueCellProps) => {
 
   return (
     <div className="flex items-center">
-      {isRlsEnabled ? <Check size={14} className="text-brand" /> : <X size={14} />}
+      {isRlsEnabled ? <Check size={14} className="text-primary" /> : <X size={14} />}
     </div>
   )
 }

apps/studio/components/interfaces/Integrations/Wrappers/ColumnType.tsx

@@ -193,7 +193,7 @@ export const ColumnType = ({
                             </div>
                             <span className="absolute right-3 top-2">
                               {option.name === field.value ? (
-                                <Check className="text-brand" size={14} />
+                                <Check className="text-primary" size={14} />
                               ) : (
                                 ''
                               )}
@@ -244,7 +244,7 @@ export const ColumnType = ({
                                   )}
                                   {option.format === field.value && (
                                     <span className="absolute right-3 top-2">
-                                      <Check className="text-brand" size={14} />
+                                      <Check className="text-primary" size={14} />
                                     </span>
                                   )}
                                 </div>

apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx

@@ -372,7 +372,7 @@ export const CreateWrapperSheet = ({
                                     <WarningIcon />
                                     <span className="text-xs text-left">
                                       This feature requires the{' '}
-                                      <span className="text-brand">wrappers</span> extension to be
+                                      <span className="text-primary">wrappers</span> extension to be
                                       of minimum version of 0.5.0.
                                     </span>
                                   </div>

apps/studio/components/interfaces/JwtSecrets/algorithm-hover-card.tsx

@@ -53,7 +53,7 @@ export const AlgorithmHoverCard = ({ algorithm, legacy }: AlgorithmHoverCardProp
                   href={link.url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-xs text-brand hover:text-brand-600 flex items-center"
+                  className="text-xs text-primary hover:text-brand-600 flex items-center"
                 >
                   <ExternalLink className="w-3 h-3 mr-1 shrink-0" />
                   <span className="truncate">{link.label}</span>

apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx

@@ -283,7 +283,7 @@ export const JWTSecretKeysTable = () => {
               <h2>Previously used keys</h2>
               <p className="text-sm text-foreground-lighter">
                 These JWT signing keys are still used to{' '}
-                <em className="text-brand not-italic">verify tokens</em> that are yet to expire.
+                <em className="text-primary not-italic">verify tokens</em> that are yet to expire.
                 Revoke once all tokens have expired.
               </p>
             </div>

apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/rotate-key-dialog.tsx

@@ -60,7 +60,7 @@ export function RotateKeyDialog({
         <DialogTitle>Rotate JWT signing key</DialogTitle>
         <DialogDescription>
           Change the key used by Supabase Auth to create new JSON Web Tokens. Non-expired tokens
-          remain <span className="text-brand">valid and accepted</span>!
+          remain <span className="text-primary">valid and accepted</span>!
         </DialogDescription>
       </DialogHeader>
       <DialogSectionSeparator />
@@ -195,7 +195,7 @@ export function RotateKeyDialog({
                     text: (
                       <p>
                         Rotating the signing key only changes what key is used by Supabase Auth to
-                        issue <em className="text-brand not-italic">new tokens</em>
+                        issue <em className="text-primary not-italic">new tokens</em>
                         .<br />
                         <br />
                         To prevent users from being prematurely signed out, you have to manually
@@ -250,9 +250,11 @@ export function RotateKeyDialog({
                         <p>
                           Some of your Edge Functions are set up to require a JWT in the{' '}
                           <code>Authorization</code> header signed with the{' '}
-                          <em className="text-brand not-italic">legacy JWT secret</em>. Rotation
+                          <em className="text-primary not-italic">legacy JWT secret</em>. Rotation
                           causes{' '}
-                          <em className="text-brand not-italic">invocations by signed-in users</em>{' '}
+                          <em className="text-primary not-italic">
+                            invocations by signed-in users
+                          </em>{' '}
                           to fail with HTTP 401 Unauthorized, as the JWT no longer meets this
                           requirement.
                           <br />

apps/studio/components/interfaces/JwtSecrets/jwt-settings.tsx

@@ -436,14 +436,14 @@ export const JWTSettings = () => {
       >
         <ul className="space-y-4 text-sm">
           <li className="flex gap-2 bg border rounded-md p-4">
-            <Lightbulb size={24} className="shrink-0 text-brand" />
+            <Lightbulb size={24} className="shrink-0 text-primary" />
 
             <div className="flex flex-col gap-2">
               <p>Use new JWT Signing Keys and API Keys instead</p>
               <p className="text-foreground-light">
                 Consider using a combination of the JWT Signing Keys and API Keys features to
                 achieve the same effect.{' '}
-                <em className="text-brand not-italic">
+                <em className="text-primary not-italic">
                   Some or all of the warnings listed below might not apply when using these features
                 </em>
                 .

apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingMetric.tsx

@@ -190,7 +190,7 @@ export const BillingMetric = ({
                     <Link
                       href={metric.docLink.url}
                       target="_blank"
-                      className="transition text-brand hover:text-brand-600 underline"
+                      className="transition text-primary hover:text-brand-600 underline"
                     >
                       {metric.docLink.title}
                     </Link>

apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/ComputeMetric.tsx

@@ -77,7 +77,7 @@ export const ComputeMetric = ({
                 <Link
                   href={`${DOCS_URL}/guides/platform/manage-your-usage/branching`}
                   target="_blank"
-                  className="transition text-brand hover:text-brand-600 underline"
+                  className="transition text-primary hover:text-brand-600 underline"
                 >
                   Read more
                 </Link>
@@ -90,7 +90,7 @@ export const ComputeMetric = ({
                 <Link
                   href={`${DOCS_URL}/guides/platform/manage-your-usage/compute`}
                   target="_blank"
-                  className="transition text-brand hover:text-brand-600 underline"
+                  className="transition text-primary hover:text-brand-600 underline"
                 >
                   Read more
                 </Link>

apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx

@@ -31,13 +31,13 @@ export const EnterpriseCard = ({ plan, isCurrentPlan, variants }: EnterpriseCard
     >
       <div className="flex flex-col justify-center px-4">
         <div className="flex items-center space-x-2">
-          <p className={cn('text-brand text-sm uppercase')}>{plan.name}</p>
+          <p className={cn('text-primary text-sm uppercase')}>{plan.name}</p>
           {isCurrentPlan ? (
             <div className="text-xs bg-surface-300 text-foreground-light rounded-sm px-2 py-0.5">
               Current plan
             </div>
           ) : plan.nameBadge ? (
-            <div className="text-xs bg-surface-200 text-brand rounded-sm px-2 py-0.5">
+            <div className="text-xs bg-surface-200 text-primary rounded-sm px-2 py-0.5">
               {plan.nameBadge}
             </div>
           ) : null}
@@ -72,7 +72,7 @@ export const EnterpriseCard = ({ plan, isCurrentPlan, variants }: EnterpriseCard
               key={typeof feature === 'string' ? feature : feature[0]}
               className="flex items-center py-2 first:mt-0"
             >
-              <Check className="text-brand h-4 w-4" aria-hidden="true" strokeWidth={3} />
+              <Check className="text-primary h-4 w-4" aria-hidden="true" strokeWidth={3} />
               <span className="text-foreground mb-0 ml-3 ">
                 {typeof feature === 'string' ? feature : feature[0]}
               </span>

apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx

@@ -174,7 +174,7 @@ function ControlCard({
     >
       <div className="w-full">
         <div className="flex items-center space-x-2">
-          <p className="text-brand text-sm uppercase">{plan.name}</p>
+          <p className="text-primary text-sm uppercase">{plan.name}</p>
           {isCurrentPlan ? (
             <div className="text-xs bg-surface-300 text-foreground-light rounded-sm px-2 py-0.5">
               Current plan
@@ -207,7 +207,7 @@ function ControlCard({
             <li key={typeof feature === 'string' ? feature : feature[0]} className="flex py-2">
               <div className="w-[12px]">
                 <Check
-                  className="h-3 w-3 text-brand translate-y-[2.5px]"
+                  className="h-3 w-3 text-primary translate-y-[2.5px]"
                   aria-hidden="true"
                   strokeWidth={3}
                 />
@@ -331,7 +331,7 @@ function ParityCard({
             >
               <div className="flex items-center">
                 <div className="flex w-5">
-                  <Check className="h-4 w-4 text-brand" aria-hidden="true" strokeWidth={3} />
+                  <Check className="h-4 w-4 text-primary" aria-hidden="true" strokeWidth={3} />
                 </div>
                 <span className="text-foreground">
                   {typeof feature === 'string' ? feature : feature[0]}

apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx

@@ -79,7 +79,7 @@ const Subscription = () => {
               {isSuccess && (
                 <div className="space-y-6 w-full">
                   <div className="flex justify-between items-center">
-                    <p className="text-2xl text-brand leading-none">
+                    <p className="text-2xl text-primary leading-none">
                       {currentPlan?.name ?? 'Unknown'} Plan
                     </p>
 

apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx

@@ -436,7 +436,7 @@ export const SubscriptionPlanUpdateDialog = ({
                             {' '}
                             <Link
                               href={`/org/${selectedOrganization?.slug}/billing#breakdown`}
-                              className="text-sm text-brand hover:text-brand-600 transition"
+                              className="text-sm text-primary hover:text-brand-600 transition"
                               target="_blank"
                             >
                               + current spend
@@ -565,7 +565,7 @@ export const SubscriptionPlanUpdateDialog = ({
                           className="flex items-center gap-2"
                         >
                           <div className="w-4">
-                            <Check className="h-3 w-3 text-brand" strokeWidth={3} />
+                            <Check className="h-3 w-3 text-primary" strokeWidth={3} />
                           </div>
                           <div className="text-sm">
                             <p>{typeof feature === 'string' ? feature : feature[0]}</p>

apps/studio/components/interfaces/Organization/OAuthApps/AuthorizeRequesterDetails.tsx

@@ -54,7 +54,7 @@ export const ScopeSection = ({
   return (
     <div className="first:border-t border-b flex flex-row space-x-1 text-sm text-foreground-light py-2 px-1">
       <div className="pt-0.5">
-        <Check className="size-4 text-brand" strokeWidth={1.5} />
+        <Check className="size-4 text-primary" strokeWidth={1.5} />
       </div>
       <div>
         <span className="font-semibold text-foreground">{permissions}</span> {description}

apps/studio/components/interfaces/Organization/OAuthApps/OAuthSecrets/SecretRow.tsx

@@ -61,7 +61,7 @@ export const SecretRow = ({ secret, appId }: SecretRowProps) => {
           <div className="flex flex-col gap-1">
             <div className="flex items-center gap-2">
               <div className="flex items-center gap-2">
-                {isNew && <Check size={14} className="text-brand" strokeWidth={3} />}
+                {isNew && <Check size={14} className="text-primary" strokeWidth={3} />}
                 <p className="font-mono text-sm">
                   {isNew ? secret.client_secret : `${secret.client_secret_alias}${'*'.repeat(36)}`}
                 </p>

apps/studio/components/interfaces/Organization/OAuthApps/PublishableApps.tsx

@@ -165,7 +165,7 @@ export const PublishableApps = () => {
             <div className="w-full space-y-4">
               <div className="flex flex-col gap-0">
                 <div className="flex items-center gap-2">
-                  <Check size={14} className="text-brand" strokeWidth={3} />
+                  <Check size={14} className="text-primary" strokeWidth={3} />
                   <p className="text-sm">You've created your new OAuth application.</p>
                 </div>
                 <p className="text-sm text-foreground-light">

apps/studio/components/interfaces/Organization/PrivateApps/Apps/ViewAppSheet/ViewAppSheetInfo.tsx

@@ -44,7 +44,7 @@ function CopyableId({ id, label }: { id: string; label: string }) {
     >
       <span className="truncate">{id}</span>
       {isCopied ? (
-        <Check size={12} strokeWidth={1.25} className="text-brand shrink-0" />
+        <Check size={12} strokeWidth={1.25} className="text-primary shrink-0" />
       ) : (
         <Copy
           size={12}

apps/studio/components/interfaces/Organization/ProjectClaim/benefits.tsx

@@ -18,8 +18,8 @@ export const ProjectClaimBenefits = ({
     <ProjectClaimLayout
       title={
         <>
-          Claim a project <span className="text-brand">{projectClaim?.project?.name}</span> from{' '}
-          <span className="text-brand">{requester?.name}</span>
+          Claim a project <span className="text-primary">{projectClaim?.project?.name}</span> from{' '}
+          <span className="text-primary">{requester?.name}</span>
         </>
       }
     >
@@ -28,7 +28,7 @@ export const ProjectClaimBenefits = ({
           <h3 className="">Why manage your database project on Supabase?</h3>
           <ul className="space-y-3">
             <li className="flex space-x-2">
-              <CheckCircle2 className="text-brand w-5 h-5" />
+              <CheckCircle2 className="text-primary w-5 h-5" />
               <span>
                 <span className="text-foreground-light">Excellent Technical Support</span>
                 <span className="block text-foreground-lighter">
@@ -38,7 +38,7 @@ export const ProjectClaimBenefits = ({
               </span>
             </li>
             <li className="flex space-x-2">
-              <CheckCircle2 className="text-brand w-5 h-5" />
+              <CheckCircle2 className="text-primary w-5 h-5" />
               <span>
                 <span className="text-foreground-light">Unrestricted usage.</span>
                 <span className="block text-foreground-lighter">
@@ -48,7 +48,7 @@ export const ProjectClaimBenefits = ({
               </span>
             </li>
             <li className="flex space-x-2">
-              <CheckCircle2 className="text-brand w-5 h-5" />
+              <CheckCircle2 className="text-primary w-5 h-5" />
               <span>
                 <span className="text-foreground-light">Visibility into your data.</span>
                 <span className="block text-foreground-lighter">
@@ -58,7 +58,7 @@ export const ProjectClaimBenefits = ({
               </span>
             </li>
             <li className="flex space-x-2">
-              <CheckCircle2 className="text-brand w-5 h-5" />
+              <CheckCircle2 className="text-primary w-5 h-5" />
               <span>
                 <span className="text-foreground-light">Observability and easy debugging.</span>
                 <span className="block text-foreground-lighter">
@@ -68,7 +68,7 @@ export const ProjectClaimBenefits = ({
             </li>
             <li className="flex space-x-2">
               <div>
-                <CheckCircle2 className="text-brand w-5 h-5" />
+                <CheckCircle2 className="text-primary w-5 h-5" />
               </div>
               <span>
                 <span className="text-foreground-light">Easy Compute Scaling.</span>

apps/studio/components/interfaces/Organization/ProjectClaim/confirm.tsx

@@ -68,8 +68,8 @@ export const ProjectClaimConfirm = ({
     <ProjectClaimLayout
       title={
         <>
-          Claim a project <span className="text-brand">{projectClaim?.project?.name}</span> from{' '}
-          <span className="text-brand">{requester?.name}</span>
+          Claim a project <span className="text-primary">{projectClaim?.project?.name}</span> from{' '}
+          <span className="text-primary">{requester?.name}</span>
         </>
       }
     >
@@ -117,7 +117,7 @@ export const ProjectClaimConfirm = ({
           <ul className="space-y-3">
             <li className="flex space-x-2">
               <span>
-                <CheckCircle2 className="text-brand h-5 w-5" />
+                <CheckCircle2 className="text-primary h-5 w-5" />
               </span>
               <span>
                 The project will be transferred to your Supabase organization{' '}
@@ -133,7 +133,7 @@ export const ProjectClaimConfirm = ({
             </li>
             <li className="flex space-x-2">
               <span>
-                <CheckCircle2 className="text-brand h-5 w-5" />
+                <CheckCircle2 className="text-primary h-5 w-5" />
               </span>
               <span>
                 <span className="text-foreground">{requester?.name}</span> will receive API access
@@ -143,7 +143,7 @@ export const ProjectClaimConfirm = ({
             </li>
             <li className="flex space-x-2">
               <span>
-                <CheckCircle2 className="text-brand h-5 w-5" />
+                <CheckCircle2 className="text-primary h-5 w-5" />
               </span>
               <span>
                 You'll be responsible for maintaining the project, which may include additional

apps/studio/components/interfaces/Organization/TeamSettings/MemberRow.tsx

@@ -118,7 +118,7 @@ export const MemberRow = memo(function MemberRow({ member }: MemberRowProps) {
           {member.mfa_enabled ? (
             <>
               <span className="text-foreground-lighter">Enabled</span>
-              <Check className="text-brand" strokeWidth={2} size={16} />
+              <Check className="text-primary" strokeWidth={2} size={16} />
             </>
           ) : (
             <>

apps/studio/components/interfaces/Organization/Usage/Usage.tsx

@@ -233,7 +233,7 @@ export const Usage = () => {
                 <div className="flex items-center gap-2">
                   <p className={cn('text-sm transition', isLoadingSubscription && 'opacity-50')}>
                     Organization is on the{' '}
-                    <span className="font-medium text-brand">{subscription.plan.name} Plan</span>
+                    <span className="font-medium text-primary">{subscription.plan.name} Plan</span>
                   </p>
                   <span className="text-border-stronger">
                     <svg

apps/studio/components/interfaces/ProjectCreation/DisabledWarningDueToIncident.tsx

@@ -19,7 +19,7 @@ export const DisabledWarningDueToIncident = ({ title }: DisabledWarningDueToInci
           <div className="space-y-3">
             <p className="text-sm leading-normal">
               Our engineers are currently working on a fix. You can follow updates on{' '}
-              <a className="text-brand" href="https://status.supabase.com/">
+              <a className="text-primary" href="https://status.supabase.com/">
                 https://status.supabase.com/
               </a>
             </p>

apps/studio/components/interfaces/ProjectCreation/ProjectCreationFooter.tsx

@@ -107,7 +107,7 @@ export const ProjectCreationFooter = ({
         <div className="col-span-4">
           <div className="flex justify-between text-sm">
             <span>Additional costs</span>
-            <div className="text-brand flex gap-1 items-center font-mono font-medium">
+            <div className="text-primary flex gap-1 items-center font-mono font-medium">
               <span role="status">${displayedAdditionalMonthlySpend}/m</span>
               <InfoTooltip side="top" className="max-w-[450px] p-0">
                 <div className="p-4 text-sm text-foreground-light space-y-1">

apps/studio/components/interfaces/ProjectHome/PlanUsageCard.tsx

@@ -101,7 +101,7 @@ const ProgressRing = ({
         transform="rotate(-90 9 9)"
         className={cn(
           'transition-[stroke-dashoffset] duration-500',
-          isOver ? 'text-warning-600' : isApproaching ? 'text-warning' : 'text-brand'
+          isOver ? 'text-warning-600' : isApproaching ? 'text-warning' : 'text-primary'
         )}
       />
     </svg>

apps/studio/components/interfaces/ProjectHome/ProjectConnectionPopover.tsx

@@ -225,7 +225,7 @@ export const ProjectConnectionPopover = ({ projectRef }: ProjectConnectionPopove
                   <div
                     className={cn(
                       'absolute right-2 top-1/2 -translate-y-1/2 text-foreground-lighter opacity-0 transition-opacity group-hover:opacity-100',
-                      copiedItem === item.label && 'opacity-100 text-brand'
+                      copiedItem === item.label && 'opacity-100 text-primary'
                     )}
                   >
                     {copiedItem === item.label ? <Check size={14} /> : <Copy size={14} />}

apps/studio/components/interfaces/ProjectHome/ServiceStatus.tsx

@@ -30,7 +30,7 @@ const iconProps = {
 }
 const LoaderIcon = () => <Loader2 {...iconProps} className="animate-spin" />
 const AlertIcon = () => <AlertTriangle {...iconProps} />
-const CheckIcon = () => <CheckCircle2 {...iconProps} className="text-brand" />
+const CheckIcon = () => <CheckCircle2 {...iconProps} className="text-primary" />
 const DisabledIcon = () => <MinusCircle {...iconProps} className="text-foreground-lighter" />
 
 export const StatusIcon = ({

apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexImprovementText.tsx

@@ -21,7 +21,7 @@ export const IndexImprovementText = ({
   return (
     <p className={cn('text-sm text-foreground-light mb-3', className)} {...props}>
       Query's performance can be improved by{' '}
-      <span className="text-brand">{improvement.toFixed(2)}%</span> by creating this{' '}
+      <span className="text-primary">{improvement.toFixed(2)}%</span> by creating this{' '}
       {indexStatements.length > 1 ? 'indexes' : 'index'}:
     </p>
   )

apps/studio/components/interfaces/QueryPerformance/QueryDetail.tsx

@@ -104,7 +104,7 @@ export const QueryDetail = ({ selectedRow, onClickViewSuggestion, onClose }: Que
           {isLinterWarning && (
             <Alert
               variant="default"
-              className="mt-2 border-brand-400 bg-alternative [&>svg]:p-0.5 [&>svg]:bg-transparent [&>svg]:text-brand"
+              className="mt-2 border-brand-400 bg-alternative [&>svg]:p-0.5 [&>svg]:bg-transparent [&>svg]:text-primary"
             >
               <Lightbulb />
               <AlertTitle>Suggested optimization: Add an index</AlertTitle>

apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx

@@ -311,7 +311,7 @@ export const QueryIndexes = ({
                       {isLinterWarning ? (
                         <Alert
                           variant="default"
-                          className="border-brand-400 bg-alternative [&>svg]:p-0.5 [&>svg]:bg-transparent [&>svg]:text-brand my-3"
+                          className="border-brand-400 bg-alternative [&>svg]:p-0.5 [&>svg]:bg-transparent [&>svg]:text-primary my-3"
                         >
                           <Lightbulb />
                           <AlertTitle>
@@ -320,7 +320,7 @@ export const QueryIndexes = ({
                           </AlertTitle>
                           <AlertDescription>
                             You can improve this query's performance by{' '}
-                            <span className="text-brand">{totalImprovement.toFixed(2)}%</span> by
+                            <span className="text-primary">{totalImprovement.toFixed(2)}%</span> by
                             adding the following suggested{' '}
                             {index_statements.length > 1 ? 'indexes' : 'index'}
                           </AlertDescription>

apps/studio/components/interfaces/QueryPerformance/QueryPanel.tsx

@@ -71,13 +71,13 @@ export const QueryPanelScoreSection = ({
                 {after > before ? (
                   <ArrowUp size={14} className="text-warning" />
                 ) : (
-                  <ArrowDown size={14} className="text-brand" />
+                  <ArrowDown size={14} className="text-primary" />
                 )}
                 {before !== 0 && !isNaN(before) && isFinite(before) && (
                   <span
                     className={cn(
                       'font-mono tracking-tighter',
-                      after > before ? 'text-warning' : 'text-brand'
+                      after > before ? 'text-warning' : 'text-primary'
                     )}
                   >
                     {(((before - after) / before) * 100).toFixed(2)}%

apps/studio/components/interfaces/Realtime/Inspector/AnimatedCursors.tsx

@@ -45,7 +45,7 @@ export const AnimatedCursors = () => {
         <MousePointer2 size={20} />
       </motion.div>
       <motion.div
-        className="absolute text-brand"
+        className="absolute text-primary"
         animate={{ x: cursor2Position.x, y: cursor2Position.y }}
         transition={{
           duration: 1.2,

apps/studio/components/interfaces/Realtime/Inspector/ChooseChannelPopover.tsx

@@ -207,7 +207,7 @@ export const ChooseChannelPopover = ({
               <div className="flex items-center gap-x-2">
                 <p className="text-foreground text-xs">
                   Currently joined{' '}
-                  <span className={config.isChannelPrivate ? 'text-brand' : 'text-warning'}>
+                  <span className={config.isChannelPrivate ? 'text-primary' : 'text-warning'}>
                     {config.isChannelPrivate ? 'private' : 'public'}
                   </span>{' '}
                   channel:

apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx

@@ -143,7 +143,7 @@ const TableSelector = ({
                         >
                           <span>All tables</span>
                           {selectedSchemaName === '*' && (
-                            <Check className="text-brand" strokeWidth={2} />
+                            <Check className="text-primary" strokeWidth={2} />
                           )}
                         </CommandItem>
                       )}
@@ -162,7 +162,7 @@ const TableSelector = ({
                         >
                           <span>{table.name}</span>
                           {selectedSchemaName === table.name && (
-                            <Check className="text-brand" strokeWidth={2} />
+                            <Check className="text-primary" strokeWidth={2} />
                           )}
                         </CommandItem>
                       ))}