# DESIGN.md — Signal Desk visual direction ### The Broadcast Witness — cold-room broadcast console status dashboard > **The brief in one line:** A status dashboard conceived as a Cold War broadcast monitoring console — instrument precision, aviation-grade seriousness, vertical stack of service tracks each running a live SVG signal wire that encodes system health through waveform behavior alone. --- ## 1 · Design system ### Palette | Role | Hex | Usage | |---|---|---| | Ground | `#0D0F0D` | Page background — deep near-black matte, not pure black | | Track surface | `#111311` | Individual service track background, 2px lighter than ground | | Track divider | `#1A1E1A` | Hairline rule between tracks — separation without decoration | | Phosphor green | `#3BFF77` | Operational signal wire, service name text, reading label — CRT cold luminosity | | Phosphor dim | `#1A7A3A` | Operational wire base color (unlit segments, far-field trace) | | Amber | `#FFAA00` | Degraded signal wire and labels — authentic scope warning register | | Amber dim | `#7A4E00` | Degraded base trace, background interference floor | | Signal red | `#FF2D2D` | Down / critical wire, flatline, terminus pulse | | Signal red dim | `#7A1010` | Down base trace | | Headline text | `#3BFF77` | Broadcast headline — phosphor on dark, full brightness | | Muted text | `#3B9960` | Timestamps, labels at rest — dimmed phosphor, not grey (WCAG AA compliant against ground: ~5.5:1) | **Color law:** one light source, one instrument register. Green = nominal. Amber = watch it. Red = down. No color ever appears outside its assigned system state. The muted text color is a dimmed green, never a neutral grey — the console has only one kind of light, and it is phosphor. **Favicon:** a 32×32 SVG favicon with ground `#0D0F0D` fill and a single horizontal phosphor-green `#3BFF77` line (stroke-width 2) across the vertical midpoint — the signal wire identity mark at icon scale. ### Signature moves - **The live signal wire** — SVG path per track, CSS keyframe animated. State is encoded in waveform character: clean flutter for operational, jagged interference for degraded, flatline + pulse dot for down. No icon, no badge, no pill — the wire IS the status. - **Terminus pulse** — on downed services, a small circle at the right end of the flatline slow-pulses in signal red (`opacity 1 → 0.2 → 1`, 2s, infinite). The only moving element on a dead track. - **Monospace totality** — not one character in the layout is set in a proportional face. The console does not have proportional text. - **Flatline discipline** — a down service does not jitter, does not animate its body. The pulse is the only signal. Stillness is the message. ### Type - **Display:** System monospace stack — `'Courier New', Courier, 'Lucida Console', 'DejaVu Sans Mono', monospace` - **Body:** Same stack — no second family. Monospace only, throughout. - **Pairing rule applied:** No pairing. One voice, one register. The console has no secondary personality. - **License check:** `Courier New` (bundled, Windows/macOS/Linux — no license required) · `Lucida Console` (system, Windows) · `DejaVu Sans Mono` (SIL OFL, commonly pre-installed on Linux) · `monospace` (UA fallback). Zero external font loading. No `@font-face`. No CDN request. No Google Fonts. License = system. - **Fallback chains:** `'Courier New', Courier, 'Lucida Console', 'DejaVu Sans Mono', monospace` — all monospace, all system-resident, all license-clear. ### Texture **Track anatomy:** each service track is a full-width horizontal band, 72px tall (9 × 8pt grid units). Left zone: service name, monospace, ~14px, phosphor-state color, uppercase, left-aligned, 16px inset from edge. Center zone: SVG signal wire, full remaining width, viewBox height 48px. Right zone: reading label (e.g., "NOMINAL", "DEGRADED", "DOWN"), monospace, ~11px, right-aligned, 16px inset. Track divider: 1px `#1A1E1A` hairline. **Broadcast headline zone:** full-width top bar, 96px tall. Content: facility name / system label in monospace all-caps, ~22px — rendered as the page's `

` (one per page). The `

` carries the highest-severity aggregate state class (`op` / `deg` / `dn`): signal red `#FF2D2D` when any service is down, otherwise amber `#FFAA00` when any service is degraded, otherwise phosphor green `#3BFF77`. Severity precedence is DOWN > DEGRADED > OPERATIONAL; a lower-severity headline is a lie the instrument cannot tell. Subtitle line: system scope identifier, ~13px, muted phosphor. Right-aligned: live timestamp, monospace, ~11px, muted phosphor. **Timestamp footer:** 48px bar. Flex row: "LAST CHECKED HH:MM:SS UTC" left-aligned, "MONITOR FEED →" anchor right-aligned. Both monospace, 10px, muted phosphor (`color: #3B9960`). Anchor: `text-decoration: none`; `:hover` brightens to `#3BFF77`. It links to the public browser witness receipt — no JS, form, backend, or placeholder address. **Motion contract:** transform and opacity CSS keyframes only. No paint-tier property animation, JS animation library, canvas, or requestAnimationFrame loops. `prefers-reduced-motion: reduce` disables every waveform animation (`animation: none`). The layout remains fully readable at rest. **Grid:** 8pt base. Track height = 9 units (72px). Headline = 12 units (96px). Footer = 6 units (48px). Horizontal padding = 2 units (16px) on all inset text. No decorative spacing — every gap is a grid multiple. --- ## 2 · Page architecture | # | Section | The move | This project's version | |---|---|---|---| | 1 | Broadcast headline | Facility identification, timestamp | Full-width bar: system name all-caps monospace left, renders as `

