diff --git a/apps/admin/src/layout/app-sidebar/app-sidebar-header.tsx b/apps/admin/src/layout/app-sidebar/app-sidebar-header.tsx
index da729cb7c78..966a6d8e2b0 100644
--- a/apps/admin/src/layout/app-sidebar/app-sidebar-header.tsx
+++ b/apps/admin/src/layout/app-sidebar/app-sidebar-header.tsx
@@ -60,7 +60,7 @@ function AppSidebarHeader({ ...props }: React.ComponentProps<typeof SidebarHeade
                 {showSearch && (
                     <Button
                         variant="outline"
-                        className="flex h-(--control-height) items-center justify-between rounded-full border-transparent pr-2 text-base text-muted-foreground shadow-xs hover:bg-background hover:text-gray-700 hover:shadow-sm dark:bg-gray-950 [&_svg]:stroke-2"
+                        className="flex h-(--control-height) items-center justify-between rounded-full border-transparent bg-white pr-2 text-base text-muted-foreground shadow-xs hover:bg-background hover:text-gray-700 hover:shadow-sm dark:border-gray-900/50 dark:bg-gray-900/30 dark:hover:border-gray-900/80 dark:hover:text-gray-400 [&_svg]:stroke-2"
                         onClick={openSearchModal}
                     >
                         <div className="flex items-center gap-2">
diff --git a/apps/admin/src/layout/app-sidebar/nav-content.tsx b/apps/admin/src/layout/app-sidebar/nav-content.tsx
index bc8d11c1c9e..f7b67d46914 100644
--- a/apps/admin/src/layout/app-sidebar/nav-content.tsx
+++ b/apps/admin/src/layout/app-sidebar/nav-content.tsx
@@ -30,7 +30,7 @@ function PostsNavItemContent({isActive, to}: {isActive: boolean; to: string}) {
             </NavMenuItem.Link>
             <a href="#/editor/post"
                 aria-label="Create new post"
-                className="absolute top-0 right-0 flex size-8 items-center justify-center rounded-full p-0 text-gray-700 ring-sidebar-ring outline-hidden transition-all hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2"
+                className="absolute top-0 right-0 flex size-8 items-center justify-center rounded-full p-0 text-gray-700 ring-sidebar-ring outline-hidden transition-all hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 dark:text-gray-800 dark:hover:text-white"
             >
                 <LucideIcon.Plus
                     size={20}
diff --git a/apps/admin/src/layout/app-sidebar/user-menu.tsx b/apps/admin/src/layout/app-sidebar/user-menu.tsx
index a9104849ab0..0148fa33004 100644
--- a/apps/admin/src/layout/app-sidebar/user-menu.tsx
+++ b/apps/admin/src/layout/app-sidebar/user-menu.tsx
@@ -111,7 +111,7 @@ function UserMenu(props: UserMenuProps) {
                     </div>
                     <div className="grid flex-1 text-left text-base leading-tight">
                         <span className="truncate font-semibold">{currentUser.data?.name}</span>
-                        <span className="-mt-px truncate text-sm text-muted-foreground">
+                        <span className="-mt-px truncate text-sm text-muted-foreground dark:text-gray-800">
                             {currentUser.data?.email}
                         </span>
                     </div>
@@ -121,7 +121,7 @@ function UserMenu(props: UserMenuProps) {
             <DropdownMenuContent
                 align="start"
                 sideOffset={10}
-                className={`w-[var(--radix-dropdown-menu-trigger-width)] ${showUpgradeBanner ? 'shadow-[0_18px_80px_0_rgba(0,0,0,0.07),0_7.52px_33.422px_0_rgba(0,0,0,0.05),0_4.021px_17.869px_0_rgba(0,0,0,0.04),0_2.254px_10.017px_0_rgba(0,0,0,0.04),0_1.197px_5.32px_0_rgba(0,0,0,0.03),0_0.498px_2.214px_0_rgba(0,0,0,0.02)]' : ''}`}
+                className={`w-[var(--radix-dropdown-menu-trigger-width)] dark:bg-surface-elevated-2 ${showUpgradeBanner ? 'shadow-[0_18px_80px_0_rgba(0,0,0,0.07),0_7.52px_33.422px_0_rgba(0,0,0,0.05),0_4.021px_17.869px_0_rgba(0,0,0,0.04),0_2.254px_10.017px_0_rgba(0,0,0,0.04),0_1.197px_5.32px_0_rgba(0,0,0,0.03),0_0.498px_2.214px_0_rgba(0,0,0,0.02)]' : ''}`}
             >
                 <UserMenuHeader
                     name={currentUser.data?.name}
diff --git a/apps/posts/src/views/Automations/components/automation-header.tsx b/apps/posts/src/views/Automations/components/automation-header.tsx
index 4743e31f34e..65d4c7afa12 100644
--- a/apps/posts/src/views/Automations/components/automation-header.tsx
+++ b/apps/posts/src/views/Automations/components/automation-header.tsx
@@ -40,7 +40,7 @@ const AutomationHeader: React.FC<AutomationHeaderProps> = ({
     const status = automation?.status;
 
     return (
-        <header className='relative z-10 flex h-14 shrink-0 items-center justify-between bg-background px-4 shadow-sm dark:border-b dark:border-gray-950'>
+        <header className='relative z-10 flex h-14 shrink-0 items-center justify-between bg-surface-elevated px-4 shadow-sm dark:border-b dark:border-gray-950'>
             <div className='flex min-w-0 items-center gap-3'>
                 <Button variant='ghost' asChild>
                     <Link aria-label='Back to automations' to='/automations'>
diff --git a/apps/posts/src/views/Automations/components/automations-help-cards.tsx b/apps/posts/src/views/Automations/components/automations-help-cards.tsx
index b4fc4e7527b..72c6b4c5889 100644
--- a/apps/posts/src/views/Automations/components/automations-help-cards.tsx
+++ b/apps/posts/src/views/Automations/components/automations-help-cards.tsx
@@ -13,7 +13,7 @@ interface HelpCardLayoutProps {
     children?: React.ReactNode;
 }
 
-const cardClass = 'block w-full rounded-xl border border-border bg-card p-6 text-left transition-all hover:shadow-xs hover:bg-accent/50 group/card';
+const cardClass = 'block w-full rounded-xl border border-border bg-card p-6 text-left transition-all hover:shadow-xs hover:bg-table-row-hover group/card';
 
 const HelpCardBody: React.FC<HelpCardLayoutProps> = ({title, description, children}) => (
     <div className='flex items-center gap-6'>
diff --git a/apps/posts/src/views/Automations/components/automations-list.tsx b/apps/posts/src/views/Automations/components/automations-list.tsx
index 4a6d0deb68a..050ff7669d8 100644
--- a/apps/posts/src/views/Automations/components/automations-list.tsx
+++ b/apps/posts/src/views/Automations/components/automations-list.tsx
@@ -52,10 +52,10 @@ const AutomationsList: React.FC<AutomationsListProps> = ({automations = [], isLo
                     return (
                         <TableRow
                             key={automation.slug}
-                            className="grid w-full cursor-pointer grid-cols-[1fr_auto] items-center gap-x-4 p-2 hover:bg-muted/50 lg:p-0"
+                            className="grid w-full cursor-pointer grid-cols-[1fr_auto] items-center gap-x-4 p-2 hover:bg-table-row-hover lg:p-0"
                             data-testid="automation-list-row"
                         >
-                            <TableCell className="static min-w-0 group-hover:bg-transparent lg:p-4">
+                            <TableCell className="static min-w-0 lg:p-4">
                                 <Link
                                     className="before:absolute before:inset-0 before:z-10 before:rounded-sm focus-visible:outline-hidden focus-visible:before:ring-2 focus-visible:before:ring-focus-ring"
                                     to={`/automations/${automation.id}`}
@@ -70,7 +70,7 @@ const AutomationsList: React.FC<AutomationsListProps> = ({automations = [], isLo
                                     </span>
                                 )}
                             </TableCell>
-                            <TableCell className="text-right group-hover:bg-transparent lg:w-32 lg:p-4">
+                            <TableCell className="text-right lg:w-32 lg:p-4">
                                 <AutomationStatusBadge status={automation.status} />
                             </TableCell>
                         </TableRow>
diff --git a/apps/posts/src/views/Automations/components/canvas/automation-canvas.tsx b/apps/posts/src/views/Automations/components/canvas/automation-canvas.tsx
index aa10a3f10e1..26d21f67e8a 100644
--- a/apps/posts/src/views/Automations/components/canvas/automation-canvas.tsx
+++ b/apps/posts/src/views/Automations/components/canvas/automation-canvas.tsx
@@ -512,9 +512,9 @@ const AutomationCanvas: React.FC<AutomationCanvasProps> = ({
     }
 
     return (
-        <div className='relative flex-1 overflow-hidden bg-surface-page' data-testid='automation-canvas'>
+        <div className='relative flex-1 overflow-hidden bg-background' data-testid='automation-canvas'>
             <ReactFlow
-                className='[--xy-background-color:var(--color-grey-50)] [--xy-background-pattern-color:var(--color-grey-500)] [--xy-edge-stroke:var(--color-grey-300)] dark:[--xy-background-color:var(--color-black)] dark:[--xy-background-pattern-color:var(--color-grey-900)] dark:[--xy-edge-stroke:var(--color-grey-800)]'
+                className='[--xy-background-color:var(--color-grey-50)] [--xy-background-pattern-color:var(--color-grey-500)] [--xy-edge-stroke:var(--color-grey-300)] dark:[--xy-background-color:var(--background)] dark:[--xy-background-pattern-color:var(--color-grey-900)] dark:[--xy-edge-stroke:var(--color-grey-800)]'
                 defaultViewport={initialViewport.current}
                 edges={graph.edges}
                 edgesFocusable={false}
diff --git a/apps/posts/src/views/Automations/components/canvas/step-sidebar.tsx b/apps/posts/src/views/Automations/components/canvas/step-sidebar.tsx
index c4dc5b75a09..d7df29a54ff 100644
--- a/apps/posts/src/views/Automations/components/canvas/step-sidebar.tsx
+++ b/apps/posts/src/views/Automations/components/canvas/step-sidebar.tsx
@@ -359,7 +359,7 @@ export const StepSidebar: React.FC<StepSidebarProps> = ({automation, stepId, onD
             aria-hidden={!detail}
             aria-label='Step details'
             className={cn(
-                'absolute inset-y-0 right-0 z-[1] flex w-[calc(100%-6rem)] max-w-none translate-x-full flex-col gap-6 overflow-y-auto bg-background p-6 shadow-sm transition-transform duration-200 ease-out sm:w-[36rem] dark:border-l dark:border-gray-950',
+                'absolute inset-y-0 right-0 z-[1] flex w-[calc(100%-6rem)] max-w-none translate-x-full flex-col gap-6 overflow-y-auto bg-surface-elevated p-6 shadow-sm transition-transform duration-200 ease-out sm:w-[36rem] dark:border-l dark:border-gray-950',
                 detail ? 'translate-x-0' : 'pointer-events-none'
             )}
             data-state={detail ? 'open' : 'closed'}
diff --git a/apps/posts/src/views/PostAnalytics/Newsletter/components/feedback.tsx b/apps/posts/src/views/PostAnalytics/Newsletter/components/feedback.tsx
index 689dfaa5f51..da584f0b31c 100644
--- a/apps/posts/src/views/PostAnalytics/Newsletter/components/feedback.tsx
+++ b/apps/posts/src/views/PostAnalytics/Newsletter/components/feedback.tsx
@@ -82,7 +82,7 @@ const Feedback: React.FC<FeedbackProps> = ({feedbackStats}) => {
                                             <Avatar className='size-7'>
                                                 {item.member?.avatar_image && <img className='absolute aspect-square size-full' src={item.member?.avatar_image} />}
                                                 <AvatarFallback className='text-white' style={{
-                                                    backgroundColor: `${stringToHslColor(formatMemberName(item.member), '75', '55')}`
+                                                    backgroundColor: `${stringToHslColor(formatMemberName(item.member), '45', '55')}`
                                                 }}>{getMemberInitials(item.member)}</AvatarFallback>
                                             </Avatar>
                                             {formatMemberName(item.member)}
diff --git a/apps/posts/src/views/PostAnalytics/components/post-analytics-header.tsx b/apps/posts/src/views/PostAnalytics/components/post-analytics-header.tsx
index a2f9cf50853..53896b0890a 100644
--- a/apps/posts/src/views/PostAnalytics/components/post-analytics-header.tsx
+++ b/apps/posts/src/views/PostAnalytics/components/post-analytics-header.tsx
@@ -87,7 +87,7 @@ const PostAnalyticsHeader:React.FC<PostAnalyticsHeaderProps> = ({
 
     return (
         <>
-            <header className='z-50 -mx-8 bg-white/70 backdrop-blur-md dark:bg-black'>
+            <header className='z-50 -mx-8 bg-white/70 backdrop-blur-md dark:bg-background'>
                 <div
                     className='relative flex min-h-[102px] w-full items-start justify-between gap-5 px-8 pt-8 pb-0'
                     data-header='header'
@@ -206,7 +206,7 @@ const PostAnalyticsHeader:React.FC<PostAnalyticsHeaderProps> = ({
                     </div>
                 </div>
             </header>
-            <Navbar className='sticky top-0 z-50 -mb-8 transform-gpu flex-col items-start gap-y-0 border-none bg-white/70 py-8 backdrop-blur-md lg:flex-row lg:items-center dark:bg-black'>
+            <Navbar className='sticky top-0 z-50 -mb-8 transform-gpu flex-col items-start gap-y-0 border-none bg-white/70 py-8 backdrop-blur-md lg:flex-row lg:items-center dark:bg-background'>
                 {!isPostLoading && (
                     <PageMenu className='min-h-[34px]' defaultValue={currentTab} responsive>
                         {availableTabs.includes('Overview') && (
diff --git a/apps/posts/src/views/Tags/components/tags-list.tsx b/apps/posts/src/views/Tags/components/tags-list.tsx
index ef62ee4c43d..948231268bf 100644
--- a/apps/posts/src/views/Tags/components/tags-list.tsx
+++ b/apps/posts/src/views/Tags/components/tags-list.tsx
@@ -87,7 +87,7 @@ function TagsList({
                             <TableRow
                                 key={key}
                                 {...props}
-                                className="group grid w-full grid-cols-[1fr_5rem] items-center gap-x-4 p-2 hover:bg-muted/50 md:grid-cols-[1fr_auto_5rem] lg:table-row lg:p-0 [&.group:hover_td]:bg-transparent"
+                                className="group grid w-full grid-cols-[1fr_5rem] items-center gap-x-4 p-2 md:grid-cols-[1fr_auto_5rem] lg:table-row lg:p-0"
                                 data-testid="tag-list-row"
                             >
                                 <TableCell className="static col-start-1 col-end-1 row-start-1 row-end-1 flex min-w-0 flex-col p-0 md:relative lg:table-cell lg:w-1/2 lg:p-4 xl:w-3/5">
diff --git a/apps/posts/src/views/comments/components/comments-list.tsx b/apps/posts/src/views/comments/components/comments-list.tsx
index cb871a4a6c7..f0979725733 100644
--- a/apps/posts/src/views/comments/components/comments-list.tsx
+++ b/apps/posts/src/views/comments/components/comments-list.tsx
@@ -136,7 +136,7 @@ function CommentsList({
                                 <div
                                     key={key}
                                     {...props}
-                                    className='grid w-full grid-cols-1 items-start justify-between gap-4 border-b p-3 hover:bg-muted/50 md:p-5 lg:grid-cols-[minmax(0,1fr)_144px]'
+                                    className='grid w-full grid-cols-1 items-start justify-between gap-4 border-b p-3 hover:bg-table-row-hover md:p-5 lg:grid-cols-[minmax(0,1fr)_144px]'
                                     data-testid="comment-list-row"
                                     onClick={() => {
                                     // Close sidebar when clicking on a comment in the main list
diff --git a/apps/posts/src/views/members/components/members-filters.tsx b/apps/posts/src/views/members/components/members-filters.tsx
index da2ef27ae1e..3bf73216401 100644
--- a/apps/posts/src/views/members/components/members-filters.tsx
+++ b/apps/posts/src/views/members/components/members-filters.tsx
@@ -118,7 +118,7 @@ const MembersFilters: React.FC<MembersFiltersProps> = ({
     const hasFilters = filters.length > 0;
     const showIconOnlyTrigger = iconOnly && !hasFilters;
     const addFilterButtonClassName = cn(
-        'border-input bg-white dark:bg-background',
+        'bg-white dark:bg-background',
         showIconOnlyTrigger && 'min-w-[34px] gap-0 px-2 text-[0px] lg:min-w-0 lg:gap-1.5 lg:px-3 lg:text-sm !px-3'
     );
 
diff --git a/apps/posts/src/views/members/components/members-help-cards.tsx b/apps/posts/src/views/members/components/members-help-cards.tsx
index c3b8e5c97fe..9789475a45e 100644
--- a/apps/posts/src/views/members/components/members-help-cards.tsx
+++ b/apps/posts/src/views/members/components/members-help-cards.tsx
@@ -11,7 +11,7 @@ interface MembersHelpCardProps {
 const MembersHelpCard: React.FC<MembersHelpCardProps> = ({children, description, title, url}) => {
     return (
         <a
-            className="group/card block rounded-xl border bg-card p-6 transition-all hover:bg-accent/50 hover:shadow-xs"
+            className="group/card block rounded-xl border bg-card p-6 transition-all hover:bg-table-row-hover hover:shadow-xs"
             href={url}
             rel="noopener noreferrer"
             target="_blank"
diff --git a/apps/posts/src/views/members/components/members-list-item.tsx b/apps/posts/src/views/members/components/members-list-item.tsx
index b30e53dc10a..c44699fce82 100644
--- a/apps/posts/src/views/members/components/members-list-item.tsx
+++ b/apps/posts/src/views/members/components/members-list-item.tsx
@@ -228,9 +228,6 @@ function MembersListItem({
     ...props
 }: MembersListItemProps &
     Omit<React.HTMLAttributes<HTMLTableRowElement>, 'onClick'>) {
-    const memberCellStyle = {
-        '--members-sticky-hover-bg': 'color-mix(in oklab, var(--muted) 50%, var(--background))'
-    } as CSSProperties;
     const handleRowClick = (event: React.MouseEvent<HTMLTableRowElement>) => {
         if (isModifiedClick(event)) {
             openMemberInNewTab(item.id, backPath);
@@ -258,7 +255,7 @@ function MembersListItem({
         >
             <TableCell className={cn(
                 'min-w-0 bg-background px-4 py-3 group-hover:bg-[var(--members-sticky-hover-bg)] max-sm:!w-full max-sm:!min-w-0 lg:sticky lg:left-0 lg:z-20'
-            )} style={memberCellStyle}>
+            )}>
                 <MembersListItemName backPath={backPath} item={item} onClick={onClick} />
                 {showPinnedEdge && (
                     <>
diff --git a/apps/shade/src/components/patterns/filters.tsx b/apps/shade/src/components/patterns/filters.tsx
index 977cd3bdf12..d8548a9e2b4 100644
--- a/apps/shade/src/components/patterns/filters.tsx
+++ b/apps/shade/src/components/patterns/filters.tsx
@@ -303,7 +303,7 @@ const filterAddButtonVariants = cva(
         variants: {
             variant: {
                 solid: 'border border-input hover:bg-secondary/60',
-                outline: 'border border-border hover:bg-accent'
+                outline: 'border border-control-border hover:bg-interactive-hover dark:hover:bg-interactive-hover'
             },
             size: {
                 lg: 'h-10 gap-1.5 px-4 text-sm [&_svg:not([class*=size-])]:size-4',
@@ -1395,7 +1395,7 @@ function SelectOptionsList<T = unknown>({
                     {(selectedOptions.length > 0 || unselectedOptions.length > 0) && <CommandSeparator />}
                     <div className="p-1.5">
                         <button
-                            className="flex w-full items-center justify-center rounded-xs px-2.5 py-1.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+                            className="flex w-full items-center justify-center rounded-xs px-2.5 py-1.5 text-muted-foreground hover:bg-interactive-hover hover:text-accent-foreground disabled:opacity-50"
                             disabled={isLoadingMore}
                             type="button"
                             onClick={onLoadMore}
diff --git a/apps/shade/src/components/ui/alert-dialog.tsx b/apps/shade/src/components/ui/alert-dialog.tsx
index 4378b1b2dad..ac158fef066 100644
--- a/apps/shade/src/components/ui/alert-dialog.tsx
+++ b/apps/shade/src/components/ui/alert-dialog.tsx
@@ -17,7 +17,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({className, ...props}, ref) => (
     <AlertDialogPrimitive.Overlay
         className={cn(
-            'fixed inset-0 z-50 bg-black/30 backdrop-blur-none transform-gpu data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:backdrop-blur-[3px]',
+            'fixed inset-0 z-50 bg-black/30 dark:bg-white/8 backdrop-blur-none transform-gpu data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:backdrop-blur-[3px]',
             className
         )}
         {...props}
diff --git a/apps/shade/src/components/ui/avatar.tsx b/apps/shade/src/components/ui/avatar.tsx
index 07f92a708f7..00baf438c35 100644
--- a/apps/shade/src/components/ui/avatar.tsx
+++ b/apps/shade/src/components/ui/avatar.tsx
@@ -75,7 +75,7 @@ const Avatar = React.forwardRef<
     const identity = {name: name || undefined, email: email || undefined};
     const hasIdentity = !!(name || email);
     const initials = hasIdentity ? getMemberInitials(identity) : null;
-    const bgColor = hasIdentity ? stringToHslColor(formatMemberName(identity), '75', '55') : undefined;
+    const bgColor = hasIdentity ? stringToHslColor(formatMemberName(identity), '45', '55') : undefined;
 
     return (
         <AvatarPrimitive.Root
diff --git a/apps/shade/src/components/ui/button.tsx b/apps/shade/src/components/ui/button.tsx
index 71a4ea52860..2da71bf5b86 100644
--- a/apps/shade/src/components/ui/button.tsx
+++ b/apps/shade/src/components/ui/button.tsx
@@ -12,11 +12,11 @@ const buttonVariants = cva(
             variant: {
                 default: 'bg-primary font-semibold text-primary-foreground hover:bg-primary/90',
                 destructive: 'bg-destructive font-medium text-destructive-foreground hover:bg-destructive/90',
-                outline: 'border border-input bg-background font-medium hover:bg-accent hover:text-accent-foreground',
+                outline: 'border border-control-border bg-transparent font-medium hover:bg-button-hover hover:text-accent-foreground',
                 secondary: 'bg-secondary font-medium text-secondary-foreground hover:bg-secondary/80',
                 ghost: 'font-medium hover:bg-accent hover:text-accent-foreground',
                 link: 'font-medium text-primary underline-offset-4 hover:underline',
-                dropdown: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground'
+                dropdown: 'border border-control-border bg-transparent hover:bg-button-hover hover:text-accent-foreground'
             },
             size: {
                 default: 'h-(--control-height) px-2.5 py-2',
diff --git a/apps/shade/src/components/ui/command.tsx b/apps/shade/src/components/ui/command.tsx
index 0a7acc01f32..f4d69e00b4e 100644
--- a/apps/shade/src/components/ui/command.tsx
+++ b/apps/shade/src/components/ui/command.tsx
@@ -11,7 +11,7 @@ function Command({className, ...props}: React.ComponentProps<typeof CommandPrimi
     return (
         <CommandPrimitive
             className={cn(
-                'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+                'flex h-full w-full flex-col overflow-hidden rounded-md bg-transparent text-popover-foreground',
                 className
             )}
             {...props}
@@ -90,7 +90,7 @@ function CommandItem({className, ...props}: React.ComponentProps<typeof CommandP
     return (
         <CommandPrimitive.Item
             className={cn(
-                'relative flex text-foreground cursor-default gap-2 select-none items-center rounded-xs px-2 py-1.5 outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+                'relative flex text-foreground cursor-default gap-2 select-none items-center rounded-xs px-2 py-1.5 outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-interactive-hover data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
                 '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.5px]',
                 className
             )}
diff --git a/apps/shade/src/components/ui/dropdown-menu.tsx b/apps/shade/src/components/ui/dropdown-menu.tsx
index abb96bf84b0..6e6035f1b5b 100644
--- a/apps/shade/src/components/ui/dropdown-menu.tsx
+++ b/apps/shade/src/components/ui/dropdown-menu.tsx
@@ -26,7 +26,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     <DropdownMenuPrimitive.SubTrigger
         ref={ref}
         className={cn(
-            'flex cursor-default gap-2 select-none hover:bg-accent items-center rounded-xs px-2 py-1.5 text-control outline-hidden focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+            'flex cursor-default gap-2 select-none hover:bg-interactive-hover items-center rounded-xs px-2 py-1.5 text-control outline-hidden focus:bg-interactive-hover data-[state=open]:bg-interactive-hover [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
             inset && 'pl-8',
             className
         )}
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
         <DropdownMenuPrimitive.SubContent
             ref={ref}
             className={cn(
-                'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border/60 bg-surface-elevated-2 dark:border-border/30 p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
                 className
             )}
             {...props}
@@ -66,7 +66,7 @@ const DropdownMenuContent = React.forwardRef<
             <DropdownMenuPrimitive.Content
                 ref={ref}
                 className={cn(
-                    'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+                    'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border/60 bg-surface-elevated-2 dark:border-border/30 p-1 text-popover-foreground shadow-md',
                     'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
                     className
                 )}
@@ -87,7 +87,7 @@ const DropdownMenuItem = React.forwardRef<
     <DropdownMenuPrimitive.Item
         ref={ref}
         className={cn(
-            'relative flex cursor-default select-none cursor-pointer items-center gap-2 rounded-xs px-2 py-1.5 text-control outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+            'relative flex cursor-default select-none cursor-pointer items-center gap-2 rounded-xs px-2 py-1.5 text-control outline-hidden transition-colors focus:bg-interactive-hover focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
             inset && 'pl-8',
             className
         )}
@@ -104,7 +104,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
         ref={ref}
         checked={checked}
         className={cn(
-            'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-control outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-control outline-hidden transition-colors focus:bg-interactive-hover focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
             className
         )}
         {...props}
@@ -127,7 +127,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     <DropdownMenuPrimitive.RadioItem
         ref={ref}
         className={cn(
-            'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-control outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            'relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-control outline-hidden transition-colors focus:bg-interactive-hover focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
             className
         )}
         {...props}
diff --git a/apps/shade/src/components/ui/input-surface.ts b/apps/shade/src/components/ui/input-surface.ts
index 762766cfc35..98ffb729181 100644
--- a/apps/shade/src/components/ui/input-surface.ts
+++ b/apps/shade/src/components/ui/input-surface.ts
@@ -33,7 +33,7 @@ import {cn} from '@/lib/utils';
  *   )} />
  */
 export const inputSurfaceClasses = {
-    base: 'rounded-md border border-border-default bg-surface-elevated transition-colors',
+    base: 'rounded-md border border-control-border bg-surface-elevated transition-colors dark:bg-transparent',
     focusSelf:
         'focus-visible:outline-hidden focus-visible:bg-transparent focus-visible:border-focus-ring focus-visible:ring-2 focus-visible:ring-focus-ring/25',
     focusWithin:
diff --git a/apps/shade/src/components/ui/pagemenu.tsx b/apps/shade/src/components/ui/pagemenu.tsx
index 2b193092aac..95662ff2eef 100644
--- a/apps/shade/src/components/ui/pagemenu.tsx
+++ b/apps/shade/src/components/ui/pagemenu.tsx
@@ -210,6 +210,7 @@ const PageMenuItem = React.forwardRef<HTMLButtonElement, PageMenuItemProps>(
                 className={cn(
                     'relative px-3 gap-1.5 text-control font-medium text-text-secondary hover:text-foreground focus-visible:ring-0',
                     'data-[state=active]:bg-muted-foreground/10 data-[state=active]:text-foreground',
+                    'dark:hover:bg-tab-hover dark:data-[state=active]:bg-tab-active dark:data-[state=active]:hover:bg-tab-active',
                     className
                 )}
                 data-state={isActive ? 'active' : undefined}
diff --git a/apps/shade/src/components/ui/popover.tsx b/apps/shade/src/components/ui/popover.tsx
index 5b49c85d7ec..5c3b6e77904 100644
--- a/apps/shade/src/components/ui/popover.tsx
+++ b/apps/shade/src/components/ui/popover.tsx
@@ -79,7 +79,7 @@ const PopoverContent = React.forwardRef<
                 ref={ref}
                 align={align}
                 className={cn(
-                    'z-50 rounded-md bg-popover p-5 text-popover-foreground shadow-md border outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin)',
+                    'z-50 rounded-md border border-border/60 bg-surface-elevated-2 p-5 text-popover-foreground shadow-md outline-hidden dark:border-border/30 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin)',
                     className
                 )}
                 sideOffset={sideOffset}
diff --git a/apps/shade/src/components/ui/select.tsx b/apps/shade/src/components/ui/select.tsx
index ae9ed50dc15..448f704631f 100644
--- a/apps/shade/src/components/ui/select.tsx
+++ b/apps/shade/src/components/ui/select.tsx
@@ -20,7 +20,7 @@ const SelectTrigger = React.forwardRef<
         ref={ref}
         className={cn(
             inputSurface('self'),
-            'flex h-(--control-height) w-full items-center justify-between whitespace-nowrap px-3 py-2 text-control hover:bg-accent data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1',
+            'flex h-(--control-height) w-full items-center justify-between whitespace-nowrap px-3 py-2 text-control hover:bg-button-hover dark:hover:bg-button-hover data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1',
             className
         )}
         {...props}
@@ -76,7 +76,7 @@ const SelectContent = React.forwardRef<
             <SelectPrimitive.Content
                 ref={ref}
                 className={cn(
-                    'relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)',
+                    'relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border/60 bg-surface-elevated-2 text-popover-foreground shadow-md dark:border-border/30 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)',
                     position === 'popper' && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
                     className
                 )}
@@ -119,7 +119,7 @@ const SelectItem = React.forwardRef<
     <SelectPrimitive.Item
         ref={ref}
         className={cn(
-            'relative flex w-full cursor-default select-none items-center rounded-xs py-1.5 pl-2 pr-8 text-control outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            'relative flex w-full cursor-default select-none items-center rounded-xs py-1.5 pl-2 pr-8 text-control outline-hidden focus:bg-interactive-hover focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
             className
         )}
         {...props}
diff --git a/apps/shade/src/components/ui/sidebar.tsx b/apps/shade/src/components/ui/sidebar.tsx
index c9f9a9a178b..93eaa16d8cc 100644
--- a/apps/shade/src/components/ui/sidebar.tsx
+++ b/apps/shade/src/components/ui/sidebar.tsx
@@ -530,11 +530,11 @@ const SidebarMenuItem = React.forwardRef<
 SidebarMenuItem.displayName = 'SidebarMenuItem';
 
 const sidebarMenuButtonVariants = cva(
-    'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md px-3 py-2 text-left text-control font-medium text-sidebar-foreground ring-sidebar-ring outline-hidden transition-all group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+    'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md px-3 py-2 text-left text-control font-medium text-sidebar-foreground ring-sidebar-ring outline-hidden transition-all group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[active=true]:hover:bg-sidebar-accent data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground dark:hover:bg-gray-900/30 dark:data-[active=true]:hover:bg-sidebar-accent [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
     {
         variants: {
             variant: {
-                default: 'hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground',
+                default: 'hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground dark:hover:bg-gray-900/30',
                 outline:
         'border border-sidebar-border bg-background hover:border-sidebar-accent hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
             },
@@ -648,7 +648,7 @@ const SidebarMenuBadge = React.forwardRef<
     <div
         ref={ref}
         className={cn(
-            'absolute right-2 flex items-center justify-center rounded-md px-1 text-sm font-medium tabular-nums text-text-secondary select-none pointer-events-none',
+            'absolute right-2 flex items-center justify-center rounded-md px-1 text-sm font-medium tabular-nums text-text-secondary select-none pointer-events-none dark:text-gray-800',
             'peer-hover/menu-button: peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
             'peer-data-[size=sm]/menu-button:top-1.5',
             'peer-data-[size=default]/menu-button:top-2',
diff --git a/apps/shade/src/components/ui/switch.tsx b/apps/shade/src/components/ui/switch.tsx
index 9a58caa9351..c38f1b284dd 100644
--- a/apps/shade/src/components/ui/switch.tsx
+++ b/apps/shade/src/components/ui/switch.tsx
@@ -5,7 +5,7 @@ import {cva, type VariantProps} from 'class-variance-authority';
 import {cn} from '@/lib/utils';
 
 const switchVariants = cva(
-    'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+    'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=checked]:bg-green-500',
     {
         variants: {
             size: {
@@ -20,7 +20,7 @@ const switchVariants = cva(
 );
 
 const switchThumbVariants = cva(
-    'pointer-events-none block rounded-full bg-background ring-0 [filter:drop-shadow(0_1px_2px_rgba(0,0,0,0.07))] transition-transform data-[state=unchecked]:translate-x-0',
+    'pointer-events-none block rounded-full bg-background ring-0 [filter:drop-shadow(0_1px_2px_rgba(0,0,0,0.07))] transition-transform data-[state=unchecked]:translate-x-0 dark:bg-white',
     {
         variants: {
             size: {
diff --git a/apps/shade/src/components/ui/table.tsx b/apps/shade/src/components/ui/table.tsx
index 9268432a9c1..b5938425950 100644
--- a/apps/shade/src/components/ui/table.tsx
+++ b/apps/shade/src/components/ui/table.tsx
@@ -120,7 +120,7 @@ const TableCell = React.forwardRef<
     <td
         ref={ref}
         className={cn(
-            'relative p-2.5 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] group-hover:bg-muted/50',
+            'relative p-2.5 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] group-hover:bg-table-row-hover',
             className
         )}
         {...props}
diff --git a/apps/shade/src/components/ui/tabs.tsx b/apps/shade/src/components/ui/tabs.tsx
index 6b3678204b0..ff55b3d83bd 100644
--- a/apps/shade/src/components/ui/tabs.tsx
+++ b/apps/shade/src/components/ui/tabs.tsx
@@ -89,12 +89,12 @@ const tabsTriggerVariants = cva(
             variant: {
                 segmented: 'h-7 rounded-md text-control font-medium data-[state=active]:shadow-md',
                 'segmented-sm': 'h-[26px] rounded-md text-sm font-medium data-[state=active]:shadow-md',
-                button: 'h-(--control-height) gap-1.5 rounded-md py-2 text-control font-normal hover:bg-muted data-[state=active]:bg-muted-foreground/10 data-[state=active]:font-medium',
-                'button-sm': 'h-6 gap-1.5 rounded-md p-2 text-sm font-normal text-text-secondary hover:bg-muted data-[state=active]:bg-muted-foreground/10 data-[state=active]:font-medium data-[state=active]:text-foreground',
+                button: 'h-(--control-height) gap-1.5 rounded-md py-2 text-control font-normal hover:bg-muted data-[state=active]:bg-muted-foreground/10 data-[state=active]:font-medium dark:hover:bg-tab-hover dark:data-[state=active]:bg-tab-active dark:data-[state=active]:hover:bg-tab-active',
+                'button-sm': 'h-6 gap-1.5 rounded-md p-2 text-sm font-normal text-text-secondary hover:bg-muted data-[state=active]:bg-muted-foreground/10 data-[state=active]:font-medium data-[state=active]:text-foreground dark:hover:bg-tab-hover dark:data-[state=active]:bg-tab-active dark:data-[state=active]:hover:bg-tab-active',
                 underline: 'relative h-9 px-0 text-control font-semibold text-text-secondary after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:bg-foreground after:opacity-0 after:content-[""] hover:after:opacity-10 data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:after:opacity-100!',
                 navbar: 'relative h-[52px] px-px text-control font-semibold text-muted-foreground after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:bg-foreground after:opacity-0 after:content-[""] hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:after:opacity-100!',
-                pill: 'relative h-[30px] rounded-md px-3 text-control font-medium text-text-secondary hover:text-foreground data-[state=active]:bg-muted-foreground/10 data-[state=active]:font-semibold data-[state=active]:text-foreground',
-                kpis: 'relative h-full! items-start! rounded-none border-border bg-transparent px-6 py-5 text-foreground ring-0 transition-all after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:bg-foreground after:opacity-0 after:content-[""] first:rounded-tl-md last:rounded-tr-md hover:bg-accent/50 data-[state=active]:bg-transparent data-[state=active]:after:opacity-100 [&:not(:last-child)]:border-r [&[data-state=active]_[data-type="value"]]:text-foreground'
+                pill: 'relative h-[30px] rounded-md px-3 text-control font-medium text-text-secondary hover:text-foreground data-[state=active]:bg-muted-foreground/10 data-[state=active]:font-semibold data-[state=active]:text-foreground dark:hover:bg-tab-hover dark:data-[state=active]:bg-tab-active dark:data-[state=active]:hover:bg-tab-active',
+                kpis: 'relative h-full! items-start! rounded-none border-border bg-transparent px-6 py-5 text-foreground ring-0 transition-all after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:bg-foreground after:opacity-0 after:content-[""] first:rounded-tl-md last:rounded-tr-md hover:bg-interactive-hover data-[state=active]:bg-transparent data-[state=active]:after:opacity-100 [&:not(:last-child)]:border-r [&[data-state=active]_[data-type="value"]]:text-foreground'
             }
         },
         defaultVariants: {
diff --git a/apps/shade/src/components/ui/toggle-group.tsx b/apps/shade/src/components/ui/toggle-group.tsx
index 1fb947a5755..b97b0818db6 100644
--- a/apps/shade/src/components/ui/toggle-group.tsx
+++ b/apps/shade/src/components/ui/toggle-group.tsx
@@ -19,7 +19,7 @@ const ToggleGroup = React.forwardRef<
 >(({className, variant, size, children, ...props}, ref) => (
     <ToggleGroupPrimitive.Root
         ref={ref}
-        className={cn('inline-flex items-center justify-center gap-0.5 bg-muted p-0.5 rounded-md', className)}
+        className={cn('inline-flex items-center justify-center gap-0.5 bg-muted p-0.5 rounded-(--input-group-radius) dark:bg-background dark:border dark:border-border', className)}
         {...props}
     >
         <ToggleGroupContext.Provider value={{variant, size}}>
diff --git a/apps/shade/src/components/ui/toggle.tsx b/apps/shade/src/components/ui/toggle.tsx
index 3c39c4b48ca..d0ec4cb4349 100644
--- a/apps/shade/src/components/ui/toggle.tsx
+++ b/apps/shade/src/components/ui/toggle.tsx
@@ -7,7 +7,7 @@ import {cva, type VariantProps} from 'class-variance-authority';
 import {cn} from '@/lib/utils';
 
 const toggleVariants = cva(
-    'inline-flex items-center justify-center gap-2 rounded-md text-control font-medium text-text-secondary transition-colors hover:bg-surface-elevated hover:text-foreground focus-visible:ring-1 focus-visible:ring-focus-ring focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.5px]',
+    'inline-flex items-center justify-center gap-2 rounded-md text-control font-medium text-text-secondary transition-colors hover:bg-surface-elevated hover:text-foreground focus-visible:ring-1 focus-visible:ring-focus-ring focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm dark:data-[state=on]:bg-tab-active [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.5px]',
     {
         variants: {
             variant: {
diff --git a/apps/shade/src/components/ui/tooltip.tsx b/apps/shade/src/components/ui/tooltip.tsx
index 31af5d4672e..262ce1165a2 100644
--- a/apps/shade/src/components/ui/tooltip.tsx
+++ b/apps/shade/src/components/ui/tooltip.tsx
@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
             <TooltipPrimitive.Content
                 ref={ref}
                 className={cn(
-                    'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                    'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-popover dark:text-popover-foreground',
                     className
                 )}
                 sideOffset={sideOffset}
diff --git a/apps/shade/src/components/ui/trend-badge.tsx b/apps/shade/src/components/ui/trend-badge.tsx
index 04944e483e4..69dc93f18a0 100644
--- a/apps/shade/src/components/ui/trend-badge.tsx
+++ b/apps/shade/src/components/ui/trend-badge.tsx
@@ -74,7 +74,7 @@ const TrendBadge = React.forwardRef<HTMLDivElement, TrendBadgeProps>(
             <TooltipProvider delayDuration={0}>
                 <Tooltip>
                     <TooltipTrigger asChild>{badge}</TooltipTrigger>
-                    <TooltipContent className='max-w-[240px] bg-background text-sm text-pretty text-foreground shadow-md'>
+                    <TooltipContent className='max-w-[240px] bg-background text-sm text-pretty text-foreground shadow-md dark:bg-popover'>
                         {tooltip}
                     </TooltipContent>
                 </Tooltip>
diff --git a/apps/shade/tailwind.theme.css b/apps/shade/tailwind.theme.css
index c458be1eac2..90251907024 100644
--- a/apps/shade/tailwind.theme.css
+++ b/apps/shade/tailwind.theme.css
@@ -167,6 +167,7 @@
     --color-surface-page: var(--surface-page);
     --color-surface-panel: var(--surface-panel);
     --color-surface-elevated: var(--surface-elevated);
+    --color-surface-elevated-2: var(--surface-elevated-2);
     --color-text-primary: var(--text-primary);
     --color-text-secondary: var(--text-secondary);
     --color-text-tertiary: var(--text-tertiary);
@@ -204,6 +205,12 @@
     --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-ring: var(--sidebar-ring);
+    --color-tab-hover: var(--tab-hover);
+    --color-tab-active: var(--tab-active);
+    --color-button-hover: var(--button-hover);
+    --color-interactive-hover: var(--interactive-hover);
+    --color-table-row-hover: var(--table-row-hover);
+    --color-control-border: var(--control-border);
 
     /* Typography */
     /* ---------------------------------------------------------------------- */
diff --git a/apps/shade/theme-variables.css b/apps/shade/theme-variables.css
index b2fb3634e93..7cfd255d299 100644
--- a/apps/shade/theme-variables.css
+++ b/apps/shade/theme-variables.css
@@ -24,6 +24,7 @@
     --surface-panel-foreground: var(--color-black);
     --surface-elevated: var(--color-white);
     --surface-elevated-foreground: var(--color-black);
+    --surface-elevated-2: var(--color-white);
     --surface-overlay: var(--color-white);
     --surface-overlay-foreground: var(--color-black);
     --surface-inverse: var(--color-black);
@@ -70,34 +71,77 @@
     --sidebar-accent-foreground: var(--color-black);
     --sidebar-border: var(--color-gray-100);
     --sidebar-ring: var(--color-gray-600);
+    --tab-hover: var(--color-gray-100);
+    --tab-active: color-mix(in oklab, var(--color-gray-700) 10%, transparent);
+    --button-hover: var(--color-gray-100);
+    --interactive-hover: var(--button-hover);
+    --control-border: var(--color-gray-200);
+    --table-row-hover: var(--color-gray-50);
+    --members-sticky-hover-bg: var(--table-row-hover);
     --mobile-navbar-height: 64px;
 }
 
 .dark {
-    --background: var(--color-black);
+    /* Less-saturated gray scale for dark mode (lightness + hue preserved, chroma halved again) */
+    --color-gray-50: oklch(98.54% 0.0003 286.4);
+    --color-gray-100: oklch(96.97% 0.0004 247.8);
+    --color-gray-200: oklch(94.74% 0.0011 236.5);
+    --color-gray-300: oklch(90.78% 0.0018 247.9);
+    --color-gray-400: oklch(86.68% 0.0024 242.9);
+    --color-gray-500: oklch(77.55% 0.0044 250.9);
+    --color-gray-600: oklch(70.33% 0.0056 248.1);
+    --color-gray-700: oklch(62.98% 0.0072 248.3);
+    --color-gray-800: oklch(52.97% 0.0058 250.6);
+    --color-gray-900: oklch(36.77% 0.0038 248.2);
+    --color-gray-950: oklch(25.95% 0.0016 258.4);
+    --color-grey-50: oklch(98.54% 0.0003 286.4);
+    --color-grey-100: oklch(96.97% 0.0004 247.8);
+    --color-grey-200: oklch(94.74% 0.0011 236.5);
+    --color-grey-300: oklch(90.78% 0.0018 247.9);
+    --color-grey-400: oklch(86.68% 0.0024 242.9);
+    --color-grey-500: oklch(77.55% 0.0044 250.9);
+    --color-grey-600: oklch(70.33% 0.0056 248.1);
+    --color-grey-700: oklch(62.98% 0.0072 248.3);
+    --color-grey-800: oklch(52.97% 0.0058 250.6);
+    --color-grey-900: oklch(36.77% 0.0038 248.2);
+    --color-grey-950: oklch(25.95% 0.0016 258.4);
+
+    /* One-off colors (not in the standard color scale) */
+    --color-sidebar-bg: oklch(0.204 0.004 258);
+
+    --tab-hover: color-mix(in oklab, var(--color-gray-900) 30%, transparent);
+    --tab-active: color-mix(in oklab, oklch(36.77% 0.006 248.2) 60%, transparent);
+    --button-hover: color-mix(in oklab, var(--color-gray-900) 30%, transparent);
+    --interactive-hover: var(--button-hover);
+    --control-border: color-mix(in oklab, var(--color-gray-900) 70%, transparent);
+    --table-row-hover: var(--color-sidebar-bg);
+    --members-sticky-hover-bg: var(--table-row-hover);
+
+    --background: oklch(0.178 0.003 271);
     --foreground: var(--color-gray-200);
     --muted: var(--color-gray-900);
     --muted-foreground: var(--color-gray-600);
     --accent: var(--color-gray-900);
     --accent-foreground: var(--color-gray-100);
-    --popover: var(--color-black);
+    --popover: var(--color-sidebar-bg);
     --popover-foreground: var(--color-gray-400);
-    --border: var(--color-gray-950);
+    --border: color-mix(in oklab, var(--color-gray-900) 50%, transparent);
     --input: var(--color-gray-900);
-    --card: var(--color-black);
+    --card: var(--background);
     --card-foreground: var(--color-gray-100);
-    --primary: var(--color-gray-100);
+    --primary: var(--color-gray-200);
     --primary-foreground: var(--color-black);
     --secondary: var(--color-gray-900);
     --secondary-foreground: var(--color-gray-100);
-    --destructive: var(--color-red-900);
+    --destructive: var(--color-red-500);
     --destructive-foreground: var(--color-gray-50);
     --ring: var(--color-gray-900);
     --surface-page: var(--color-black);
     --surface-panel: var(--color-black);
     --surface-panel-foreground: var(--color-gray-100);
-    --surface-elevated: var(--color-gray-950);
+    --surface-elevated: var(--color-sidebar-bg);
     --surface-elevated-foreground: var(--color-gray-100);
+    --surface-elevated-2: oklch(0.235 0.004 260);
     --surface-overlay: var(--color-black);
     --surface-overlay-foreground: var(--color-gray-400);
     --surface-inverse: var(--color-white);
@@ -124,12 +168,34 @@
     --chart-4: hsl(201 82% 90%);
     --chart-5: hsl(201 87% 94%);
     --chart-gray: hsl(210 13% 55%);
-    --sidebar-background: var(--color-gray-950);
-    --sidebar-foreground: var(--color-gray-100);
+    --sidebar-background: var(--color-sidebar-bg);
+    --sidebar-foreground: var(--color-gray-500);
     --sidebar-primary: var(--color-gray-900);
     --sidebar-primary-foreground: var(--color-white);
-    --sidebar-accent: var(--color-gray-900);
+    --sidebar-accent: var(--tab-active);
     --sidebar-accent-foreground: var(--color-gray-100);
-    --sidebar-border: var(--color-gray-900);
+    --sidebar-border: var(--border);
     --sidebar-ring: var(--color-gray-700);
 }
+
+/* Stronger shadows in dark mode — default Tailwind values use ~10% black alpha,
+   which is essentially invisible against a dark page. Direct utility overrides
+   so they win over Tailwind's compiled `box-shadow` regardless of token resolution. */
+.dark .shadow-xs {
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.35);
+}
+.dark .shadow-sm {
+    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+}
+.dark .shadow-md {
+    box-shadow: 0 6px 12px -2px rgb(0 0 0 / 0.45), 0 3px 6px -3px rgb(0 0 0 / 0.45);
+}
+.dark .shadow-lg {
+    box-shadow: 0 13px 22px -4px rgb(0 0 0 / 0.5), 0 6px 10px -5px rgb(0 0 0 / 0.5);
+}
+.dark .shadow-xl {
+    box-shadow: 0 22px 34px -6px rgb(0 0 0 / 0.55), 0 10px 16px -8px rgb(0 0 0 / 0.55);
+}
+.dark .shadow-2xl {
+    box-shadow: 0 30px 58px -12px rgb(0 0 0 / 0.65);
+}
diff --git a/apps/stats/src/views/Stats/Overview/components/latest-post.tsx b/apps/stats/src/views/Stats/Overview/components/latest-post.tsx
index 609cacf9ccf..1f5438fbde1 100644
--- a/apps/stats/src/views/Stats/Overview/components/latest-post.tsx
+++ b/apps/stats/src/views/Stats/Overview/components/latest-post.tsx
@@ -59,7 +59,7 @@ const LatestPost: React.FC<LatestPostProps> = ({
     const shouldGoToEditor = postDestination.startsWith('/editor/');
 
     return (
-        <Card className='group/card bg-gradient-to-tr from-muted/40 to-muted/0 to-50%' data-testid='latest-post'>
+        <Card className='group/card' data-testid='latest-post'>
             <CardHeader>
                 <CardTitle className='flex items-baseline justify-between leading-snug font-medium text-muted-foreground'>
                     Latest post performance
diff --git a/apps/stats/src/views/Stats/Overview/components/top-posts.tsx b/apps/stats/src/views/Stats/Overview/components/top-posts.tsx
index da5a91c9f79..2086aefa2ea 100644
--- a/apps/stats/src/views/Stats/Overview/components/top-posts.tsx
+++ b/apps/stats/src/views/Stats/Overview/components/top-posts.tsx
@@ -92,7 +92,7 @@ const TopPosts: React.FC<TopPostsProps> = ({
                         {
                             topPostsData?.stats?.map((post: TopPostViewsStats) => {
                                 return (
-                                    <div key={post.post_id} className='group relative flex w-full items-start justify-between gap-5 border-t border-border/50 py-4 before:absolute before:-inset-x-4 before:inset-y-0 before:z-0 before:hidden before:rounded-md before:bg-accent before:opacity-80 before:content-[""] first:border-border! hover:cursor-pointer hover:border-transparent hover:before:block md:items-center dark:before:bg-accent/50 [&+div]:hover:border-transparent'>
+                                    <div key={post.post_id} className='group relative flex w-full items-start justify-between gap-5 border-t border-border/50 py-4 before:absolute before:-inset-x-4 before:inset-y-0 before:z-0 before:hidden before:rounded-md before:bg-table-row-hover before:content-[""] first:border-border! hover:cursor-pointer hover:border-transparent hover:before:block md:items-center [&+div]:hover:border-transparent'>
                                         <div className='z-10 flex min-w-[160px] grow items-start gap-4 md:items-center lg:min-w-[320px]' onClick={() => {
                                             navigate(getPostDestination({
                                                 postId: post.post_id,
diff --git a/apps/stats/src/views/Stats/Overview/overview.tsx b/apps/stats/src/views/Stats/Overview/overview.tsx
index ea7b120016c..dd07f8c80bc 100644
--- a/apps/stats/src/views/Stats/Overview/overview.tsx
+++ b/apps/stats/src/views/Stats/Overview/overview.tsx
@@ -37,7 +37,7 @@ export const HelpCard: React.FC<HelpCardProps> = ({
 }) => {
     return (
         <a className={cn(
-            'block rounded-xl border bg-card p-6 transition-all hover:shadow-xs hover:bg-accent/50 group/card',
+            'block rounded-xl border bg-card p-6 transition-all hover:shadow-xs hover:bg-table-row-hover group/card',
             className
         )} href={url} rel='noreferrer' target='_blank'>
             <div className='flex items-center gap-6'>
diff --git a/apps/stats/src/views/Stats/components/feature-image-placeholder.tsx b/apps/stats/src/views/Stats/components/feature-image-placeholder.tsx
index 52fb2f62c4a..b41939e65f4 100644
--- a/apps/stats/src/views/Stats/components/feature-image-placeholder.tsx
+++ b/apps/stats/src/views/Stats/components/feature-image-placeholder.tsx
@@ -9,7 +9,7 @@ const FeatureImagePlaceholder:React.FC<FeatureImagePlaceholderProps> = ({
     className
 }) => {
     return (
-        <div className={cn('rounded-sm bg-muted dark:bg-[#36373a] flex flex-col items-center justify-center gap-1 p-6', className)}>
+        <div className={cn('rounded-sm bg-muted dark:bg-surface-elevated-2 flex flex-col items-center justify-center gap-1 p-6', className)}>
             <LucideIcon.Image className='text-muted-foreground/50' size={18} strokeWidth={1.5} />
         </div>
     );
diff --git a/apps/stats/src/views/Stats/layout/stats-header.tsx b/apps/stats/src/views/Stats/layout/stats-header.tsx
index 662267d4c6d..ac382161df1 100644
--- a/apps/stats/src/views/Stats/layout/stats-header.tsx
+++ b/apps/stats/src/views/Stats/layout/stats-header.tsx
@@ -24,7 +24,7 @@ const StatsHeader:React.FC<StatsHeaderProps> = ({
 
     return (
         <>
-            <header className='z-40 -mx-6 bg-white/70 backdrop-blur-md dark:bg-black'>
+            <header className='z-40 -mx-6 bg-white/70 backdrop-blur-md dark:bg-background'>
                 <div
                     className='relative flex w-full items-center justify-between gap-5 px-6 pt-5 pb-0'
                     data-header='header'
@@ -66,7 +66,7 @@ const StatsHeader:React.FC<StatsHeaderProps> = ({
                     )}
                 </div>
             </header>
-            <Navbar className='sticky top-0 z-40 transform-gpu flex-col items-start gap-y-0 border-none bg-white/70 pt-9 pb-6 backdrop-blur-md lg:flex-row lg:items-center dark:bg-black'>
+            <Navbar className='sticky top-0 z-40 transform-gpu flex-col items-start gap-y-0 border-none bg-white/70 pt-9 pb-6 backdrop-blur-md lg:flex-row lg:items-center dark:bg-background'>
                 <NavbarNavigation>
                     <PageMenu defaultValue={normalizedPath} responsive>
                         <PageMenuItem value="/analytics/" onClick={() => {
diff --git a/ghost/admin/app/components/gh-member-avatar.js b/ghost/admin/app/components/gh-member-avatar.js
index c0744e5788f..8bca6534d2a 100644
--- a/ghost/admin/app/components/gh-member-avatar.js
+++ b/ghost/admin/app/components/gh-member-avatar.js
@@ -26,7 +26,7 @@ export default class GhMemberAvatarComponent extends Component {
     }
 
     get backgroundStyle() {
-        let color = stringToHslColor(this.memberName, 75, 55);
+        let color = stringToHslColor(this.memberName, 45, 55);
         return htmlSafe(`background-color: ${color}`);
     }
 
diff --git a/ghost/admin/app/services/feature.js b/ghost/admin/app/services/feature.js
index 7a12091f5b4..1109fd1974b 100644
--- a/ghost/admin/app/services/feature.js
+++ b/ghost/admin/app/services/feature.js
@@ -143,14 +143,26 @@ export default class FeatureService extends Service {
             nightShift = enabled || this.nightShift;
         }
 
-        document.documentElement.classList.toggle('dark', nightShift ?? false);
+        const html = document.documentElement;
+        html.classList.add('theme-switching');
+        html.classList.toggle('dark', nightShift ?? false);
+
+        // Double-rAF: first frame paints the new theme, second frame releases
+        // the suppression so subsequent hover/focus transitions resume cleanly.
+        const releaseSuppression = () => {
+            requestAnimationFrame(() => requestAnimationFrame(() => {
+                html.classList.remove('theme-switching');
+            }));
+        };
 
         return this.lazyLoader.loadStyle('dark', 'assets/ghost-dark.css', true).then(() => {
             $('link[title=dark]').prop('disabled', !nightShift);
+            releaseSuppression();
         }).catch(() => {
             //TODO: Also disable toggle from settings and Labs hover
             $('link[title=dark]').prop('disabled', true);
-            document.documentElement.classList.remove('dark');
+            html.classList.remove('dark');
+            releaseSuppression();
         });
     }
 }
diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css
index ad0cde90f54..ae71788dcd1 100644
--- a/ghost/admin/app/styles/app-dark.css
+++ b/ghost/admin/app/styles/app-dark.css
@@ -76,8 +76,8 @@
     --whitegrey: #17191C;
     --blue: color-mod(#3eb0ef l(+5%) s(+5%));
 
-    --main-bg-color: #15171A;
-    --dark-main-bg-color: #15171A;
+    --main-bg-color: #101114;
+    --dark-main-bg-color: #101114;
     --hairline-color-1: #22252A;
     --hairline-color-2: #5E6874;
 
@@ -101,18 +101,23 @@ hr {
 input,
 .gh-input,
 .gh-select,
-.for-switch .input-toggle-component,
 .gh-select select {
+    color: var(--darkgrey);
+    border-color: var(--lightgrey-l2);
+    background: transparent;
+}
+
+.for-switch .input-toggle-component {
     color: var(--darkgrey);
     border-color: color-mod(var(--lightgrey));
     background: color-mod(var(--lightgrey));
 }
 
-input:focus,
 .gh-input:focus,
 .gh-select:focus,
 .gh-select select:focus {
-    border-color: color-mod(var(--lightgrey) l(+10%));
+    border-color: var(--midgrey);
+    box-shadow: 0 0 0 2px color-mix(in oklab, var(--midgrey) 25%, transparent);
 }
 
 .for-checkbox label:hover input:not(:checked) + .input-toggle-component,
@@ -144,7 +149,7 @@ input:focus,
 }
 
 .gh-main-white {
-    background: var(--white);
+    background: var(--dark-main-bg-color);
 }
 
 .settings-menu-header {
@@ -165,8 +170,8 @@ input:focus,
 }
 
 .ember-power-select-multiple-trigger {
-    border-color: color-mod(var(--lightgrey));
-    background: color-mod(var(--lightgrey));
+    border-color: var(--lightgrey-l2);
+    background: transparent;
 }
 
 .ember-power-select-multiple-remove-btn svg path {
@@ -192,7 +197,8 @@ input:focus,
 .ember-basic-dropdown--opened > .ember-power-select-trigger,
 .ember-power-select-trigger[aria-expanded="true"],
 .ember-power-select-search input {
-    border-color: color-mod(var(--lightgrey));
+    border-color: var(--midgrey);
+    box-shadow: 0 0 0 2px color-mix(in oklab, var(--midgrey) 25%, transparent);
 }
 
 .ember-power-calendar-weekdays,
@@ -454,7 +460,7 @@ input:focus,
 }
 
 .ember-power-select-multiple-option {
-    background: var(--white);
+    background: var(--lightgrey);
     color: var(--black);
 }
 
@@ -673,7 +679,7 @@ input:focus,
 
 .gh-editor-title,
 .gh-editor-excerpt {
-    background: var(--white);
+    background: var(--dark-main-bg-color);
 }
 
 .gh-editor-title::placeholder {
@@ -681,7 +687,7 @@ input:focus,
 }
 
 .gh-btn-editor {
-    background: var(--white);
+    background: var(--dark-main-bg-color);
 }
 
 .gh-btn-editor:hover,
@@ -691,7 +697,7 @@ input:focus,
 }
 
 .gh-editor-post-status {
-    background: var(--white);
+    background: var(--dark-main-bg-color);
 }
 
 .gh-editor-feature-image-add-button {
@@ -719,7 +725,7 @@ input:focus,
 }
 
 .gh-editor-wordcount-container {
-    background: var(--white);
+    background: var(--dark-main-bg-color);
 }
 
 /* Segment input */
@@ -745,6 +751,11 @@ input:focus,
 }
 
 /* Post preview modal */
+.fullscreen-modal-total-overlay,
+.gh-publish-setting-form {
+    background: var(--dark-main-bg-color);
+}
+
 .gh-post-preview-modal,
 .gh-post-preview-header,
 .fullscreen-modal-total-overlay .gh-pe-mobile-container {
@@ -1116,6 +1127,10 @@ kbd {
 
 /* Post rows */
 
+.gh-posts-list-item-group:before {
+    background-color: oklch(0.204 0.007 258); /* #15171A */
+}
+
 .gh-posts-list-item .gh-content-entry-meta,
 .gh-posts-list-item .gh-content-entry-status,
 .gh-posts-list-item .gh-content-email-stats {
@@ -1197,44 +1212,33 @@ New form styles */
 
 
 .gh-input-x {
-    background-color: var(--grey-900);
+    background-color: transparent;
+    border-color: var(--lightgrey-l2);
 }
 
 .gh-input-x::placeholder {
     color: var(--grey-700);
 }
 
-.gh-input-x:hover {
-    background-color: var(--grey-925);
-}
-
 .gh-input-x:focus,
 .gh-input-x:focus-visible {
-    background-color: var(--grey-950);
-    border: 1px solid var(--green);
-}
-
-.gh-input-x.ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded=true],
-.gh-input-x.ember-power-select-trigger:focus {
-    background-color: var(--grey-900);
+    background-color: transparent;
+    border: 1px solid var(--midgrey);
+    box-shadow: 0 0 0 2px color-mix(in oklab, var(--midgrey) 25%, transparent);
 }
 
 .settings-menu-container select,
 .settings-menu-pane .gh-date-time-picker-date,
 .settings-menu-pane .gh-date-time-picker-time {
-    background-color: var(--grey-900);
-}
-
-.settings-menu-container select:hover,
-.settings-menu-pane .gh-date-time-picker-date:hover,
-.settings-menu-pane .gh-date-time-picker-time:hover {
-    background-color: var(--grey-925);
+    background-color: transparent;
+    border-color: var(--lightgrey-l2);
 }
 
 .settings-menu-pane .gh-date-time-picker-date:focus,
 .settings-menu-pane .gh-date-time-picker-time:focus {
-    background-color: var(--grey-950);
-    border: 1px solid var(--green);
+    background-color: transparent;
+    border: 1px solid var(--midgrey);
+    box-shadow: 0 0 0 2px color-mix(in oklab, var(--midgrey) 25%, transparent);
 }
 
 .gh-tag-image-uploader .gh-image-uploader {
@@ -1255,11 +1259,11 @@ New form styles */
 }
 
 .gh-post-list-feature-image {
-    background-color: var(--whitegrey-l2);
+    background-color: oklch(0.27 0.009 260);
 }
 
 .gh-posts-list-item-group:hover .gh-post-list-feature-image {
-    background-color: #36373A;
+    background-color: oklch(0.27 0.009 260);
 }
 
 /* .gh-post-list-feature-image-placeholder,
diff --git a/ghost/admin/app/styles/app.css b/ghost/admin/app/styles/app.css
index bd5c7bcb5b7..4dab315b47f 100644
--- a/ghost/admin/app/styles/app.css
+++ b/ghost/admin/app/styles/app.css
@@ -68,6 +68,17 @@
 @import "layouts/migrate.css";
 
 
+/* Suppress transitions/animations during a light/dark mode swap so the
+   whole UI flips in a single paint instead of crossfading per element. */
+html.theme-switching,
+html.theme-switching *,
+html.theme-switching *::before,
+html.theme-switching *::after {
+    transition: none !important;
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+}
+
 /* ---------------------------✈️----------------------------- */
 /* I COMMITTED THIS COMMENT FROM A PLANE: http://bit.ly/2on5pmq
 /* --------------------------------------------------------- */
diff --git a/ghost/admin/app/styles/components/settings-menu.css b/ghost/admin/app/styles/components/settings-menu.css
index 7df872bf3c6..e5d865d70c4 100644
--- a/ghost/admin/app/styles/components/settings-menu.css
+++ b/ghost/admin/app/styles/components/settings-menu.css
@@ -533,8 +533,8 @@ li.nav-list-item .for-switch.xs label {
 .settings-menu-container .ember-basic-dropdown-trigger[aria-expanded=true] .gh-date-time-picker-date,
 .settings-menu-container .gh-date-time-picker-time:focus-within {
     background-color: var(--white);
-    border: 1px solid var(--green);
-    box-shadow: 0 0 0 2px rgba(48,207,67,.25);
+    border: 1px solid var(--midgrey);
+    box-shadow: 0 0 0 2px color-mix(in oklab, var(--midgrey) 25%, transparent);
     outline: none;
 }
 
@@ -551,10 +551,6 @@ li.nav-list-item .for-switch.xs label {
     padding-left: 32px;
 }
 
-.settings-menu-container .ember-power-select-trigger[aria-expanded=true] {
-    border-color: transparent;
-}
-
 .settings-menu-container .ember-power-select-multiple-trigger {
     padding: 5px 8px;
     border-radius: 8px !important;
diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css
index a4c73f121d1..d0359d5e266 100644
--- a/ghost/admin/app/styles/patterns/forms.css
+++ b/ghost/admin/app/styles/patterns/forms.css
@@ -231,15 +231,14 @@ select.error {
 .gh-input:focus,
 .gh-input.focus {
     outline: 0;
-    border-color: var(--green);
-    box-shadow: inset 0 0 0 1px var(--green);
-    background: var(--white);
+    border-color: var(--midgrey);
+    box-shadow: 0 0 0 2px color-mix(in oklab, var(--midgrey) 25%, transparent);
 }
 
 .error .gh-input:focus,
 .error .gh-input.focus {
     border-color: var(--red);
-    box-shadow: inset 0 0 0 1px var(--red);
+    box-shadow: 0 0 0 2px color-mix(in oklab, var(--red) 25%, transparent);
 }
 
 .gh-select:focus,
@@ -294,9 +293,8 @@ textarea {
 
 .gh-input-x:focus:not(.ember-basic-dropdown-trigger),
 .gh-input-x:focus-visible:not(.ember-basic-dropdown-trigger) {
-    background-color: var(--white);
-    border: 1px solid var(--green);
-    box-shadow: 0 0 0 2px rgba(48,207,67,.25);
+    border: 1px solid var(--midgrey);
+    box-shadow: 0 0 0 2px color-mix(in oklab, var(--midgrey) 25%, transparent);
     outline: none;
 }
 
@@ -308,9 +306,9 @@ textarea.gh-input-x {
 .gh-input-x.ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded="true"],
 .gh-input-x.ember-power-select-trigger:focus {
     border-radius: 8px;
-    background: var(--grey-150);
-    border: 1px solid transparent;
-    box-shadow: none;
+    background: transparent;
+    border: 1px solid var(--midgrey);
+    box-shadow: 0 0 0 2px color-mix(in oklab, var(--midgrey) 25%, transparent);
     outline: none;
 }