Repository Public
1# Design decisions — Phase 123## Palette and type4- Graphite `#080A0E` background, charcoal `#11151C` surfaces, cool blue `#78A9FF` as the only accent, silver `#C9D0D9` for secondary text, paper `#EEF1F5` for text. The warm tones come from the photographs only.5- Geist for text and headlines, Geist Mono for technical labels and tabular numerals, Instrument Serif italic for a single accent in display headlines.6- 12-column grid, thin rules, generous spacing; no gradients, glass effects or neon.78## Hero: two compositions compared9| | A — editorial split (chosen) | B — full-bleed photograph |10|---|---|---|11| Layout | Headline on 7 columns, photograph on 5 columns in its native portrait framing | Photograph behind the headline, darkened by an overlay |12| Authenticity | The whole shelving unit is visible, uncropped in width, with no treatment over the machines | A portrait photo forced into a landscape band loses most of the rack; the overlay alters how the hardware looks |13| Readability | Text on a flat background: contrast is constant at every width | Contrast depends on what lies under each word; fails on small screens |14| Performance | One image at ≤42vw on desktop | One image at 100vw, larger LCP |1516A was selected on all three criteria. On mobile the photograph follows the text at full width.1718## Motion19- Scroll-driven reveals in pure CSS (`animation-timeline: view()`), so content is never hidden when scripts fail. A slow parallax on one photograph. Dashed "trace" animation on network links.20- Everything is disabled under `prefers-reduced-motion`.21- No 3D and no motion library.2223## Identity24- Original mark: six nodes on a hexagonal lattice joined to a core. No third-party logo or trademarked shape.2526## Diagrams27- The topology and the architecture diagram are HTML with real text (translatable, zoomable, readable by assistive technology) and small SVG connectors. They show roles and boundaries only.2829## Version 2 (2026-11-10): light theme and live telemetry30- The palette above is superseded. Background `#F6F7F9`, white surfaces, ink `#0C1322`, one accent `#1D5FD1`; status text `#076A40` / `#8A4B00`. Tokens are named by role in `src/app/globals.css`.31- Chart series: CPU `#2A78D6`, memory `#EB6834`, GPU `#1BAF7A` (distinct under colour-vision deficiency), always with a legend, a tooltip and a table view. Text never takes a series colour.32- Meters are blue; only memory changes colour at high pressure, since a busy CPU or GPU is expected. The CPU wall uses one blue ramp, light to dark.33- Live data is fetched by the site's server from the monitoring agent and reduced to utilisation figures (`src/lib/live.ts`). The browser only calls `/api/live*`.34