` — the page's one semantic heading; live UTC timestamp right, muted phosphor — the console header | | 2 | Service track stack | Live signal wire per service | One track per monitored service; stacked vertically; no pagination; all states visible simultaneously | | 3 | Timestamp footer | Last-checked ground truth + monitor action | Flex row: "LAST CHECKED HH:MM:SS UTC" left-aligned; "MONITOR FEED →" browser-witness anchor right-aligned — both monospace, muted phosphor | **Track stack detail — three track states:** *Operational track:* green wire. SVG path across the viewBox width with Y-values within ±6px of center (center = 24px in a 48px viewBox). **Production approach:** a slow vertical `transform: translateY()` oscillation on the path group (±2px, 4s, `ease-in-out`, `alternate`, `infinite`) plus an opacity-only pulse on the bright signal segment. Motion stays on transform/opacity and the shape remains readable without animation. Wire color: `#3BFF77`. Stroke width: 1.5px. *Degraded track:* amber wire. Same path group, different `d` attribute — more jagged vertex distribution. Vertical oscillation amplitude: ±8px, 1.2s, `ease-in-out`, `alternate`, `infinite`. A second `@keyframes interference` applies a random-feeling stutter via a stepped timing function: `steps(6, jump-none)` at 0.3s duration alternating. Wire color: `#FFAA00`. Stroke width: 1.5px. *Down track:* red flatline. `` is a straight horizontal line at y=24. No vertical animation. Wire color: `#FF2D2D`. Stroke width: 1.5px. At right terminus (x=viewBox width − 12px, y=24): `` with `@keyframes terminus-pulse { 0%,100% { opacity:1; } 50% { opacity:0.2; } }` — duration 2s, `ease-in-out`, `infinite`. --- ## 3 · Media production plan Budget cap: $0 — no image generation. No generated assets. No photography. No icons. No illustrations. All visual output is CSS + inline SVG, rendered entirely in the browser from code. This is not a constraint imposed by budget — it is the concept: an instrument has no decoration, and this console's visual language is the instrument itself. Every pixel is functional. | Asset | Source | Cost | |---|---|---| | Signal wires (all states) | Inline SVG `` + CSS keyframes | $0 | | Terminus pulse | Inline SVG `` + CSS keyframes | $0 | | All type | System monospace font stack | $0 | | Layout chrome | CSS only | $0 | --- ## 4 · Taste rules 1. **The wire is the status.** No badge, no icon, no pill, no color-coded dot. If the waveform cannot carry the state, the state has not been designed. 2. **Monospace is not a stylistic choice — it is a medium restriction.** A proportional character anywhere on this console is a failure condition. 3. **Green means nominal.** Amber means watch. Red means down. No color crosses its state. A green label on a degraded service is a lie the instrument cannot tell. 4. **Nothing decorates.** If an element cannot be asked "what does it report?" it is removed. Decorative dividers, ornamental spacing, brand-mark lockups — none of these exist on a broadcast console. 5. **The flatline is sacred.** A downed service is not a degraded service with a red color. It is still. It is flat. The only motion permitted is the terminus pulse, and that pulse means: we are watching. 6. **Animation serves measurement, not mood.** The operational flutter is not a flourish — it is the system breathing. The interference pattern is not a texture — it is noise in the signal. Motion without a measured meaning is rejected. 7. **No blue.** No purple. No neutral grey. The console has one kind of light. Grey text is not dimmed phosphor; it is a different instrument entirely. 8. **Reduced-motion respects the instrument.** Frozen waveforms are still readable. The layout does not collapse or degrade under `prefers-reduced-motion`. The console is readable whether it breathes or not. ## 5 · Resolved decisions - **No external fonts, ever.** The monospace restriction is total. System font stack only. No CDN request fires on load. If a future team member proposes a "monospace web font for consistency" — the answer is no. System monospace IS the consistency. - **SVG `` not `` for animated wires.** CSS cannot animate SVG `points` attributes. Liveness is expressed through group-level `transform` oscillation and an opacity-only bright-segment pulse. This preserves the transform/opacity motion contract with CSS only and no JS. - **Background is `#0D0F0D`, not `#000000`.** Pure black looks cheap on monitors. A near-black with a faint green temperature reads as matte console housing. - **Track height is 72px (9 × 8pt).** Tested against the signal wire height (48px viewBox) + 12px vertical padding. Text and wire coexist without crowding at this height. - **Timestamp footer is static HTML.** It does not auto-update via JS in the static build. Stage 2 may add a JS clock; Stage 1 ships a fixed timestamp that humans update on redeploy. The instrument reports what it knows. - **`steps()` timing for interference animation.** Smooth easing on the degraded track would look intentional — like a designed wave. Stepped timing makes it feel like bad signal. The easing function is chosen for what it communicates, not for what looks clean. - **Terminus pulse period is 2s.** Slower than a heartbeat. Fast enough to register as a signal. Anything faster reads as alert; anything slower reads as broken. 2s is the instrument's pace of concern. - **Monitor action links to the public browser witness on the footer line.** Right-aligned. Muted phosphor (`#3B9960`) at rest, full phosphor (`#3BFF77`) on hover. No form element, placeholder address, JS, or backend dependency.