# Design decisions — Phase 1

# Palette and type

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.
Geist for text and headlines, Geist Mono for technical labels and tabular numerals, Instrument Serif italic for a single accent in display headlines.
12-column grid, thin rules, generous spacing; no gradients, glass effects or neon.

	A — editorial split (chosen)	B — full-bleed photograph
Layout	Headline on 7 columns, photograph on 5 columns in its native portrait framing	Photograph behind the headline, darkened by an overlay
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
Readability	Text on a flat background: contrast is constant at every width	Contrast depends on what lies under each word; fails on small screens
Performance	One image at ≤42vw on desktop	One image at 100vw, larger LCP

A was selected on all three criteria. On mobile the photograph follows the text at full width.

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.
Everything is disabled under prefers-reduced-motion.
No 3D and no motion library.

Original mark: six nodes on a hexagonal lattice joined to a core. No third-party logo or trademarked shape.

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.

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.
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.
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.
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*.