Give dashboards a themed orb background and a solid current-nav state.

Login pages share the same wash as the app shell; customer light mode matches business while dark mode stays gray.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/components/BackgroundOrbs.module.css

@@ -0,0 +1,134 @@
+.bgOrbs {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.bgOrbs::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(255, 255, 255, 0.2) 100%);
+  backdrop-filter: blur(1px);
+}
+
+.orb1,
+.orb2,
+.orb3,
+.orb4 {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(100px);
+  will-change: transform;
+}
+
+.orb1 {
+  width: 560px;
+  height: 560px;
+  background: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--primary-light) 55%, #ffffff) 0%,
+    color-mix(in srgb, var(--primary) 30%, #ffffff) 55%,
+    transparent 72%
+  );
+  opacity: 0.55;
+  top: -140px;
+  right: -120px;
+  animation: floatOrb1 18s ease-in-out infinite;
+}
+
+.orb2 {
+  width: 480px;
+  height: 480px;
+  background: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--primary) 28%, #ffffff) 0%,
+    color-mix(in srgb, var(--primary) 38%, #ffffff) 50%,
+    transparent 70%
+  );
+  opacity: 0.42;
+  bottom: -100px;
+  left: 15%;
+  animation: floatOrb2 22s ease-in-out infinite;
+}
+
+.orb3 {
+  width: 380px;
+  height: 380px;
+  background: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--page-accent) 30%, #ffffff) 0%,
+    color-mix(in srgb, var(--page-accent) 48%, #ffffff) 55%,
+    transparent 72%
+  );
+  opacity: 0.42;
+  top: 38%;
+  left: -100px;
+  animation: floatOrb3 20s ease-in-out infinite;
+}
+
+.orb4 {
+  width: 320px;
+  height: 320px;
+  background: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--primary-light) 45%, var(--page-accent)) 0%,
+    color-mix(in srgb, var(--page-accent) 32%, var(--primary-light)) 50%,
+    transparent 70%
+  );
+  opacity: 0.38;
+  top: 12%;
+  right: 28%;
+  animation: floatOrb4 24s ease-in-out infinite;
+}
+
+@keyframes floatOrb1 {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(-30px, 25px) scale(1.06);
+  }
+}
+
+@keyframes floatOrb2 {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(35px, -20px) scale(1.05);
+  }
+}
+
+@keyframes floatOrb3 {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(20px, 30px) scale(1.08);
+  }
+}
+
+@keyframes floatOrb4 {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(-25px, -15px) scale(1.04);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .orb1,
+  .orb2,
+  .orb3,
+  .orb4 {
+    animation: none;
+  }
+}

apps/business/src/components/BackgroundOrbs.tsx

@@ -0,0 +1,12 @@
+import styles from './BackgroundOrbs.module.css'
+
+export function BackgroundOrbs() {
+  return (
+    <div className={styles.bgOrbs} aria-hidden="true">
+      <div className={styles.orb1} />
+      <div className={styles.orb2} />
+      <div className={styles.orb3} />
+      <div className={styles.orb4} />
+    </div>
+  )
+}

apps/business/src/components/PageLayout.tsx

@@ -4,6 +4,7 @@ import { DraftCartProvider } from '../context/DraftCartContext'
 import { useT } from '../i18n/useT'
 import { Sidebar } from './Sidebar'
 import { Header } from './Header'
+import { BackgroundOrbs } from './BackgroundOrbs'
 import styles from './PageLayout.module.css'
 
 const NAV_EXPAND_QUERY = '(min-width: 1281px)'
