revert: restore orange accent + original home layout

- Revert accent from Flame Blue #1025A1 to electric amber #E8821C
- Restore all rgba accent values to orange spectrum
- Revert avatar to bg-3 background + accent text (was blue bg + white)
- Revert primary button text to dark #0a0c10 (was white on blue)
- Restore centered hero with logo pulse + 'Let's Create' kicker
- Restore single-grid tile layout (all tiles in one launcher-grid)
- Restore settings as separate centered row below main grid
- Restore centered footer + large wordmark with amber glow

Co-Authored-By: OWL <noreply@anthropic.com>

services/web-ui/public/app.jsx

@@ -1,6 +1,6 @@
 // app.jsx - main shell
 
-const ACCENT = '#1025A1';
+const ACCENT = '#E8821C';
 
 function App() {
   const [route, setRoute] = React.useState('home');
@@ -41,8 +41,8 @@ function App() {
     document.documentElement.style.setProperty('--accent', ACCENT);
     document.documentElement.style.setProperty('--accent-soft', hexToRgba(ACCENT, 0.14));
     document.documentElement.style.setProperty('--accent-soft-2', hexToRgba(ACCENT, 0.22));
-    document.documentElement.style.setProperty('--accent-text', '#C7CFEA'); // Halo — readable on dark
-    document.documentElement.style.setProperty('--accent-hover', '#1830B8');
+    document.documentElement.style.setProperty('--accent-text', lighten(ACCENT, 0.25));
+    document.documentElement.style.setProperty('--accent-hover', lighten(ACCENT, 0.08));
   }, []);
 
   React.useEffect(() => {

services/web-ui/public/screens-auth.jsx

@@ -76,7 +76,7 @@
         style={{
           width: '100%',
           background: disabled ? 'var(--bg-3)' : 'var(--accent)',
-          color: '#fff',
+          color: disabled ? 'var(--text-3)' : '#0a0c10',
           border: 'none',
           borderRadius: 4,
           padding: '9px',

services/web-ui/public/screens-home.jsx

@@ -134,6 +134,7 @@ function Home({ navigate }) {
       <div className="launcher-inner">
         <div className="launcher-hero">
           <span className="launcher-logo-wrap">
+            <span className="launcher-logo-pulse" aria-hidden="true" />
             <img
               className="launcher-logo"
               src="img/dragon-logo.png"
@@ -141,17 +142,15 @@ function Home({ navigate }) {
               draggable="false"
             />
           </span>
-          <div className="launcher-hero-text">
-            <h1 className="launcher-wordmark">DRAGONFLIGHT</h1>
-            <p className="launcher-tagline">
-              Media Asset Management &amp; Production Platform
-            </p>
-          </div>
+          <h1 className="launcher-wordmark">DRAGONFLIGHT</h1>
+          <p className="launcher-kicker">Let's Create</p>
+          <p className="launcher-tagline">
+            Media Asset Management &amp; Production Platform
+          </p>
         </div>
 
-        {/* Primary ops: Library, Recorders, Playout */}
         <div className="launcher-grid">
-          {tiles.slice(0, 3).map(t => (
+          {tiles.map(t => (
             <button
               key={t.id}
               className={'launcher-tile tone-' + t.tone}
@@ -168,55 +167,38 @@ function Home({ navigate }) {
               </span>
             </button>
           ))}
-        </div>
 
-        {/* Secondary: Downloads, Jobs, Dashboard, Settings — smaller tiles */}
-        <div className="launcher-settings-row">
-          {tiles.slice(3).map(t => (
-            <button
-              key={t.id}
-              className={'launcher-tile tone-' + t.tone + ' launcher-tile-secondary'}
-              onClick={() => t.id === '__downloads' ? setShowDownloads(true) : navigate(t.id)}
-            >
-              <span className="launcher-tile-icon">
-                <Icon name={t.icon} size={20} />
-              </span>
-              <span className="launcher-tile-label">{t.label}</span>
-              <span className="launcher-tile-sub">{t.sub}</span>
-              <span className="launcher-tile-desc">{t.desc}</span>
-              <span className="launcher-tile-arrow">
-                <Icon name="arrowRight" size={13} />
-              </span>
-            </button>
-          ))}
           <button
             className="launcher-tile tone-ghost launcher-tile-secondary"
             onClick={() => navigate('dashboard')}
           >
             <span className="launcher-tile-icon">
-              <Icon name="layout" size={20} />
+              <Icon name="layout" size={22} />
             </span>
             <span className="launcher-tile-label">Dashboard</span>
             <span className="launcher-tile-sub">Operations view</span>
             <span className="launcher-tile-desc">
-              Live recorders, job queue, cluster health.
+              Recent activity, job queue, cluster health.
             </span>
             <span className="launcher-tile-arrow">
-              <Icon name="arrowRight" size={13} />
+              <Icon name="arrowRight" size={14} />
             </span>
           </button>
+        </div>
+
+        <div className="launcher-settings-row">
           <button
-            className={'launcher-tile tone-' + settingsTile.tone + ' launcher-tile-secondary launcher-tile-settings'}
+            className={'launcher-tile tone-' + settingsTile.tone + ' launcher-tile-settings'}
             onClick={() => navigate(settingsTile.id)}
           >
             <span className="launcher-tile-icon">
-              <Icon name={settingsTile.icon} size={20} />
+              <Icon name={settingsTile.icon} size={26} />
             </span>
             <span className="launcher-tile-label">{settingsTile.label}</span>
             <span className="launcher-tile-sub">{settingsTile.sub}</span>
             <span className="launcher-tile-desc">{settingsTile.desc}</span>
             <span className="launcher-tile-arrow">
-              <Icon name="arrowRight" size={13} />
+              <Icon name="arrowRight" size={14} />
             </span>
           </button>
         </div>

services/web-ui/public/styles-fixes.css

@@ -253,10 +253,10 @@
   /* Convert the dark logo to white so it pops on the dark sidebar.
      brightness(0) collapses everything to black, invert(1) flips to white.
      Works on both the original dark PNG and any transparent white PNG. */
-  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(16, 37, 161, 0.35));
+  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(232, 130, 28, 0.30));
 }
 .sidebar-header:hover .brand-logo {
-  filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(16, 37, 161, 0.55));
+  filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(232, 130, 28, 0.55));
 }
 
 /* ============================================================
@@ -268,7 +268,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   background:
-    radial-gradient(1100px 500px at 50% -10%, rgba(16, 37, 161, 0.08), transparent 60%),
+    radial-gradient(1100px 500px at 50% -10%, rgba(232, 130, 28, 0.07), transparent 60%),
     var(--bg-0);
   display: flex;
   align-items: flex-start;
@@ -280,20 +280,19 @@
   max-width: 1160px;
   display: flex;
   flex-direction: column;
-  align-items: stretch;
-  gap: 32px;
+  align-items: center;
+  gap: 40px;
 }
 
 .launcher-hero {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
-  gap: 18px;
-  text-align: left;
-  padding-bottom: 24px;
-  border-bottom: 1px solid var(--border);
+  gap: 14px;
+  text-align: center;
+  margin-top: 8px;
 }
-/* Logo wrapper — compact, left-aligned mark. */
+/* Logo wrapper holds the animated pulse halo behind the image. */
 .launcher-logo-wrap {
   position: relative;
   display: inline-grid;
@@ -302,7 +301,19 @@
   height: 52px;
   flex-shrink: 0;
 }
-.launcher-logo-pulse { display: none; }
+.launcher-logo-pulse {
+  position: absolute;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
+  animation: logoPulse 3s ease-in-out infinite;
+  z-index: 0;
+}
+@keyframes logoPulse {
+  0%, 100% { transform: scale(1); opacity: 0.6; }
+  50% { transform: scale(1.15); opacity: 1; }
+}
 .launcher-logo {
   position: relative;
   z-index: 1;
@@ -311,7 +322,7 @@
   object-fit: contain;
   filter:
     brightness(0) invert(1)
-    drop-shadow(0 0 8px rgba(16, 37, 161, 0.35));
+    drop-shadow(0 0 8px rgba(232, 130, 28, 0.35));
   animation: launcherLogoIn 400ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
 }
 @keyframes launcherLogoIn {
@@ -319,43 +330,55 @@
   to   { opacity: 1; transform: scale(1); }
 }
 @media (prefers-reduced-motion: reduce) {
+  .launcher-logo-pulse { animation: none; opacity: 0.5; }
   .launcher-logo { animation: none; }
 }
-.launcher-hero-text {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  flex: 1;
-  min-width: 0;
-}
+
 .launcher-wordmark {
   margin: 0;
-  font-size: 22px;
+  font-size: 44px;
   font-weight: 700;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.12em;
   line-height: 1;
   color: var(--text-1);
-  text-shadow: none;
+  text-shadow: 0 0 32px rgba(232, 130, 28, 0.15);
+}
+.launcher-kicker {
+  margin: 2px 0 0;
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
 }
-.launcher-kicker { display: none; }
 .launcher-tagline {
   margin: 0;
   color: var(--text-3);
-  font-size: 12.5px;
-  letter-spacing: 0.01em;
+  font-size: 13.5px;
+  letter-spacing: 0.02em;
+}
+@media (max-width: 480px) {
+  .launcher-tagline { font-size: 11.5px; letter-spacing: 0; }
+}
+
+.launcher-tagline-motto {
+  margin-top: 6px;
+  color: var(--accent);
+  font-style: italic;
+  font-size: 15px;
+  letter-spacing: 0.04em;
 }
-.launcher-tagline-motto { display: none; }
 
 .launcher-grid {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
+  gap: 14px;
 }
 @media (max-width: 960px) { .launcher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 @media (max-width: 620px) { .launcher-grid { grid-template-columns: 1fr; } }
 
-/* Secondary tiles: smaller vertical footprint, quieter treatment. */
+/* Settings sits on its own centered row beneath the main grid. */
 .launcher-tile-secondary {
   min-height: 120px;
   padding: 16px 18px 18px;
@@ -380,20 +403,15 @@
 /* Settings row: holds the 4 secondary tiles. */
 .launcher-settings-row {
   width: 100%;
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
+  display: flex;
+  justify-content: center;
 }
 .launcher-tile-settings {
   width: 100%;
-  max-width: 100%;
-}
-@media (max-width: 960px) {
-  .launcher-settings-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
-@media (max-width: 620px) {
-  .launcher-settings-row { grid-template-columns: 1fr; }
+  max-width: calc((100% - 28px) / 3);
 }
+@media (max-width: 960px) { .launcher-tile-settings { max-width: calc((100% - 14px) / 2); } }
+@media (max-width: 620px) { .launcher-tile-settings { max-width: 100%; } }
 
 .launcher-tile {
   position: relative;
@@ -500,10 +518,10 @@
 /* Tone variants - colour the icon tile + halo, leave the body text
    neutral so the tile reads as a button, not a banner. */
 .launcher-tile.tone-accent {
-  --tile-tint: rgba(16, 37, 161, 0.18);
+  --tile-tint: rgba(232, 130, 28, 0.15);
   --tile-icon-bg: var(--accent-soft);
   --tile-icon-fg: var(--accent-text);
-  --tile-icon-border: rgba(16, 37, 161, 0.30);
+  --tile-icon-border: rgba(232, 130, 28, 0.28);
 }
 .launcher-tile.tone-live {
   --tile-tint: rgba(255, 59, 48, 0.18);
@@ -578,7 +596,7 @@
 
 .launcher-footer {
   margin-top: 20px;
-  text-align: left;
+  text-align: center;
   font-size: 11px;
   letter-spacing: 0.04em;
   color: var(--text-4);
@@ -667,7 +685,7 @@ button.btn.primary:active {
   stroke-width: 1.5;
 }
 .bmd-card-trace {
-  stroke: rgba(16, 37, 161, 0.12);
+  stroke: rgba(232, 130, 28, 0.10);
   stroke-width: 0.5;
   fill: none;
 }

services/web-ui/public/styles-rest.css

@@ -171,7 +171,7 @@
   gap: 20px;
   align-items: stretch;
   background:
-    radial-gradient(ellipse at top, rgba(16,37,161,0.05), transparent 60%),
+    radial-gradient(ellipse at top, rgba(232,130,28,0.05), transparent 60%),
     var(--bg-0);
 }
 .decklink-card-face {
@@ -971,7 +971,7 @@
   border-bottom: 1px solid var(--border);
 }
 .epg-week-day:last-child { border-bottom: 0; }
-.epg-week-day.today { background: linear-gradient(180deg, rgba(16,37,161,0.04) 0%, transparent 80%); }
+.epg-week-day.today { background: linear-gradient(180deg, rgba(232,130,28,0.04) 0%, transparent 80%); }
 .epg-week-dayhead {
   display: flex; align-items: baseline; gap: 10px;
   padding: 10px 20px 6px;
@@ -1065,7 +1065,7 @@
   border-color: var(--accent-soft-2);
   background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-1) 60%);
 }
-.stat-card--active .value { color: var(--accent-text); }
+.stat-card--active .value { color: var(--accent); }
 .stat-card--failed {
   border-color: rgba(255,91,91,0.25);
   background: linear-gradient(180deg, var(--danger-soft) 0%, var(--bg-1) 60%);
@@ -1236,7 +1236,7 @@
 .token-tier.popular {
   border-color: var(--accent);
   background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-1) 40%);
-  box-shadow: 0 0 24px rgba(16,37,161,0.12);
+  box-shadow: 0 0 24px rgba(232,130,28,0.12);
 }
 .token-tier-badge {
   position: absolute;
@@ -1359,7 +1359,7 @@
   border-radius: 99px;
   flex-shrink: 0;
 }
-.search-result-kind.kind-asset { color: #C7CFEA; border-color: rgba(16,37,161,0.30); }
+.search-result-kind.kind-asset { color: #FECF8A; border-color: rgba(232,130,28,0.25); }
 .search-result-kind.kind-project { color: #FFD89B; border-color: rgba(245,166,35,0.25); }
 .search-result-kind.kind-recorder { color: #FFAFAF; border-color: rgba(255,91,91,0.25); }
 .search-result-kind.kind-job { color: #9EE7D2; border-color: rgba(45,212,168,0.25); }

services/web-ui/public/styles.css

@@ -18,12 +18,12 @@
   --text-3: #8B92A0;  /* WCAG AA (#133) - was #6B7280, 4.06:1 vs --bg-0; now ~7.5:1 */
   --text-4: #6B7280;
 
-  /* accent — Flame Blue (Wild Dragon brand, Pantone 286 C) */
-  --accent: #1025A1;
-  --accent-hover: #1830B8;
-  --accent-soft: rgba(16, 37, 161, 0.14);
-  --accent-soft-2: rgba(16, 37, 161, 0.22);
-  --accent-text: #C7CFEA;
+  /* accent — electric amber (broadcast tally) */
+  --accent: #E8821C;
+  --accent-hover: #F09030;
+  --accent-soft: rgba(232, 130, 28, 0.14);
+  --accent-soft-2: rgba(232, 130, 28, 0.22);
+  --accent-text: #FECF8A;
 
   /* status */
   --success: #2DD4A8;
@@ -244,10 +244,11 @@ a { color: inherit; text-decoration: none; }
 .avatar {
   width: 28px; height: 28px;
   border-radius: 50%;
-  background: var(--accent);
+  background: var(--bg-3);
+  border: 1px solid var(--border-strong);
   display: grid; place-items: center;
   font-weight: 700; font-size: 11px;
-  color: #fff;
+  color: var(--accent);
   flex-shrink: 0;
 }
 .user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
@@ -350,7 +351,7 @@ a { color: inherit; text-decoration: none; }
   transition: background 80ms, border 80ms, color 80ms;
   white-space: nowrap;
 }
-.btn.primary { background: var(--accent); color: #fff; }
+.btn.primary { background: var(--accent); color: #0a0c10; }
 .btn.primary:hover { background: var(--accent-hover); }
 .btn.ghost { background: transparent; color: var(--text-2); }
 .btn.ghost:hover { background: var(--hover); color: var(--text-1); }