src/App.test.tsx

@@ -35,8 +35,8 @@ describe("React app dashboard state view", () => {
 
     expect(html).toContain('data-ui-theme-toggle="true"');
     expect(html).toContain('data-ui-theme-current="dark"');
-    expect(html).toContain('aria-label="Light theme"');
+    expect(html).toContain('aria-label="Switch to light theme"');
-    expect(html).toContain('aria-pressed="false"');
+    expect(html).not.toContain("aria-pressed");
     expect(html).toContain("Theme");
     expect(html).toContain("Dark");
     expect(html).toContain("Light");

src/app.css

@@ -67,8 +67,8 @@
     --accent: var(--ui-color-accent);
     --accent-foreground: var(--ui-color-canvas);
     --destructive: var(--ui-color-danger);
-    --border: var(--ui-color-border);
+    --border: rgba(244, 244, 244, 0.16);
-    --input: var(--ui-color-border-strong);
+    --input: rgba(244, 244, 244, 0.18);
     --ring: var(--ui-color-accent);
     --chart-1: var(--ui-color-accent);
     --chart-2: var(--ui-color-ok);
@@ -107,11 +107,10 @@ body {
   min-height: 100vh;
   margin: 0;
   background:
-    radial-gradient(circle at 50% 12%, transparent 0 42%, var(--ui-color-backdrop-vignette) 100%),
     linear-gradient(var(--ui-color-grid-line) 1px, transparent 1px),
     linear-gradient(90deg, var(--ui-color-grid-line) 1px, transparent 1px),
     var(--ui-color-canvas);
-  background-size: auto, 40px 40px, 40px 40px, auto;
+  background-size: 48px 48px, 48px 48px, auto;
   color: var(--ui-color-text);
   font-family: var(--ui-font-mono);
   text-rendering: geometricPrecision;

src/lib/ui/components/DashboardFrame.tsx

@@ -22,7 +22,7 @@ export function DashboardFrame({
 
   return (
     <main className="dashboard-frame" aria-labelledby={resolvedTitleId}>
-      <header className="dashboard-frame__header console-header">
+      <header className="dashboard-frame__header">
         <div className="dashboard-frame__title">
           <div className="dashboard-frame__title-copy">
             {dashboard.eyebrow ? <p>{dashboard.eyebrow}</p> : null}

src/lib/ui/components/ServiceRow.tsx

@@ -11,7 +11,6 @@ export function ServiceRow({ service }: ServiceRowProps) {
   const rel = service.link?.external ? "noreferrer" : undefined;
   const content = (
     <>
-      <span className="service-row__status" aria-hidden="true" />
       <IconGlyph name={service.icon} />
       <div className="service-row__main">
         <h3>{service.label}</h3>
@@ -20,11 +19,6 @@ export function ServiceRow({ service }: ServiceRowProps) {
       {service.detail ? (
         <StatusBadge label={service.detail} severity={service.severity} />
       ) : null}
-      {service.link ? (
-        <span className="service-row__launch" aria-hidden="true">
-          <IconGlyph name="mdi:open-in-new" size="sm" />
-        </span>
-      ) : null}
     </>
   );
 

src/lib/ui/components/StatusStrip.tsx

@@ -9,12 +9,7 @@ export interface StatusStripProps {
 
 export function StatusStrip({ id, items, compact = false }: StatusStripProps) {
   return (
-    <section
+    <section className="status-strip" data-compact={compact} data-model-id={id}>
-      className="status-strip"
-      data-compact={compact}
-      data-model-id={id}
-      data-variant={compact ? "cluster" : "system-bus"}
-    >
       {items.map((item) => (
         <FooterCell key={item.id} item={item} />
       ))}

src/lib/ui/components/TelemetryCard.tsx

@@ -6,29 +6,21 @@ import { LineChart } from "./LineChart";
 
 export interface TelemetryCardProps {
   card: UiTelemetryCard;
-  index?: number;
 }
 
-export function TelemetryCard({ card, index }: TelemetryCardProps) {
+export function TelemetryCard({ card }: TelemetryCardProps) {
   const progress = resolveProgress(card);
   const value = formatMetricValue(card.value);
-  const metricIndex = index ? String(index).padStart(2, "0") : undefined;
 
   return (
     <article
       className="telemetry-card"
       data-severity={card.severity}
       data-model-id={card.id}
-      data-metric-index={metricIndex}
     >
       <header>
-        <div>
-          {metricIndex ? (
-            <span className="telemetry-card__index">{metricIndex}</span>
-          ) : null}
-          <h3>{card.label}</h3>
-        </div>
         {card.icon ? <IconGlyph name={card.icon} size="sm" /> : null}
+        <h3>{card.label}</h3>
       </header>
       <strong>{value}</strong>
       {progress !== null ? (
@@ -44,7 +36,7 @@ export function TelemetryCard({ card, index }: TelemetryCardProps) {
         />
       ) : null}
       {card.detail || card.description ? (
-        <p className="telemetry-card__source">{card.detail || card.description}</p>
+        <p>{card.detail || card.description}</p>
       ) : null}
     </article>
   );

src/lib/ui/components/TelemetryGrid.tsx

@@ -1,4 +1,3 @@
-import { useId } from "react";
 import type { UiTelemetryCard } from "../types";
 import { TelemetryCard } from "./TelemetryCard";
 
@@ -7,23 +6,11 @@ export interface TelemetryGridProps {
 }
 
 export function TelemetryGrid({ cards }: TelemetryGridProps) {
-  const headingId = useId();
-  const metricCount = `${cards.length} ${cards.length === 1 ? "Metric" : "Metrics"}`;
-
   return (
-    <section className="telemetry-section" aria-labelledby={headingId}>
+    <section className="telemetry-grid" aria-label="Telemetry">
-      <header className="telemetry-section__header">
+      {cards.map((card) => (
-        <div>
+        <TelemetryCard key={card.id} card={card} />
-          <p>Signal Matrix</p>
-          <h2 id={headingId}>Telemetry</h2>
-        </div>
-        <span>{metricCount}</span>
-      </header>
-      <div className="telemetry-grid">
-        {cards.map((card, index) => (
-          <TelemetryCard key={card.id} card={card} index={index + 1} />
       ))}
-      </div>
     </section>
   );
 }

src/lib/ui/components/ThemeToggle.tsx

@@ -9,11 +9,11 @@ export interface ThemeToggleProps {
 
 export function ThemeToggle({ theme, onThemeChange }: ThemeToggleProps) {
   const nextTheme = getNextUiTheme(theme);
+  const label = `Switch to ${nextTheme} theme`;
 
   return (
     <button
-      aria-label="Light theme"
+      aria-label={label}
-      aria-pressed={theme === "light"}
       className="theme-toggle"
       data-ui-theme-current={theme}
       data-ui-theme-toggle="true"

src/lib/ui/components/render.test.tsx

@@ -5,9 +5,7 @@ import { DashboardFrame } from "./DashboardFrame";
 import { FooterCell } from "./FooterCell";
 import { IconButton } from "./IconButton";
 import { ServiceRow } from "./ServiceRow";
-import { StatusStrip } from "./StatusStrip";
 import { TelemetryCard } from "./TelemetryCard";
-import { TelemetryGrid } from "./TelemetryGrid";
 import { ThemeToggle } from "./ThemeToggle";
 import { dashboardPreviewFixtures } from "../fixtures";
 
@@ -20,10 +18,6 @@ describe("dashboard UI components", () => {
     expect(body).toContain("Operations Console");
     expect(body).toContain("Core Throughput");
     expect(body).toContain("Queue Workers");
-    expect(body).toContain("console-header");
-    expect(body).toContain("telemetry-section");
-    expect(body).toContain("6 Metrics");
-    expect(body).toContain('data-variant="system-bus"');
     expect(body).toContain("data-icon-name=\"mdi:server-network\"");
     expect(body).toContain("data-severity=\"warning\"");
     expect(body).not.toContain("dashboard-title");
@@ -69,28 +63,10 @@ describe("dashboard UI components", () => {
     expect(service).toContain("<a ");
     expect(service).toContain("href=\"https://example.test/service\"");
     expect(service).toContain("target=\"_blank\"");
-    expect(service).toContain('class="service-row__status"');
-    expect(service).toContain('class="service-row__launch"');
     expect(footer).toContain("<a ");
     expect(footer).toContain("href=\"https://example.test/status\"");
   });
 
-  test("renders the status strip as a compact system bus", () => {
-    const body = renderToString(
-      <StatusStrip
-        id="dashboard-status"
-        items={[
-          { id: "system", label: "System", value: "Nominal", severity: "ok" },
-          { id: "refresh", label: "Refresh", value: "15s", severity: "neutral" },
-        ]}
-      />,
-    );
-
-    expect(body).toContain('class="status-strip"');
-    expect(body).toContain('data-variant="system-bus"');
-    expect(body).toContain("Nominal");
-  });
-
   test("renders stable model IDs on group and status containers", () => {
     const body = renderToString(
       <DashboardFrame dashboard={dashboardPreviewFixtures.primary} />,
@@ -143,19 +119,6 @@ describe("dashboard UI components", () => {
     expect(body).toContain('data-chart-library="uplot"');
   });
 
-  test("renders telemetry as a framed instrument section with indexed cards", () => {
-    const body = renderToString(
-      <TelemetryGrid cards={dashboardPreviewFixtures.primary.telemetry.slice(0, 2)} />,
-    );
-
-    expect(body).toContain('class="telemetry-section"');
-    expect(body).toContain("Telemetry");
-    expect(body).toContain("2 Metrics");
-    expect(body).toContain('data-metric-index="01"');
-    expect(body).toContain('class="telemetry-card__index"');
-    expect(body).toContain('class="telemetry-card__source"');
-  });
-
   test("base button controls forward native attributes", () => {
     const button = renderToString(
       <Button
@@ -190,8 +153,7 @@ describe("dashboard UI components", () => {
 
     expect(body).toContain('class="theme-toggle"');
     expect(body).toContain('data-ui-theme-current="light"');
-    expect(body).toContain('aria-label="Light theme"');
+    expect(body).toContain('aria-label="Switch to dark theme"');
-    expect(body).toContain('aria-pressed="true"');
     expect(body).toContain('class="theme-toggle__label"');
     expect(body).toContain('class="theme-toggle__switch"');
     expect(body).toContain('data-active="true"');

src/lib/ui/components/styles.css

@@ -3,47 +3,38 @@
   box-sizing: border-box;
   height: 100vh;
   min-height: 100vh;
-  gap: 0.45rem;
+  gap: 0.36rem;
   grid-template-rows: auto auto minmax(0, 1fr) auto;
   overflow: hidden;
-  padding: clamp(0.5rem, 0.72vw, 0.74rem);
+  padding: clamp(0.42rem, 0.65vw, 0.62rem);
   background:
-    radial-gradient(ellipse at 50% 12%, transparent 0 44%, rgba(0, 0, 0, 0.14) 100%),
+    linear-gradient(90deg, transparent 0 49%, var(--ui-color-frame-spine) 50%, transparent 51%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 9rem),
     var(--ui-color-frame-wash);
-  font-variant-numeric: tabular-nums;
 }
 
 .dashboard-frame__header,
 .dashboard-header {
   display: grid;
-  gap: 0.48rem;
+  gap: 0.5rem;
   align-items: start;
+  border-bottom: var(--ui-border);
 }
 
 .dashboard-frame__header {
-  grid-template-columns: minmax(28rem, 1fr) minmax(31rem, 0.92fr);
+  grid-template-columns: minmax(30rem, 1fr) minmax(30rem, 0.9fr);
-  min-height: 4.82rem;
+  min-height: 5.35rem;
-  border: var(--ui-border-strong);
+  padding-bottom: 0.34rem;
-  background: var(--ui-color-surface-panel);
-  box-shadow: var(--ui-shadow-inset-panel);
-  padding: 0.48rem;
 }
 
 .dashboard-frame__title {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 0.58rem;
+  gap: var(--ui-space-3);
-  align-items: stretch;
+  align-items: start;
   min-width: 0;
-  min-height: 3.72rem;
-  border-right: var(--ui-border);
-  padding-right: 0.48rem;
 }
 
 .dashboard-frame__title-copy {
-  display: grid;
-  align-content: start;
   min-width: 0;
 }
 
@@ -71,9 +62,8 @@
 .dashboard-header p,
 .dashboard-header span {
   color: var(--ui-color-muted);
-  font-size: 0.62rem;
+  font-size: 0.78rem;
   font-weight: 800;
-  letter-spacing: 0.04em;
 }
 
 .dashboard-frame h1,
@@ -81,10 +71,10 @@
   max-width: 100%;
   overflow-wrap: anywhere;
   font-family: var(--ui-font-display);
-  font-size: clamp(2.05rem, 3vw, 2.78rem);
+  font-size: clamp(2.2rem, 3.3vw, 2.95rem);
   font-weight: 850;
   letter-spacing: 0;
-  line-height: 0.82;
+  line-height: 0.8;
   white-space: nowrap;
 }
 
@@ -92,14 +82,14 @@
   display: grid;
   grid-template-columns: minmax(15rem, 0.66fr) minmax(17rem, 1fr);
   justify-content: end;
-  gap: 0.48rem;
+  gap: 0.5rem;
 }
 
 .dashboard-frame__panels {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   align-content: start;
-  gap: 0.45rem;
+  gap: 0.36rem;
   min-height: 0;
   overflow: hidden;
 }
@@ -112,59 +102,12 @@
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-.telemetry-section {
-  display: grid;
-  min-height: 0;
-  border: var(--ui-border-strong);
-  background: var(--ui-color-surface-panel);
-  box-shadow: var(--ui-shadow-inset-panel);
-}
-
-.telemetry-section__header {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  min-height: 1.48rem;
-  border-bottom: var(--ui-border);
-  padding: 0.22rem 0.5rem;
-}
-
-.telemetry-section__header p,
-.telemetry-section__header h2,
-.telemetry-section__header span {
-  margin: 0;
-  text-transform: uppercase;
-}
-
-.telemetry-section__header p {
-  color: var(--ui-color-muted);
-  font-size: 0.46rem;
-  font-weight: 800;
-  letter-spacing: 0.08em;
-}
-
-.telemetry-section__header h2 {
-  color: var(--ui-color-text);
-  font-size: 0.68rem;
-  font-weight: 850;
-  letter-spacing: 0.04em;
-}
-
-.telemetry-section__header > span {
-  border: var(--ui-border);
-  color: var(--ui-color-text-secondary);
-  font-size: 0.5rem;
-  font-weight: 850;
-  letter-spacing: 0.06em;
-  padding: 0.18rem 0.36rem;
-}
-
 .telemetry-grid {
   display: grid;
   grid-template-columns: repeat(8, minmax(0, 1fr));
   gap: 1px;
-  border: 0;
+  border: var(--ui-border);
-  background: var(--ui-color-border-subtle);
+  background: var(--ui-color-line);
 }
 
 .telemetry-card,
@@ -177,60 +120,44 @@
 }
 
 .telemetry-card {
-  position: relative;
   display: grid;
-  min-height: 4.72rem;
+  min-height: 5.15rem;
-  gap: 0.22rem;
+  gap: 0.25rem;
   background: linear-gradient(
     180deg,
     var(--ui-color-card-gradient-start),
     var(--ui-color-card-gradient-end)
   );
-  border-left: 2px solid var(--ui-color-ok);
+  padding: 0.45rem 0.55rem 0.42rem;
-  box-shadow: var(--ui-shadow-inset-panel);
-  padding: 0.34rem 0.46rem 0.36rem;
 }
 
 .telemetry-card[data-severity="warning"] {
   border-color: color-mix(in srgb, var(--ui-color-warning), transparent 42%);
-  border-left-color: var(--ui-color-warning);
 }
 
 .telemetry-card[data-severity="danger"] {
   border-color: color-mix(in srgb, var(--ui-color-danger), transparent 22%);
-  border-left-color: var(--ui-color-danger);
   color: var(--ui-color-danger);
 }
 
 .telemetry-card[data-severity="stale"],
 .telemetry-card[data-severity="unavailable"] {
-  border-left-color: var(--ui-color-stale);
   color: var(--ui-color-stale);
 }
 
 .telemetry-card[data-severity="loading"] {
-  border-left-color: var(--ui-color-accent);
   color: var(--ui-color-accent);
 }
 
-.telemetry-card:hover {
-  background: var(--ui-color-surface-raised);
-}
-
 .telemetry-card header {
-  display: grid;
+  display: flex;
-  grid-template-columns: minmax(0, 1fr) auto;
   min-width: 0;
-  align-items: start;
+  align-items: center;
-  gap: 0.25rem;
+  gap: 0.35rem;
 }
 
 .telemetry-card header .icon-glyph {
-  width: 1rem;
+  display: none;
-  height: 1rem;
-  border-color: var(--ui-color-border-subtle);
-  background: transparent;
-  color: var(--ui-color-muted);
 }
 
 .telemetry-card h3,
@@ -258,23 +185,13 @@
 
 .telemetry-card h3 {
   overflow-wrap: anywhere;
-  color: var(--ui-color-text-secondary);
+  color: inherit;
-  font-size: 0.52rem;
+  font-size: 0.58rem;
-  font-weight: 850;
+  font-weight: 800;
   line-height: 1.02;
   white-space: normal;
 }
 
-.telemetry-card__index {
-  display: inline-grid;
-  min-width: 1.05rem;
-  margin-bottom: 0.08rem;
-  color: var(--ui-color-muted);
-  font-size: 0.45rem;
-  font-weight: 850;
-  line-height: 1;
-}
-
 .service-row h3 {
   font-size: 0.72rem;
 }
@@ -283,10 +200,10 @@
 .module-card strong {
   display: block;
   font-family: var(--ui-font-display);
-  font-size: clamp(1.45rem, 2.25vw, 2.05rem);
+  font-size: clamp(1.55rem, 2.45vw, 2.22rem);
   font-weight: 800;
   letter-spacing: 0;
-  line-height: 0.78;
+  line-height: 0.76;
   white-space: nowrap;
 }
 
@@ -301,8 +218,7 @@
   white-space: nowrap;
 }
 
-.telemetry-card p,
+.telemetry-card p {
-.telemetry-card__source {
   font-size: 0.49rem;
   line-height: 1.05;
 }
@@ -314,7 +230,7 @@
 
 .telemetry-card__bar,
 .progress-meter {
-  height: 0.2rem;
+  height: 0.25rem;
   border: var(--ui-border);
   background: var(--ui-color-surface-inset);
 }
@@ -334,18 +250,10 @@
 .line-chart {
   position: relative;
   min-width: 0;
-  height: 0.86rem;
+  height: 1rem;
   color: var(--ui-color-accent);
 }
 
-.line-chart::before {
-  position: absolute;
-  inset: 50% 0 auto;
-  height: 1px;
-  background: var(--ui-color-border-subtle);
-  content: "";
-}
-
 .line-chart[data-severity="warning"] {
   color: var(--ui-color-warning);
 }
@@ -379,43 +287,37 @@
 .module-card {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 0.45rem;
+  gap: 0.5rem;
   align-items: start;
   min-width: 0;
-  min-height: 3.72rem;
+  min-height: 4.15rem;
-  border: var(--ui-border);
   background: var(--ui-color-surface-module);
-  box-shadow: var(--ui-shadow-inset-panel);
+  padding: 0.5rem;
-  padding: 0.42rem 0.48rem;
 }
 
 .module-card h2 {
   color: var(--ui-color-muted);
-  font-size: 0.48rem;
+  font-size: 0.56rem;
-  font-weight: 850;
-  letter-spacing: 0.08em;
   line-height: 1;
   text-transform: uppercase;
 }
 
 .module-card strong {
-  margin-top: 0.12rem;
+  margin-top: 0.15rem;
-  font-size: clamp(1.1rem, 1.55vw, 1.56rem);
+  font-size: clamp(1.25rem, 1.75vw, 1.72rem);
   line-height: 0.82;
   overflow-wrap: anywhere;
 }
 
 .module-card p {
-  margin-top: 0.18rem;
+  margin-top: 0.2rem;
-  color: var(--ui-color-muted);
+  font-size: 0.49rem;
-  font-size: 0.45rem;
   line-height: 1.05;
 }
 
 .module-card[data-severity="ok"] .icon-glyph {
-  border-color: color-mix(in srgb, var(--ui-color-ok), transparent 44%);
+  background: var(--ui-color-accent);
-  background: var(--ui-color-accent-soft);
+  color: var(--ui-color-accent-contrast);
-  color: var(--ui-color-ok);
 }
 
 .module-card[data-severity="warning"] {
@@ -439,10 +341,10 @@
 
 .service-row {
   display: grid;
-  grid-template-columns: 0.28rem auto minmax(0, 1fr) auto auto;
+  grid-template-columns: auto minmax(0, 1fr) auto;
   gap: 0.24rem;
   align-items: center;
-  min-height: 2.08rem;
+  min-height: 2.02rem;
   border: 0;
   border-bottom: var(--ui-border);
   background: transparent;
@@ -451,42 +353,19 @@
   text-decoration: none;
 }
 
-.service-row__status {
-  width: 0.26rem;
-  height: 0.72rem;
-  background: var(--ui-color-muted);
-}
-
-.service-row[data-severity="ok"] .service-row__status {
-  background: var(--ui-color-ok);
-}
-
 .service-row[data-severity="warning"] {
   border-bottom-color: color-mix(in srgb, var(--ui-color-warning), transparent 54%);
 }
 
-.service-row[data-severity="warning"] .service-row__status {
-  background: var(--ui-color-warning);
-}
-
 .service-row[data-severity="danger"],
 .service-row[data-severity="unavailable"] {
   border-bottom-color: color-mix(in srgb, var(--ui-color-danger), transparent 50%);
 }
 
-.service-row[data-severity="danger"] .service-row__status,
-.service-row[data-severity="unavailable"] .service-row__status {
-  background: var(--ui-color-danger);
-}
-
 .service-row[data-severity="loading"] {
   border-bottom-color: color-mix(in srgb, var(--ui-color-accent), transparent 56%);
 }
 
-.service-row[data-severity="loading"] .service-row__status {
-  background: var(--ui-color-accent);
-}
-
 .service-row:where(a):hover {
   border-bottom-color: var(--ui-color-accent);
   background: var(--ui-color-hover);
@@ -496,30 +375,16 @@
   min-width: 0;
 }
 
-.service-row__launch {
-  display: inline-grid;
-  place-items: center;
-  color: var(--ui-color-muted);
-}
-
-.service-row__launch .icon-glyph {
-  width: 1rem;
-  height: 1rem;
-  border-color: var(--ui-color-border-subtle);
-  background: transparent;
-}
-
 .status-badge {
   display: inline-grid;
   min-height: 1.12rem;
   align-items: center;
   border: var(--ui-border);
-  background: var(--ui-color-surface-inset);
+  padding: 0 0.3rem;
-  padding: 0 0.32rem;
   color: var(--ui-color-muted);
-  font-size: 0.5rem;
+  font-size: 0.55rem;
   font-weight: 800;
-  letter-spacing: 0.04em;
+  letter-spacing: 0;
   text-transform: uppercase;
   white-space: nowrap;
 }
@@ -551,7 +416,7 @@
 .footer-cell {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
-  min-height: 1.72rem;
+  min-height: 1.9rem;
   align-items: center;
   background: var(--ui-color-surface-footer);
   color: inherit;
@@ -561,7 +426,7 @@
 .footer-cell span,
 .footer-cell strong {
   min-width: 0;
-  padding: 0.29rem 0.52rem;
+  padding: 0.34rem 0.52rem;
   overflow-wrap: anywhere;
   text-transform: uppercase;
 }
@@ -570,19 +435,18 @@
   height: 100%;
   border-right: var(--ui-border);
   color: var(--ui-color-muted);
-  font-size: 0.48rem;
+  font-size: 0.52rem;
   font-weight: 800;
-  letter-spacing: 0.04em;
 }
 
 .footer-cell strong {
   color: var(--ui-color-text);
-  font-size: 0.54rem;
+  font-size: 0.58rem;
-  font-weight: 850;
 }
 
 .footer-cell[data-severity="ok"] strong {
-  color: var(--ui-color-ok);
+  background: var(--ui-color-accent);
+  color: var(--ui-color-accent-contrast);
 }
 
 .footer-cell[data-severity="warning"] strong {
@@ -610,9 +474,8 @@
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
   gap: 1px;
-  border: var(--ui-border-strong);
+  border: var(--ui-border);
-  background: var(--ui-color-border);
+  background: var(--ui-color-line);
-  box-shadow: var(--ui-shadow-inset-panel);
 }
 
 .status-strip[data-compact="true"] {
@@ -622,8 +485,7 @@
 .panel {
   position: relative;
   min-width: 0;
-  background: var(--ui-color-surface-panel);
+  box-shadow: var(--ui-shadow-hard);
-  box-shadow: var(--ui-shadow-inset-panel);
 }
 
 .panel::before,
@@ -650,15 +512,14 @@
 }
 
 .panel__header {
-  border-bottom: var(--ui-border);
+  padding: 0.42rem 0.55rem 0;
-  padding: 0.38rem 0.55rem 0.3rem;
 }
 
 .panel h2 {
   font-family: var(--ui-font-display);
-  font-size: clamp(1.1rem, 1.62vw, 1.55rem);
+  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
   font-weight: 800;
-  line-height: 0.9;
+  line-height: 0.92;
   text-transform: uppercase;
 }
 
@@ -670,11 +531,7 @@
 
 .service-panel .panel__body {
   gap: 0;
-  padding-block: 0.18rem 0.32rem;
+  padding-block: 0.24rem 0.42rem;
-}
-
-.service-panel[data-layout="grid"] .service-row {
-  min-height: 1.95rem;
 }
 
 .ui-button,
@@ -724,16 +581,11 @@
   letter-spacing: 0;
   padding: 0.13rem;
   text-transform: uppercase;
-  box-shadow: var(--ui-shadow-inset-panel);
+  box-shadow: var(--ui-shadow-hard);
 }
 
 .theme-toggle:hover {
   border-color: var(--ui-color-accent);
-  background: var(--ui-color-surface-raised);
-}
-
-.theme-toggle:active {
-  background: var(--ui-color-surface-inset);
 }
 
 .theme-toggle__label {
@@ -771,8 +623,8 @@
 
 .theme-toggle__cell[data-active="true"] {
   border-color: var(--ui-color-accent);
-  background: var(--ui-color-accent-soft);
+  background: var(--ui-color-accent);
-  color: var(--ui-color-accent);
+  color: var(--ui-color-accent-contrast);
 }
 
 .theme-toggle__cell > span {
@@ -862,34 +714,13 @@
   }
 }
 
-@media (max-width: 1180px), (max-height: 840px) {
+@media (max-width: 780px) {
   .dashboard-frame {
-    grid-template-rows: auto auto auto auto;
     height: auto;
     min-height: 100vh;
     overflow: visible;
   }
 
-  .dashboard-frame__panels {
-    overflow: visible;
-  }
-}
-
-@media (max-width: 1180px) {
-  .dashboard-frame__header {
-    grid-template-columns: 1fr;
-  }
-
-  .dashboard-frame__panels {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .dashboard-frame__panels .service-panel[data-layout="grid"] .panel__body {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 780px) {
   .dashboard-frame__header,
   .dashboard-frame__title,
   .dashboard-header,
@@ -898,17 +729,6 @@
     grid-template-columns: 1fr;
   }
 
-  .dashboard-frame__header {
-    min-height: 0;
-  }
-
-  .dashboard-frame__title {
-    border-right: 0;
-    border-bottom: var(--ui-border);
-    padding-right: 0;
-    padding-bottom: 0.48rem;
-  }
-
   .dashboard-frame h1,
   .dashboard-header h1 {
     white-space: normal;
@@ -931,27 +751,11 @@
 
 @media (max-width: 580px) {
   .service-row {
-    grid-template-columns: 0.28rem auto minmax(0, 1fr) auto;
+    grid-template-columns: auto minmax(0, 1fr);
-    min-height: 2.75rem;
   }
 
   .service-row .status-badge {
-    grid-column: 3;
+    grid-column: 2;
     justify-self: start;
   }
-
-  .service-row__launch {
-    grid-column: 4;
-    grid-row: 1;
-  }
-
-  .status-strip {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 420px) {
-  .status-strip {
-    grid-template-columns: 1fr;
-  }
 }

src/lib/ui/tokens.css

@@ -1,46 +1,32 @@
 :root,
 [data-ui-theme="dark"] {
   color-scheme: dark;
-  --ui-color-background: #0b0f0d;
+  --ui-color-canvas: #020302;
-  --ui-color-backdrop-edge: #020403;
+  --ui-color-surface: #060706;
-  --ui-color-canvas: #0b0f0d;
+  --ui-color-surface-raised: #0b0d0c;
-  --ui-color-surface: #111713;
+  --ui-color-surface-panel: rgba(3, 4, 3, 0.86);
-  --ui-color-surface-raised: #151d18;
+  --ui-color-surface-module: rgba(6, 8, 7, 0.82);
-  --ui-color-surface-elevated: #19231d;
+  --ui-color-surface-footer: rgba(2, 3, 2, 0.92);
-  --ui-color-surface-panel: rgba(15, 21, 17, 0.94);
+  --ui-color-surface-inset: #030403;
-  --ui-color-surface-module: rgba(18, 25, 21, 0.96);
+  --ui-color-surface-icon: #050605;
-  --ui-color-surface-footer: rgba(11, 15, 13, 0.98);
+  --ui-color-line: rgba(244, 244, 244, 0.16);
-  --ui-color-surface-inset: #070b09;
+  --ui-color-line-strong: rgba(244, 244, 244, 0.32);
-  --ui-color-surface-icon: #101711;
+  --ui-color-grid-line: rgba(255, 255, 255, 0.035);
-  --ui-color-border-subtle: rgba(209, 222, 198, 0.13);
+  --ui-color-frame-spine: rgba(255, 255, 255, 0.08);
-  --ui-color-border: rgba(211, 225, 199, 0.2);
+  --ui-color-frame-wash: rgba(0, 0, 0, 0.18);
-  --ui-color-border-strong: rgba(219, 234, 207, 0.34);
+  --ui-color-card-gradient-start: rgba(13, 15, 14, 0.82);
-  --ui-color-line: var(--ui-color-border);
+  --ui-color-card-gradient-end: rgba(2, 3, 2, 0.92);
-  --ui-color-line-strong: var(--ui-color-border-strong);
+  --ui-color-hover: rgba(244, 244, 244, 0.035);
-  --ui-color-grid-line: rgba(222, 238, 211, 0.045);
+  --ui-color-text: #f3f4ed;
-  --ui-color-backdrop-vignette: rgba(0, 0, 0, 0.24);
+  --ui-color-muted: #8d948c;
-  --ui-color-frame-spine: rgba(198, 230, 160, 0.1);
+  --ui-color-dim: #555b55;
-  --ui-color-frame-wash: rgba(10, 15, 12, 0.52);
+  --ui-color-accent: #d7ff00;
-  --ui-color-card-gradient-start: rgba(24, 33, 27, 0.94);
+  --ui-color-accent-contrast: #050605;
-  --ui-color-card-gradient-end: rgba(10, 15, 12, 0.98);
+  --ui-color-ok: #bfff00;
-  --ui-color-hover: rgba(190, 225, 146, 0.075);
+  --ui-color-warning: #ffb020;
-  --ui-color-text-primary: #edf1e6;
+  --ui-color-danger: #ff1744;
-  --ui-color-text-secondary: #b4bda9;
+  --ui-color-stale: #82909a;
-  --ui-color-text-muted: #7f8a7a;
+  --ui-color-unavailable: #65707a;
-  --ui-color-text: var(--ui-color-text-primary);
-  --ui-color-muted: var(--ui-color-text-muted);
-  --ui-color-dim: #4e594d;
-  --ui-color-accent: #c7ef5f;
-  --ui-color-accent-soft: rgba(199, 239, 95, 0.12);
-  --ui-color-accent-contrast: #0a100b;
-  --ui-color-success: #9fd85a;
-  --ui-color-ok: var(--ui-color-success);
-  --ui-color-warning: #d99a3a;
-  --ui-color-critical: #f04463;
-  --ui-color-danger: var(--ui-color-critical);
-  --ui-color-info: #86a8bd;
-  --ui-color-stale: #8a9a93;
-  --ui-color-unavailable: #6f7a76;
   --ui-font-mono: "IBM Plex Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;
   --ui-font-display: "Teko", "IBM Plex Mono", "Roboto Mono", monospace;
   --ui-space-1: 0.25rem;
@@ -50,12 +36,9 @@
   --ui-space-5: 1.25rem;
   --ui-space-6: 1.5rem;
   --ui-radius-none: 0;
-  --ui-border: 1px solid var(--ui-color-border);
+  --ui-border: 1px solid var(--ui-color-line);
-  --ui-border-strong: 1px solid var(--ui-color-border-strong);
+  --ui-border-strong: 1px solid var(--ui-color-line-strong);
-  --ui-shadow-hard: 0 0 0 1px rgba(199, 239, 95, 0.1) inset;
+  --ui-shadow-hard: 0 0 0 1px rgba(215, 255, 0, 0.12) inset;
-  --ui-shadow-inset-panel:
-    inset 0 1px 0 rgba(255, 255, 255, 0.04),
-    inset 0 -1px 0 rgba(0, 0, 0, 0.32);
   --ui-z-base: 0;
   --ui-z-panel: 1;
   --ui-z-overlay: 10;
@@ -65,50 +48,33 @@
 
 [data-ui-theme="light"] {
   color-scheme: light;
-  --ui-color-background: #eef2e7;
+  --ui-color-canvas: #f3f5ed;
-  --ui-color-backdrop-edge: #d7decf;
+  --ui-color-surface: #ffffff;
-  --ui-color-canvas: #eef2e7;
+  --ui-color-surface-raised: #eef1e7;
-  --ui-color-surface: #f9fbf3;
+  --ui-color-surface-panel: rgba(255, 255, 255, 0.9);
-  --ui-color-surface-raised: #f1f5ea;
+  --ui-color-surface-module: rgba(255, 255, 255, 0.84);
-  --ui-color-surface-elevated: #ffffff;
+  --ui-color-surface-footer: rgba(248, 250, 241, 0.94);
-  --ui-color-surface-panel: rgba(250, 252, 245, 0.94);
+  --ui-color-surface-inset: #e4e8db;
-  --ui-color-surface-module: rgba(252, 254, 247, 0.96);
+  --ui-color-surface-icon: #f8faf1;
-  --ui-color-surface-footer: rgba(239, 243, 233, 0.98);
+  --ui-color-line: rgba(19, 25, 19, 0.18);
-  --ui-color-surface-inset: #e1e8d9;
+  --ui-color-line-strong: rgba(19, 25, 19, 0.34);
-  --ui-color-surface-icon: #edf3e6;
+  --ui-color-grid-line: rgba(19, 25, 19, 0.055);
-  --ui-color-border-subtle: rgba(32, 43, 29, 0.12);
+  --ui-color-frame-spine: rgba(19, 25, 19, 0.1);
-  --ui-color-border: rgba(32, 43, 29, 0.22);
+  --ui-color-frame-wash: rgba(255, 255, 255, 0.48);
-  --ui-color-border-strong: rgba(32, 43, 29, 0.38);
+  --ui-color-card-gradient-start: rgba(255, 255, 255, 0.92);
-  --ui-color-line: var(--ui-color-border);
+  --ui-color-card-gradient-end: rgba(230, 235, 221, 0.88);
-  --ui-color-line-strong: var(--ui-color-border-strong);
+  --ui-color-hover: rgba(19, 25, 19, 0.055);
-  --ui-color-grid-line: rgba(32, 43, 29, 0.055);
+  --ui-color-text: #11170f;
-  --ui-color-backdrop-vignette: rgba(31, 44, 29, 0.08);
+  --ui-color-muted: #5d665a;
-  --ui-color-frame-spine: rgba(32, 43, 29, 0.09);
+  --ui-color-dim: #7d8779;
-  --ui-color-frame-wash: rgba(255, 255, 255, 0.54);
+  --ui-color-accent: #516f00;
-  --ui-color-card-gradient-start: rgba(255, 255, 255, 0.96);
-  --ui-color-card-gradient-end: rgba(229, 235, 221, 0.92);
-  --ui-color-hover: rgba(54, 81, 25, 0.065);
-  --ui-color-text-primary: #11180f;
-  --ui-color-text-secondary: #3f4b3b;
-  --ui-color-text-muted: #667260;
-  --ui-color-text: var(--ui-color-text-primary);
-  --ui-color-muted: var(--ui-color-text-muted);
-  --ui-color-dim: #7e8878;
-  --ui-color-accent: #4f7200;
-  --ui-color-accent-soft: rgba(79, 114, 0, 0.11);
   --ui-color-accent-contrast: #ffffff;
-  --ui-color-success: #436f00;
+  --ui-color-ok: #4c7400;
-  --ui-color-ok: var(--ui-color-success);
+  --ui-color-warning: #a45b00;
-  --ui-color-warning: #915c00;
+  --ui-color-danger: #bd173f;
-  --ui-color-critical: #b7173c;
+  --ui-color-stale: #596975;
-  --ui-color-danger: var(--ui-color-critical);
+  --ui-color-unavailable: #6c7479;
-  --ui-color-info: #476a7c;
+  --ui-shadow-hard: 0 0 0 1px rgba(81, 111, 0, 0.18) inset;
-  --ui-color-stale: #596b64;
-  --ui-color-unavailable: #68726c;
-  --ui-shadow-hard: 0 0 0 1px rgba(79, 114, 0, 0.14) inset;
-  --ui-shadow-inset-panel:
-    inset 0 1px 0 rgba(255, 255, 255, 0.72),
-    inset 0 -1px 0 rgba(31, 44, 29, 0.08);
 }
 
 html {
@@ -120,11 +86,10 @@ body {
   min-height: 100vh;
   margin: 0;
   background:
-    radial-gradient(circle at 50% 12%, transparent 0 42%, var(--ui-color-backdrop-vignette) 100%),
     linear-gradient(var(--ui-color-grid-line) 1px, transparent 1px),
     linear-gradient(90deg, var(--ui-color-grid-line) 1px, transparent 1px),
     var(--ui-color-canvas);
-  background-size: auto, 40px 40px, 40px 40px, auto;
+  background-size: 48px 48px, 48px 48px, auto;
   color: var(--ui-color-text);
   font-family: var(--ui-font-mono);
   text-rendering: geometricPrecision;

tests/e2e/dashboard.spec.ts

@@ -109,61 +109,6 @@ test.describe("dashboard page QA gate", () => {
     expect(metrics.clippedItems).toEqual([]);
   });
 
-  test("keeps intermediate viewports scrollable without horizontal clipping", async ({
-    page,
-  }, testInfo) => {
-    test.skip(testInfo.project.name !== "chromium-desktop");
-
-    for (const viewport of [
-      { width: 900, height: 956 },
-      { width: 1024, height: 768 },
-    ]) {
-      await page.setViewportSize(viewport);
-      await page.goto("/");
-      await waitForDashboardReady(page);
-
-      const metrics = await page.evaluate(() => {
-        const footer = document.querySelector("[data-model-id='footer-status']");
-        const trackedElements = [
-          document.querySelector(".dashboard-frame__header"),
-          ...document.querySelectorAll(".telemetry-card"),
-          ...document.querySelectorAll(".service-panel"),
-          document.querySelector("[data-model-id='runtime-health']"),
-          footer,
-        ].filter((element): element is Element => Boolean(element));
-
-        const footerRect = footer?.getBoundingClientRect();
-        const clippedRight = trackedElements
-          .map((element) => {
-            const rect = element.getBoundingClientRect();
-            return {
-              id: element.getAttribute("data-model-id") || element.className,
-              right: rect.right,
-              width: rect.width,
-            };
-          })
-          .filter((item) => item.right > window.innerWidth + 1 || item.width <= 0);
-
-        return {
-          clippedRight,
-          footerBottomInDocument: (footerRect?.bottom ?? 0) + window.scrollY,
-          frameOverflow: window.getComputedStyle(
-            document.querySelector(".dashboard-frame") as Element,
-          ).overflow,
-          scrollHeight: document.documentElement.scrollHeight,
-          scrollWidth: document.documentElement.scrollWidth,
-        };
-      });
-
-      expect(metrics.scrollWidth).toBeLessThanOrEqual(viewport.width);
-      expect(metrics.scrollHeight).toBeGreaterThanOrEqual(
-        Math.ceil(metrics.footerBottomInDocument),
-      );
-      expect(metrics.frameOverflow).not.toBe("hidden");
-      expect(metrics.clippedRight).toEqual([]);
-    }
-  });
-
   test("renders bookmark rows as a compact divider list", async ({ page }, testInfo) => {
     test.skip(testInfo.project.name !== "chromium-desktop");
 
@@ -265,9 +210,10 @@ test.describe("dashboard page QA gate", () => {
 
     await expect(page.getByRole("main")).toHaveCount(1);
     await page.keyboard.press("Tab");
-    const themeToggle = page.getByRole("button", { name: "Light theme" });
+    const themeToggle = page.getByRole("button", {
+      name: "Switch to light theme",
+    });
     await expect(themeToggle).toBeFocused();
-    await expect(themeToggle).toHaveAttribute("aria-pressed", "false");
     const themeFocusBoxShadow = await themeToggle.evaluate((element) => {
       return window.getComputedStyle(element).boxShadow;
     });
@@ -301,12 +247,8 @@ test.describe("dashboard page QA gate", () => {
 
     await page.goto("/");
     await waitForDashboardReady(page);
-    await page.getByRole("button", { name: "Light theme" }).click();
+    await page.getByRole("button", { name: "Switch to light theme" }).click();
     await expect(page.locator("html")).toHaveAttribute("data-ui-theme", "light");
-    await expect(page.getByRole("button", { name: "Light theme" })).toHaveAttribute(
-      "aria-pressed",
-      "true",
-    );
 
     const results = await new AxeBuilder({ page }).analyze();
     expect(results.violations).toEqual([]);
@@ -349,17 +291,15 @@ test.describe("dashboard page QA gate", () => {
     await expect(page.locator("html")).toHaveAttribute("data-ui-theme", "dark");
 
     const switchToLight = page.getByRole("button", {
-      name: "Light theme",
+      name: "Switch to light theme",
     });
     await expect(switchToLight).toBeVisible();
-    await expect(switchToLight).toHaveAttribute("aria-pressed", "false");
     await switchToLight.click();
 
     await expect(page.locator("html")).toHaveAttribute("data-ui-theme", "light");
-    await expect(page.getByRole("button", { name: "Light theme" })).toHaveAttribute(
+    await expect(
-      "aria-pressed",
+      page.getByRole("button", { name: "Switch to dark theme" }),
-      "true",
+    ).toBeVisible();
-    );
 
     await page.reload();
     await waitForDashboardReady(page);

tests/e2e/storybook.spec.ts

@@ -21,15 +21,11 @@ test.describe("Storybook theme QA", () => {
 
     await expect(page.locator("html")).toHaveAttribute("data-ui-theme", "light");
     await expect(
-      page.getByRole("button", { name: "Light theme" }),
+      page.getByRole("button", { name: "Switch to dark theme" }),
     ).toBeVisible();
-    await expect(page.getByRole("button", { name: "Light theme" })).toHaveAttribute(
-      "aria-pressed",
-      "true",
-    );
     await expect(page.locator("body")).toHaveCSS(
       "background-color",
-      "rgb(238, 242, 231)",
+      "rgb(243, 245, 237)",
     );
     expect(
       consoleMessages.filter((message) =>