diff --git a/web/DESIGN_SPEC.md b/web/DESIGN_SPEC.md
index 788be14..a0d1bbf 100644
--- a/web/DESIGN_SPEC.md
+++ b/web/DESIGN_SPEC.md
@@ -25,8 +25,10 @@ These are enforceable review criteria, not vibes.
 
 - `font-serif` (Sorts Mill Goudy, 400) — **titles only**: welcome line, section titles, panel/module
   titles, group headers. Never for body, buttons, labels, or data.
-- `font-body` (system sans) — everything that is prose or UI copy.
-- `font-mono` — all data: numbers, timestamps, urls, types, meta lines, status words.
+- `font-body` (Geist) — everything that is prose or UI copy. A technical grotesk, not the system
+  sans — the dashboard must read with a consistent typographic voice across platforms.
+- `font-mono` (Geist Mono) — all data: numbers, timestamps, urls, types, meta lines, status words.
+  This is the workhorse of the archival motif; nearly every SpecHeader / ledger / stamp uses it.
 - Numerals never jitter: `font-variant-numeric: tabular-nums` is set globally on `body`.
 - Labels above data use `text-[10px] uppercase tracking-wider text-text-tertiary`.
 
@@ -107,6 +109,73 @@ Non-interactive things (section titles, labels, data rows that aren't links) nev
 - WYSIWYG: edit mode must not reshape view mode. Nothing appears in edit mode that occupies layout
   space the view mode doesn't have (edit affordances live in headers, overlays, or handles).
 
+### Spec-sheet primitives (data-dense modules)
+
+Modules that report structured data — media providers, server telemetry — render like a printed
+spec sheet, **not** as a stack of nested cards. The shared primitives in
+`components/Tree/specPrimitives.tsx` encode this; reach for them before inventing per-module markup.
+
+- **No boxes-in-boxes.** A module never wraps sub-groups in their own bordered/`bg-surface` cards.
+  Internal structure comes from hairline rules and a shared alignment grid.
+- **`SpecCaption`** titles a block: a mono `uppercase tracking-[0.14em]` caption on a single
+  bottom hairline, with an optional tabular aside on the right. This is the only internal "header".
+- **`SpecRow` / `SpecRows`** are the ledger: label left (mono, tertiary), value right (mono,
+  `tabular-nums`), baseline-aligned, separated by faint dividers. Two ledgers side by side make a
+  two-column fact sheet.
+- **`SpecMetric`** is a glanceable gauge: tiny label + tabular value over an optional **1px** bar on
+  a hairline track (`bg-border-light`). Tone (ok/warn/crit → moss/amber/rust) appears only under load.
+- **`MetaChip` / `MetaChipGroup`** replace bordered "badges": a borderless `surface-sunken` chip,
+  label and value split by a single hairline. Use for repeated metadata (library counts, facts).
+- **`Sparkline`** is the one trend language: a 1.25px non-scaling polyline with an optional 8%-opacity
+  area fill. `tone` carries meaning (`up`/`down`/`accent`), default `ink` stays quiet. No chart libs.
+- Status reads as a bare mono label + dot (`online` moss, `stale` muted) — not a filled pill.
+
+### Signature archival elements (the memory points)
+
+OPAQUE should read as a *private archive instrument*, not a generic dashboard. Three signature
+devices (and only these — resist adding more) carry that identity. They come from object-ness —
+codes, registration marks, stamps — never from paper grain or scan textures (we add none).
+
+- **`SpecHeader`** — every data module opens with a filed-record index line: a fixed module code +
+  provenance on the left (`CAL / LOCAL`, `WTHR / LIVE`, `MKT / LIVE`, `MED / <PROVIDER>`, `SRV / LIVE`,
+  `IDX`), and an optional serial beside a `⌖` registration mark on the right (`2026·06`, `4 SYM`,
+  `°F`). Codes are stable semantic labels, not derived coordinates. This repeating line is *the*
+  memory point — keep it on every module.
+- **`RegistrationMark`** — four corner crop-ticks framing a value. The site's "current / active"
+  marker: calendar *today*, and (faintly, on hover via `hoverTickClass`) the cell the cursor is on.
+  Reserved for genuinely singular current items — never a general highlight. Solid ink when active.
+- **`Stamp`** — the one status language, drawn like an inspection stamp (mono uppercase + small dot),
+  never a filled pill: `online`/`stale`, media `N playing`, market `▲/▼` deltas, `syncing` (pulsing).
+
+Each module also takes a distinct-but-related *archival form*: Calendar = month **ledger** (a `WK`
+week-number gutter, registration today); Weather = station **bulletin** (measurement figure + unit
+tick + station metadata); Markets = ticker **instrument list** (oscilloscope traces, stamped deltas);
+Media = catalog **drawer** per provider; Server = telemetry **instrument**; Posts = **index** with
+folder-divider tabs.
+
+State pages stay in-character: **loading** is a blank record filling (hairline value `Slot`s + a calm
+`recordSweep`, never a generic pulse); **empty** is a blank catalog card (`NIL` stamp + one terse
+line); **error** is an inspection note (`NO READING ✕` over a faint rust rule), never a red alert.
+
+Interaction is mechanical, not web-app: hover slides a guide-rule / reveals registration ticks like a
+ruler cursor — not a flat background tint.
+
+**The page is a filed sheet.** The dashboard is wrapped in a document shell so the whole thing reads
+as one archived record, not floating modules:
+- A **masthead** above the greeting — `OPAQUE` wordmark + `personal archive` on the left, mono
+  datestamp fields on the right (`SHEET 01/01 · DATE <ISO> · TZ <offset>`), on a hairline rule.
+  Date/TZ are computed client-side (avoid SSR locale mismatch).
+- Faint **registration / crop corners** on the content frame (`DocumentFrame`) — the page edges.
+- A **footer colophon** mirroring the masthead: `DOC · SCALE 1:1 · PAGE 01/01 · © OPAQUE`, on the
+  same page margins.
+
+**Live numbers are mechanical readouts.** Values that change on poll use `RollingNumber` — each digit
+is a 0–9 reel that rolls to the new value like a counter/instrument (markets price + delta, weather
+temperature, server CPU/mem/disk). Animate only after the first change (no roll-from-zero on load),
+honor `prefers-reduced-motion`, keep the string monospaced + tabular so columns never shift. This is
+the one place motion is *expressive* rather than purely functional — use it only for genuinely live
+figures, never for static labels.
+
 ## Litmus tests
 
 Before shipping UI, ask:
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index e898884..a6d07ca 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -216,6 +216,40 @@ input:-webkit-autofill:active {
     animation: subtleFloat 6s ease-in-out infinite;
 }
 
+/* Loading: a blank archive record filling. A slow, low-contrast sweep across
+   the empty value slots — quieter and more "ink filling paper" than a pulse. */
+@keyframes recordSweep {
+    0% { opacity: 0.5; }
+    50% { opacity: 1; }
+    100% { opacity: 0.5; }
+}
+
+.animate-record-sweep {
+    animation: recordSweep 1.8s ease-in-out infinite;
+}
+
+/* Edit mode "drafting surface": while a section is being dragged, a very faint
+   drafting grid fades in behind the layout — like laying work out on a cutting
+   mat. Off at rest; never affects view mode. */
+.drafting-surface {
+    background-image: none;
+    background-size: 24px 24px;
+    transition: background-color 180ms ease;
+}
+
+.drafting-surface[data-drafting] {
+    background-image:
+        linear-gradient(to right, rgb(var(--border-light) / 0.5) 1px, transparent 1px),
+        linear-gradient(to bottom, rgb(var(--border-light) / 0.5) 1px, transparent 1px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .animate-record-sweep {
+        animation: none;
+        opacity: 0.7;
+    }
+}
+
 @keyframes dragClonePickUp {
     from {
         transform: scale(1);
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index 473c216..e4a9cda 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -1,11 +1,11 @@
 import type { Metadata } from "next";
-import { Sorts_Mill_Goudy } from "next/font/google";
+import { Geist, Geist_Mono, Sorts_Mill_Goudy } from "next/font/google";
 import CookieBanner from "@/components/CookieBanner";
 import ThemeWatcher from "@/components/ThemeWatcher";
 import { THEME_INIT_SCRIPT } from "@/lib/theme";
 import "./globals.css";
 
-// Serif display face for titles / section headings. Body text stays sans.
+// Serif display face for titles / section headings.
 const serif = Sorts_Mill_Goudy({
   subsets: ["latin"],
   weight: ["400"],
@@ -14,6 +14,21 @@ const serif = Sorts_Mill_Goudy({
   variable: "--font-serif",
 });
 
+// Technical grotesk for prose/UI, and its companion mono for all data — the
+// archival "spec sheet" voice. Replaces the system stacks so the dashboard has a
+// consistent typographic personality across platforms.
+const sans = Geist({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-sans",
+});
+
+const mono = Geist_Mono({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-mono",
+});
+
 export const metadata: Metadata = {
   title: "OPAQUE",
   description: "A quiet dashboard for bookmarks, applications, and servers",
@@ -29,7 +44,11 @@ export default function RootLayout({
   // React hydrates. This suppresses only the <html> element's own attribute
   // diff, not any child-subtree mismatch.
   return (
-    <html lang="en" className={serif.variable} suppressHydrationWarning>
+    <html
+      lang="en"
+      className={`${serif.variable} ${sans.variable} ${mono.variable}`}
+      suppressHydrationWarning
+    >
       <head>
         {/* Apply the saved theme before first paint so there is no flash. */}
         <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 49368e5..99c37a6 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -373,8 +373,10 @@ export default function HomePage() {
       <div className="relative flex-1 overflow-x-hidden bg-background">
         <div className="relative z-10">
           <div id="dashboard" className="relative flex min-h-full flex-col py-16">
+            <DocumentFrame />
             <div className="mx-6 animate-fade-in sm:mx-8 lg:mx-12 xl:mx-16 2xl:mx-24">
-              <p className="font-serif text-sm leading-none text-text-secondary">
+              <DocumentMasthead />
+              <p className="mt-5 font-serif text-sm leading-none text-text-secondary">
                 {timeGreeting()}{displayName ? `, ${displayName}` : ''}
                 <span className="text-text-muted"> — {todayLabel()}</span>
               </p>
@@ -581,6 +583,73 @@ function todayLabel() {
   }).format(new Date())
 }
 
+// ISO-8601 date (YYYY-MM-DD) for the masthead — a filed-record datestamp.
+function isoDateStamp(date = new Date()) {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+}
+
+function localTimeZoneCode() {
+  try {
+    // e.g. "GMT-7" — a terse station/zone marker, not a long name.
+    const parts = new Intl.DateTimeFormat(undefined, { timeZoneName: 'shortOffset' }).formatToParts(new Date())
+    return parts.find((part) => part.type === 'timeZoneName')?.value?.replace(/\s/g, '') || 'LOCAL'
+  } catch {
+    return 'LOCAL'
+  }
+}
+
+// The filed-document masthead: a wordmark + provenance on the left and mono
+// datestamp / zone fields on the right, on one hairline rule. Makes the whole
+// dashboard read as a single archived sheet rather than floating modules.
+function DocumentMasthead() {
+  const [stamp, setStamp] = useState({ date: '', tz: '' })
+  // Compute client-side only — avoids an SSR/client locale + tz mismatch.
+  useEffect(() => {
+    setStamp({ date: isoDateStamp(), tz: localTimeZoneCode() })
+  }, [])
+
+  return (
+    <div className="flex items-end justify-between gap-4 border-b border-border-medium pb-2">
+      <div className="flex items-baseline gap-3">
+        <span className="font-mono text-[11px] font-medium uppercase tracking-[0.3em] text-text-primary">
+          OPAQUE
+        </span>
+        <span className="font-mono text-[9px] uppercase tracking-[0.16em] text-text-muted">
+          Personal archive
+        </span>
+      </div>
+      <div className="flex items-center gap-4 font-mono text-[9px] uppercase tracking-[0.14em] text-text-muted tabular-nums">
+        <MastheadField label="Sheet" value="01 / 01" />
+        <MastheadField label="Date" value={stamp.date || '—'} />
+        <MastheadField label="TZ" value={stamp.tz || '—'} />
+      </div>
+    </div>
+  )
+}
+
+function MastheadField({ label, value }: { label: string; value: string }) {
+  return (
+    <span className="flex items-center gap-1.5">
+      <span className="text-text-muted/70">{label}</span>
+      <span className="text-text-secondary">{value}</span>
+    </span>
+  )
+}
+
+// Faint registration / crop corners on the content frame — the page edges of a
+// printed sheet. Decorative but cheap and consistent with the archival motif.
+function DocumentFrame() {
+  const corner = 'pointer-events-none absolute h-3 w-3 border-border-medium'
+  return (
+    <div aria-hidden className="pointer-events-none absolute inset-x-3 inset-y-6 sm:inset-x-5 lg:inset-x-9 xl:inset-x-[3.25rem] 2xl:inset-x-20">
+      <span className={`${corner} left-0 top-0 border-l border-t`} />
+      <span className={`${corner} right-0 top-0 border-r border-t`} />
+      <span className={`${corner} bottom-0 left-0 border-b border-l`} />
+      <span className={`${corner} bottom-0 right-0 border-b border-r`} />
+    </div>
+  )
+}
+
 function newId() {
   if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
     return crypto.randomUUID()
diff --git a/web/src/components/DashboardLayoutEditor.tsx b/web/src/components/DashboardLayoutEditor.tsx
index a524d55..3af4222 100644
--- a/web/src/components/DashboardLayoutEditor.tsx
+++ b/web/src/components/DashboardLayoutEditor.tsx
@@ -477,12 +477,14 @@ export default function DashboardLayoutEditor({
     <div
       ref={containerRef}
       data-layout-editor
-      className="mx-6 flex flex-col gap-10 sm:mx-8 md:gap-12 lg:mx-12 xl:mx-16 xl:gap-14 2xl:mx-24"
+      data-drafting={isDragActive ? 'true' : undefined}
+      className="drafting-surface mx-6 flex flex-col gap-10 sm:mx-8 md:gap-12 lg:mx-12 xl:mx-16 xl:gap-14 2xl:mx-24"
     >
-      {rows.map((row) => (
+      {rows.map((row, rowIndex) => (
         <LayoutRow
           key={row.rowId}
           row={row}
+          rowIndex={rowIndex}
           isEditing={isEditing}
           renderSection={renderSection}
           draggingRoot={drag?.root ?? null}
@@ -536,6 +538,7 @@ function NewRowIndicator({ edge }: { edge: RowDropEdge }) {
 
 interface LayoutRowProps {
   row: DashboardLayoutRow;
+  rowIndex: number;
   isEditing: boolean;
   renderSection: (tree: Tree) => ReactNode;
   draggingRoot: string | null;
@@ -549,6 +552,7 @@ interface LayoutRowProps {
 
 function LayoutRow({
   row,
+  rowIndex,
   isEditing,
   renderSection,
   draggingRoot,
@@ -589,6 +593,7 @@ function LayoutRow({
                 tree={cell.tree}
                 isEditing={isEditing}
                 isPlaceholder={isPlaceholder}
+                coordinate={`${String.fromCharCode(65 + colIndex)}:${rowIndex + 1}`}
                 onGripPointerDown={onGripPointerDown}
               />
 
@@ -629,23 +634,34 @@ interface SectionHeaderProps {
   tree: Tree;
   isEditing: boolean;
   isPlaceholder: boolean;
+  /** Drafting coordinate (e.g. "A:2") shown by the grip in edit mode. */
+  coordinate?: string;
   onGripPointerDown: (event: ReactPointerEvent<HTMLElement>, root: string, label: string) => void;
 }
 
-function SectionHeader({ tree, isEditing, isPlaceholder, onGripPointerDown }: SectionHeaderProps) {
+function SectionHeader({ tree, isEditing, isPlaceholder, coordinate, onGripPointerDown }: SectionHeaderProps) {
   const label = getRootLabel(tree.root);
   return (
-    <div className={`mb-6 flex items-center gap-3 transition-opacity ${isPlaceholder ? 'opacity-30' : ''}`}>
+    <div className={`mb-6 flex items-center gap-2.5 transition-opacity ${isPlaceholder ? 'opacity-30' : ''}`}>
       {isEditing && (
-        <button
-          type="button"
-          onPointerDown={(event) => onGripPointerDown(event, tree.root, label)}
-          className="inline-flex h-5 w-5 cursor-grab touch-none items-center justify-center text-text-muted transition-colors hover:text-text-primary active:cursor-grabbing"
-          aria-label={`Drag ${label} section`}
-          title="Drag to rearrange"
-        >
-          <IconGripVertical className="h-3.5 w-3.5" />
-        </button>
+        <>
+          {/* Drafting coordinate — a small mono grid reference, like a plate
+              number on a technical sheet. */}
+          {coordinate && (
+            <span className="select-none font-mono text-[9px] tabular-nums tracking-wider text-text-muted/70">
+              {coordinate}
+            </span>
+          )}
+          <button
+            type="button"
+            onPointerDown={(event) => onGripPointerDown(event, tree.root, label)}
+            className="inline-flex h-5 w-5 cursor-grab touch-none items-center justify-center text-text-muted transition-colors hover:text-text-primary active:cursor-grabbing"
+            aria-label={`Drag ${label} section`}
+            title="Drag to rearrange"
+          >
+            <IconGripVertical className="h-3.5 w-3.5" />
+          </button>
+        </>
       )}
       <div className="font-serif text-base leading-none text-text-secondary">
         {label}
diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx
index 0dca25b..793bcb2 100644
--- a/web/src/components/Footer.tsx
+++ b/web/src/components/Footer.tsx
@@ -1,9 +1,28 @@
+// Document footer: a filed-sheet colophon — provenance + scale/ratio on the
+// left, page number and © on the right, on one hairline rule. Mirrors the
+// masthead so the dashboard reads as a bounded archived sheet.
 export default function Footer() {
     return (
-        <footer className="flex flex-col items-end justify-end bg-surface-elevated px-6 py-3 border-t border-border-light">
-            <p className="cursor-default text-xs text-text-tertiary tracking-wide">
-                © OPAQUE
-            </p>
+        <footer className="border-t border-border-light bg-surface-elevated">
+            <div className="mx-6 flex items-center justify-between gap-4 py-3 font-mono text-[9px] uppercase tracking-[0.14em] text-text-muted tabular-nums sm:mx-8 lg:mx-12 xl:mx-16 2xl:mx-24">
+                <div className="flex items-center gap-4">
+                    <span className="flex items-center gap-1.5">
+                        <span className="text-text-muted/70">Doc</span>
+                        <span className="text-text-secondary">OPAQUE·DASH</span>
+                    </span>
+                    <span className="hidden items-center gap-1.5 sm:flex">
+                        <span className="text-text-muted/70">Scale</span>
+                        <span className="text-text-secondary">1:1</span>
+                    </span>
+                </div>
+                <div className="flex items-center gap-4">
+                    <span className="flex items-center gap-1.5">
+                        <span className="text-text-muted/70">Page</span>
+                        <span className="text-text-secondary">01 / 01</span>
+                    </span>
+                    <span className="text-text-tertiary">© OPAQUE</span>
+                </div>
+            </div>
         </footer>
     )
-} 
\ No newline at end of file
+}
diff --git a/web/src/components/Tree/TreeModule.tsx b/web/src/components/Tree/TreeModule.tsx
index 5c68a63..cc64134 100644
--- a/web/src/components/Tree/TreeModule.tsx
+++ b/web/src/components/Tree/TreeModule.tsx
@@ -53,6 +53,15 @@ import {
   type DropPlacement,
 } from '@/lib/drag';
 import SectionAddControl from '@/components/Tree/SectionAddControl';
+import {
+  MetaChip,
+  MetaChipGroup,
+  RegistrationMark,
+  RollingNumber,
+  Sparkline,
+  SpecHeader,
+  Stamp,
+} from '@/components/Tree/specPrimitives';
 
 interface ModuleTree {
   root: string;
@@ -742,6 +751,13 @@ function LiveModuleWidget({ module }: { module: ModuleBranch }) {
 function CalendarWidget({ module }: { module: ModuleBranch }) {
   const [calendarMonth, setCalendarMonth] = useState(() => startOfMonth(new Date()));
   const cells = useMemo(() => calendarCells(calendarMonth), [calendarMonth]);
+  // Group the 42-cell grid into 6 week rows so each can carry its ISO week no.
+  const weeks = useMemo(() => {
+    const rows: (typeof cells)[] = [];
+    for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7));
+    return rows;
+  }, [cells]);
+  const isCurrentMonth = startOfMonth(new Date()).getTime() === calendarMonth.getTime();
 
   const moveMonth = (offset: number) => {
     setCalendarMonth((currentMonth) => (
@@ -749,61 +765,104 @@ function CalendarWidget({ module }: { module: ModuleBranch }) {
     ));
   };
 
+  // Column template: a narrow week-number gutter + 7 equal day columns. The
+  // gutter is what turns the month into a technical ledger.
+  const gridCols = 'grid grid-cols-[1.75rem_repeat(7,minmax(0,1fr))]';
+
   return (
     <ModulePanel module={module}>
-      <div>
-        <div className="mb-3 flex items-center justify-between gap-2 border-b border-border-light pb-2">
-          <div className="font-mono text-[11px] uppercase tracking-wider text-text-secondary">
-            {formatCalendarMonth(calendarMonth)}
-          </div>
-          <div className="flex items-center gap-1 text-text-muted">
+      <SpecHeader
+        code="CAL"
+        source="LOCAL"
+        serial={formatMonthSerial(calendarMonth)}
+        right={(
+          <div className="flex items-center gap-0.5 text-text-muted">
             <button
               type="button"
               onClick={() => moveMonth(-1)}
-              className="flex h-5 w-5 items-center justify-center hover:bg-surface-sunken hover:text-text-primary"
+              className="flex h-5 w-5 items-center justify-center transition-colors hover:text-text-primary"
               aria-label="Previous month"
               title="Previous month"
             >
-              &lsaquo;
+              <IconChevronLeft className="h-3.5 w-3.5" />
             </button>
             <button
               type="button"
               onClick={() => setCalendarMonth(startOfMonth(new Date()))}
-              className="flex h-5 w-5 items-center justify-center hover:bg-surface-sunken hover:text-text-primary"
+              className={`flex h-5 w-5 items-center justify-center transition-colors hover:text-text-primary ${isCurrentMonth ? 'text-text-secondary' : ''}`}
               aria-label="Current month"
-              title="Current month"
+              title="Jump to current month"
             >
-              <span className="h-1.5 w-1.5 rounded-full bg-current" />
+              <span className={`h-1.5 w-1.5 ${isCurrentMonth ? 'bg-text-primary' : 'border border-current'}`} />
             </button>
             <button
               type="button"
               onClick={() => moveMonth(1)}
-              className="flex h-5 w-5 items-center justify-center hover:bg-surface-sunken hover:text-text-primary"
+              className="flex h-5 w-5 items-center justify-center transition-colors hover:text-text-primary"
               aria-label="Next month"
               title="Next month"
             >
-              &rsaquo;
+              <IconChevronRight className="h-3.5 w-3.5" />
             </button>
           </div>
-        </div>
-        <div className="grid grid-cols-7 gap-y-1 text-center">
+        )}
+      />
+
+      <div className="mt-2.5">
+        <div className={`${gridCols} text-center`}>
+          <div aria-hidden className="font-mono text-[8px] uppercase tracking-wider text-text-muted/70">
+            WK
+          </div>
           {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((weekday, index) => (
-            <div key={`${weekday}-${index}`} className="pb-1.5 text-[10px] font-medium uppercase tracking-wider text-text-tertiary">
+            <div
+              key={`${weekday}-${index}`}
+              className={`pb-2 font-mono text-[9px] font-medium uppercase tracking-[0.12em] ${
+                index === 0 || index === 6 ? 'text-text-muted/60' : 'text-text-muted'
+              }`}
+            >
               {weekday}
             </div>
           ))}
-          {cells.map((cell) => (
-            <button
-              key={cell.key}
-              type="button"
-              className={`mx-auto flex h-7 w-7 items-center justify-center text-xs transition-colors hover:bg-surface-sunken ${
-                cell.inMonth ? 'text-text-primary' : 'text-text-muted'
-              } ${cell.isToday ? 'border border-ink-500 bg-surface-sunken text-text-primary' : ''}`}
-              title={calendarCellTitle(cell.date)}
-              aria-label={calendarCellTitle(cell.date)}
-            >
-              {cell.date.getDate()}
-            </button>
+        </div>
+        <div className="space-y-px">
+          {weeks.map((week) => (
+            <div key={week[0].key} className={`${gridCols} text-center`}>
+              <div className="flex h-7 items-center justify-center font-mono text-[9px] tabular-nums text-text-muted/55">
+                {isoWeekNumber(week[0].date)}
+              </div>
+              {week.map((cell, dayIndex) => {
+                const isWeekend = dayIndex === 0 || dayIndex === 6;
+                return (
+                  <button
+                    key={cell.key}
+                    type="button"
+                    className="group/day flex h-7 items-center justify-center"
+                    title={calendarCellTitle(cell.date)}
+                    aria-label={calendarCellTitle(cell.date)}
+                    aria-current={cell.isToday ? 'date' : undefined}
+                  >
+                    <RegistrationMark
+                      active={cell.isToday}
+                      hoverTickClass="group-hover/day:border-text-muted"
+                      size={5}
+                      className="h-6 w-6"
+                    >
+                      <span
+                        className={`font-mono text-[11px] tabular-nums transition-colors ${
+                          cell.isToday
+                            ? 'font-medium text-text-primary'
+                            : cell.inMonth
+                              ? `${isWeekend ? 'text-text-tertiary' : 'text-text-secondary'} group-hover/day:text-text-primary`
+                              : 'text-text-muted/45 group-hover/day:text-text-muted'
+                        }`}
+                      >
+                        {cell.date.getDate()}
+                      </span>
+                    </RegistrationMark>
+                  </button>
+                );
+              })}
+            </div>
           ))}
         </div>
       </div>
@@ -896,6 +955,7 @@ function ModulePanel({
   href,
   titleOverride,
   header,
+  specHeader,
   children,
 }: {
   module: ModuleBranch;
@@ -904,6 +964,12 @@ function ModulePanel({
   titleOverride?: string;
   /** Replaces the icon + title cluster, e.g. a tab bar acting as the header. */
   header?: React.ReactNode;
+  /**
+   * Archival SpecHeader that becomes the whole panel header. Build it with
+   * `renderModuleStatusControl(state)` in its `right` slot to keep refresh +
+   * status. Replaces the default single-root status line.
+   */
+  specHeader?: React.ReactNode;
   children: React.ReactNode;
 }) {
   const statusClass = state?.error
@@ -939,7 +1005,9 @@ function ModulePanel({
   // Borderless: structure comes from spacing, not a card outline (DESIGN_SPEC).
   return (
     <section className="relative">
-      {titleInSectionHeader ? (
+      {specHeader ? (
+        <div className="mb-3">{specHeader}</div>
+      ) : titleInSectionHeader ? (
         statusControl && (
           <div className="mb-2 flex h-5 items-center justify-end">{statusControl}</div>
         )
@@ -974,42 +1042,95 @@ function ModulePanel({
   );
 }
 
+// Refresh button + status dot, for use in a SpecHeader's `right` slot so the
+// archival header carries the same controls the default panel header would.
+function renderModuleStatusControl(state: ModuleDataState, label: string) {
+  const statusClass = state.error
+    ? 'bg-accent-red'
+    : state.isLoading
+      ? 'bg-ink-300'
+      : 'bg-accent-green';
+  return (
+    <div className="flex items-center gap-2">
+      <button
+        type="button"
+        onClick={state.refresh}
+        className="flex h-5 w-5 items-center justify-center text-text-muted transition-colors hover:text-text-primary"
+        aria-label={`Refresh ${label}`}
+        title="Refresh"
+      >
+        <IconRefresh className={`h-3 w-3 ${state.isLoading ? 'animate-spin' : ''}`} />
+      </button>
+      <div
+        className={`h-1.5 w-1.5 rounded-full ${statusClass}`}
+        title={state.error || (state.isLoading ? 'Loading' : 'Online')}
+      />
+    </div>
+  );
+}
+
 function WeatherWidget({ module, state }: { module: ModuleBranch; state: ModuleDataState }) {
   const data = state.data?.kind === 'weather' ? state.data as WeatherModuleData : null;
 
+  const unit = data?.temperatureUnit === 'fahrenheit' ? 'F' : 'C';
+
   return (
-    <ModulePanel module={module} state={state}>
+    <ModulePanel
+      module={module}
+      state={state}
+      specHeader={(
+        <SpecHeader
+          code="WTHR"
+          source="LIVE"
+          serial={`°${unit}`}
+          right={renderModuleStatusControl(state, 'Weather')}
+        />
+      )}
+    >
       {!data ? (
         <ModuleBodyState state={state} skeleton="weather" />
       ) : (
         <>
-          <div>
-            <div>
-              <div className="text-3xl font-light leading-none tracking-tight text-text-primary">
-                {Math.round(data.temperature)}°
+          {/* Station reading: a large measurement figure with a unit tick, the
+              condition as a caption, and station metadata aligned right. */}
+          <div className="flex items-start justify-between gap-3">
+            <div className="shrink-0">
+              <div className="flex items-start gap-0.5 text-text-primary">
+                <RollingNumber
+                  value={String(Math.round(data.temperature))}
+                  className="text-[2.5rem] font-light leading-none tracking-tight"
+                  ariaLabel={`${Math.round(data.temperature)} degrees ${unit}`}
+                />
+                <span className="mt-1 font-mono text-sm text-text-tertiary">°{unit}</span>
               </div>
-              <div className="mt-2 text-xs text-text-tertiary">
+              <div className="mt-2 truncate text-xs text-text-secondary" title={data.condition}>
                 {data.condition}
               </div>
             </div>
-            <div className="mt-4 border-t border-border-light pt-3 font-mono text-[10px] leading-relaxed text-text-tertiary">
-              <span className="text-text-secondary">{data.location}</span>
-              <span className="mx-1.5 text-text-muted">·</span>
-              <span>{Math.round(data.humidity)}% humidity</span>
+            <div className="min-w-0 flex-1 text-right font-mono text-[10px] leading-relaxed">
+              <div className="truncate text-text-secondary" title={data.location}>{data.location}</div>
+              <div className="mt-1 tabular-nums text-text-muted">
+                <span className="text-text-tertiary">RH</span> {Math.round(data.humidity)}%
+              </div>
             </div>
           </div>
-          <div className="mt-3 grid grid-cols-3 gap-2">
+          <div className="mt-4 border-t border-border-light pt-1">
             {data.forecast.map((day) => (
-              <div key={day.date} title={day.condition}>
-                <div className="text-[10px] uppercase tracking-wider text-text-tertiary">
+              <div
+                key={day.date}
+                className="flex items-baseline gap-3 border-b border-border-light/70 py-1.5 last:border-0"
+                title={day.condition}
+              >
+                <span className="w-8 shrink-0 font-mono text-[10px] uppercase tracking-wider text-text-tertiary">
                   {formatWeekday(day.date)}
-                </div>
-                <div className="mt-1 font-mono text-[11px] text-text-secondary">
-                  {Math.round(day.high)}/{Math.round(day.low)}
-                </div>
-                <div className="mt-0.5 truncate text-[10px] leading-tight text-text-muted">
+                </span>
+                <span className="min-w-0 flex-1 truncate text-[11px] text-text-tertiary">
                   {day.condition}
-                </div>
+                </span>
+                <span className="shrink-0 font-mono text-[11px] tabular-nums text-text-secondary">
+                  {Math.round(day.high)}°
+                  <span className="ml-1 text-text-muted">{Math.round(day.low)}°</span>
+                </span>
               </div>
             ))}
           </div>
@@ -1023,35 +1144,64 @@ function MarketsWidget({ module, state }: { module: ModuleBranch; state: ModuleD
   const data = state.data?.kind === 'markets' ? state.data as MarketsModuleData : null;
 
   return (
-    <ModulePanel module={module} state={state}>
+    <ModulePanel
+      module={module}
+      state={state}
+      specHeader={(
+        <SpecHeader
+          code="MKT"
+          source="LIVE"
+          serial={data ? `${data.quotes.length} SYM` : undefined}
+          right={renderModuleStatusControl(state, 'Markets')}
+        />
+      )}
+    >
       {!data ? (
         <ModuleBodyState state={state} skeleton="markets" />
       ) : (
-        <div className="-my-1 divide-y divide-border-light">
+        <div className="-mt-1 divide-y divide-border-light/70">
           {data.quotes.map((quote) => {
-            const change = `${quote.changePercent >= 0 ? '+' : ''}${quote.changePercent.toFixed(2)}%`;
-            const trendTone = marketTrendTone(quote.changePercent);
+            const up = quote.changePercent >= 0;
+            const change = `${up ? '+' : ''}${quote.changePercent.toFixed(2)}%`;
 
             return (
               <div
                 key={quote.symbol}
-                className="grid grid-cols-[minmax(0,1fr)_56px_minmax(4.5rem,auto)] items-center gap-3 py-2.5"
+                className="group/inst relative grid grid-cols-[minmax(0,1fr)_56px_minmax(5rem,auto)] items-center gap-3 py-2.5"
               >
-                <div className="min-w-0">
-                  <div className="truncate font-mono text-xs font-medium uppercase leading-tight tracking-tight text-text-primary">
+                {/* Mechanical hover: a left guide-rule slides in like a ruler
+                    cursor, and the symbol nudges off it. */}
+                <span
+                  aria-hidden
+                  className="pointer-events-none absolute -left-2 top-1/2 h-0 w-px -translate-y-1/2 bg-text-primary transition-all duration-200 group-hover/inst:h-[calc(100%-10px)]"
+                />
+                <div className="min-w-0 transition-transform duration-200 group-hover/inst:translate-x-1">
+                  <div className="truncate font-mono text-xs font-medium uppercase leading-tight tracking-wide text-text-primary">
                     {quote.symbol}
                   </div>
                   <div className="mt-1 truncate text-[10px] leading-tight text-text-tertiary">
                     {quote.name}
                   </div>
                 </div>
-                <MarketSparkline values={quote.sparkline} />
+                <Sparkline
+                  values={quote.sparkline}
+                  width={56}
+                  height={24}
+                  tone={up ? 'up' : 'down'}
+                  ariaLabel={`${quote.symbol} recent trend`}
+                />
                 <div className="min-w-0 text-right font-mono">
-                  <div className={`text-xs font-medium leading-tight tracking-tight ${trendTone}`}>
-                    {change}
+                  {/* Delta as a stamped figure: a tick glyph + signed percent. */}
+                  <div className={`flex items-center justify-end gap-1 text-xs font-medium leading-tight ${up ? 'text-accent-green-dark' : 'text-accent-red-dark'}`}>
+                    <span aria-hidden className="text-[9px]">{up ? '▲' : '▼'}</span>
+                    <RollingNumber value={change} ariaLabel={`${quote.symbol} change ${change}`} />
                   </div>
-                  <div className="mt-1 truncate text-[11px] leading-tight text-text-secondary">
-                    {formatMarketPrice(quote.price, quote.currency)}
+                  <div className="mt-1 flex justify-end">
+                    <RollingNumber
+                      value={formatMarketPrice(quote.price, quote.currency)}
+                      className="text-[11px] leading-tight text-text-secondary"
+                      ariaLabel={`${quote.symbol} price ${formatMarketPrice(quote.price, quote.currency)}`}
+                    />
                   </div>
                 </div>
               </div>
@@ -1063,39 +1213,6 @@ function MarketsWidget({ module, state }: { module: ModuleBranch; state: ModuleD
   );
 }
 
-function MarketSparkline({
-  values,
-}: {
-  values: number[];
-}) {
-  const points = sparklinePoints(values, 56, 24);
-
-  if (!points) {
-    return <div className="h-[24px]" />;
-  }
-
-  return (
-    <div className="h-[24px] w-full overflow-hidden">
-      <svg
-        viewBox="0 0 56 24"
-        preserveAspectRatio="none"
-        className="h-full w-full text-ink-400"
-        aria-label="Recent price trend"
-      >
-        <polyline
-          points={points}
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.25"
-          vectorEffect="non-scaling-stroke"
-          strokeLinejoin="round"
-          strokeLinecap="round"
-        />
-      </svg>
-    </div>
-  );
-}
-
 function MediaWidget({ module, state }: { module: ModuleBranch; state: ModuleDataState }) {
   const data = state.data?.kind === 'media' ? state.data as MediaModuleData : null;
   const nowPlaying = data?.nowPlaying ?? [];
@@ -1123,18 +1240,27 @@ function MediaWidget({ module, state }: { module: ModuleBranch; state: ModuleDat
         <ModuleBodyState state={state} skeleton="media" />
       ) : (
         <>
-          <div className="mb-4 flex items-baseline justify-between gap-3 border-b border-border-light pb-3">
-            <div className="flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-wider text-accent-green">
-              <span className={`h-1.5 w-1.5 rounded-full ${streamCount > 0 ? 'bg-accent-green' : 'bg-ink-300'}`} />
-              {streamCount > 0 ? `${streamCount} playing` : data.status}
-            </div>
-            <div className="font-mono text-[10px] text-text-tertiary">
-              {data.detail || data.service}
+          {/* Provider index line: MED code + provenance on the left, live
+              session count or status stamped on the right. */}
+          <div className="flex items-center justify-between gap-3 border-b border-border-light pb-2">
+            <div className="flex min-w-0 items-center gap-2 font-mono text-[10px] uppercase tracking-[0.16em]">
+              <span className="text-text-secondary">MED</span>
+              <span aria-hidden className="text-text-muted">/</span>
+              <span className="truncate text-text-muted" title={data.detail || data.service}>
+                {data.service}
+              </span>
             </div>
+            <Stamp tone={streamCount > 0 ? 'live' : 'idle'}>
+              {streamCount > 0 ? `${streamCount} playing` : data.status}
+            </Stamp>
           </div>
 
+          {overview && overview.insights.length > 0 && (
+            <MediaStatLedger items={overview.insights} />
+          )}
+
           {nowPlaying.length > 0 && (
-            <div className="mb-5 space-y-3 border-b border-border-light pb-4">
+            <div className="mt-4 space-y-3">
               {nowPlaying.map((item) => (
                 <NowPlayingRow key={item.id} item={item} />
               ))}
@@ -1142,8 +1268,8 @@ function MediaWidget({ module, state }: { module: ModuleBranch; state: ModuleDat
           )}
 
           {queue.length > 0 && (
-            <div className="mb-5 border-b border-border-light pb-4">
-              <div className="mb-2.5 flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-text-tertiary">
+            <div className="mt-4">
+              <div className="mb-2 flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-[0.14em] text-text-tertiary">
                 <IconDownload className="h-3 w-3" />
                 Downloading
               </div>
@@ -1155,10 +1281,6 @@ function MediaWidget({ module, state }: { module: ModuleBranch; state: ModuleDat
             </div>
           )}
 
-          {overview && overview.insights.length > 0 && (
-            <MediaInsightBadges items={overview.insights} />
-          )}
-
           {overview && overview.libraries.length > 0 && (
             <MediaLibraryChips
               libraries={overview.libraries}
@@ -1285,26 +1407,30 @@ function dedupeMediaInsights(insights: MediaInsight[]) {
   });
 }
 
-function MediaInsightBadges({ items }: { items: MediaInsight[] }) {
+// Provider key stats as a borderless two-column ledger: label left, tabular
+// value right, hairline dividers. Reads like a spec sheet and stays consistent
+// across providers regardless of which stats each one reports.
+function MediaStatLedger({ items }: { items: MediaInsight[] }) {
+  const toneClass = (tone: MediaInsight['tone']) =>
+    tone === 'accent'
+      ? 'text-accent-green-dark'
+      : tone === 'warning'
+        ? 'text-accent-amber-dark'
+        : 'text-text-primary';
+
   return (
-    <div className="mb-4 grid grid-cols-2 gap-1.5 sm:grid-cols-4">
+    <div className="mt-3 grid grid-cols-2 gap-x-6 gap-y-0">
       {items.map((item) => (
         <div
           key={item.id}
-          className={`rounded-sm border px-2 py-1.5 ${
-            item.tone === 'accent'
-              ? 'border-accent-green/25 bg-accent-green/10'
-              : item.tone === 'warning'
-                ? 'border-accent-amber/25 bg-accent-amber/10'
-                : 'border-border-light bg-surface-sunken/35'
-          }`}
+          className="flex items-baseline justify-between gap-3 border-b border-border-light/70 py-1"
         >
-          <div className="truncate font-mono text-[9px] uppercase tracking-wider text-text-muted">
+          <span className="min-w-0 truncate font-mono text-[10px] uppercase tracking-wider text-text-tertiary">
             {item.label}
-          </div>
-          <div className="mt-0.5 truncate font-mono text-[11px] font-medium text-text-primary">
+          </span>
+          <span className={`shrink-0 font-mono text-[11px] tabular-nums ${toneClass(item.tone)}`}>
             {item.value || '-'}
-          </div>
+          </span>
         </div>
       ))}
     </div>
@@ -1324,45 +1450,38 @@ function MediaLibraryChips({
   const hidden = sorted.length - visible.length;
 
   return (
-    <div className="mb-4">
-      <div className="mb-2 flex items-center justify-between gap-2">
-        <div className="text-[10px] uppercase tracking-wider text-text-tertiary">
+    <div className="mt-4">
+      <div className="mb-2 flex items-baseline justify-between gap-3 border-b border-border-light pb-1.5">
+        <span className="font-mono text-[10px] uppercase tracking-[0.14em] text-text-tertiary">
           Libraries
-        </div>
-        <div className="font-mono text-[10px] text-text-muted">
+        </span>
+        <span className="font-mono text-[10px] tabular-nums text-text-muted">
           {totalItems > 0 ? `${formatCompactNumber(totalItems)} items` : `${libraries.length} total`}
-        </div>
+        </span>
       </div>
-      <div className="flex flex-wrap gap-1.5">
+      <MetaChipGroup>
         {visible.map((library) => (
-          <span
+          <MetaChip
             key={library.id}
-            className="inline-flex max-w-full items-center gap-1.5 rounded-sm border border-border-light bg-surface-sunken/45 px-2 py-1 text-[11px] text-text-secondary"
+            label={library.name}
+            value={formatCompactNumber(library.count)}
             title={[
               library.name,
               library.type ? formatMediaLibraryType(library.type) : '',
               `${formatCompactNumber(library.count)} items`,
             ].filter(Boolean).join(' · ')}
-          >
-            <span className="min-w-0 max-w-[9rem] truncate text-text-primary">{library.name}</span>
-            <span className="font-mono text-[10px] text-text-muted">{formatCompactNumber(library.count)}</span>
-            {library.type && (
-              <span className="hidden font-mono text-[9px] uppercase tracking-wider text-text-muted sm:inline">
-                {formatMediaLibraryType(library.type)}
-              </span>
-            )}
-          </span>
+          />
         ))}
         {(hidden > 0 || expanded) && (
           <button
             type="button"
             onClick={() => setExpanded((value) => !value)}
-            className="inline-flex items-center rounded-sm border border-border-light px-2 py-1 font-mono text-[10px] text-text-muted transition-colors hover:border-border-medium hover:bg-surface-sunken hover:text-text-secondary"
+            className="inline-flex items-center rounded-[2px] px-1.5 py-0.5 font-mono text-[10px] text-text-muted transition-colors hover:bg-surface-sunken hover:text-text-secondary"
           >
             {expanded ? 'Show less' : `+${hidden} more`}
           </button>
         )}
-      </div>
+      </MetaChipGroup>
     </div>
   );
 }
@@ -1467,7 +1586,7 @@ function MediaRecentCell({
 }) {
   const body = (
     <>
-      <div className="relative aspect-[2/3] overflow-hidden rounded-sm border border-border-light bg-surface-sunken transition-colors group-hover/recent:border-border-medium">
+      <div className="relative aspect-[2/3] overflow-hidden rounded-[2px] bg-surface-sunken ring-1 ring-border-light/60 transition group-hover/recent:ring-border-medium">
         {item.imageUrl ? (
           <Image
             src={item.imageUrl}
@@ -1479,7 +1598,7 @@ function MediaRecentCell({
             className="h-full w-full object-cover"
           />
         ) : (
-          <div className="flex h-full w-full items-center justify-center text-[10px] text-text-muted">
+          <div className="flex h-full w-full items-center justify-center font-serif text-base text-text-muted">
             {item.title.slice(0, 1)}
           </div>
         )}
@@ -1579,7 +1698,7 @@ function NowPlayingRow({ item }: { item: MediaNowPlayingItem }) {
   const meta = [item.user, item.device].filter(Boolean).join(' · ');
   return (
     <div className="flex items-center gap-2.5">
-      <div className="relative h-12 w-8 flex-shrink-0 overflow-hidden rounded-sm border border-border-light bg-surface-sunken">
+      <div className="relative h-12 w-8 flex-shrink-0 overflow-hidden rounded-[2px] bg-surface-sunken ring-1 ring-border-light/60">
         {item.imageUrl ? (
           <Image
             src={item.imageUrl}
@@ -1645,9 +1764,9 @@ function MediaProgressBar({
 }) {
   const pct = Math.round(Math.max(0, Math.min(1, value)) * 100);
   return (
-    <div className={`h-0.5 w-full overflow-hidden rounded-full bg-border-light ${className}`}>
+    <div className={`h-px w-full overflow-hidden bg-border-light ${className}`}>
       <div
-        className={`h-full rounded-full ${tone === 'accent' ? 'bg-accent-green' : 'bg-ink-500'}`}
+        className={`h-full transition-all ${tone === 'accent' ? 'bg-accent-green' : 'bg-ink-500'}`}
         style={{ width: `${pct}%` }}
       />
     </div>
@@ -1755,12 +1874,17 @@ function PostsStackLive({
       module={selectedModule}
       state={state}
       header={(
-        <PostStackTabs
-          modules={modules}
-          selectedId={selectedModule.id}
-          onSelect={onSelect}
-          framed={false}
-        />
+        <div className="flex min-w-0 items-center justify-between gap-3">
+          <PostStackTabs
+            modules={modules}
+            selectedId={selectedModule.id}
+            onSelect={onSelect}
+            framed={false}
+          />
+          <span className="shrink-0 font-mono text-[9px] uppercase tracking-[0.16em] text-text-muted">
+            IDX
+          </span>
+        </div>
       )}
     >
       <PostsContent data={data} state={state} />
@@ -1803,7 +1927,7 @@ function PostStackTabs({
             type="button"
             onClick={() => onSelect(source.id)}
             {...dragProps}
-            className={`group relative text-[10px] uppercase tracking-wider transition-colors ${
+            className={`group relative font-mono text-[10px] uppercase tracking-[0.12em] transition-colors ${
               framed ? '-mb-px pb-2' : 'pb-1'
             } ${
               draggable ? 'cursor-grab active:cursor-grabbing' : ''
@@ -1814,13 +1938,22 @@ function PostStackTabs({
             }`}
             title={draggable ? 'Drag to reorder · click to select' : undefined}
           >
-            <span className="inline-block max-w-[9rem] truncate">
-              {postModuleTabLabel(source)}
+            <span className="inline-flex max-w-[10rem] items-center gap-1.5">
+              {/* Active tab carries a small filled stamp — the "current divider". */}
+              <span
+                aria-hidden
+                className={`h-1 w-1 shrink-0 transition-colors ${isSelected ? 'bg-text-primary' : 'bg-transparent'}`}
+              />
+              <span className="truncate">{postModuleTabLabel(source)}</span>
             </span>
+            {/* Active tab: a solid ink underline that sits over the baseline
+                rule; idle tabs reveal a faint hairline on hover. */}
             <span
               aria-hidden
-              className={`absolute bottom-0 left-0 h-px w-full transition-colors ${
-                isSelected ? 'bg-ink-700' : 'bg-transparent group-hover:bg-border-medium'
+              className={`absolute -bottom-px left-0 h-[1.5px] w-full transition-all duration-200 ${
+                isSelected
+                  ? 'bg-text-primary opacity-100'
+                  : 'bg-border-medium opacity-0 group-hover:opacity-100'
               }`}
             />
           </button>
@@ -1945,10 +2078,10 @@ function PostsContent({
                 read ? 'text-text-muted' : 'text-text-tertiary group-hover:text-text-secondary'
               }`}
             >
-              <span>{post.source}</span>
-              {(post.meta || post.publishedAt) && <span>·</span>}
-              {post.meta && <span className="truncate">{post.meta}</span>}
-              {post.publishedAt && <span className="flex-shrink-0">{formatRelativeTime(post.publishedAt)}</span>}
+              <span className="uppercase tracking-wider text-text-muted">{post.source}</span>
+              {(post.meta || post.publishedAt) && <span className="text-text-muted">·</span>}
+              {post.meta && <span className="truncate tabular-nums">{post.meta}</span>}
+              {post.publishedAt && <span className="flex-shrink-0 tabular-nums">{formatRelativeTime(post.publishedAt)}</span>}
             </div>
           </a>
         );
@@ -1967,33 +2100,65 @@ function ModuleBodyState({
   skeleton?: ModuleSkeletonKind;
 }) {
   if (state.error) {
-    return (
-      <div className="min-h-16 text-[11px] leading-relaxed text-accent-red-dark">
-        {state.error}
-      </div>
-    );
+    return <InspectionNote>{state.error}</InspectionNote>;
   }
 
   return <ModuleSkeleton kind={skeleton} />;
 }
 
-const skeletonBar = 'rounded-sm bg-surface-sunken';
-const skeletonBarSoft = 'rounded-sm bg-border-light';
+// An error rendered as a stamped inspection note rather than a red alert: a mono
+// "NO READING" stamp over a hairline, with the terse message beneath.
+function InspectionNote({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-16">
+      <div className="flex items-center gap-1.5 border-b border-accent-red/25 pb-1.5 font-mono text-[9px] uppercase tracking-[0.16em] text-accent-red-dark">
+        <span aria-hidden>✕</span>
+        No reading
+      </div>
+      <div className="mt-2 font-mono text-[11px] leading-relaxed text-text-tertiary">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// An empty value slot in a loading record: a faint baseline that reads as a
+// ruled blank waiting to be filled (not a solid grey bar).
+function Slot({ className = '', style }: { className?: string; style?: React.CSSProperties }) {
+  return <span className={`inline-block h-px bg-border-medium align-middle ${className}`} style={style} />;
+}
+
+// One ledger row in a loading record: a faint label tick on the left, an empty
+// value slot on the right — the blank-form look.
+function SkeletonRow({ labelW = 'w-10', valueW = 'w-12' }: { labelW?: string; valueW?: string }) {
+  return (
+    <div className="flex items-baseline justify-between gap-3 py-1">
+      <Slot className={labelW} />
+      <Slot className={valueW} />
+    </div>
+  );
+}
 
-// Loading placeholders that echo each module's real content structure, so the
-// panel doesn't reshape when live data arrives.
+// Loading placeholders that echo each module's real spec-sheet structure, so the
+// panel doesn't reshape when live data arrives — a blank archive record filling
+// in, not a generic shimmer.
 function ModuleSkeleton({ kind }: { kind: ModuleSkeletonKind }) {
   if (kind === 'weather') {
     return (
-      <div className="animate-pulse" aria-hidden>
-        <div className={`h-8 w-20 ${skeletonBar}`} />
-        <div className={`mt-2 h-2.5 w-24 ${skeletonBarSoft}`} />
-        <div className={`mt-4 h-2 w-36 ${skeletonBarSoft}`} />
-        <div className="mt-4 grid grid-cols-3 gap-2 border-t border-border-light pt-3">
+      <div className="animate-record-sweep" aria-hidden>
+        <div className="flex items-start justify-between">
+          <span className="inline-block h-7 w-16 bg-surface-sunken" />
+          <div className="flex flex-col items-end gap-1.5 pt-1">
+            <Slot className="w-24" />
+            <Slot className="w-12" />
+          </div>
+        </div>
+        <div className="mt-4 space-y-px border-t border-border-light pt-2">
           {[0, 1, 2].map((index) => (
-            <div key={index}>
-              <div className={`h-2 w-8 ${skeletonBarSoft}`} />
-              <div className={`mt-1.5 h-2.5 w-12 ${skeletonBar}`} />
+            <div key={index} className="flex items-baseline gap-3 py-1.5">
+              <Slot className="w-8" />
+              <Slot className="flex-1" />
+              <Slot className="w-12" />
             </div>
           ))}
         </div>
@@ -2003,17 +2168,17 @@ function ModuleSkeleton({ kind }: { kind: ModuleSkeletonKind }) {
 
   if (kind === 'markets') {
     return (
-      <div className="-my-1 animate-pulse divide-y divide-border-light" aria-hidden>
+      <div className="-mt-1 animate-record-sweep divide-y divide-border-light/70" aria-hidden>
         {[0, 1, 2, 3].map((index) => (
-          <div key={index} className="grid grid-cols-[minmax(4.75rem,0.9fr)_minmax(4.25rem,1fr)_minmax(4.5rem,auto)] items-center gap-3 py-2.5">
-            <div>
-              <div className={`h-2.5 w-12 ${skeletonBar}`} />
-              <div className={`mt-1.5 h-2 w-16 ${skeletonBarSoft}`} />
+          <div key={index} className="grid grid-cols-[minmax(0,1fr)_56px_minmax(5rem,auto)] items-center gap-3 py-2.5">
+            <div className="space-y-1.5">
+              <Slot className="w-12" />
+              <Slot className="w-16" />
             </div>
-            <div className={`h-[26px] w-full ${skeletonBarSoft}`} />
-            <div className="justify-self-end">
-              <div className={`h-2.5 w-12 ${skeletonBar}`} />
-              <div className={`mt-1.5 h-2 w-14 ${skeletonBarSoft}`} />
+            <Slot className="w-full" />
+            <div className="justify-self-end space-y-1.5 text-right">
+              <Slot className="ml-auto w-12" />
+              <Slot className="ml-auto w-14" />
             </div>
           </div>
         ))}
@@ -2023,46 +2188,37 @@ function ModuleSkeleton({ kind }: { kind: ModuleSkeletonKind }) {
 
   if (kind === 'media') {
     return (
-      <div className="animate-pulse" aria-hidden>
-        <div className="mb-4 flex items-baseline justify-between border-b border-border-light pb-3">
-          <div className={`h-2 w-12 ${skeletonBar}`} />
-          <div className={`h-2 w-16 ${skeletonBarSoft}`} />
+      <div className="animate-record-sweep" aria-hidden>
+        <div className="flex items-center justify-between border-b border-border-light pb-2">
+          <Slot className="w-16" />
+          <Slot className="w-12" />
         </div>
-        <div className="mb-4 grid grid-cols-4 gap-1.5">
-          {[0, 1, 2, 3].map((index) => (
-            <div key={index} className="rounded-sm border border-border-light bg-surface-sunken/35 p-2">
-              <div className={`h-2 w-10 ${skeletonBarSoft}`} />
-              <div className={`mt-1.5 h-2.5 w-8 ${skeletonBar}`} />
-            </div>
-          ))}
+        <div className="mt-3 grid grid-cols-2 gap-x-6">
+          <div className="space-y-0">
+            <SkeletonRow />
+            <SkeletonRow />
+          </div>
+          <div className="space-y-0">
+            <SkeletonRow />
+            <SkeletonRow />
+          </div>
         </div>
-        <div className="mb-4 flex flex-wrap gap-1.5">
-          {[0, 1, 2, 3, 4].map((index) => (
-            <div key={index} className={`h-5 rounded-sm border border-border-light bg-surface-sunken/45 ${index % 2 === 0 ? 'w-20' : 'w-24'}`} />
+        <div className="mt-4 flex flex-wrap gap-1">
+          {[0, 1, 2, 3].map((index) => (
+            <span key={index} className={`h-4 bg-surface-sunken/60 ${index % 2 === 0 ? 'w-16' : 'w-20'}`} />
           ))}
         </div>
-        <div className="mt-5 border-t border-border-light pt-4">
-          <div className={`h-2 w-24 ${skeletonBarSoft}`} />
-          <div className="mt-3 grid grid-cols-4 gap-2.5">
-            {[0, 1, 2, 3].map((index) => (
-              <div key={index}>
-                <div className={`aspect-[2/3] ${skeletonBar}`} />
-                <div className={`mt-1.5 h-2 w-full ${skeletonBarSoft}`} />
-              </div>
-            ))}
-          </div>
-        </div>
       </div>
     );
   }
 
   if (kind === 'posts') {
     return (
-      <div className="animate-pulse space-y-3.5" aria-hidden>
+      <div className="-mx-2 animate-record-sweep space-y-3.5 px-2" aria-hidden>
         {[0, 1, 2, 3, 4].map((index) => (
-          <div key={index}>
-            <div className={`h-2.5 ${skeletonBar}`} style={{ width: `${82 - (index % 3) * 14}%` }} />
-            <div className={`mt-1.5 h-2 w-2/5 ${skeletonBarSoft}`} />
+          <div key={index} className="space-y-1.5">
+            <Slot style={{ width: `${82 - (index % 3) * 14}%` }} />
+            <Slot className="w-2/5" />
           </div>
         ))}
       </div>
@@ -2070,18 +2226,26 @@ function ModuleSkeleton({ kind }: { kind: ModuleSkeletonKind }) {
   }
 
   return (
-    <div className="min-h-16 animate-pulse space-y-2.5" aria-hidden>
-      <div className={`h-2.5 w-3/4 ${skeletonBar}`} />
-      <div className={`h-2.5 w-1/2 ${skeletonBarSoft}`} />
-      <div className={`h-2.5 w-2/3 ${skeletonBarSoft}`} />
+    <div className="min-h-16 animate-record-sweep space-y-2.5" aria-hidden>
+      <Slot className="w-3/4" />
+      <Slot className="w-1/2" />
+      <Slot className="w-2/3" />
     </div>
   );
 }
 
+// Empty = a blank catalog card: a faint dashed-ruled record area with a "NIL"
+// stamp and a one-line note. Quiet, not an illustration.
 function EmptyModuleState({ children }: { children: React.ReactNode }) {
   return (
-    <div className="min-h-16 text-[11px] leading-relaxed text-text-tertiary">
-      {children}
+    <div className="min-h-16">
+      <div className="flex items-center gap-1.5 border-b border-border-light pb-1.5 font-mono text-[9px] uppercase tracking-[0.16em] text-text-muted">
+        <span aria-hidden className="h-1 w-1 bg-ink-300" />
+        Nil
+      </div>
+      <div className="mt-2 text-[11px] leading-relaxed text-text-tertiary">
+        {children}
+      </div>
     </div>
   );
 }
@@ -2783,11 +2947,22 @@ function startOfMonth(date: Date) {
   return new Date(date.getFullYear(), date.getMonth(), 1);
 }
 
-function formatCalendarMonth(date: Date) {
-  return new Intl.DateTimeFormat(undefined, {
-    month: 'short',
-    year: 'numeric',
-  }).format(date);
+// Month code for the spec header, e.g. "2026·06" — a filed-record serial, not a
+// prose month name.
+function formatMonthSerial(date: Date) {
+  return `${date.getFullYear()}·${String(date.getMonth() + 1).padStart(2, '0')}`;
+}
+
+// ISO-8601 week number (weeks start Monday; week 1 contains the first Thursday).
+function isoWeekNumber(date: Date) {
+  const target = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+  const dayNumber = (target.getUTCDay() + 6) % 7; // Mon=0 … Sun=6
+  target.setUTCDate(target.getUTCDate() - dayNumber + 3); // nearest Thursday
+  const firstThursday = new Date(Date.UTC(target.getUTCFullYear(), 0, 4));
+  const firstDayNumber = (firstThursday.getUTCDay() + 6) % 7;
+  firstThursday.setUTCDate(firstThursday.getUTCDate() - firstDayNumber + 3);
+  const week = 1 + Math.round((target.getTime() - firstThursday.getTime()) / (7 * 24 * 3600 * 1000));
+  return String(week).padStart(2, '0');
 }
 
 function calendarCells(monthDate: Date) {
@@ -2851,31 +3026,6 @@ function formatMarketPrice(value: number, currency?: string) {
   return value.toFixed(4);
 }
 
-function marketTrendTone(changePercent: number) {
-  if (Math.abs(changePercent) < 0.005) return 'text-text-secondary';
-  return changePercent > 0 ? 'text-accent-green-dark' : 'text-accent-red-dark';
-}
-
-function sparklinePoints(values: number[], width = 120, height = 28) {
-  const points = values.filter((value) => Number.isFinite(value));
-  if (points.length < 2) return '';
-
-  const min = Math.min(...points);
-  const max = Math.max(...points);
-  const span = max - min || 1;
-  const xStep = width / (points.length - 1);
-
-  return points.map((value, index) => {
-    const x = index * xStep;
-    const y = height - ((value - min) / span) * height;
-    return `${roundSvgNumber(x)},${roundSvgNumber(y)}`;
-  }).join(' ');
-}
-
-function roundSvgNumber(value: number) {
-  return Math.round(value * 10) / 10;
-}
-
 function formatCompactNumber(value: number) {
   return new Intl.NumberFormat(undefined, {
     notation: 'compact',
diff --git a/web/src/components/Tree/TreeServer.tsx b/web/src/components/Tree/TreeServer.tsx
index 8dce484..2dcab0b 100644
--- a/web/src/components/Tree/TreeServer.tsx
+++ b/web/src/components/Tree/TreeServer.tsx
@@ -19,6 +19,7 @@ import { DEFAULT_SERVER_ICON } from '@/lib/svg';
 import { SERVER_ICON_PRESETS } from '@/lib/iconPresets';
 import IconField from '@/components/IconField';
 import SectionAddControl from '@/components/Tree/SectionAddControl';
+import { Sparkline, SpecMetric, SpecRow, SpecRows, Stamp } from '@/components/Tree/specPrimitives';
 
 interface ServerTree {
   root: string;
@@ -389,28 +390,21 @@ const TreeServer: React.FC<TreeServerProps> = ({
               </div>
             ) : (
               <>
-                <div className="mb-3.5 flex items-start justify-between gap-3">
-                  <div className="flex min-w-0 items-center gap-3">
-                    {renderDragHandle(server)}
-                    <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-sm border border-border-light bg-surface-elevated text-text-secondary">
-                      <SvgIcon svg={server.icon} fallback={DEFAULT_SERVER_ICON} className="h-5 w-5" />
-                    </div>
-                    <div className="min-w-0">
-                      <div className="truncate text-sm font-medium leading-tight text-text-primary">
-                        {server.name}
-                      </div>
-                      <div className="mt-1 truncate font-mono text-xs leading-tight text-text-tertiary">
-                        {removeProtocol(server.url)}
-                      </div>
-                    </div>
+                {/* Archival index line: fixed code + provenance, status stamped
+                    on the right — the same SpecHeader motif as other modules. */}
+                <div className="mb-2.5 flex items-center justify-between gap-3 border-b border-border-light pb-2">
+                  <div className="flex min-w-0 items-center gap-2 font-mono text-[10px] uppercase tracking-[0.16em]">
+                    <span className="text-text-secondary">SRV</span>
+                    <span aria-hidden className="text-text-muted">/</span>
+                    <span className="text-text-muted">{isStale ? 'STALE' : 'LIVE'}</span>
                   </div>
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-2.5">
                     <ServerStatusBadge online={stats.status === 'online' && !isStale} />
                     {isEditing && (
                       <button
                         type="button"
                         onClick={() => setEditingServerId(server.id)}
-                        className="flex h-7 w-7 items-center justify-center rounded-sm text-text-muted hover:bg-surface-sunken hover:text-text-primary"
+                        className="flex h-5 w-5 items-center justify-center text-text-muted transition-colors hover:text-text-primary"
                         aria-label={`Edit ${server.name}`}
                         title="Edit server"
                       >
@@ -420,17 +414,52 @@ const TreeServer: React.FC<TreeServerProps> = ({
                   </div>
                 </div>
 
-                <div className="grid grid-cols-2 gap-2">
-                  <ServerUsageCard label="CPU" valueLabel={`${stats.cpu.toFixed(1)}%`} percent={stats.cpu} />
-                  <ServerUsageCard label="Memory" valueLabel={`${memoryPercent}%`} percent={memoryPercent} />
-                  <ServerUsageCard label="Storage" valueLabel={`${diskPercent}%`} percent={diskPercent} />
-                  <ServerLoadCard stats={stats} />
+                {/* Device label (the "drawer" header): icon + name + endpoint. */}
+                <div className="flex min-w-0 items-center gap-2.5">
+                  {renderDragHandle(server)}
+                  <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center text-text-secondary">
+                    <SvgIcon svg={server.icon} fallback={DEFAULT_SERVER_ICON} className="h-[18px] w-[18px]" />
+                  </div>
+                  <div className="min-w-0">
+                    <div className="truncate text-[13px] font-medium leading-tight text-text-primary">
+                      {server.name}
+                    </div>
+                    <div className="mt-0.5 truncate font-mono text-[11px] leading-tight text-text-tertiary">
+                      {removeProtocol(server.url)}
+                    </div>
+                  </div>
                 </div>
 
-                <ServerFactChips stats={stats} />
+                {/* Primary load: three hairline-tracked gauges on a shared grid. */}
+                <div className="mt-3 grid grid-cols-3 gap-x-5">
+                  <SpecMetric label="CPU" value={`${stats.cpu.toFixed(0)}%`} bar={stats.cpu} tone={usageTone(stats.cpu)} />
+                  <SpecMetric label="Mem" value={`${memoryPercent}%`} bar={memoryPercent} tone={usageTone(memoryPercent)} />
+                  <SpecMetric label="Disk" value={`${diskPercent}%`} bar={diskPercent} tone={usageTone(diskPercent)} />
+                </div>
+
+                {/* Secondary facts as a two-column ledger — no boxed sub-cards. */}
+                <div className="mt-3.5 grid grid-cols-2 gap-x-6">
+                  <SpecRows>
+                    <SpecRow label="Mem" value={`${formatBytes(stats.memory.used)} / ${formatBytes(stats.memory.total)}`} valueTone="secondary" />
+                    <SpecRow label="Disk" value={`${formatBytes(stats.disk.used)} / ${formatBytes(stats.disk.total)}`} valueTone="secondary" />
+                    <SpecRow label="Up" value={stats.uptime || '-'} valueTone="secondary" />
+                  </SpecRows>
+                  <SpecRows>
+                    <SpecRow label="Net ↓" value={formatBandwidth(stats.network.in)} valueTone="secondary" />
+                    <SpecRow label="Net ↑" value={formatBandwidth(stats.network.out)} valueTone="secondary" />
+                    <SpecRow
+                      label={stats.temperature > 0 ? 'Cores / °C' : 'Cores'}
+                      value={stats.temperature > 0
+                        ? `${stats.cores || '-'} / ${Math.round(stats.temperature)}°`
+                        : `${stats.cores || '-'}`}
+                      valueTone="secondary"
+                      title={stats.load?.length ? `Load: ${stats.load.slice(0, 3).map(formatLoadValue).join(' · ')}` : undefined}
+                    />
+                  </SpecRows>
+                </div>
 
                 {!isEditing && (
-                  <ServerTrendPanel
+                  <ServerTrendStrip
                     samples={metricHistories[server.id] || []}
                     stats={stats}
                   />
@@ -447,110 +476,22 @@ const TreeServer: React.FC<TreeServerProps> = ({
 
 function ServerStatusBadge({ online }: { online: boolean }) {
   return (
-    <div
-      className={`inline-flex h-5 items-center gap-1.5 rounded-sm border px-1.5 font-mono text-[10px] uppercase tracking-wider ${
-        online
-          ? 'border-accent-green/25 bg-accent-green/10 text-accent-green-dark'
-          : 'border-border-light bg-surface-sunken/45 text-text-muted'
-      }`}
-    >
-      <span className={`h-1.5 w-1.5 rounded-full ${online ? 'bg-accent-green' : 'bg-ink-300'}`} />
-      {online ? 'online' : 'stale'}
-    </div>
+    <Stamp tone={online ? 'live' : 'idle'}>{online ? 'online' : 'stale'}</Stamp>
   );
 }
 
-function ServerUsageCard({
-  label,
-  valueLabel,
-  percent: rawPercent,
-}: {
-  label: string;
-  valueLabel: string;
-  percent: number;
-}) {
-  const normalized = Math.max(0, Math.min(100, rawPercent));
-
-  return (
-    <div className="rounded-sm border border-border-light bg-surface-sunken/35 p-2">
-      <div className="flex items-center justify-between">
-        <div className="text-[10px] uppercase tracking-wider text-text-tertiary">{label}</div>
-        <div className="font-mono text-[11px] font-medium text-text-primary">{valueLabel}</div>
-      </div>
-      <div className="mt-2 h-1 w-full overflow-hidden rounded-full bg-border-light">
-        <div
-          className={`h-full rounded-full transition-all ${normalized < 70 ? 'bg-accent-green' : normalized < 90 ? 'bg-accent-amber' : 'bg-accent-red'}`}
-          style={{ width: `${normalized}%` }}
-        />
-      </div>
-    </div>
-  );
-}
-
-function ServerLoadCard({ stats }: { stats: ServerStats }) {
-  return (
-    <div className="rounded-sm border border-border-light bg-surface-sunken/35 p-2">
-      <div className="flex items-center justify-between gap-2">
-        <div className="text-[10px] uppercase tracking-wider text-text-tertiary">Load</div>
-        <div className="font-mono text-[11px] font-medium text-text-primary">
-          {stats.cores || '-'} cores
-        </div>
-      </div>
-      <div className="mt-1.5 truncate font-mono text-[10px] text-text-tertiary">
-        {stats.load?.slice(0, 3).map(formatLoadValue).join(' / ') || '-'}
-      </div>
-    </div>
-  );
+// Usage thresholds → gauge tone. Quiet until it matters: moss under load,
+// amber as it tightens, rust when critical.
+function usageTone(value: number): 'neutral' | 'ok' | 'warn' | 'crit' {
+  if (value >= 90) return 'crit';
+  if (value >= 70) return 'warn';
+  if (value > 0) return 'ok';
+  return 'neutral';
 }
 
-function ServerFactChips({ stats }: { stats: ServerStats }) {
-  const facts = [
-    {
-      label: 'Mem',
-      value: `${formatBytes(stats.memory.used)} / ${formatBytes(stats.memory.total)}`,
-    },
-    {
-      label: 'Disk',
-      value: `${formatBytes(stats.disk.used)} / ${formatBytes(stats.disk.total)}`,
-    },
-    {
-      label: 'In',
-      value: formatBandwidth(stats.network.in),
-    },
-    {
-      label: 'Out',
-      value: formatBandwidth(stats.network.out),
-    },
-    {
-      label: 'Up',
-      value: stats.uptime || '-',
-    },
-    ...(stats.temperature > 0 ? [{
-      label: 'Temp',
-      value: `${Math.round(stats.temperature)}C`,
-    }] : []),
-  ];
-
-  return (
-    <div className="mt-3 flex flex-wrap gap-1.5">
-      {facts.map((fact) => (
-        <span
-          key={fact.label}
-          className="inline-flex min-w-0 items-center gap-1.5 rounded-sm border border-border-light bg-surface-elevated/60 px-2 py-1 text-[11px]"
-        >
-          <span className="font-mono text-[9px] uppercase tracking-wider text-text-muted">
-            {fact.label}
-          </span>
-          <span className="max-w-[8.5rem] truncate font-mono text-[10px] text-text-secondary">
-            {fact.value}
-          </span>
-        </span>
-      ))}
-    </div>
-  );
-}
-
-function ServerTrendPanel({
+// A single telemetry strip: three labeled sparklines on a shared grid, titled
+// by a hairline caption with the sample count. Replaces the boxed trend panel.
+function ServerTrendStrip({
   samples,
   stats,
 }: {
@@ -569,24 +510,22 @@ function ServerTrendPanel({
     : 'waiting';
 
   return (
-    <div className="mt-4 rounded-sm border border-border-light bg-surface-sunken/25 p-2.5">
-      <div className="mb-2 flex items-center justify-between gap-2">
-        <div className="text-[10px] uppercase tracking-wider text-text-tertiary">
+    <div className="mt-4">
+      <div className="flex items-baseline justify-between gap-3 border-b border-border-light pb-1.5">
+        <span className="font-mono text-[10px] uppercase tracking-[0.14em] text-text-tertiary">
           24h telemetry
-        </div>
-        <div className="font-mono text-[10px] text-text-muted">
-          {sampleLabel}
-        </div>
+        </span>
+        <span className="font-mono text-[10px] tabular-nums text-text-muted">{sampleLabel}</span>
       </div>
-      <div className="grid grid-cols-3 gap-2">
-        <TrendMini label="CPU" valueLabel={`${stats.cpu.toFixed(0)}%`} values={cpuValues} />
-        <TrendMini
-          label="Memory"
+      <div className="mt-2.5 grid grid-cols-3 gap-x-5">
+        <TrendColumn label="CPU" valueLabel={`${stats.cpu.toFixed(0)}%`} values={cpuValues} />
+        <TrendColumn
+          label="Mem"
           valueLabel={`${percent(stats.memory.used, stats.memory.total)}%`}
           values={memoryValues}
         />
-        <TrendMini
-          label="Network"
+        <TrendColumn
+          label="Net"
           valueLabel={formatBandwidth(stats.network.in + stats.network.out)}
           values={networkValues}
         />
@@ -595,7 +534,7 @@ function ServerTrendPanel({
   );
 }
 
-function TrendMini({
+function TrendColumn({
   label,
   valueLabel,
   values,
@@ -605,45 +544,16 @@ function TrendMini({
   values: number[];
 }) {
   return (
-    <div className="min-w-0 rounded-sm bg-surface-elevated/60 p-1.5">
-      <div className="mb-1 flex items-center justify-between gap-1">
-        <div className="truncate text-[10px] uppercase tracking-wider text-text-tertiary">
+    <div className="min-w-0">
+      <div className="mb-1 flex items-baseline justify-between gap-1.5">
+        <span className="truncate font-mono text-[9px] uppercase tracking-wider text-text-muted">
           {label}
-        </div>
-        <div className="truncate font-mono text-[10px] text-text-secondary">
+        </span>
+        <span className="shrink-0 font-mono text-[10px] tabular-nums text-text-secondary">
           {valueLabel}
-        </div>
+        </span>
       </div>
-      <TrendSparkline values={values} />
-    </div>
-  );
-}
-
-function TrendSparkline({ values }: { values: number[] }) {
-  const points = sparklinePoints(values);
-
-  if (!points) {
-    return <div className="h-7 rounded-sm bg-surface-sunken/45" />;
-  }
-
-  return (
-    <div className="h-7 overflow-hidden">
-      <svg
-        viewBox="0 0 72 28"
-        preserveAspectRatio="none"
-        className="h-full w-full text-ink-500"
-        aria-label="Server telemetry trend"
-      >
-        <polyline
-          points={points}
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.25"
-          vectorEffect="non-scaling-stroke"
-          strokeLinejoin="round"
-          strokeLinecap="round"
-        />
-      </svg>
+      <Sparkline values={values} width={72} height={24} fill ariaLabel={`${label} 24h trend`} />
     </div>
   );
 }
@@ -695,29 +605,6 @@ function formatBandwidth(bytesPerSecond: number): string {
   return `${formatBytes(bytesPerSecond)}/s`;
 }
 
-function sparklinePoints(values: number[], width = 72, height = 28) {
-  const finiteValues = values.map(Number).filter(Number.isFinite);
-  if (finiteValues.length === 0) return '';
-
-  const points = finiteValues.length === 1
-    ? [finiteValues[0], finiteValues[0]]
-    : finiteValues;
-  const min = Math.min(...points);
-  const max = Math.max(...points);
-  const span = max - min || 1;
-  const xStep = width / (points.length - 1);
-
-  return points.map((value, index) => {
-    const x = index * xStep;
-    const y = height - ((value - min) / span) * (height - 4) - 2;
-    return `${roundCoordinate(x)},${roundCoordinate(y)}`;
-  }).join(' ');
-}
-
-function roundCoordinate(value: number) {
-  return Math.round(value * 100) / 100;
-}
-
 function reorder<T>(
   items: T[],
   fromIndex: number,
diff --git a/web/src/components/Tree/specPrimitives.tsx b/web/src/components/Tree/specPrimitives.tsx
new file mode 100644
index 0000000..ec0e80d
--- /dev/null
+++ b/web/src/components/Tree/specPrimitives.tsx
@@ -0,0 +1,474 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+// ---------------------------------------------------------------------------
+// Archival Technical Minimalism — shared visual primitives.
+//
+// The dashboard's structure comes from alignment and hairline rules, not from
+// nested rounded cards. These primitives encode that discipline so every module
+// (Media, Server, …) reads like a printed spec sheet: a mono caption header, a
+// ledger of label/value rows on a shared grid, borderless metadata chips, and a
+// single sparkline language. Colors are token-driven so dark mode follows.
+// ---------------------------------------------------------------------------
+
+/**
+ * A technical sub-section header: a small mono caption on the left, optional
+ * aside on the right, sitting on a hairline rule. Used to title a block inside
+ * a module (e.g. "Libraries", "Telemetry") without a boxed container.
+ */
+export function SpecCaption({
+  children,
+  aside,
+  className = '',
+}: {
+  children: React.ReactNode;
+  aside?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`flex items-baseline justify-between gap-3 border-b border-border-light pb-1.5 ${className}`}
+    >
+      <span className="font-mono text-[10px] uppercase tracking-[0.14em] text-text-tertiary">
+        {children}
+      </span>
+      {aside != null && (
+        <span className="font-mono text-[10px] tabular-nums text-text-muted">{aside}</span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * A registration / crop mark: four corner ticks framing a content box, the way a
+ * print sheet marks a registered area. The site's signature "focus/today" frame
+ * — used instead of a filled highlight so a marked cell reads as an instrument
+ * target, not a button. Renders its children centered inside the marked area.
+ */
+export function RegistrationMark({
+  children,
+  active = true,
+  hoverTickClass = '',
+  size = 6,
+  className = '',
+}: {
+  children: React.ReactNode;
+  /** When false, ticks are hidden (children render bare) — for hover/idle. */
+  active?: boolean;
+  /**
+   * Static Tailwind class(es) revealing faint ticks on a parent hover group when
+   * not already active, e.g. "group-hover/day:border-text-muted". Must be a
+   * literal so the JIT can see it — never build it dynamically.
+   */
+  hoverTickClass?: string;
+  /** Tick arm length in px. */
+  size?: number;
+  className?: string;
+}) {
+  const arm = `${size}px`;
+  // Active = solid ink ticks. Otherwise, optionally a faint tick on parent hover.
+  const tick = active
+    ? 'border-text-primary'
+    : `border-transparent ${hoverTickClass}`;
+  return (
+    <span className={`relative inline-flex items-center justify-center ${className}`}>
+      <span aria-hidden className={`pointer-events-none absolute left-0 top-0 border-l border-t transition-colors ${tick}`} style={{ width: arm, height: arm }} />
+      <span aria-hidden className={`pointer-events-none absolute right-0 top-0 border-r border-t transition-colors ${tick}`} style={{ width: arm, height: arm }} />
+      <span aria-hidden className={`pointer-events-none absolute bottom-0 left-0 border-b border-l transition-colors ${tick}`} style={{ width: arm, height: arm }} />
+      <span aria-hidden className={`pointer-events-none absolute bottom-0 right-0 border-b border-r transition-colors ${tick}`} style={{ width: arm, height: arm }} />
+      {children}
+    </span>
+  );
+}
+
+type StampTone = 'live' | 'idle' | 'positive' | 'negative' | 'syncing' | 'warning';
+
+/**
+ * A stamped status label: a tiny mono uppercase code, optionally with a leading
+ * dot, drawn like an inspection stamp rather than a filled pill. One consistent
+ * status language across the dashboard (online/stale/today/±/syncing).
+ */
+export function Stamp({
+  children,
+  tone = 'idle',
+  dot = true,
+  className = '',
+}: {
+  children: React.ReactNode;
+  tone?: StampTone;
+  dot?: boolean;
+  className?: string;
+}) {
+  const text =
+    tone === 'live' || tone === 'positive'
+      ? 'text-accent-green-dark'
+      : tone === 'negative'
+        ? 'text-accent-red-dark'
+        : tone === 'warning'
+          ? 'text-accent-amber-dark'
+          : tone === 'syncing'
+            ? 'text-text-secondary'
+            : 'text-text-muted';
+  const dotColor =
+    tone === 'live' || tone === 'positive'
+      ? 'bg-accent-green'
+      : tone === 'negative'
+        ? 'bg-accent-red'
+        : tone === 'warning'
+          ? 'bg-accent-amber'
+          : 'bg-ink-300';
+
+  return (
+    <span className={`inline-flex items-center gap-1 font-mono text-[9px] uppercase tracking-[0.16em] ${text} ${className}`}>
+      {dot && <span className={`h-1 w-1 rounded-full ${dotColor} ${tone === 'syncing' ? 'animate-pulse' : ''}`} />}
+      {children}
+    </span>
+  );
+}
+
+/**
+ * The module's archival index header: a fixed semantic code (e.g. CAL) and a
+ * data-source label (LOCAL / LIVE / CACHED) on the left, an optional serial /
+ * coordinate on the right beside a registration mark — all on one hairline rule.
+ * This is the dashboard's signature "filed record" header.
+ */
+export function SpecHeader({
+  code,
+  source,
+  serial,
+  right,
+  className = '',
+}: {
+  /** Fixed module code, e.g. "CAL", "SRV", "WTHR". */
+  code: string;
+  /** Provenance tag, e.g. "LOCAL", "LIVE", "CACHED". */
+  source?: string;
+  /** Right-aligned serial / coordinate, e.g. "2026·06". */
+  serial?: string;
+  /** Extra right-side controls (nav, refresh) rendered after the serial. */
+  right?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={`flex items-center justify-between gap-3 border-b border-border-light pb-2 ${className}`}>
+      <div className="flex min-w-0 items-center gap-2 font-mono text-[10px] uppercase tracking-[0.16em]">
+        <span className="text-text-secondary">{code}</span>
+        {source && (
+          <>
+            <span aria-hidden className="text-text-muted">/</span>
+            <span className="text-text-muted">{source}</span>
+          </>
+        )}
+      </div>
+      <div className="flex shrink-0 items-center gap-2.5">
+        {serial && (
+          <span className="flex items-center gap-1.5 font-mono text-[10px] tabular-nums tracking-wider text-text-muted">
+            <span aria-hidden className="text-text-tertiary">⌖</span>
+            {serial}
+          </span>
+        )}
+        {right}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * One ledger row: a label on the left, a value on the right, baseline-aligned.
+ * Inside a {@link SpecRows} group the rows share dotted hairline separators, so
+ * a stack of these reads as a single aligned table rather than separate cards.
+ */
+export function SpecRow({
+  label,
+  value,
+  valueTone = 'primary',
+  title,
+}: {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  valueTone?: 'primary' | 'secondary' | 'accent' | 'warning' | 'danger';
+  title?: string;
+}) {
+  const toneClass =
+    valueTone === 'accent'
+      ? 'text-accent-green-dark'
+      : valueTone === 'warning'
+        ? 'text-accent-amber-dark'
+        : valueTone === 'danger'
+          ? 'text-accent-red-dark'
+          : valueTone === 'secondary'
+            ? 'text-text-secondary'
+            : 'text-text-primary';
+
+  return (
+    <div className="flex items-baseline justify-between gap-3 py-1" title={title}>
+      <span className="min-w-0 truncate font-mono text-[10px] uppercase tracking-wider text-text-tertiary">
+        {label}
+      </span>
+      <span className={`shrink-0 font-mono text-[11px] tabular-nums ${toneClass}`}>{value}</span>
+    </div>
+  );
+}
+
+/** Groups {@link SpecRow}s with hairline dividers — the ledger body. */
+export function SpecRows({ children }: { children: React.ReactNode }) {
+  return <div className="divide-y divide-border-light/70">{children}</div>;
+}
+
+/**
+ * A compact metric cell for a glanceable grid: tiny mono label above a tabular
+ * value, optionally over a hairline-tracked bar. No border — cells sit on a
+ * shared column grid and are separated by whitespace + an optional baseline bar.
+ */
+export function SpecMetric({
+  label,
+  value,
+  bar,
+  tone = 'neutral',
+}: {
+  label: string;
+  value: string;
+  /** 0–100; when provided a thin progress bar is drawn under the value. */
+  bar?: number;
+  tone?: 'neutral' | 'ok' | 'warn' | 'crit';
+}) {
+  const barColor =
+    tone === 'crit'
+      ? 'bg-accent-red'
+      : tone === 'warn'
+        ? 'bg-accent-amber'
+        : tone === 'ok'
+          ? 'bg-accent-green'
+          : 'bg-ink-400';
+
+  return (
+    <div className="min-w-0">
+      <div className="flex items-baseline justify-between gap-1.5">
+        <span className="truncate font-mono text-[9px] uppercase tracking-wider text-text-muted">
+          {label}
+        </span>
+        <RollingNumber
+          value={value}
+          className="shrink-0 font-mono text-[11px] font-medium text-text-primary"
+        />
+      </div>
+      {bar != null && (
+        <div className="mt-1.5 h-px w-full bg-border-light">
+          <div
+            className={`h-px ${barColor} transition-all`}
+            style={{ width: `${Math.max(0, Math.min(100, bar))}%` }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * A borderless metadata chip: mono label + tabular value separated by a hairline
+ * divider, laid out inline. Replaces bordered "badge" pills. Group several with
+ * {@link MetaChipGroup}.
+ */
+export function MetaChip({
+  label,
+  value,
+  tone = 'neutral',
+  title,
+}: {
+  label: string;
+  value: React.ReactNode;
+  tone?: 'neutral' | 'accent' | 'warning';
+  title?: string;
+}) {
+  const valueClass =
+    tone === 'accent'
+      ? 'text-accent-green-dark'
+      : tone === 'warning'
+        ? 'text-accent-amber-dark'
+        : 'text-text-secondary';
+
+  return (
+    <span
+      className="inline-flex items-stretch overflow-hidden rounded-[2px] bg-surface-sunken/60"
+      title={title}
+    >
+      <span className="px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-wider text-text-muted">
+        {label}
+      </span>
+      <span
+        className={`border-l border-border-light px-1.5 py-0.5 font-mono text-[10px] tabular-nums ${valueClass}`}
+      >
+        {value}
+      </span>
+    </span>
+  );
+}
+
+export function MetaChipGroup({ children }: { children: React.ReactNode }) {
+  return <div className="flex flex-wrap gap-1">{children}</div>;
+}
+
+/**
+ * The dashboard's one sparkline language: a thin polyline with an optional area
+ * fill, drawn on a non-scaling stroke so it stays crisp at any width. Tone maps
+ * to the trend's meaning; default ink keeps it quiet.
+ */
+export function Sparkline({
+  values,
+  width = 96,
+  height = 26,
+  tone = 'ink',
+  fill = false,
+  className = '',
+  ariaLabel = 'Trend',
+}: {
+  values: number[];
+  width?: number;
+  height?: number;
+  tone?: 'ink' | 'accent' | 'up' | 'down';
+  fill?: boolean;
+  className?: string;
+  ariaLabel?: string;
+}) {
+  const coords = sparklineCoords(values, width, height);
+
+  const colorClass =
+    tone === 'accent'
+      ? 'text-accent-green'
+      : tone === 'up'
+        ? 'text-accent-green-dark'
+        : tone === 'down'
+          ? 'text-accent-red-dark'
+          : 'text-ink-400';
+
+  if (!coords) {
+    // Flat baseline so the row keeps its height when there is no series yet.
+    return (
+      <div className={`flex items-center ${className}`} style={{ height }} aria-hidden>
+        <div className="h-px w-full bg-border-light" />
+      </div>
+    );
+  }
+
+  const line = coords.map((point) => `${point.x},${point.y}`).join(' ');
+  const area = `0,${height} ${line} ${width},${height}`;
+
+  return (
+    <div className={`overflow-hidden ${className}`} style={{ height }}>
+      <svg
+        viewBox={`0 0 ${width} ${height}`}
+        preserveAspectRatio="none"
+        className={`h-full w-full ${colorClass}`}
+        aria-label={ariaLabel}
+      >
+        {fill && <polygon points={area} fill="currentColor" opacity={0.08} />}
+        <polyline
+          points={line}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.25"
+          vectorEffect="non-scaling-stroke"
+          strokeLinejoin="round"
+          strokeLinecap="round"
+        />
+      </svg>
+    </div>
+  );
+}
+
+interface SparkPoint {
+  x: number;
+  y: number;
+}
+
+// Shared sparkline geometry: pads a single value into a flat line, normalizes
+// to the box with a 2px vertical inset so the stroke never clips at the edges.
+function sparklineCoords(values: number[], width: number, height: number): SparkPoint[] | null {
+  const finite = values.map(Number).filter(Number.isFinite);
+  if (finite.length === 0) return null;
+
+  const series = finite.length === 1 ? [finite[0], finite[0]] : finite;
+  const min = Math.min(...series);
+  const max = Math.max(...series);
+  const span = max - min || 1;
+  const inset = 2;
+  const usable = height - inset * 2;
+  const xStep = width / (series.length - 1);
+
+  return series.map((value, index) => ({
+    x: round(index * xStep),
+    y: round(height - inset - ((value - min) / span) * usable),
+  }));
+}
+
+function round(value: number) {
+  return Math.round(value * 10) / 10;
+}
+
+// ---------------------------------------------------------------------------
+// Mechanical readout — an odometer/flip number for live values.
+//
+// Renders a pre-formatted numeric string where each *digit* is a vertical reel
+// of 0–9 that rolls to the current digit when the value changes, like a
+// mechanical counter or instrument. Non-digit glyphs (., ,, $, %, -, space)
+// stay fixed. Animates only on change; honors prefers-reduced-motion. Keep the
+// string monospaced + tabular at the call site so columns don't shift.
+// ---------------------------------------------------------------------------
+
+const DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+
+export function RollingNumber({
+  value,
+  className = '',
+  ariaLabel,
+}: {
+  /** Already-formatted display string, e.g. "$728.96", "58", "-2.88%". */
+  value: string;
+  className?: string;
+  ariaLabel?: string;
+}) {
+  const [animate, setAnimate] = useState(false);
+  const prev = useRef(value);
+
+  useEffect(() => {
+    if (prev.current !== value) {
+      setAnimate(true);
+      prev.current = value;
+    }
+  }, [value]);
+
+  return (
+    <span
+      className={`inline-flex items-center tabular-nums ${className}`}
+      aria-label={ariaLabel ?? value}
+      role={ariaLabel ? undefined : 'text'}
+    >
+      {value.split('').map((char, index) =>
+        DIGITS.includes(char) ? (
+          <Reel key={index} digit={Number(char)} animate={animate} />
+        ) : (
+          <span key={index} aria-hidden className="inline-block">
+            {char === ' ' ? ' ' : char}
+          </span>
+        ),
+      )}
+    </span>
+  );
+}
+
+// A single digit reel: a 10-row column translated so the active digit sits in
+// view. The transition runs only after the first change (animate=true), so the
+// initial paint doesn't roll from 0.
+function Reel({ digit, animate }: { digit: number; animate: boolean }) {
+  return (
+    <span aria-hidden className="relative inline-block h-[1em] overflow-hidden align-bottom" style={{ width: '0.62em' }}>
+      <span
+        className={`flex flex-col ${animate ? 'motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-[cubic-bezier(0.2,0.8,0.2,1)]' : ''}`}
+        style={{ transform: `translateY(-${digit}em)` }}
+      >
+        {DIGITS.map((d) => (
+          <span key={d} className="h-[1em] leading-[1em]">{d}</span>
+        ))}
+      </span>
+    </span>
+  );
+}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 2d0a8e4..3c9f96e 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -50,8 +50,8 @@ module.exports = {
         },
       },
       fontFamily: {
-        body: ['ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', "Segoe UI", 'Roboto', "Helvetica Neue", 'Arial', "Noto Sans", 'sans-serif'],
-        mono: ['ui-monospace', 'SFMono-Regular', '"SF Mono"', 'Menlo', 'Consolas', '"Liberation Mono"', 'monospace'],
+        body: ['var(--font-sans)', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', "Segoe UI", 'Roboto', "Helvetica Neue", 'Arial', "Noto Sans", 'sans-serif'],
+        mono: ['var(--font-mono)', 'ui-monospace', 'SFMono-Regular', '"SF Mono"', 'Menlo', 'Consolas', '"Liberation Mono"', 'monospace'],
         serif: ['var(--font-serif)', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
       },
       borderRadius: {