refactor(ui): extract GlowOrbs backdrop into design-system

ui/apps/console/src/components/common/AmbientBackground.tsx

@@ -1,4 +1,4 @@
-import { ConnectionGrid } from "@shellhub/design-system/components";
+import { ConnectionGrid, GlowOrbs } from "@shellhub/design-system/components";
 
 interface AmbientBackgroundProps {
   variant?: "default" | "error";
@@ -11,24 +11,7 @@ export default function AmbientBackground({
 
   return (
     <div className="absolute inset-0 overflow-hidden pointer-events-none">
-      {/* Gradient blobs */}
-      <div
-        className={`absolute -top-32 -left-32 w-[500px] h-[500px] rounded-full blur-[120px] animate-pulse-subtle ${
-          isError ? "bg-accent-red/[0.06]" : "bg-primary/10"
-        }`}
-      />
-      <div
-        className={`absolute -bottom-48 -right-32 w-[400px] h-[400px] rounded-full blur-[100px] animate-pulse-subtle ${
-          isError ? "bg-primary/[0.04]" : "bg-accent-cyan/8"
-        }`}
-        style={{ animationDelay: "1s" }}
-      />
-      <div
-        className={`absolute top-1/3 right-1/4 w-[300px] h-[300px] rounded-full blur-[80px] animate-pulse-subtle ${
-          isError ? "bg-accent-red/[0.03]" : "bg-accent-blue/5"
-        }`}
-        style={{ animationDelay: "2s" }}
-      />
+      <GlowOrbs preset="ambient" tone={isError ? "error" : "brand"} />
 
       <ConnectionGrid />
 

ui/apps/console/src/components/common/EmptyState.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, useId } from "react";
 import { IconBadge } from "@shellhub/design-system/primitives";
+import { GlowOrbs } from "@shellhub/design-system/components";
 
 export type EmptyStateAccent = "primary" | "yellow";
 
@@ -28,31 +29,26 @@ interface AccentStyles {
   badge: string;
   icon: string;
   overline: string;
-  orbPrimary: string;
-  orbSecondary: string;
 }
 
 /**
  * Accent styles. Full literal class strings (never interpolated fragments) so
  * the Tailwind JIT keeps them. The hero icon inherits the badge's text color
  * via `currentColor`; feature-card icons stay primary-accented in all variants.
  * Typed as `Record<EmptyStateAccent, …>` so adding an accent without a matching
- * entry is a compile error rather than a runtime `undefined`.
+ * entry is a compile error rather than a runtime `undefined`. The decorative
+ * orbs are driven by `<GlowOrbs preset="ambient">` (see below), not these tokens.
  */
 const ACCENT = {
   primary: {
     badge: "bg-primary/10 border-primary/20 shadow-primary/5",
     icon: "text-primary",
     overline: "text-primary/80",
-    orbPrimary: "bg-primary/5",
-    orbSecondary: "bg-accent-blue/5",
   },
   yellow: {
     badge: "bg-accent-yellow/10 border-accent-yellow/20 shadow-accent-yellow/5",
     icon: "text-accent-yellow",
     overline: "text-accent-yellow/80",
-    orbPrimary: "bg-accent-yellow/5",
-    orbSecondary: "bg-primary/5",
   },
 } satisfies Record<EmptyStateAccent, AccentStyles>;
 
@@ -86,12 +82,9 @@ export default function EmptyState({
         aria-hidden="true"
         className="absolute inset-0 overflow-hidden pointer-events-none -mx-8 -mt-8 -mb-4"
       >
-        <div
-          className={`absolute -top-32 left-1/3 w-[500px] h-[500px] rounded-full blur-[120px] animate-pulse-subtle ${styles.orbPrimary}`}
-        />
-        <div
-          className={`absolute bottom-0 right-1/4 w-[400px] h-[400px] rounded-full blur-[100px] animate-pulse-subtle ${styles.orbSecondary}`}
-          style={{ animationDelay: "1s" }}
+        <GlowOrbs
+          preset="ambient"
+          tone={accent === "yellow" ? "warning" : "brand"}
         />
         <div className="absolute inset-0 grid-bg opacity-30" />
       </div>
@@ -123,9 +116,7 @@ export default function EmptyState({
 
         {/* Feature highlights */}
         {features?.length ? (
-          <ul
-            className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10"
-          >
+          <ul className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">
             {features.map((feature, idx) => (
               <li
                 key={feature.title}

ui/apps/console/src/components/common/PageHeader.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { IconBadge, type Palette } from "@shellhub/design-system/primitives";
+import { GlowOrbs } from "@shellhub/design-system/components";
 
 interface PageHeaderProps {
   icon: ReactNode;
@@ -28,12 +29,7 @@ export default function PageHeader({
           : "bg-surface page-header-band"
       }`}
     >
-      {variant === "decorated" && (
-        <>
-          <div className="absolute inset-0 bg-gradient-to-br from-primary/15 via-surface to-accent-cyan/10" />
-          <div className="absolute top-0 right-0 w-60 h-60 bg-primary/10 rounded-full blur-2xl -translate-y-1/3 translate-x-1/4" />
-        </>
-      )}
+      {variant === "decorated" && <GlowOrbs preset="corner" tone="primary" />}
 
       <div
         className={`${variant === "decorated" ? "relative " : ""}flex flex-col sm:flex-row sm:items-center justify-between gap-4`}

ui/apps/console/src/components/common/WelcomeScreen.tsx

@@ -7,7 +7,7 @@ import {
   ArrowRightIcon,
   BookOpenIcon,
 } from "@heroicons/react/24/outline";
-import { ConnectionGrid } from "@shellhub/design-system/components";
+import { ConnectionGrid, GlowOrbs } from "@shellhub/design-system/components";
 import { GithubIcon, IconBadge } from "@shellhub/design-system/primitives";
 
 interface WelcomeScreenProps {
@@ -49,9 +49,7 @@ export default function WelcomeScreen({ namespaceName }: WelcomeScreenProps) {
       {/* Hero */}
       <div className="relative pt-16 pb-12 overflow-hidden">
         <ConnectionGrid />
-        <div className="absolute inset-0 bg-gradient-radial from-primary/10 via-transparent to-transparent" />
-        <div className="absolute top-10 left-1/4 w-96 h-96 bg-primary/8 rounded-full blur-3xl" />
-        <div className="absolute bottom-0 right-1/4 w-72 h-72 bg-accent-cyan/6 rounded-full blur-3xl" />
+        <GlowOrbs preset="duo" tone="primary" />
 
         <div className="relative text-center max-w-lg mx-auto">
           <div className="animate-float mb-8 inline-block">

ui/apps/website/src/pages/enterprise/HeroEnterprise.tsx

@@ -1,14 +1,14 @@
 import { Link } from "react-router-dom";
 import { Badge, Button } from "@shellhub/design-system/primitives";
+import { GlowOrbs } from "@shellhub/design-system/components";
 import { ArrowRight } from "@/components/ArrowRight";
 import { Reveal, ConnectionGrid } from "../landing/components";
 
 export function HeroEnterprise() {
   return (
     <section className="relative pt-32 pb-24 overflow-hidden">
       <ConnectionGrid />
-      <div className="absolute inset-0 bg-gradient-radial from-primary/8 via-transparent to-transparent pointer-events-none" />
-      <div className="absolute top-1/3 right-1/4 w-96 h-96 bg-primary/6 rounded-full blur-3xl pointer-events-none" />
+      <GlowOrbs preset="section" tone="primary" />
 
       <div className="max-w-7xl mx-auto px-8 relative z-10 text-center">
         <Reveal>

ui/apps/website/src/pages/features/index.tsx

@@ -5,6 +5,7 @@ import {
   Card,
   WindowChrome,
 } from "@shellhub/design-system/primitives";
+import { GlowOrbs } from "@shellhub/design-system/components";
 import {
   CheckIcon,
   PlayCircleIcon,
@@ -64,8 +65,7 @@ function Hero() {
   return (
     <section className="relative pt-32 pb-24 overflow-hidden">
       <ConnectionGrid />
-      <div className="absolute inset-0 bg-gradient-radial from-primary/8 via-transparent to-transparent pointer-events-none" />
-      <div className="absolute top-1/4 left-1/3 w-[500px] h-[500px] bg-accent-cyan/5 rounded-full blur-3xl pointer-events-none" />
+      <GlowOrbs preset="section" tone="cyan" />
 
       <div className="max-w-7xl mx-auto px-8 relative z-10 text-center">
         <Reveal>

ui/apps/website/src/pages/getting-started/StepPath.tsx

@@ -4,6 +4,7 @@ import {
   BuildingOffice2Icon,
   ServerIcon,
 } from "@heroicons/react/24/outline";
+import { GlowOrbs } from "@shellhub/design-system/components";
 import {
   Badge,
   Button,
@@ -27,8 +28,7 @@ export function StepPath({ onSelectCloud, onSelectSelfHosted }: StepPathProps) {
         <Reveal delay={0}>
           <ShimmerCard className="h-full">
             <div className="relative bg-card border border-primary/30 rounded-xl p-8 flex flex-col h-full hover:border-primary/50 transition-all duration-300 shadow-[0_0_40px_rgba(102,122,204,0.15)] overflow-hidden">
-              <div className="absolute inset-0 bg-gradient-to-br from-primary/[0.08] via-primary/[0.02] to-transparent pointer-events-none" />
-              <div className="absolute top-0 right-0 w-40 h-40 bg-primary/[0.08] rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl pointer-events-none" />
+              <GlowOrbs preset="corner" tone="primary" />
               <div className="relative flex items-center gap-3 mb-4">
                 <IconBadge
                   color="primary"

ui/apps/website/src/pages/getting-started/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { ConnectionGrid } from "@shellhub/design-system/components";
+import { ConnectionGrid, GlowOrbs } from "@shellhub/design-system/components";
 import { SiteLayout } from "@/components/SiteLayout";
 import { StepPath } from "./StepPath";
 import { StepSetup } from "./StepSetup";
@@ -21,7 +21,7 @@ export default function GettingStarted() {
     <SiteLayout className="flex flex-col">
       <main className="flex-1 flex flex-col items-center pt-24 pb-20 relative grid-bg">
         <ConnectionGrid />
-        <div className="absolute inset-0 bg-gradient-radial from-primary/10 via-transparent to-transparent pointer-events-none" />
+        <GlowOrbs preset="section" tone="primary" />
 
         <div className="relative z-10 w-full max-w-4xl flex flex-col items-center">
           {/* Progress indicator */}

ui/apps/website/src/pages/how-it-works/index.tsx

@@ -17,6 +17,7 @@ import {
   IconBadge,
   WindowChrome,
 } from "@shellhub/design-system/primitives";
+import { GlowOrbs } from "@shellhub/design-system/components";
 import { ArrowRight } from "@/components/ArrowRight";
 import { SiteLayout } from "@/components/SiteLayout";
 import { Section, SectionHeader } from "@/components/marketing";
@@ -100,8 +101,7 @@ export default function HowItWorks() {
       {/* ── Hero ─────────────────────────────────────────────────── */}
       <section className="relative pt-32 pb-24 overflow-hidden">
         <ConnectionGrid />
-        <div className="absolute inset-0 bg-gradient-radial from-primary/8 via-transparent to-transparent pointer-events-none" />
-        <div className="absolute top-1/3 left-1/4 w-96 h-96 bg-accent-cyan/6 rounded-full blur-3xl pointer-events-none" />
+        <GlowOrbs preset="section" tone="cyan" />
 
         <div className="max-w-7xl mx-auto px-8 relative z-10 text-center">
           <Reveal>

ui/apps/website/src/pages/integrations/index.tsx

@@ -20,6 +20,7 @@ import {
   IconBadge,
   WindowChrome,
 } from "@shellhub/design-system/primitives";
+import { GlowOrbs } from "@shellhub/design-system/components";
 import { ArrowRight } from "@/components/ArrowRight";
 import { SiteLayout } from "@/components/SiteLayout";
 import { Section, SectionHeader } from "@/components/marketing";
@@ -67,8 +68,7 @@ export default function Integrations() {
       {/* ─────────── Hero ─────────── */}
       <section className="relative pt-32 pb-24 overflow-hidden">
         <ConnectionGrid />
-        <div className="absolute inset-0 bg-gradient-radial from-primary/8 via-transparent to-transparent pointer-events-none" />
-        <div className="absolute top-1/3 left-1/4 w-96 h-96 bg-accent-cyan/6 rounded-full blur-3xl pointer-events-none" />
+        <GlowOrbs preset="section" tone="cyan" />
 
         <div className="max-w-7xl mx-auto px-8 relative z-10 text-center">
           <Reveal>

ui/apps/website/src/pages/landing/CTA.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@shellhub/design-system/primitives";
+import { GlowOrbs } from "@shellhub/design-system/components";
 import { Section } from "@/components/marketing";
 import { ArrowRight } from "@/components/ArrowRight";
 import { Reveal, ConnectionGrid } from "./components";
@@ -12,9 +13,7 @@ export function CTA() {
       className="text-center grid-bg relative overflow-hidden"
     >
       <ConnectionGrid />
-      <div className="absolute inset-0 bg-gradient-radial from-primary/8 via-transparent to-transparent pointer-events-none" />
-      <div className="absolute top-1/2 left-1/3 -translate-y-1/2 w-80 h-80 bg-primary/6 rounded-full blur-3xl pointer-events-none" />
-      <div className="absolute bottom-0 right-1/4 w-64 h-64 bg-accent-cyan/5 rounded-full blur-3xl pointer-events-none" />
+      <GlowOrbs preset="duo" tone="primary" />
       <div className="max-w-7xl mx-auto px-8 relative z-10">
         <Reveal>
           <h2 className="text-[clamp(1.75rem,4vw,3rem)] font-bold tracking-[-0.03em] leading-tight mb-4">

ui/apps/website/src/pages/landing/Hero.tsx

@@ -1,16 +1,14 @@
 import { Link } from "react-router-dom";
 import { Button, ShellHubCloudIcon } from "@shellhub/design-system/primitives";
+import { GlowOrbs } from "@shellhub/design-system/components";
 import { ArrowRight } from "@/components/ArrowRight";
 import { ConnectionGrid } from "./components";
 
 export function Hero() {
   return (
     <section className="min-h-screen flex flex-col items-center justify-center text-center px-6 pt-28 pb-20 relative overflow-hidden grid-bg">
       <ConnectionGrid />
-      <div className="absolute inset-0 bg-gradient-radial from-primary/10 via-transparent to-transparent pointer-events-none" />
-      <div className="absolute top-16 left-1/4 w-[500px] h-[500px] bg-primary/8 rounded-full blur-3xl pointer-events-none" />
-      <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-accent-cyan/6 rounded-full blur-3xl pointer-events-none" />
-      <div className="absolute top-1/3 right-[10%] w-72 h-72 bg-primary/5 rounded-full blur-3xl pointer-events-none" />
+      <GlowOrbs preset="hero" />
 
       <div className="relative z-10 max-w-4xl flex flex-col items-center">
         {/* Floating ShellHub cloud */}

ui/apps/website/src/pages/pricing/HeroPricing.tsx

@@ -1,9 +1,10 @@
+import { GlowOrbs } from "@shellhub/design-system/components";
 import { Reveal } from "../landing/components";
 
 export function HeroPricing() {
   return (
-    <section className="relative pt-32 pb-16">
-      <div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-primary/5 rounded-full blur-3xl pointer-events-none" />
+    <section className="relative pt-32 pb-16 overflow-hidden">
+      <GlowOrbs preset="section" tone="primary" />
 
       <div className="max-w-7xl mx-auto px-8 relative z-10 text-center">
         <Reveal>
@@ -13,7 +14,8 @@ export function HeroPricing() {
         </Reveal>
         <Reveal>
           <p className="text-sm text-text-secondary max-w-md mx-auto leading-relaxed">
-            Start free with the Community edition. Scale up as your team and fleet grow.
+            Start free with the Community edition. Scale up as your team and
+            fleet grow.
           </p>
         </Reveal>
       </div>

ui/apps/website/src/pages/pricing/TierCards.tsx

@@ -1,5 +1,6 @@
 import { Link } from "react-router-dom";
 import { Button } from "@shellhub/design-system/primitives";
+import { GlowOrbs } from "@shellhub/design-system/components";
 import { Section } from "@/components/marketing";
 import { FeatureListItem } from "@/components/marketing/FeatureListItem";
 import { Reveal, ShimmerCard } from "../landing/components";
@@ -83,10 +84,7 @@ export function TierCards() {
                 }`}
               >
                 {tier.highlighted && (
-                  <>
-                    <div className="absolute inset-0 bg-gradient-to-br from-primary/[0.08] via-primary/[0.02] to-transparent pointer-events-none" />
-                    <div className="absolute top-0 right-0 w-40 h-40 bg-primary/[0.08] rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl pointer-events-none" />
-                  </>
+                  <GlowOrbs preset="corner" tone="primary" />
                 )}
 
                 <div className="relative">

ui/apps/website/src/pages/use-cases/ContainerManagement.tsx

@@ -16,6 +16,7 @@ import {
   IconBadge,
   WindowChrome,
 } from "@shellhub/design-system/primitives";
+import { GlowOrbs } from "@shellhub/design-system/components";
 import { ArrowRight } from "@/components/ArrowRight";
 import { SiteLayout } from "@/components/SiteLayout";
 import { Section, SectionHeader } from "@/components/marketing";
@@ -465,8 +466,7 @@ export default function ContainerManagement() {
       {/* ═══════ Hero ═══════ */}
       <section className="relative pt-32 pb-24 overflow-hidden">
         <ConnectionGrid />
-        <div className="absolute inset-0 bg-gradient-radial from-accent-cyan/8 via-transparent to-transparent pointer-events-none" />
-        <div className="absolute top-1/3 right-1/4 w-96 h-96 bg-accent-cyan/6 rounded-full blur-3xl pointer-events-none" />
+        <GlowOrbs preset="section" tone="cyan" />
 
         <div className="max-w-7xl mx-auto px-8 relative z-10 text-center">
           <Reveal>

ui/apps/website/src/pages/use-cases/DevopsCiCd.tsx

@@ -15,6 +15,7 @@ import {
   Card,
   WindowChrome,
 } from "@shellhub/design-system/primitives";
+import { GlowOrbs } from "@shellhub/design-system/components";
 import { ArrowRight } from "@/components/ArrowRight";
 import { SiteLayout } from "@/components/SiteLayout";
 import { Section, SectionHeader } from "@/components/marketing";
@@ -232,8 +233,7 @@ export default function DevopsCiCd() {
       {/* ── Hero ─────────────────────────────────────────────────── */}
       <section className="relative pt-32 pb-24 overflow-hidden">
         <ConnectionGrid />
-        <div className="absolute inset-0 bg-gradient-radial from-primary/8 via-transparent to-transparent pointer-events-none" />
-        <div className="absolute top-1/3 right-1/4 w-96 h-96 bg-primary/6 rounded-full blur-3xl pointer-events-none" />
+        <GlowOrbs preset="section" tone="primary" />
 
         <div className="max-w-7xl mx-auto px-8 relative z-10 text-center">
           <Reveal>

ui/apps/website/src/pages/use-cases/EdgeComputing.tsx

@@ -18,6 +18,7 @@ import {
   IconBadge,
   WindowChrome,
 } from "@shellhub/design-system/primitives";
+import { GlowOrbs } from "@shellhub/design-system/components";
 import { ArrowRight } from "@/components/ArrowRight";
 import { Reveal, ShimmerCard, ConnectionGrid } from "../landing/components";
 import { SiteLayout } from "@/components/SiteLayout";
@@ -169,8 +170,7 @@ export default function EdgeComputing() {
       {/* ───── Hero ───── */}
       <section className="relative pt-32 pb-24 overflow-hidden">
         <ConnectionGrid />
-        <div className="absolute inset-0 bg-gradient-radial from-accent-blue/8 via-transparent to-transparent pointer-events-none" />
-        <div className="absolute top-1/3 right-1/4 w-96 h-96 bg-accent-blue/6 rounded-full blur-3xl pointer-events-none" />
+        <GlowOrbs preset="section" tone="blue" />
 
         <div className="max-w-7xl mx-auto px-8 relative z-10 text-center">
           <Reveal>

ui/apps/website/src/pages/use-cases/IotEmbedded.tsx

@@ -19,6 +19,7 @@ import {
   IconBadge,
   WindowChrome,
 } from "@shellhub/design-system/primitives";
+import { GlowOrbs } from "@shellhub/design-system/components";
 import { ArrowRight } from "@/components/ArrowRight";
 import { SiteLayout } from "@/components/SiteLayout";
 import { Section, SectionHeader } from "@/components/marketing";
@@ -114,8 +115,7 @@ export default function IotEmbedded() {
       {/* ═══════ Hero ═══════ */}
       <section className="relative pt-32 pb-24 overflow-hidden">
         <ConnectionGrid />
-        <div className="absolute inset-0 bg-gradient-radial from-accent-green/8 via-transparent to-transparent pointer-events-none" />
-        <div className="absolute top-1/3 left-1/4 w-96 h-96 bg-accent-green/6 rounded-full blur-3xl pointer-events-none" />
+        <GlowOrbs preset="section" tone="green" />
 
         <div className="max-w-7xl mx-auto px-8 relative z-10 text-center">
           <Reveal>