@@ -45,6 +46,7 @@ export function PageLayout() {
   return (
     <DraftCartProvider>
       <div className={styles.layout} data-nav-open={navOpen ? 'true' : undefined}>
+        <BackgroundOrbs />
         {navOpen ? (
           <button
             type="button"

apps/business/src/components/Sidebar.module.css

@@ -118,8 +118,17 @@
 }
 
 .navItem.active {
-  background: rgba(var(--primary-rgb) / 0.12);
+  background: var(--primary);
-  color: var(--primary);
+  color: #fff;
+}
+
+.navItem.active:hover {
+  background: var(--primary-dark);
+  color: #fff;
+}
+
+.navItem.active .chevron {
+  color: #fff;
 }
 
 .navGroupBtn {
@@ -166,8 +175,13 @@
 }
 
 .subNavActive {
-  background: rgba(var(--primary-rgb) / 0.1);
+  background: var(--primary);
-  color: var(--primary);
+  color: #fff;
+}
+
+.subNavActive:hover {
+  background: var(--primary-dark);
+  color: #fff;
 }
 
 .footer {

apps/business/src/index.css

@@ -17,14 +17,20 @@
   --chart-accent-dark: #0891b2;
   --chart-accent-rgb: 6 182 212;
   --chart-accent-dark-rgb: 8 145 178;
-  --bg-gradient-start: color-mix(in srgb, var(--primary-light) 72%, #ffffff);
+  --page-accent: #38bdf8;
-  --bg-gradient-mid: color-mix(in srgb, var(--primary-light) 42%, #ffffff);
+  --page-accent-rgb: 56 189 248;
-  --bg-gradient-end: color-mix(in srgb, var(--primary-light) 18%, #ffffff);
+  --bg-gradient-start: color-mix(in srgb, var(--primary-light) 20%, #ffffff);
-  --glass-bg: rgba(255, 255, 255, 0.55);
+  --bg-gradient-mid: color-mix(
+    in srgb,
+    var(--primary-light) 13%,
+    color-mix(in srgb, var(--page-accent, var(--primary)) 4%, #ffffff)
+  );
+  --bg-gradient-end: color-mix(in srgb, var(--page-accent, var(--primary)) 4%, #ffffff);
+  --glass-bg: rgba(255, 255, 255, 0.42);
   /* Sticky header: opaque enough over scrolling content; tinted by theme (works for near-white primary-light e.g. brown) */
   --header-bg: color-mix(
     in srgb,
-    color-mix(in srgb, var(--primary-light) 42%, #ffffff) 90%,
+    color-mix(in srgb, var(--primary-light) 22%, #ffffff) 92%,
     transparent
   );
   --glass-border: rgba(255, 255, 255, 0.7);
@@ -64,64 +70,24 @@ body,
 body {
   font-family: var(--font-ui);
   color: var(--text-primary);
-  background-color: var(--bg-gradient-mid);
+  background:
-  background-image: linear-gradient(
+    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(var(--primary-rgb) / 0.07) 0%, transparent 55%),
-    135deg,
+    radial-gradient(
-    var(--bg-gradient-start) 0%,
+      ellipse 70% 50% at 90% 100%,
-    var(--bg-gradient-mid) 50%,
+      rgba(var(--page-accent-rgb, var(--primary-rgb)) / 0.06) 0%,
-    var(--bg-gradient-end) 100%
+      transparent 50%
-  );
+    ),
+    linear-gradient(
+      135deg,
+      var(--bg-gradient-start) 0%,
+      var(--bg-gradient-mid) 45%,
+      var(--bg-gradient-end) 100%
+    );
   background-attachment: fixed;
-  background-repeat: no-repeat;
-  background-size: cover;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
 }
 
-body::before {
-  content: '';
-  position: fixed;
-  inset: -30%;
-  z-index: -1;
-  pointer-events: none;
-  background:
-    radial-gradient(
-      ellipse 520px 520px at 72% 18%,
-      rgba(var(--primary-rgb) / 0.3),
-      transparent 72%
-    ),
-    radial-gradient(
-      ellipse 420px 420px at 22% 82%,
-      rgba(var(--primary-rgb) / 0.2),
-      transparent 72%
-    ),
-    radial-gradient(
-      ellipse 360px 360px at 8% 42%,
-      rgba(var(--chart-accent-rgb, var(--primary-rgb)) / 0.14),
-      transparent 72%
-    );
-  animation: pageAuraDrift 22s ease-in-out infinite alternate;
-  will-change: transform;
-}
-
-@keyframes pageAuraDrift {
-  0% {
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-  50% {
-    transform: translate3d(3.5%, -2.5%, 0) scale(1.06);
-  }
-  100% {
-    transform: translate3d(-3%, 3.5%, 0) scale(1.04);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  body::before {
-    animation: none;
-  }
-}
-
 /* Portaled dialogs sit on body; blur the app behind them. */
 body:has([aria-modal='true']) #root {
   filter: blur(var(--modal-overlay-blur, 16px));

apps/business/src/pages/LoginPage.module.css

@@ -63,6 +63,8 @@
 }
 
 .poweredBy {
+  position: relative;
+  z-index: 1;
   font-size: 12px;
   font-weight: 500;
   color: var(--text-muted);

apps/business/src/pages/LoginPage.tsx

@@ -9,6 +9,7 @@ import { toE164CellNumber } from '../lib/cellNumber'
 import { getBusinessDomain } from '../lib/config'
 import { resetPassword, sendOtp } from '../services/authService'
 import { useT } from '../i18n/useT'
+import { BackgroundOrbs } from '../components/BackgroundOrbs'
 import styles from './LoginPage.module.css'
 
 type AuthView = 'login' | 'forgot' | 'otp'
@@ -199,6 +200,7 @@ export function LoginPage() {
 
   return (
     <div className={styles.page}>
+      <BackgroundOrbs />
       <div className={styles.card}>
         <div className={styles.brand}>
           {logoUrl ? <img src={logoUrl} alt="" className={styles.logo} /> : null}

apps/business/src/pages/WebsiteStaticImagesPage.module.css

@@ -1,3 +1,9 @@
+.pageHeader {
+  padding-bottom: 16px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+}
+
 .slot {
   margin-bottom: 28px;
 }

apps/business/src/pages/WebsiteStaticImagesPage.tsx

@@ -32,7 +32,7 @@ import type {
 import { parseAspectRatio } from '../utils/aspectRatio'
 import {
   staticImagePageLabel,
-  staticImagePageOptions,
+  staticImagePagesFromSlots,
 } from '../utils/staticImagePages'
 import controlStyles from '../components/CategoryRow.module.css'
 import pageStyles from '../components/PageContent.module.css'
@@ -122,9 +122,16 @@ export function WebsiteStaticImagesPage() {
   }
 
   const pageOptions = useMemo(
-    () => staticImagePageOptions(slots.map((slot) => slot.pageKey)),
+    () => staticImagePagesFromSlots(slots.map((slot) => slot.pageKey)),
     [slots],
   )
+  useEffect(() => {
+    if (pageOptions.length === 0) return
+    if (!pageOptions.includes(pageKey)) {
+      setPageKey(pageOptions[0])
+    }
+  }, [pageOptions, pageKey])
+
   const visibleSlots = useMemo(
     () => slots.filter((slot) => (slot.pageKey || 'home') === pageKey),
     [slots, pageKey],
@@ -271,28 +278,30 @@ export function WebsiteStaticImagesPage() {
         ]}
       />
 
-      <div className={pageStyles.pageHeader}>
+      <div className={`${pageStyles.pageHeader} ${styles.pageHeader}`}>
         <div>
           <PageTitle en="STATIC IMAGES">{t('title.staticImages')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>
             {t('website.staticImages.subtitle', { domain })}
           </p>
         </div>
-        <div className={styles.pageSelect}>
+        {pageOptions.length > 1 ? (
-          <label htmlFor="static-images-page">{t('website.staticImages.page')}</label>
+          <div className={styles.pageSelect}>
-          <select
+            <label htmlFor="static-images-page">{t('website.staticImages.page')}</label>
-            id="static-images-page"
+            <select
-            value={pageKey}
+              id="static-images-page"
-            onChange={(e) => setPageKey(e.target.value)}
+              value={pageKey}
-            disabled={isLoading}
+              onChange={(e) => setPageKey(e.target.value)}
-          >
+              disabled={isLoading}
-            {pageOptions.map((option) => (
+            >
-              <option key={option} value={option}>
+              {pageOptions.map((option) => (
-                {staticImagePageLabel(option, t)}
+                <option key={option} value={option}>
-              </option>
+                  {staticImagePageLabel(option, t)}
-            ))}
+                </option>
-          </select>
+              ))}
-        </div>
+            </select>
+          </div>
+        ) : null}
       </div>
 
       {error && <p className={specialStyles.error}>{error}</p>}

apps/business/src/utils/applyBusinessTheme.ts

@@ -15,6 +15,8 @@ const CSS_VAR_DEFAULTS: Record<string, string> = {
   '--chart-accent-dark': '#0891b2',
   '--chart-accent-rgb': '6 182 212',
   '--chart-accent-dark-rgb': '8 145 178',
+  '--page-accent': '#38bdf8',
+  '--page-accent-rgb': '56 189 248',
 }
 
 export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | null) {
@@ -31,6 +33,8 @@ export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | nul
   root.style.setProperty('--chart-accent-dark', tokens.chartAccentDark)
   root.style.setProperty('--chart-accent-rgb', tokens.chartAccentRgb)
   root.style.setProperty('--chart-accent-dark-rgb', tokens.chartAccentDarkRgb)
+  root.style.setProperty('--page-accent', tokens.pageAccent)
+  root.style.setProperty('--page-accent-rgb', tokens.pageAccentRgb)
 }
 
 export function resetBusinessPrimaryColor() {

apps/business/src/utils/businessPrimaryColors.ts

@@ -30,6 +30,9 @@ export type BusinessPrimaryColorTokens = {
   chartAccentDark: string
   chartAccentRgb: string
   chartAccentDarkRgb: string
+  /** Soft analog for the page wash — stays in-family (red→peach, blue→sky). */
+  pageAccent: string
+  pageAccentRgb: string
 }
 
 const PURPLE_ACCENT = {
@@ -46,6 +49,36 @@ const CYAN_ACCENT = {
   chartAccentDarkRgb: '8 145 178',
 } as const
 
+const PEACH_PAGE = {
+  pageAccent: '#fb923c',
+  pageAccentRgb: '251 146 60',
+} as const
+
+const GOLD_PAGE = {
+  pageAccent: '#fbbf24',
+  pageAccentRgb: '251 191 36',
+} as const
+
+const SKY_PAGE = {
+  pageAccent: '#38bdf8',
+  pageAccentRgb: '56 189 248',
+} as const
+
+const PINK_PAGE = {
+  pageAccent: '#f472b6',
+  pageAccentRgb: '244 114 182',
+} as const
+
+const MINT_PAGE = {
+  pageAccent: '#34d399',
+  pageAccentRgb: '52 211 153',
+} as const
+
+const SAND_PAGE = {
+  pageAccent: '#d6b896',
+  pageAccentRgb: '214 184 150',
+} as const
+
 export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
   BusinessPrimaryColorId,
   BusinessPrimaryColorTokens
@@ -59,6 +92,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '239 68 68',
     primaryDarkRgb: '220 38 38',
     ...PURPLE_ACCENT,
+    ...PEACH_PAGE,
   },
   'dark-red': {
     label: 'Dark Red',
@@ -69,16 +103,18 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '153 27 27',
     primaryDarkRgb: '127 29 29',
     ...PURPLE_ACCENT,
+    ...PEACH_PAGE,
   },
   yellow: {
     label: 'Yellow',
-    primary: '#eab308',
+    primary: '#facc15',
-    primaryDark: '#ca8a04',
+    primaryDark: '#eab308',
-    primaryLight: '#fef9c3',
+    primaryLight: '#fde047',
-    primaryGlow: '#eab308',
+    primaryGlow: '#facc15',
-    primaryRgb: '234 179 8',
+    primaryRgb: '250 204 21',
-    primaryDarkRgb: '202 138 4',
+    primaryDarkRgb: '234 179 8',
     ...PURPLE_ACCENT,
+    ...GOLD_PAGE,
   },
   black: {
     label: 'Black',
@@ -89,6 +125,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '30 41 59',
     primaryDarkRgb: '15 23 42',
     ...CYAN_ACCENT,
+    ...SKY_PAGE,
   },
   cyan: {
     label: 'Cyan',
@@ -99,6 +136,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '6 182 212',
     primaryDarkRgb: '8 145 178',
     ...PURPLE_ACCENT,
+    ...SKY_PAGE,
   },
   purple: {
     label: 'Purple',
@@ -109,6 +147,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '168 85 247',
     primaryDarkRgb: '147 51 234',
     ...CYAN_ACCENT,
+    ...PINK_PAGE,
   },
   'light-blue': {
     label: 'Light Blue',
@@ -119,6 +158,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '56 189 248',
     primaryDarkRgb: '14 165 233',
     ...CYAN_ACCENT,
+    ...SKY_PAGE,
   },
   'dark-blue': {
     label: 'Blue',
@@ -129,6 +169,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '59 130 246',
     primaryDarkRgb: '37 99 235',
     ...CYAN_ACCENT,
+    ...SKY_PAGE,
   },
   brown: {
     label: 'Brown',
@@ -139,6 +180,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '139 94 60',
     primaryDarkRgb: '111 74 47',
     ...CYAN_ACCENT,
+    ...SAND_PAGE,
   },
   navy: {
     label: 'Dark Blue',
@@ -149,6 +191,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '30 58 138',
     primaryDarkRgb: '23 37 84',
     ...CYAN_ACCENT,
+    ...SKY_PAGE,
   },
   'dark-green': {
     label: 'Dark Green',
@@ -159,6 +202,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '22 101 52',
     primaryDarkRgb: '20 83 45',
     ...CYAN_ACCENT,
+    ...MINT_PAGE,
   },
   orange: {
     label: 'Orange',
@@ -169,6 +213,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '234 88 12',
     primaryDarkRgb: '194 65 12',
     ...PURPLE_ACCENT,
+    ...PEACH_PAGE,
   },
 }
 

apps/business/src/utils/staticImagePages.ts

@@ -36,3 +36,12 @@ export function staticImagePageOptions(existing: string[]) {
   )
   return [...STATIC_IMAGE_PAGE_KEYS, ...extras]
 }
+
+export function staticImagePagesFromSlots(pageKeys: string[]) {
+  const unique = [...new Set(pageKeys.map((key) => key || 'home'))]
+  const known = STATIC_IMAGE_PAGE_KEYS.filter((key) => unique.includes(key))
+  const extras = unique.filter(
+    (key) => !(STATIC_IMAGE_PAGE_KEYS as readonly string[]).includes(key),
+  )
+  return [...known, ...extras]
+}

apps/customer/src/components/BackgroundOrbs.module.css

@@ -0,0 +1,138 @@
+.bgOrbs {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.bgOrbs::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(255, 255, 255, 0.2) 100%);
+  backdrop-filter: blur(1px);
+}
+
+.orb1,
+.orb2,
+.orb3,
+.orb4 {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(100px);
+  will-change: transform;
+}
+
+.orb1 {
+  width: 560px;
+  height: 560px;
+  background: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--primary-light) 55%, #ffffff) 0%,
+    color-mix(in srgb, var(--primary) 30%, #ffffff) 55%,
+    transparent 72%
+  );
+  opacity: 0.55;
+  top: -140px;
+  right: -120px;
+  animation: floatOrb1 18s ease-in-out infinite;
+}
+
+.orb2 {
+  width: 480px;
+  height: 480px;
+  background: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--primary) 28%, #ffffff) 0%,
+    color-mix(in srgb, var(--primary) 38%, #ffffff) 50%,
+    transparent 70%
+  );
+  opacity: 0.42;
+  bottom: -100px;
+  left: 15%;
+  animation: floatOrb2 22s ease-in-out infinite;
+}
+
+.orb3 {
+  width: 380px;
+  height: 380px;
+  background: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--page-accent) 30%, #ffffff) 0%,
+    color-mix(in srgb, var(--page-accent) 48%, #ffffff) 55%,
+    transparent 72%
+  );
+  opacity: 0.42;
+  top: 38%;
+  left: -100px;
+  animation: floatOrb3 20s ease-in-out infinite;
+}
+
+.orb4 {
+  width: 320px;
+  height: 320px;
+  background: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--primary-light) 45%, var(--page-accent)) 0%,
+    color-mix(in srgb, var(--page-accent) 32%, var(--primary-light)) 50%,
+    transparent 70%
+  );
+  opacity: 0.38;
+  top: 12%;
+  right: 28%;
+  animation: floatOrb4 24s ease-in-out infinite;
+}
+
+@keyframes floatOrb1 {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(-30px, 25px) scale(1.06);
+  }
+}
+
+@keyframes floatOrb2 {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(35px, -20px) scale(1.05);
+  }
+}
+
+@keyframes floatOrb3 {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(20px, 30px) scale(1.08);
+  }
+}
+
+@keyframes floatOrb4 {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(-25px, -15px) scale(1.04);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .orb1,
+  .orb2,
+  .orb3,
+  .orb4 {
+    animation: none;
+  }
+}
+
+:global(html[data-theme='dark']) .bgOrbs {
+  display: none;
+}

apps/customer/src/components/BackgroundOrbs.tsx

@@ -0,0 +1,12 @@
+import styles from './BackgroundOrbs.module.css'
+
+export function BackgroundOrbs() {
+  return (
+    <div className={styles.bgOrbs} aria-hidden="true">
+      <div className={styles.orb1} />
+      <div className={styles.orb2} />
+      <div className={styles.orb3} />
+      <div className={styles.orb4} />
+    </div>
+  )
+}

apps/customer/src/components/PageLayout.tsx

@@ -3,6 +3,7 @@ import { Outlet, useLocation } from 'react-router-dom'
 import { useT } from '../i18n/useT'
 import { Sidebar } from './Sidebar'
 import { Header } from './Header'
+import { BackgroundOrbs } from './BackgroundOrbs'
 import styles from './PageLayout.module.css'
 
 const NAV_EXPAND_QUERY = '(min-width: 1281px)'
@@ -43,6 +44,7 @@ export function PageLayout() {
 
   return (
     <div className={styles.layout} data-nav-open={navOpen ? 'true' : undefined}>
+      <BackgroundOrbs />
       {navOpen ? (
         <button
           type="button"

apps/customer/src/components/Sidebar.module.css

@@ -115,8 +115,17 @@
 }
 
 .navItem.active {
-  background: rgba(var(--primary-rgb) / 0.12);
+  background: var(--primary);
-  color: var(--primary);
+  color: #fff;
+}
+
+.navItem.active:hover {
+  background: var(--primary-dark);
+  color: #fff;
+}
+
+.navItem.active .chevron {
+  color: #fff;
 }
 
 .navGroupBtn {
@@ -163,8 +172,13 @@
 }
 
 .subNavActive {
-  background: rgba(var(--primary-rgb) / 0.1);
+  background: var(--primary);
-  color: var(--primary);
+  color: #fff;
+}
+
+.subNavActive:hover {
+  background: var(--primary-dark);
+  color: #fff;
 }
 
 .footer {

apps/customer/src/index.css

@@ -8,11 +8,15 @@
   --font-ui: var(--font-en), var(--font-fa), -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma,
     sans-serif;
 
-  /* Neutral light surfaces (theme color stays on accents only) */
+  /* Light: themed wash (same pairing as business — primary-light + page accent) */
-  --bg-gradient-start: #f4f5f7;
+  --bg-gradient-start: color-mix(in srgb, var(--primary-light) 20%, #ffffff);
-  --bg-gradient-mid: #eef0f3;
+  --bg-gradient-mid: color-mix(
-  --bg-gradient-end: #e8eaee;
+    in srgb,
-  --glass-bg: rgba(255, 255, 255, 0.72);
+    var(--primary-light) 13%,
+    color-mix(in srgb, var(--page-accent, var(--primary)) 4%, #ffffff)
+  );
+  --bg-gradient-end: color-mix(in srgb, var(--page-accent, var(--primary)) 4%, #ffffff);
+  --glass-bg: rgba(255, 255, 255, 0.42);
   --header-bg: color-mix(
     in srgb,
     color-mix(in srgb, var(--primary-light) 28%, #ffffff) 92%,
@@ -73,8 +77,40 @@ html[data-theme='dark'] textarea {
   border-color: var(--border-color);
 }
 
+body {
+  background:
+    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(var(--primary-rgb) / 0.07) 0%, transparent 55%),
+    radial-gradient(
+      ellipse 70% 50% at 90% 100%,
+      rgba(var(--page-accent-rgb, var(--primary-rgb)) / 0.06) 0%,
+      transparent 50%
+    ),
+    linear-gradient(
+      135deg,
+      var(--bg-gradient-start) 0%,
+      var(--bg-gradient-mid) 45%,
+      var(--bg-gradient-end) 100%
+    );
+  background-attachment: fixed;
+}
+
+body::before {
+  display: none;
+}
+
+html[data-theme='dark'] body {
+  background: linear-gradient(
+    135deg,
+    var(--bg-gradient-start) 0%,
+    var(--bg-gradient-mid) 45%,
+    var(--bg-gradient-end) 100%
+  );
+  background-attachment: fixed;
+}
+
 /* Soft neutral aura — no theme-color wash on the page */
 html[data-theme='dark'] body::before {
+  display: block;
   background:
     radial-gradient(ellipse 520px 520px at 72% 18%, rgba(255, 255, 255, 0.04), transparent 72%),
     radial-gradient(ellipse 420px 420px at 22% 82%, rgba(255, 255, 255, 0.03), transparent 72%);

apps/customer/src/pages/LoginPage.module.css

@@ -63,6 +63,8 @@
 }
 
 .poweredBy {
+  position: relative;
+  z-index: 1;
   font-size: 12px;
   font-weight: 500;
   color: var(--text-muted);

apps/customer/src/pages/LoginPage.tsx

@@ -19,6 +19,7 @@ import {
 import { LanguageSelect, PasswordStrengthMeter, isPasswordStrong, useLocale } from '@meshkee/dashboard-ui'
 import { useT } from '../i18n/useT'
 import { safeRedirectPath } from '../lib/redirect'
+import { BackgroundOrbs } from '../components/BackgroundOrbs'
 import meshkeeLogo from '../assets/meshkee-logo.png'
 import styles from './LoginPage.module.css'
 
@@ -372,6 +373,7 @@ export function LoginPage() {
 
   return (
     <div className={styles.page}>
+      <BackgroundOrbs />
       <div className={styles.card}>
         <div className={styles.brand}>
           <img src={logoUrl || meshkeeLogo} alt="" className={styles.logo} />

apps/customer/src/utils/applyBusinessTheme.ts

@@ -15,6 +15,8 @@ const CSS_VAR_DEFAULTS: Record<string, string> = {
   '--chart-accent-dark': '#0891b2',
   '--chart-accent-rgb': '6 182 212',
   '--chart-accent-dark-rgb': '8 145 178',
+  '--page-accent': '#38bdf8',
+  '--page-accent-rgb': '56 189 248',
 }
 
 export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | null) {
@@ -31,6 +33,8 @@ export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | nul
   root.style.setProperty('--chart-accent-dark', tokens.chartAccentDark)
   root.style.setProperty('--chart-accent-rgb', tokens.chartAccentRgb)
   root.style.setProperty('--chart-accent-dark-rgb', tokens.chartAccentDarkRgb)
+  root.style.setProperty('--page-accent', tokens.pageAccent)
+  root.style.setProperty('--page-accent-rgb', tokens.pageAccentRgb)
 }
 
 export function resetBusinessPrimaryColor() {

apps/customer/src/utils/businessPrimaryColors.ts

@@ -30,6 +30,9 @@ export type BusinessPrimaryColorTokens = {
   chartAccentDark: string
   chartAccentRgb: string
   chartAccentDarkRgb: string
+  /** Soft analog for the page wash — stays in-family (red→peach, blue→sky). */
+  pageAccent: string
+  pageAccentRgb: string
 }
 
 const PURPLE_ACCENT = {
@@ -46,6 +49,36 @@ const CYAN_ACCENT = {
   chartAccentDarkRgb: '8 145 178',
 } as const
 
+const PEACH_PAGE = {
+  pageAccent: '#fb923c',
+  pageAccentRgb: '251 146 60',
+} as const
+
+const GOLD_PAGE = {
+  pageAccent: '#fbbf24',
+  pageAccentRgb: '251 191 36',
+} as const
+
+const SKY_PAGE = {
+  pageAccent: '#38bdf8',
+  pageAccentRgb: '56 189 248',
+} as const
+
+const PINK_PAGE = {
+  pageAccent: '#f472b6',
+  pageAccentRgb: '244 114 182',
+} as const
+
+const MINT_PAGE = {
+  pageAccent: '#34d399',
+  pageAccentRgb: '52 211 153',
+} as const
+
+const SAND_PAGE = {
+  pageAccent: '#d6b896',
+  pageAccentRgb: '214 184 150',
+} as const
+
 export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
   BusinessPrimaryColorId,
   BusinessPrimaryColorTokens
@@ -59,6 +92,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '239 68 68',
     primaryDarkRgb: '220 38 38',
     ...PURPLE_ACCENT,
+    ...PEACH_PAGE,
   },
   'dark-red': {
     label: 'Dark Red',
@@ -69,16 +103,18 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '153 27 27',
     primaryDarkRgb: '127 29 29',
     ...PURPLE_ACCENT,
+    ...PEACH_PAGE,
   },
   yellow: {
     label: 'Yellow',
-    primary: '#eab308',
+    primary: '#facc15',
-    primaryDark: '#ca8a04',
+    primaryDark: '#eab308',
-    primaryLight: '#fef9c3',
+    primaryLight: '#fde047',
-    primaryGlow: '#eab308',
+    primaryGlow: '#facc15',
-    primaryRgb: '234 179 8',
+    primaryRgb: '250 204 21',
-    primaryDarkRgb: '202 138 4',
+    primaryDarkRgb: '234 179 8',
     ...PURPLE_ACCENT,
+    ...GOLD_PAGE,
   },
   black: {
     label: 'Black',
@@ -89,6 +125,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '30 41 59',
     primaryDarkRgb: '15 23 42',
     ...CYAN_ACCENT,
+    ...SKY_PAGE,
   },
   cyan: {
     label: 'Cyan',
@@ -99,6 +136,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '6 182 212',
     primaryDarkRgb: '8 145 178',
     ...PURPLE_ACCENT,
+    ...SKY_PAGE,
   },
   purple: {
     label: 'Purple',
@@ -109,6 +147,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '168 85 247',
     primaryDarkRgb: '147 51 234',
     ...CYAN_ACCENT,
+    ...PINK_PAGE,
   },
   'light-blue': {
     label: 'Light Blue',
@@ -119,6 +158,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '56 189 248',
     primaryDarkRgb: '14 165 233',
     ...CYAN_ACCENT,
+    ...SKY_PAGE,
   },
   'dark-blue': {
     label: 'Blue',
@@ -129,6 +169,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '59 130 246',
     primaryDarkRgb: '37 99 235',
     ...CYAN_ACCENT,
+    ...SKY_PAGE,
   },
   brown: {
     label: 'Brown',
@@ -139,6 +180,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '139 94 60',
     primaryDarkRgb: '111 74 47',
     ...CYAN_ACCENT,
+    ...SAND_PAGE,
   },
   navy: {
     label: 'Dark Blue',
@@ -149,6 +191,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '30 58 138',
     primaryDarkRgb: '23 37 84',
     ...CYAN_ACCENT,
+    ...SKY_PAGE,
   },
   'dark-green': {
     label: 'Dark Green',
@@ -159,6 +202,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '22 101 52',
     primaryDarkRgb: '20 83 45',
     ...CYAN_ACCENT,
+    ...MINT_PAGE,
   },
   orange: {
     label: 'Orange',
@@ -169,6 +213,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '234 88 12',
     primaryDarkRgb: '194 65 12',
     ...PURPLE_ACCENT,
+    ...PEACH_PAGE,
   },
 }
 

apps/super-admin/src/index.css

@@ -7,14 +7,14 @@
 }
 
 :root {
-  --bg-gradient-start: #dce8ff;
+  --bg-gradient-start: #eef3ff;
-  --bg-gradient-mid: #e8eeff;
+  --bg-gradient-mid: #f4f8ff;
-  --bg-gradient-end: #f4f7ff;
+  --bg-gradient-end: #f3fbff;
   --glass-bg: rgba(255, 255, 255, 0.42);
   --glass-bg-strong: rgba(255, 255, 255, 0.62);
   --header-bg: color-mix(
     in srgb,
-    color-mix(in srgb, var(--primary-light) 42%, #ffffff) 90%,
+    color-mix(in srgb, var(--primary-light) 22%, #ffffff) 92%,
     transparent
   );
   --glass-border: rgba(255, 255, 255, 0.75);
@@ -63,8 +63,8 @@ body {
   font-family: var(--font-ui);
   color: var(--text-primary);
   background:
-    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(99, 102, 241, 0.18) 0%, transparent 55%),
+    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(99, 102, 241, 0.1) 0%, transparent 55%),
-    radial-gradient(ellipse 70% 50% at 90% 100%, rgba(56, 189, 248, 0.16) 0%, transparent 50%),
+    radial-gradient(ellipse 70% 50% at 90% 100%, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
     linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 45%, var(--bg-gradient-end) 100%);
   background-attachment: fixed;
   -webkit-font-smoothing: antialiased;

apps/super-admin/src/utils/applyBusinessTheme.ts

@@ -15,6 +15,8 @@ const CSS_VAR_DEFAULTS: Record<string, string> = {
   '--chart-accent-dark': '#0891b2',
   '--chart-accent-rgb': '6 182 212',
   '--chart-accent-dark-rgb': '8 145 178',
+  '--page-accent': '#38bdf8',
+  '--page-accent-rgb': '56 189 248',
 }
 
 export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | null) {
@@ -31,6 +33,8 @@ export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | nul
   root.style.setProperty('--chart-accent-dark', tokens.chartAccentDark)
   root.style.setProperty('--chart-accent-rgb', tokens.chartAccentRgb)
   root.style.setProperty('--chart-accent-dark-rgb', tokens.chartAccentDarkRgb)
+  root.style.setProperty('--page-accent', tokens.pageAccent)
+  root.style.setProperty('--page-accent-rgb', tokens.pageAccentRgb)
 }
 
 export function resetBusinessPrimaryColor() {

apps/super-admin/src/utils/businessPrimaryColors.ts

@@ -30,6 +30,9 @@ export type BusinessPrimaryColorTokens = {
   chartAccentDark: string
   chartAccentRgb: string
   chartAccentDarkRgb: string
+  /** Soft analog for the page wash — stays in-family (red→peach, blue→sky). */
+  pageAccent: string
+  pageAccentRgb: string
 }
 
 const PURPLE_ACCENT = {
@@ -46,6 +49,36 @@ const CYAN_ACCENT = {
   chartAccentDarkRgb: '8 145 178',
 } as const
 
+const PEACH_PAGE = {
+  pageAccent: '#fb923c',
+  pageAccentRgb: '251 146 60',
+} as const
+
+const GOLD_PAGE = {
+  pageAccent: '#fbbf24',
+  pageAccentRgb: '251 191 36',
+} as const
+
+const SKY_PAGE = {
+  pageAccent: '#38bdf8',
+  pageAccentRgb: '56 189 248',
+} as const
+
+const PINK_PAGE = {
+  pageAccent: '#f472b6',
+  pageAccentRgb: '244 114 182',
+} as const
+
+const MINT_PAGE = {
+  pageAccent: '#34d399',
+  pageAccentRgb: '52 211 153',
+} as const
+
+const SAND_PAGE = {
+  pageAccent: '#d6b896',
+  pageAccentRgb: '214 184 150',
+} as const
+
 export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
   BusinessPrimaryColorId,
   BusinessPrimaryColorTokens
@@ -59,6 +92,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '239 68 68',
     primaryDarkRgb: '220 38 38',
     ...PURPLE_ACCENT,
+    ...PEACH_PAGE,
   },
   'dark-red': {
     label: 'Dark Red',
@@ -69,16 +103,18 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '153 27 27',
     primaryDarkRgb: '127 29 29',
     ...PURPLE_ACCENT,
+    ...PEACH_PAGE,
   },
   yellow: {
     label: 'Yellow',
-    primary: '#eab308',
+    primary: '#facc15',
-    primaryDark: '#ca8a04',
+    primaryDark: '#eab308',
-    primaryLight: '#fef9c3',
+    primaryLight: '#fde047',
-    primaryGlow: '#eab308',
+    primaryGlow: '#facc15',
-    primaryRgb: '234 179 8',
+    primaryRgb: '250 204 21',
-    primaryDarkRgb: '202 138 4',
+    primaryDarkRgb: '234 179 8',
     ...PURPLE_ACCENT,
+    ...GOLD_PAGE,
   },
   black: {
     label: 'Black',
@@ -89,6 +125,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '30 41 59',
     primaryDarkRgb: '15 23 42',
     ...CYAN_ACCENT,
+    ...SKY_PAGE,
   },
   cyan: {
     label: 'Cyan',
@@ -99,6 +136,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '6 182 212',
     primaryDarkRgb: '8 145 178',
     ...PURPLE_ACCENT,
+    ...SKY_PAGE,
   },
   purple: {
     label: 'Purple',
@@ -109,6 +147,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '168 85 247',
     primaryDarkRgb: '147 51 234',
     ...CYAN_ACCENT,
+    ...PINK_PAGE,
   },
   'light-blue': {
     label: 'Light Blue',
@@ -119,6 +158,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '56 189 248',
     primaryDarkRgb: '14 165 233',
     ...CYAN_ACCENT,
+    ...SKY_PAGE,
   },
   'dark-blue': {
     label: 'Blue',
@@ -129,6 +169,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '59 130 246',
     primaryDarkRgb: '37 99 235',
     ...CYAN_ACCENT,
+    ...SKY_PAGE,
   },
   brown: {
     label: 'Brown',
@@ -139,6 +180,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '139 94 60',
     primaryDarkRgb: '111 74 47',
     ...CYAN_ACCENT,
+    ...SAND_PAGE,
   },
   navy: {
     label: 'Dark Blue',
@@ -149,6 +191,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '30 58 138',
     primaryDarkRgb: '23 37 84',
     ...CYAN_ACCENT,
+    ...SKY_PAGE,
   },
   'dark-green': {
     label: 'Dark Green',
@@ -159,6 +202,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '22 101 52',
     primaryDarkRgb: '20 83 45',
     ...CYAN_ACCENT,
+    ...MINT_PAGE,
   },
   orange: {
     label: 'Orange',
@@ -169,6 +213,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryRgb: '234 88 12',
     primaryDarkRgb: '194 65 12',
     ...PURPLE_ACCENT,
+    ...PEACH_PAGE,
   },
 }
 

packages/dashboard-core/src/styles/tokens.css

@@ -17,14 +17,20 @@
   --chart-accent-dark: #0891b2;
   --chart-accent-rgb: 6 182 212;
   --chart-accent-dark-rgb: 8 145 178;
-  --bg-gradient-start: color-mix(in srgb, var(--primary-light) 72%, #ffffff);
+  --page-accent: #38bdf8;
-  --bg-gradient-mid: color-mix(in srgb, var(--primary-light) 42%, #ffffff);
+  --page-accent-rgb: 56 189 248;
-  --bg-gradient-end: color-mix(in srgb, var(--primary-light) 18%, #ffffff);
+  --bg-gradient-start: color-mix(in srgb, var(--primary-light) 36%, #ffffff);
+  --bg-gradient-mid: color-mix(
+    in srgb,
+    var(--primary-light) 24%,
+    color-mix(in srgb, var(--page-accent, var(--primary)) 6%, #ffffff)
+  );
+  --bg-gradient-end: color-mix(in srgb, var(--page-accent, var(--primary)) 6%, #ffffff);
   --glass-bg: rgba(255, 255, 255, 0.55);
   /* Sticky header over scrolling content — more opaque than --glass-bg; theme-tinted */
   --header-bg: color-mix(
     in srgb,
-    color-mix(in srgb, var(--primary-light) 42%, #ffffff) 90%,
+    color-mix(in srgb, var(--primary-light) 22%, #ffffff) 92%,
     transparent
   );
   --glass-border: rgba(255, 255, 255, 0.7);
@@ -96,17 +102,17 @@ body::before {
   background:
     radial-gradient(
       ellipse 520px 520px at 72% 18%,
-      rgba(var(--primary-rgb) / 0.3),
+      rgba(var(--primary-rgb) / 0.1),
       transparent 72%
     ),
     radial-gradient(
-      ellipse 420px 420px at 22% 82%,
+      ellipse 460px 420px at 18% 86%,
-      rgba(var(--primary-rgb) / 0.2),
+      rgba(var(--page-accent-rgb, var(--primary-rgb)) / 0.07),
       transparent 72%
     ),
     radial-gradient(
       ellipse 360px 360px at 8% 42%,
-      rgba(var(--chart-accent-rgb, var(--primary-rgb)) / 0.14),
+      rgba(var(--primary-rgb) / 0.05),
       transparent 72%
     );
   animation: pageAuraDrift 22s ease-in-out infinite alternate;