update saas onboarding (#6619)

<img width="1002" height="487" alt="Screenshot 2026-06-11 at 6 20 10 PM"
src="https://github.com/user-attachments/assets/5ee3cfc2-6c4f-4b35-9586-ef45fa216c6a"
/>

frontend/editor/src/core/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css

@@ -34,8 +34,8 @@
 }
 
 .standaloneIcon {
-  width: 96px;
-  height: 96px;
+  width: 80px;
+  height: 80px;
   object-fit: contain;
   animation: heroLogoScale 0.25s ease forwards;
 }
@@ -124,8 +124,6 @@
   align-items: flex-start;
   justify-content: center;
   animation: heroLogoEnter 0.25s ease forwards;
-  position: relative;
-  top: 1rem;
 }
 
 .iconWrapper {
@@ -175,8 +173,8 @@
 }
 
 .downloadIcon {
-  width: 96px;
-  height: 96px;
+  width: 80px;
+  height: 80px;
   object-fit: contain;
   animation: heroLogoScale 0.25s ease forwards;
 }
@@ -205,6 +203,7 @@
 }
 
 .bodyCopy {
+  text-align: center;
   opacity: 0;
   transform: translateX(24px);
   animation: bodySlideIn 0.25s ease forwards;

frontend/editor/src/core/components/onboarding/slides/DesktopInstallSlide.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { SlideConfig } from "@app/types/types";
-import { UNIFIED_CIRCLE_CONFIG } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
+import { UNIFIED_LIGHT_BACKGROUND } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
 import {
   DesktopInstallTitle,
   type OSOption,
@@ -47,9 +47,6 @@ export default function DesktopInstallSlide({
     ),
     body: <DesktopInstallBody />,
     downloadUrl: osUrl,
-    background: {
-      gradientStops: ["#2563EB", "#0EA5E9"],
-      circles: UNIFIED_CIRCLE_CONFIG,
-    },
+    background: UNIFIED_LIGHT_BACKGROUND,
   };
 }

frontend/editor/src/core/components/onboarding/slides/unifiedBackgroundConfig.ts

@@ -1,4 +1,7 @@
-import { AnimatedCircleConfig } from "@app/types/types";
+import {
+  AnimatedCircleConfig,
+  AnimatedSlideBackgroundProps,
+} from "@app/types/types";
 
 /**
  * Unified circle background configuration used across all onboarding slides.
@@ -27,3 +30,36 @@ export const UNIFIED_CIRCLE_CONFIG: AnimatedCircleConfig[] = [
     offsetY: 18,
   },
 ];
+
+/**
+ * Build a light slide background in a slide-specific accent colour: a white
+ * hero fading into a pale horizon tint, with the unified sphere geometry
+ * glowing in the accent on each sphere's inner edge.
+ */
+export function createLightSlideBackground(
+  accentRgb: [number, number, number],
+  horizon: string,
+): AnimatedSlideBackgroundProps {
+  const [r, g, b] = accentRgb;
+  const sphereColors = [
+    `linear-gradient(45deg, rgba(${r}, ${g}, ${b}, 0.04), rgba(${r}, ${g}, ${b}, 0.3))`,
+    `linear-gradient(225deg, rgba(${r}, ${g}, ${b}, 0.04), rgba(${r}, ${g}, ${b}, 0.26))`,
+  ];
+  return {
+    gradientStops: ["#FFFFFF", horizon],
+    circles: UNIFIED_CIRCLE_CONFIG.map((circle, index) => ({
+      ...circle,
+      color: sphereColors[index],
+    })),
+    tone: "light",
+  };
+}
+
+/**
+ * Default light slide background: white with a light blue horizon and
+ * blue-glow spheres.
+ */
+export const UNIFIED_LIGHT_BACKGROUND = createLightSlideBackground(
+  [37, 99, 235],
+  "#DBEAFE",
+);

frontend/editor/src/core/types/types.ts

@@ -16,6 +16,8 @@ export interface AnimatedCircleConfig {
 export interface AnimatedSlideBackgroundProps {
   gradientStops: [string, string];
   circles: AnimatedCircleConfig[];
+  /** Overall background tone; controls on top of the hero (e.g. close button) adapt to stay visible. Defaults to "dark". */
+  tone?: "light" | "dark";
 }
 
 export interface SlideConfig {