Swetrix · Blaumaus · Feb 7, 2026 · Feb 7, 2026 · Feb 7, 2026 · Feb 7, 2026
diff --git a/.cursorrules b/.cursorrules
@@ -39,8 +39,8 @@ The interface should feel reliable and professional without being cold or corpor
 
 **Colors**:
 - Primary/Accent: `indigo-600` (light), `indigo-500` (dark)
-- Backgrounds: `gray-50` (light), `slate-900` (dark)
-- Cards/Surfaces: `white` / `slate-800`
+- Backgrounds: `gray-50` (light), `slate-950` (dark)
+- Cards/Surfaces: `white` / `slate-900`
 - Borders: `ring-1 ring-black/5` (light), `ring-white/10` (dark)
 - Danger: `red-500/600`
 - Success: `emerald-500/600`
@@ -62,7 +62,5 @@ The interface should feel reliable and professional without being cold or corpor
 - Use Framer Motion for complex sequences
 
 **Components**:
-- Buttons: HeadlessUI-based, primary uses `bg-slate-900` (light) / `bg-slate-800` (dark)
-- Inputs: Ring borders with `focus:ring-indigo-500`
 - Cards: Subtle ring borders, optional backdrop blur
 - Modals/Dropdowns: HeadlessUI with fade/slide transitions
