# Design Language for tnhec.com ## Aesthetics and Tone tnhec.com is a **generative field document** — the kind of artifact a field researcher produces when they've been out in the dark long enough that their notes start vibrating. Imagine a technical dispatch printed on mimeograph paper, then photographed at 3am under a fluorescent tube, then run through a CRT-era signal processor that occasionally drops frames. The visual philosophy is: *the signal is real but the transmission is degraded*, and the degradation is itself information. The dominant register is **navy-metallic generative**: deep maritime navy as the ground, with silver-steel and tarnished gold as the metallic accent system — not chrome-bright, but the silver of a key that's been carried in a pocket for ten years, and the gold of a map-maker's rule left in salt air. The generative dimension means that key visual elements are procedurally produced — not algorithmic for its own sake, but because tnhec.com is about processes that generate outputs, and the design should embody that. The **glitch** is the emotional signature. It appears as: brief horizontal displacement artifacts on scroll events, signal-noise overlays at section transitions, and occasional chromatic aberration on heading text that suggests a scanner reading text from a slightly misaligned page. The glitch never catastrophically breaks the layout — it is a whisper, not a shout. Like a voice saying *I'm here, the transmission is just imperfect*. The tone is **raw-authentic**: no polish theater, no stock-photography warmth, no congratulatory hero animation. The site speaks in the voice of someone who has done the work and is reporting it back, in ink that's still slightly wet. ## Layout Motifs and Structure The structural system is **editorial-flow** — a rejection of both the rigid magazine-spread and the conversational single-column. Editorial flow here means the page behaves like a well-designed journal article with graphic ambitions: two irregular tracks that sometimes merge, sometimes diverge, with the content pulling the layout rather than the layout confining the content. **The three-layer composition:** 1. **Background layer (generative substrate):** A procedurally generated field of fine-line geometry — think a Voronoi diagram drawn in 0.4px navy lines on a near-black ground, with each cell slightly different in luminosity, as if lit from below by something warm. This layer is `position: fixed`, scrolls at 0.05x speed relative to content, and is drawn fresh on each page load via Canvas API seeded with a timestamp hash. The geometry is not decorative noise — it maps to the site's structural regions, with denser tessellations at areas of higher content density. 2. **Content layer (editorial-flow columns):** Primary content occupies a 680px measure on the left of a 1280px container, with a 280px marginalia track on the right. The left column carries the primary narrative. The right track carries: pull-quotes in a handwritten face at 18px, small line-illustration vignettes, and annotation-style footnotes. On scroll, the two tracks advance at slightly different rates — the right track moves at 0.92x relative to the left, creating a subtle parallax that reads as depth rather than distraction. 3. **Glitch layer (overlay system):** A `position: fixed` canvas behind content but above the substrate, which fires displacement shader passes on `scroll`, `section-enter`, and `interaction` events. The displacement is horizontal only, maximum 4px, lasting 180ms with an exponential decay. Chromatic aberration is implemented as three absolutely-positioned copies of heading text in `#C0C8D4` (neutral), `#B89B4A` (gold), and `#0A1628` (navy), offset by 1.5px in X and Y, with the gold and navy copies at 15% opacity. **The section rhythm follows an A-B-A pattern:** full-width bleed sections alternate with the two-column editorial sections. Full-bleed sections carry the generative art pieces and the large handwritten display moments. The editorial sections carry the substance. This rhythm gives the eye rest and the design drama in sequence. **No navigation bar.** A thin left-edge progress spine — 2px wide, full viewport height, `position: fixed` left — fills in navy from top as the user scrolls, marking position without interrupting the reading experience. ## Typography and Palette **Palette (navy-metallic system):** - `--abyss: #050D1A` — near-black with a deep blue undertone; primary background - `--navy-deep: #0A1628` — the main navy, used for large text-blocks and section grounds - `--navy-mid: #1A2E4A` — mid-navy for card backgrounds, substrate layers - `--steel-silver: #8A9BAF` — the primary metallic silver; used for body text on dark ground - `--pewter: #C0C8D4` — lighter silver for headings on dark backgrounds - `--tarnished-gold: #B89B4A` — the warm metallic accent; used for links, pull-quote rules, highlights - `--oxidized-gold: #8A7030` — darker gold for hover states and substrate geometry - `--glitch-red: #C43030` — used only for glitch displacement layers, at 12% opacity maximum - `--paper-white: #F0EDE8` — for light-mode surface sections; warm off-white to avoid pure-white sterility **Typography system (all Google Fonts):** - **Display headings — `Caveat`** (handwritten variable, wght 400–700): H1 and section titles set at 72–96px, wght 600, in `--pewter`. The handwritten quality signals rawness and authenticity without being whimsical — Caveat has a technical urgency to it, like notes made fast. Headings have the chromatic aberration glitch treatment applied at page load and on scroll-into-view. - **Body — `IBM Plex Serif`** (regular 400, italic 400, medium 500): Body text at 17px/28px line-height in `--steel-silver`. IBM Plex Serif carries a technical-documentary quality — it reads like a well-produced research report, not a literary journal or a tech blog. The combination of a handwritten display face with a structured serif body creates the tension the design needs: urgency on top, substance below. - **Marginalia / annotations — `Caveat`** at 16px, wght 400, `--tarnished-gold`: The same handwritten face as headings but lighter and smaller, in the warm gold, creates a visual language for "aside" content — like margin notes in a research binder. - **Labels and captions — `IBM Plex Mono`** (regular 400) at 11px, letter-spacing +0.08em, uppercase, in `--oxidized-gold`: Used for section markers, figure captions, coordinates, and data labels. The monospace conveys precision and technical documentation. - **Type scale:** 96px / 72px / 48px / 32px / 24px / 17px / 14px / 11px. No decorative weights or gradients on body text — all legibility emphasis is achieved through scale and color. ## Imagery and Motifs **No photography.** The corpus uses photography at 87% — tnhec.com opts out entirely and deliberately. All visual content is either generative or drawn. **Line-illustration system:** A set of 6–8 original-style line illustrations rendered in SVG, all in a consistent style: single-stroke, 0.8px weight, in `--steel-silver` on dark ground or `--navy-mid` on the light-mode surface. The illustration style is **technical-diagram-meets-field-sketch**: think an architectural detail drawing crossed with a naturalist's notebook. Specific visual motifs: 1. **A compass rose** with 16-point precision, rendered as if drawn by a technical pen under pressure — some lines slightly overshot, giving it the handmade quality that contradicts its mathematical structure. This anchors the top of the page. 2. **A signal diagram** — a horizontal line with amplitude variations rendered as an irregularly hand-traced wave, alongside vertical tick marks and annotation arrows. Used as a section divider between the first and second major sections. 3. **A Voronoi cell detail** — a close-up of three or four cells from the background substrate, extracted and rendered as a large illustration (400×240px), showing the mathematical beauty of the structure the viewer can only see partially in the background. 4. **A topology map fragment** — contour lines for an unnamed terrain, with handwritten elevation marks in `--tarnished-gold`. This is used as the central visual in the mid-page full-bleed section. 5. **A distributed node diagram** — circles connected by lines, with some nodes emphasized in gold. Deliberately ambiguous: is this a network topology, a molecular bond diagram, or a social graph? The ambiguity is the point. **Generative geometry:** The Voronoi substrate (described in Layout) is the primary "pattern" element. Additionally, a small procedural element appears in the progress spine: as the user scrolls, faint node-and-connection marks appear on the spine at `height * section_proportion` positions, like waypoints on a route. **Glitch artifacts:** On `section-enter` events, a brief (180ms) horizontal scan-line effect sweeps through the entering section — 3 horizontal lines, 1px tall, in `--pewter` at 25% opacity, displaced 0–3px randomly. This is implemented as a Canvas element overlaid on the section container, fired once per section-enter and never repeated for that section. ## Prompts for Implementation Build tnhec.com as **a single continuous scroll document that is both a research dispatch and a generative art installation** — the two registers must coexist without either dominating. The implementation must honor four commitments: **Commitment 1 — The background is alive but not distracting.** The Voronoi substrate is drawn with `requestAnimationFrame` at initialization, then frozen. It does not animate continuously — continuous animation would compete with the content. Instead, it responds to `mousemove` events by gently brightening the cell nearest the cursor by +8% luminosity, with a 400ms ease-out decay. The effect is subtle — like a bioluminescent organism responding to proximity. Implement using `OffscreenCanvas` for the cell hit-detection computation to avoid main-thread jank. **Commitment 2 — Glitch effects are earned, not wallpapered.** The chromatic aberration on headings fires exactly once per heading per page session: on the first time that heading scrolls into the viewport. It does not repeat on scroll-out/scroll-in cycles. The section-transition scan-line fires once per section per session. The horizontal displacement on the body fires only on rapid scroll events (`scrollDelta > 80px in 100ms`), and never while the user is actively reading (determined by 800ms idle on scroll). Glitch-as-decoration becomes noise; glitch-as-event becomes signal. **Commitment 3 — The editorial-flow columns breathe.** The 680+280 column system collapses to single-column below 900px viewport width. At the breakpoint, the marginalia content — pull-quotes and annotations — migrates into the body column as block-level `