app/components/navigation/Top/Top.container.tsx

@@ -189,15 +189,11 @@ const TopContainer = memo<TopProps>(
       containerSize: "small" | "medium" | "large" | "xlarge",
       avatarSize: "small" | "medium" | "large" | "xlarge",
     ) => {
-      // Use ghost type when folderTop is true, filled (default) otherwise
-      const buttonType = folderTop ? "ghost" : "filled";
-      const palette = "default";
-
       return (
         <Button
           size={buttonSize}
-          buttonType={buttonType}
+          buttonType="filled"
-          palette={palette}
+          palette="inverse"
           onClick={handleCreateRuleClick}
           ariaLabel={t("ariaLabels.createNewRule")}
         >

tests/components/Top.test.tsx

@@ -100,4 +100,20 @@ describe('Top "Create rule" button', () => {
       window.localStorage.getItem(CORE_VALUE_DETAILS_STORAGE_KEY),
     ).toBeNull();
   });
+
+  it("uses filled invert for Create rule", () => {
+    for (const folderTop of [false, true]) {
+      const { unmount } = renderWithProviders(<Top folderTop={folderTop} />);
+      const [button] = screen.getAllByRole("button", {
+        name: /create a new rule/i,
+      });
+      expect(button.className).toContain(
+        "bg-[var(--color-surface-default-primary)]",
+      );
+      expect(button.className).toContain(
+        "text-[var(--color-content-default-primary)]",
+      );
+      unmount();
+    }
+  });
 });