diff --git a/web/app/components/EventsRunningOutBanner.tsx b/web/app/components/EventsRunningOutBanner.tsx
@@ -67,7 +67,7 @@ const EventsRunningOutBanner = () => {
             <div className='order-3 mt-2 w-full shrink-0 sm:order-2 sm:mt-0 sm:w-auto'>
               <span
                 onClick={() => setShowMoreInfoModal(true)}
-                className='flex cursor-pointer items-center justify-center rounded-md bg-gray-50 px-4 py-2 text-sm font-medium text-yellow-600 hover:bg-yellow-50 dark:bg-slate-800 dark:text-gray-50 dark:hover:bg-slate-700'
+                className='flex cursor-pointer items-center justify-center rounded-md bg-gray-50 px-4 py-2 text-sm font-medium text-yellow-600 hover:bg-yellow-50 dark:bg-slate-900 dark:text-gray-50 dark:hover:bg-slate-700'
               >
                 {t('common.learnMore')}
               </span>

diff --git a/web/app/components/ExitIntentPopup.tsx b/web/app/components/ExitIntentPopup.tsx
@@ -101,7 +101,7 @@ export default function ExitIntentPopup({
       className='fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4 backdrop-blur-xs'
       onClick={handleBackdropClick}
     >
-      <div className='relative w-full max-w-2xl rounded-xl bg-white p-8 dark:bg-slate-800'>
+      <div className='relative w-full max-w-2xl rounded-xl bg-white p-8 dark:bg-slate-900'>
         <button
           onClick={handleClose}
           className='fixed top-4 right-4 text-gray-50 hover:text-gray-300 dark:text-gray-400 dark:hover:text-gray-300'

diff --git a/web/app/components/Footer/index.tsx b/web/app/components/Footer/index.tsx
@@ -406,7 +406,7 @@ const LanguageSelector = () => {
     <Dropdown
       position='up'
       items={whitelist}
-      buttonClassName='!py-2 !px-3 inline-flex items-center rounded-md bg-transparent hover:bg-white/10 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:mr-0 [&>svg]:ml-1 font-medium !text-sm text-white border border-white/20'
+      buttonClassName='!py-2 !px-3 inline-flex items-center rounded-md bg-transparent hover:bg-slate-800/50  [&>svg]:w-4 [&>svg]:h-4 [&>svg]:mr-0 [&>svg]:ml-1 font-medium !text-sm text-white border border-white/20'
       title={
         <span className='inline-flex items-center'>
           <Flag
@@ -486,7 +486,7 @@ const ThemeSelector = () => {
       onSelect={(item) => setTheme(item.key as 'light' | 'dark')}
       className='w-full sm:w-auto'
       headless
-      buttonClassName='!py-2 !px-3 inline-flex items-center rounded-md bg-transparent hover:bg-white/10 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:mr-0 [&>svg]:ml-1 font-medium !text-sm text-white border border-white/20'
+      buttonClassName='!py-2 !px-3 inline-flex items-center rounded-md bg-transparent hover:bg-slate-800/50 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:mr-0 [&>svg]:ml-1 font-medium !text-sm text-white border border-white/20'
     />
   )
 }
@@ -582,7 +582,7 @@ const Footer = ({ showDBIPMessage }: FooterProps) => {
 
   return (
     <footer
-      className='relative overflow-hidden border-t border-white/10 bg-slate-900 pt-16 pb-8'
+      className='relative overflow-hidden border-t border-white/10 bg-slate-900 pt-16 pb-8 dark:bg-slate-900/25'
       aria-labelledby='footer-heading'
     >
       <h2 id='footer-heading' className='sr-only'>

diff --git a/web/app/components/GithubAuth.tsx b/web/app/components/GithubAuth.tsx
@@ -7,48 +7,20 @@ import GithubDarkSVG from '~/ui/icons/GithubDark'
 import GithubLightSVG from '~/ui/icons/GithubLight'
 
 interface GoogleAuthProps {
-  isMiniButton?: boolean
   className?: string
   onClick: () => void
   disabled?: boolean
 }
 
-const GithubAuth = ({
-  isMiniButton,
-  className,
-  onClick,
-  disabled,
-}: GoogleAuthProps) => {
+const GithubAuth = ({ className, onClick, disabled }: GoogleAuthProps) => {
   const { t } = useTranslation()
   const { theme } = useTheme()
 
-  if (isMiniButton) {
-    return (
-      <Button
-        title={t('auth.common.continueWithGithub')}
-        className={cx(
-          className,
-          'bg-transparent ring-1 ring-slate-300 hover:bg-slate-100 dark:ring-slate-700 dark:hover:bg-slate-800/60',
-        )}
-        onClick={onClick}
-        secondary
-        regular
-        disabled={disabled}
-      >
-        {theme === 'dark' ? (
-          <GithubLightSVG className='size-5' />
-        ) : (
-          <GithubDarkSVG className='size-5' />
-        )}
-      </Button>
-    )
-  }
-
   return (
     <Button
       className={cx(
         className,
-        'flex items-center justify-center border-indigo-100 dark:border-slate-700/50 dark:bg-slate-800 dark:text-gray-50 dark:hover:bg-slate-700',
+        'flex items-center justify-center border-indigo-100 dark:border-slate-700/80 dark:bg-slate-900 dark:text-gray-50 dark:hover:bg-slate-800',
       )}
       onClick={onClick}
       secondary

diff --git a/web/app/components/GoogleAuth.tsx b/web/app/components/GoogleAuth.tsx
@@ -6,42 +6,18 @@ import GoogleGSVG from '~/ui/icons/GoogleG'
 
 interface GoogleAuthProps {
   onClick: () => void
-  isMiniButton?: boolean
   className?: string
   disabled?: boolean
 }
 
-const GoogleAuth = ({
-  onClick,
-  isMiniButton,
-  className,
-  disabled,
-}: GoogleAuthProps) => {
+const GoogleAuth = ({ onClick, className, disabled }: GoogleAuthProps) => {
   const { t } = useTranslation()
 
-  if (isMiniButton) {
-    return (
-      <Button
-        title={t('auth.common.continueWithGoogle')}
-        className={cx(
-          className,
-          'bg-transparent ring-1 ring-slate-300 hover:bg-slate-100 dark:ring-slate-700 dark:hover:bg-slate-800/60',
-        )}
-        onClick={onClick}
-        disabled={disabled}
-        secondary
-        regular
-      >
-        <GoogleGSVG className='size-5' />
-      </Button>
-    )
-  }
-
   return (
     <Button
       className={cx(
         className,
-        'flex items-center justify-center border-indigo-100 dark:border-slate-700/50 dark:bg-slate-800 dark:text-gray-50 dark:hover:bg-slate-700',
+        'flex items-center justify-center border-indigo-100 dark:border-slate-700/80 dark:bg-slate-900 dark:text-gray-50 dark:hover:bg-slate-800',
       )}
       onClick={onClick}
       secondary

diff --git a/web/app/components/Header/index.tsx b/web/app/components/Header/index.tsx
@@ -160,7 +160,7 @@ const SolutionsMenu = () => {
             leaveTo='opacity-0 translate-y-1'
           >
             <PopoverPanel className='absolute z-40 mt-4 flex w-screen max-w-max backdrop-blur-md'>
-              <div className='flex w-[650px] flex-col divide-y divide-gray-300/80 rounded-lg border border-gray-300/80 bg-gray-50/50 p-1.5 dark:divide-slate-700/60 dark:border-slate-700/60 dark:bg-slate-900/50'>
+              <div className='flex w-[650px] flex-col divide-y divide-gray-300/80 rounded-lg border border-gray-300/80 bg-gray-50/50 p-1.5 dark:divide-slate-700/60 dark:border-slate-700/60 dark:bg-slate-950/50'>
                 <div className='grid w-full grid-cols-2 gap-1 p-4'>
                   {_map(solutions, (item) => (
                     <div
@@ -281,7 +281,7 @@ const ProfileMenu = ({ logoutHandler }: { logoutHandler: () => void }) => {
             </MenuButton>
           </div>
           <MenuItems
-            className='absolute right-0 z-30 mt-2 w-60 min-w-max origin-top-right rounded-md bg-white p-1 ring-1 ring-slate-200 transition duration-200 ease-out focus:outline-hidden data-closed:scale-95 data-closed:opacity-0 dark:bg-slate-900 dark:ring-slate-800'
+            className='absolute right-0 z-30 mt-2 w-60 min-w-max origin-top-right rounded-md bg-white p-1 ring-1 ring-slate-200 transition duration-200 ease-out focus:outline-hidden data-closed:scale-95 data-closed:opacity-0 dark:bg-slate-950 dark:ring-slate-800'
             transition
             modal={false}
           >
@@ -305,7 +305,7 @@ const ProfileMenu = ({ logoutHandler }: { logoutHandler: () => void }) => {
             <Disclosure>
               {({ open }) => (
                 <>
-                  <DisclosureButton className='flex w-full justify-between rounded-md p-2 text-sm text-gray-700 transition-colors hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-slate-800/60'>
+                  <DisclosureButton className='flex w-full justify-between rounded-md p-2 text-sm text-gray-700 transition-colors hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-slate-900/60'>
                     <div className='flex'>
                       <Flag
                         className='mr-1.5 rounded-xs'
@@ -336,14 +336,14 @@ const ProfileMenu = ({ logoutHandler }: { logoutHandler: () => void }) => {
                     leaveTo='transform opacity-0 scale-95'
                   >
                     <DisclosurePanel
-                      className='absolute right-0 z-50 w-full min-w-max origin-top-right rounded-md bg-white p-1 ring-1 ring-slate-200 focus:outline-hidden dark:bg-slate-900 dark:ring-slate-700/80'
+                      className='absolute right-0 z-50 w-full min-w-max origin-top-right rounded-md bg-white p-1 ring-1 ring-slate-200 focus:outline-hidden dark:bg-slate-950 dark:ring-slate-700/80'
                       static
                     >
                       {_map(whitelist, (lng) => (
                         <DisclosureButton
                           key={lng}
                           as='span'
-                          className='block cursor-pointer rounded-md p-2 text-sm text-gray-700 transition-colors hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-slate-800'
+                          className='block cursor-pointer rounded-md p-2 text-sm text-gray-700 transition-colors hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-slate-900'
                           onClick={() => changeLanguage(lng)}
                         >
                           <div className='flex'>
@@ -371,7 +371,7 @@ const ProfileMenu = ({ logoutHandler }: { logoutHandler: () => void }) => {
                   href={CONTACT_US_URL}
                   target='_blank'
                   rel='noopener noreferrer'
-                  className='flex items-center gap-2 rounded-md p-2 text-sm text-gray-700 transition-colors hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-slate-800/60'
+                  className='flex items-center gap-2 rounded-md p-2 text-sm text-gray-700 transition-colors hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-slate-900/60'
                 >
                   <LifebuoyIcon className='h-4 w-4' />
                   {t('footer.support')}
@@ -381,7 +381,7 @@ const ProfileMenu = ({ logoutHandler }: { logoutHandler: () => void }) => {
               <MenuItem>
                 <Link
                   to={routes.contact}
-                  className='flex items-center gap-2 rounded-md p-2 text-sm text-gray-700 transition-colors hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-slate-800/60'
+                  className='flex items-center gap-2 rounded-md p-2 text-sm text-gray-700 transition-colors hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-slate-900/60'
                 >
                   <LifebuoyIcon className='h-4 w-4' />
                   {t('footer.support')}
@@ -392,7 +392,7 @@ const ProfileMenu = ({ logoutHandler }: { logoutHandler: () => void }) => {
               <MenuItem>
                 <Link
                   to={routes.billing}
-                  className='flex items-center gap-2 rounded-md p-2 text-sm text-gray-700 transition-colors hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-slate-800/60'
+                  className='flex items-center gap-2 rounded-md p-2 text-sm text-gray-700 transition-colors hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-slate-900/60'
                 >
                   <CreditCardIcon className='h-4 w-4' />
                   {t('common.billing')}
@@ -405,7 +405,7 @@ const ProfileMenu = ({ logoutHandler }: { logoutHandler: () => void }) => {
             <MenuItem>
               <Link
                 to={routes.user_settings}
-                className='flex items-center gap-2 rounded-md p-2 text-sm text-gray-700 transition-colors hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-slate-800/60'
+                className='flex items-center gap-2 rounded-md p-2 text-sm text-gray-700 transition-colors hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-slate-900/60'
               >
                 <GearIcon className='h-4 w-4' />
                 {t('common.accountSettings')}
@@ -415,7 +415,7 @@ const ProfileMenu = ({ logoutHandler }: { logoutHandler: () => void }) => {
               <MenuItem>
                 <Link
                   to={routes.organisations}
-                  className='flex items-center gap-2 rounded-md p-2 text-sm text-gray-700 transition-colors hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-slate-800/60'
+                  className='flex items-center gap-2 rounded-md p-2 text-sm text-gray-700 transition-colors hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-slate-900/60'
                 >
                   <BuildingsIcon className='h-4 w-4' />
                   {t('organisations.organisations')}
@@ -425,7 +425,7 @@ const ProfileMenu = ({ logoutHandler }: { logoutHandler: () => void }) => {
             <MenuItem>
               <button
                 type='button'
-                className='flex w-full items-center gap-2 rounded-md p-2 text-left text-sm text-gray-700 transition-colors hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-slate-800/60'
+                className='flex w-full items-center gap-2 rounded-md p-2 text-left text-sm text-gray-700 transition-colors hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-slate-900/60'
                 onClick={logoutHandler}
               >
                 <SignOutIcon className='h-4 w-4' />
@@ -487,7 +487,7 @@ const TrialBanner = ({ status, rawStatus }: TrialBannerProps) => {
   const { t } = useTranslation('common')
 
   return (
-    <div className='header-banner w-full bg-slate-900 text-gray-100 dark:bg-slate-800/70'>
+    <div className='header-banner w-full bg-slate-900 text-gray-100 dark:bg-slate-900/70'>
       <div className='mx-auto max-w-7xl px-4 py-2 text-center text-sm sm:px-6 lg:px-8'>
         <span className='font-medium'>{status}</span>
         <span className='mx-1.5'>—</span>
@@ -680,7 +680,7 @@ const AuthedHeader = ({
   return (
     <header
       className={cx('relative overflow-x-clip', {
-        'border-b border-gray-200 bg-gray-50 dark:border-slate-600/40 dark:bg-slate-900':
+        'border-b border-gray-200 bg-gray-50 dark:border-slate-600/40 dark:bg-slate-950':
           colourBackground,
       })}
     >
@@ -746,7 +746,7 @@ const NotAuthedHeader = ({
   return (
     <header
       className={cx('relative overflow-x-clip', {
-        'border-b border-gray-200 bg-gray-50 dark:border-slate-600/40 dark:bg-slate-900':
+        'border-b border-gray-200 bg-gray-50 dark:border-slate-600/40 dark:bg-slate-950':
           colourBackground,
       })}
     >
@@ -872,7 +872,7 @@ const Header = ({ refPage, transparent }: HeaderProps) => {
         onClose={setMobileMenuOpen}
       >
         <div className='fixed inset-0 z-10' />
-        <DialogPanel className='fixed inset-y-0 top-0 right-0 z-30 w-full overflow-y-auto border-gray-300/80 bg-gray-100/80 p-4 backdrop-blur-2xl sm:max-w-sm sm:border dark:border-slate-900/80 dark:bg-slate-800/80'>
+        <DialogPanel className='fixed inset-y-0 top-0 right-0 z-30 w-full overflow-y-auto border-gray-300/80 bg-gray-100/80 p-4 backdrop-blur-2xl sm:max-w-sm sm:border dark:border-slate-900/80 dark:bg-slate-900/80'>
           <div className='flex items-center justify-between'>
             <SwetrixLogo />
             <div className='flex items-center justify-center space-x-3'>

diff --git a/web/app/components/OIDCAuth.tsx b/web/app/components/OIDCAuth.tsx
@@ -17,7 +17,7 @@ const OIDCAuth = ({ onClick, className, disabled }: OIDCAuthProps) => {
     <Button
       className={cx(
         className,
-        'flex w-full items-center justify-center border-indigo-100 dark:border-slate-700/50 dark:bg-slate-800 dark:text-gray-50 dark:hover:bg-slate-700',
+        'flex items-center justify-center border-indigo-100 dark:border-slate-700/80 dark:bg-slate-900 dark:text-gray-50 dark:hover:bg-slate-800',
       )}
       onClick={onClick}
       secondary

diff --git a/web/app/components/ToolsNav.tsx b/web/app/components/ToolsNav.tsx
@@ -59,7 +59,7 @@ export function ToolsNav({ className }: ToolsNavProps) {
   return (
     <nav
       className={cn(
-        'overflow-hidden rounded-xl bg-white ring-1 ring-gray-200 dark:bg-slate-800 dark:ring-slate-700',
+        'overflow-hidden rounded-xl bg-white ring-1 ring-gray-200 dark:bg-slate-900 dark:ring-slate-700',
         className,
       )}
     >
@@ -119,7 +119,7 @@ export function ToolsNavMobile({ className }: ToolsNavProps) {
   return (
     <div
       className={cn(
-        'overflow-hidden rounded-xl bg-white ring-1 ring-gray-200 dark:bg-slate-800 dark:ring-slate-700',
+        'overflow-hidden rounded-xl bg-white ring-1 ring-gray-200 dark:bg-slate-900 dark:ring-slate-700',
         className,
       )}
     >

diff --git a/web/app/components/marketing/ComparisonTable.tsx b/web/app/components/marketing/ComparisonTable.tsx
@@ -99,7 +99,7 @@ export const ComparisonTable = ({ className }: ComparisonTableProps) => {
           <div className='inline-block min-w-full py-2 align-middle md:px-6 lg:px-8'>
             <div className='overflow-hidden ring-1 ring-black/5 md:rounded-lg'>
               <table className='w-full min-w-full divide-y divide-slate-500'>
-                <thead className='bg-gray-100 dark:bg-slate-800'>
+                <thead className='bg-gray-100 dark:bg-slate-900'>
                   <tr>
                     <th className='sr-only'>{t('main.metric')}</th>
                     {_map(SWETRIX_AND_COMPETITORS_LIST, (item, key) => (
@@ -113,7 +113,7 @@ export const ComparisonTable = ({ className }: ComparisonTableProps) => {
                     ))}
                   </tr>
                 </thead>
-                <tbody className='divide-y divide-slate-300 bg-gray-50 dark:divide-slate-700 dark:bg-slate-800'>
+                <tbody className='divide-y divide-slate-300 bg-gray-50 dark:divide-slate-700 dark:bg-slate-900'>
                   {_map(COMPETITOR_FEATURE_TABLE.Swetrix, (_, key) => (
                     <tr key={key}>
                       <td className='w-1/6 px-3 py-4 text-sm text-slate-700 sm:pl-6 dark:text-gray-50'>

diff --git a/web/app/components/marketing/DitchGoogle.tsx b/web/app/components/marketing/DitchGoogle.tsx
@@ -11,7 +11,7 @@ export const DitchGoogle = () => {
     <div className='relative mx-auto max-w-7xl px-2 pt-10 pb-20 lg:px-8'>
       <div className='relative mx-auto max-w-7xl overflow-hidden rounded-4xl p-1 text-center sm:p-2 lg:p-3'>
         <div aria-hidden className='pointer-events-none absolute inset-0'>
-          <div className='absolute inset-0 rounded-4xl bg-linear-115 from-red-500/50 to-orange-300/30 sm:bg-linear-145 dark:from-red-500/40 dark:to-orange-300/20' />
+          <div className='absolute inset-0 rounded-4xl bg-linear-115 from-red-500/50 to-orange-300/30 sm:bg-linear-145 dark:from-red-500/40 dark:to-slate-800/50' />
         </div>
         <div className='rounded-xl p-8 backdrop-blur-xl sm:p-12 lg:p-16'>
           <div className='mx-auto max-w-4xl'>