# thoba.it — Design System (v6, "Terminal")


## v6.1 (2026-10-18) — critique-fix polish on v6 "Terminal"

A polish pass on the shipped v6, from the independent critique (`ops/thoba-site/v6-critique-2026-10-18.md`, §4) plus one owner wish. No new tokens beyond a warmer paper; no copy/layout/motion change beyond the five items.

1. **Canvas labels gated off body text during the sweep (P1).** While a visible `.band` prose paragraph (the night-shift copy "The after-hours stack…" and its neighbours) intersects a canvas label's rect, that label fades to 0 (per-frame rect test, eased per label); dots and edges keep drawing. Reduced motion applies the same gate instantly. `check.mjs` §1d asserts it: a 2% sweep scrub at 1440 with a `window.__labelRects` test hook (behind `window.__labelRectsOn`, which the page never sets) finds no drawn label overprinting a visible `.band` paragraph. The settled-state `labelClashes=0` check stands.
2. **Warmer day band (P2, owner's wish).** `--paper #F4F4F2 → #F6F4EF` (a barely-warm neutral, R−B 2→7, matching V5.1's warm paper warmth without the cream/darkness); `--rule #D9D9D6 → #DAD8D3` to keep the hairline in family; `--mist` unchanged (neutral grey text). The résumé shares the token (`resume.html` + its `--sage`), updated and rebuilt; 404 has no paper token. Every day-band AA pair re-verified (below).
3. **OG hub labels only (P3).** `docs/og/og.html` drops the 11 non-hub node micro-labels (kept the dots, edges, the 3 hub labels and the LIVE legend); `assets/og.png` regenerated at 1200×630, reads clean at a 360px downscale.
4. **Live legend dot — white ringed green (P4).** `.legend::before` is now a white (`--on-night`) dot with a 2px green ring (contract-allowed form); the breathe animation and reduced-motion-static behaviour are unchanged.
5. **Pressed language pill contrast confirmed (P5).** The pressed pill is `--signal` green text on a 14% green wash composited over `--night` (effective bg `rgb(15,41,31)`). Measured against that actual background: **9.44:1** — well above AA 4.5. No change needed; the pair is added to the table below and to `check.mjs`.

## v6 (2026-10-18) — "Terminal": a colour round, not a redesign

The owner asked, in his words: *"I would like maybe a less blue theme and more black and white with a tone like green terminal light touch."* and *"Green matrix is only an accent. Rest in black and white, kind of dark mood."* v6 is therefore a **colour round only**. Structure, type (Bricolage Grotesque + Source Serif 4), copy (EN/FR/IT), the scroll film (hero constellation → day band along the terminator → sweep → lab wakes → contact), the live network, the scan line, the Easter egg, the colophon, the résumés' content, the hotfix and the 404 page all stay. Only tokens and the places that hard-code colour change: canvas, WebGL shader, SVG mark/favicon, OG template, PDF styles, and the `--sky` interpolation literals.

**What moved from v5 → v6, in one line:** the observatory *blue* (`--night #0A1726`, `--signal #38BDF8`) becomes a **neutral near-black night** with **one phosphor-green accent**; the warm paper day becomes a **neutral off-white**; **amber is retired** (`--amber` gone — green is the only accent, so "one accent per viewport" is now "the green is rationed").

### Chosen palette (candidate B of three; the study is `docs/reviews/v6-2026-10-18/palette-study.html`)

Night (hero, observatory, focus, principles, drivers, voices, deep night, footer):
- `--night #0A0A0B` observatory surface (neutral near-black, not a cool blue, not a true `#000` void). `--deep #050506` the floor the sky fades to.
- `--on-night #EDEDED` text (16.9:1). `--on-night-soft #9B9B9D` secondary, ticks, captions (7.1:1). `--night-rule #26262A` hairlines.
- `--signal #2EE59D` the phosphor-green **signal**: links, edges-at-rest tint, nodes/hubs accents, packets, scan line, focus rings, primary button fill (12.1:1 on night — a quiet phosphor, not neon). Used **sparingly**; never body text.

Day (about, numbers, path):
- `--paper #F6F4EF` barely-warm neutral off-white (v6.1; was `#F4F4F2`). `--ink #111113` text (17.2:1). `--mist #595A5E` secondary (6.3:1). `--rule #DAD8D3` hairlines (v6.1; was `#D9D9D6`, warmed in step with paper).
- `--signal-ink #15724C` the **dark** green for links on paper (5.4:1). Bright `#2EE59D` on white fails AA, so the day band gets its own darker green. No green fill on paper beyond links and the domain bars.

Rejected candidates (one line each):
- **A — true black `#000` / pure white `#FFF`, green `#39FF14`:** `#000`/`#FFF` is harsh (OLED smear, white halation) and `#39FF14` is the literal "Matrix" green — too loud even rationed.
- **C — cool near-black `#0E1012` / off-white, cool greys, green `#34D399`:** the cool tint reintroduces the blue mood the owner explicitly asked to leave.

### Contrast table (WCAG AA; computed by `docs/reviews/v6-2026-10-18/contrast.mjs`, enforced in `check.mjs`)

| pair | ratio | min |
|---|---|---|
| `--on-night` on `--night` (body) | 16.90:1 | 4.5 |
| `--on-night-soft` on `--night` (secondary, ticks) | 7.13:1 | 4.5 |
| `--signal` on `--night` (link text / UI) | 12.07:1 | 4.5 |
| `--signal` on pressed lang-pill (14% green wash over night, `rgb(15,41,31)`) | 9.44:1 | 4.5 |
| `--ink` on `--paper` (body) | 17.16:1 | 4.5 |
| `--mist` on `--paper` (secondary) | 6.27:1 | 4.5 |
| `--signal-ink` on `--paper` (link text) | 5.39:1 | 4.5 |

(v6.1: paper ratios recomputed against the warmed `#F6F4EF`; pressed-pill pair added — green text measured against the composited wash, not plain night.)

### Where green may appear — and where it must not

**May (signal only, each a few percent of the viewport at most):** links; focus rings; the primary button fill (green fill, near-black text); the network's edge-at-rest tint, the acquired-node pulse and label, the scan line, and the one travelling packet; the live-legend dot (v6.1: a white dot ringed green — a white `--on-night` fill with a 2px `--signal` ring); the build-log step numbers and the one highlighted (AI) panel's hairline; the domain bars on paper (dark green); the three-node mark's accent node; the "now" timeline dot (formerly amber) as a small green dot. The egg telemetry "restored" state settles green; its "cascade" state uses `--on-night` text, **not** red.

**Must not:** green **body text**; green inside headlines; a scanline/CRT overlay; flicker or neon glow on type; monospace anywhere; "Matrix rain"; green as more than a few percent of any single viewport; a second accent colour (amber is retired). The slant (the day-band terminator) stays the **only** diagonal.

### Canvas / shader colour rules (so the re-theme is faithful, not approximate)

- **Canvas network** (`index.html`): nodes and hubs draw in `--on-night`/`--on-night-soft` greys on night and `--ink` on paper; the **green** is used only for the acquired-node pulse+label, the scan line, the single travelling packet and (formerly the amber circuit packet) one green circuit packet. Edges stay grey/signal-tinted at low alpha. The JS colour constants: `C.pkt = '46,229,157'`, `C.sub = '155,155,157'`, and the former `C.amb` becomes the same green (the "circuit" packet is now green, keeping one-accent). RGB triplets in the draw code map to tokens: `237,237,237`=on-night, `17,17,19`=ink, `246,244,239`=paper (v6.1; was `244,244,242`), `5,5,6`=deep.
- **WebGL sky**: the base gradient is neutral near-black (`vec3(.039,.039,.043)` → `vec3(.055,.055,.062)`), the two light pools become **faint neutral grey** pools (no blue), with at most a **faint green tint** on the lower pool for the lab scene (`vec3(.18,.90,.62)` at ≤5% intensity). The CSS `nosky` fallback gradient matches (neutral radial pools, a trace of green low-right). Noise/dither unchanged.
- **`--sky` interpolation**: the hexMix literals change from `#0A1726`/`#06101C` to `#0A0A0B`/`#050506`.

### Print / PDF rule (résumés)

Paper stays off-white (`--paper #F6F4EF`, v6.1; was `#F4F4F2`), type black (`--ink #111113`). The header band (`--pine`) becomes the night near-black `#0A0A0B`, header text `--on-night #EDEDED`. The one accent — the mark node and any rule that was cyan/amber — becomes the **dark** green `--signal-ink #15724C` on paper, and the mark on the near-black header uses the bright `--signal #2EE59D`. No bright green on white anywhere in the PDF. All three PDFs stay **exactly 2 pages** (`pdfinfo`).

### Budget

v6 adds no features; it only renames/retunes colour values, so source size is within a few bytes of v5. The stated gzip budget is **33 KB** (unchanged). If the colour change alone crosses it, the receipt says so rather than raising the bound.

v6.1: label gating + its test hook, +1.9 KB raw; gzip unchanged under 33 KB, which is the binding budget since it is what travels. The RAW ceiling is raised 110 KB → **112 KB** (enforced in `check.mjs`); the gzip budget stays **33 KB**.

Brand-as-code for the personal site of Thomas Barandon. Every page (index, colophon, OG image, the three résumés) is built from these tokens and rules. Round 5 (2026-10-16) replaced the pine "Day to night" system after three independent critiques: the fold was dead, four directions in a row lived in the same green world, and the one ownable asset — his real stack drawn as a live network — was a side panel. v4 made it the subject. **v5 (2026-10-17) sets it in motion**: the stacked bands that each merely faded in on entry become one continuous scroll film, the one network morphs across it (hero constellation → day-job spine → re-lit night lab → settle), the day/night terminator is a *scrubbed* diagonal sweep, and a single on-brand Easter egg lets a visitor break the live network and watch it self-heal. v5 changes **no tokens and no type** — only how what already exists is staged across the scroll, plus a brand pass that surfaces proof (Speaking, how-it-was-built) the page already earned.

## Product context

- **Job of the page:** make an executive recruiter, a CTO/founder looking for an advisor, and a senior AI engineer each decide in ten seconds that this is a serious operator who also builds — then give them one next step (email, LinkedIn, résumé).
- **Positioning (R1):** Thomas leads a near-hundred-person AWS Enterprise Support organization across four countries, and personally builds the production agentic-AI systems most leaders only sponsor — including the agent crew that designed and shipped this site.
- **Hook (kept, his):** "Cloud leadership by day, agentic AI by night." Short lockup for OG and social: "Runs the teams. Builds the agents."
- **Employer's eye:** nothing names a customer, a headcount, or a host. Scope is a band ("close to a hundred people across four countries").

## Concept: the console reads itself

The page is an instrument panel of one person's stack. It opens at night, in the observatory: the name, the hook, and the stack drawn as a **live, labelled telemetry network** — three hubs (the day job, the lab, agentic AI as the bridge), the daily drivers as nodes, packets travelling the edges where work actually flows. Then **daylight**: the career and the numbers on warm paper, the day job in plain light. Then **night again**: the full network wakes as you arrive, a slow scan line acquires each node and prints its name, panels of focus and principles sit in the dark, and the page ends at **deep night** with the snailfish and the invitation to talk. Day/night is literal (surfaces), structural (the day job sits in daylight, the lab at night) and animated (the sky deepens as you descend).

Space, technology, network, AI — as **signal, not scenery**. No planets, stars, globes or constellations. Light comes from the data.

## Color palette and roles

Night (hero, observatory, focus, principles, drivers, voices, deep night, footer):
- `--night #0A1726` observatory surface. `--deep #06101C` the floor the sky fades to.
- `--on-night #E6EDF5` text (15:1). `--on-night-soft #9DB0C7` secondary, ticks, captions (8.1:1). `--night-rule #1B2E44` hairlines.
- `--signal #38BDF8` the signal: links, edges, nodes, packets, scan line, focus rings, primary button fill (8.4:1 on night). Never body text on paper.
- `--amber #F59E0B` the one warm light: the live indicator in the hero legend, the current-role marker, the single hub-circuit packet, the packet dot in the mark. **At most one amber element per viewport.** Never text.

Day (about, numbers, path):
- `--paper #F3F2ED` warm paper, so the day is warmer than the night. `--ink #0C1B2A` text (15:1). `--mist #566273` secondary (5.5:1). `--rule #D8DBDE` hairlines.
- `--signal-ink #0B6E9E` links on paper (5.0:1). Amber may appear on paper only as the current-role dot.

Forbidden: pine, teal, green of any kind; crimson; gradient text; glass; glow on text.

## Typography

- **Display:** Bricolage Grotesque 600–700 — name, titles, buttons, numerals, the *tick* style. Tabular numerals everywhere a number stands alone.
- **Text:** Source Serif 4 400 roman + italic — paragraphs, quotes, the hero statement. The serif is the "writes well" signal that separates this from developer portfolios.
- **Tick style** (replaces any monospace urge): Bricolage 600, 0.76–0.8rem, uppercase, letter-spacing .08–.1em, secondary color. Used for section labels, dates, the proof captions, the hero legend, band names in the rail. **No monospace anywhere** (R1: it is the single loudest "generic dev" tell).
- Scale: h1 `clamp(2.8rem, 6.4vw, 5.2rem)`/0.98; section title `clamp(1.7rem, 2.6vw, 2.3rem)`/1.1; lede 1.2rem/1.5; body 1.0625rem/1.6; hero statement `clamp(1.2rem, 1.6vw, 1.45rem)`/1.45.
- Google Fonts, `display=swap`, only the weights used (Bricolage 600–700, Source Serif 400 roman/italic). Fallbacks: Helvetica Neue/Arial, Georgia.

## Layout

- Column `--w: min(1180px, 100% - 3rem)`, centred. Sections are **documents**: a 200px sticky tick label on the left, content on the right, 64ch measure; `.wide` content spans the right column for grids.
- **Hero**: two cells — text (44%): framed portrait 120×150, name, statement, role, actions; **live cell** (56%): the hero network canvas with the amber "Live" legend. On mobile the live cell becomes a 260px block under the actions so motion is in the first screen.
- **Day band**: a parallelogram — the top edge drops 2.2rem left-to-right, the bottom edge mirrors it. The slant is the only diagonal on the page: the terminator between night and day. Content keeps 5rem padding from both slanted edges.
- Band order: hero (night) → about + numbers + path (day) → observatory + focus + principles + drivers + voices (night) → snailfish + contact (deep night) → footer.

## Components

- **Mark**: three nodes joined in a triangle with one amber packet on an edge — the three hubs. 22px beside the wordmark `thoba.it`, the favicon, the OG image, the résumé header. Current color on the page; fixed `#38BDF8`/`#F59E0B` in the favicon. No other logo.
- **Wordmark**: `thoba.it` in Bricolage 700, never colored inside.
- **Buttons**: primary = signal fill, night text, 6px radius, 44px min height, hover widens a soft signal halo (light, not lift). Secondary = underlined display-face links.
- **Panels** (pillars, principles): 1px hairline + 3% lighter surface + one soft shadow. The Agentic AI panel spans the row and carries the **build log** (four numbered steps + the colophon link); it is the only highlighted panel (signal hairline).
- **Timeline**: 1px rail, 9px hollow dots, the current role filled amber. Dates in tick style.
- **Proof strip**: four numerals (15 / 8 / 4 / 3), 2×2 under 760px.
- **Domains**: 2px signal bars, drawn once on first view, no count-ups.
- **Voices**: pull quotes with hairline, cite in tick style.
- **Rail** (≥1340px): a fixed vertical rail with the band names (Start, Day, Night, Deep night) and a signal marker at the scroll fraction. **Hairline** (<1340px): a 2px signal progress line at the top of the viewport.
- **Language switch**: a segmented pill, pressed state signal-tinted. Choice remembered.

## Motion (v5: scroll choreography)

One system: the network, the sky, and the scroll choreography that stages what already exists. Nothing moves for decoration. In v5 the page is **one continuous film**, not a stack of bands that each fade in: the visitor scrolls once from hero to contact and the scenes *blend* — pinned stages, scroll-scrubbed sequences, mask reveals, cross-fades — instead of cutting.

**The single network (the persist rule).** There is exactly **one** network on the page, a single fixed-position canvas behind the document for the whole arc. It is never created or destroyed; it **morphs**: hero constellation (scene 0) → the three hubs translate into a vertical **day-job spine** while the tool nodes recede (scene 1) → the same node set is **re-lit** day-ink→signal as night crosses it (scene 3) → the full observatory (scene 4) → it **settles**, drift damping to near-still (scene 5). The viewer never sees a second network. Draw state is a pure function of global scroll fraction (`--frac`) plus a per-scene progress `p` in [0,1]; the canvas reads two scrubbed inputs each frame — `mix` (0 = day expression, 1 = night) and `termX` (terminator x, −1 = none) — and interpolates the existing day/night branches. No image sequence, no second canvas, zero added asset bytes.

**The scenes (storyboard).** Each has a single focal event; no scene asks the eye to track two things.

| # | Scene | Blends | Persists | Focal event |
|---|-------|--------|----------|-------------|
| 0 | Hero constellation | — → hero at rest | the network | the three labelled hubs |
| 1 | Hero → day blend | constellation → day-job spine | the three hubs | the hubs sliding into a vertical spine, paper flooding in |
| 2 | Day job on paper | spine holds; proof + timeline reveal | the spine, amber "now" dot | down the timeline to the amber now-dot |
| 3 | **The terminator sweep** (signature) | paper day → observatory night | the network, re-lit | the one diagonal travelling down-right; nodes re-igniting |
| 4 | The lab wakes | night network assembles for the viewer | the network, full | the scan line naming each node |
| 5 | Arrival at contact | lab → deep-night contact | the network, settling | the network condensing, then the "Let's talk" button |

**"One diagonal, one amber" under motion.** The terminator is the *only* slanted edge on the page; the sweep in scene 3 animates **that same clip-path geometry** — it adds no second diagonal. At most **one amber element per viewport at every instant**: at the scene-3 crossover the amber hands off (current-role dot → live-legend dot) as a cross-fade whose opacities never sum to two solid ambers.

**Technique baseline.** Sticky pinning with scroll-progress 0..1 (scenes 1 and 3); scrubbing the network's *parameters* (not pre-rendered pixels); `clip-path` terminator wipe on the paper layer; mask/clip copy reveals; cross-fades (overlap window ≤0.25 of `p`) so there are no hard band edges; parallax ≤8px, never on text. Native `animation-timeline: scroll()`/`view()` where supported for the compositor-friendly reveals (text rise, parallax), guarded by `@supports`, with a `rAF` + `IntersectionObserver` fallback producing the **identical** resting states; the canvas scrub is always JS (one `scrollY` read + one draw per frame, DPR ≤1.5). **No scroll-jacking**: pins never consume the wheel; the only snap is `scroll-snap-type: y proximity` on the terminator beat — a nudge, never a trap. Drift damps as the pointer nears a node only on the sweep.

**v4 motion, kept.** Load timeline (120ms hold, portrait→name→statement→role→actions rise 90ms apart, edges draw hub-outward 240–1140ms, first packet 1100ms). Network idle: nodes drift on two slow sines, edges 20–55% opacity, packets capped (5 hero / 9 night), pointer parallax, hub + priority-1 labels on desktop. Observatory scan line (desktop, every 9s, acquires + names each node) and the one amber circuit packet. Sky: one fixed WebGL fragment shader, two signal light pools ≤8% sinking with the scroll fraction, 1.8% dither, 30fps, DPR ≤1.5, CSS radial-gradient fallback. Language switch: copy cascades out/back (22ms stagger, 6px, blur ≥760px) while the network fires one packet per edge.

**Reduced motion (complete and static).** `prefers-reduced-motion: reduce` → `termX = −1`, the full night network drawn **once**, every reveal shown, every scene at its V4 resting state: no pinned scrub, no sweep, the terminator is the static V4 slant, no snap, instant language switch, the Easter egg lands straight on its end-state.

**Perf budget.** Every per-frame mutation is `transform`, `opacity`, `clip-path` on a composited layer, or a canvas draw — never a width/height/top that reflows. `will-change: transform` only on the two pinned stage layers, removed when the track leaves the viewport. **Hard constraint: 0 long tasks > 50 ms during a full scroll on an unloaded machine; page-own frame cost ≤ 8 ms average (ScriptDuration + LayoutDuration + RecalcStyleDuration per frame, host-independent); zero per-frame work under reduced motion. Measured by `docs/reviews/v5-verification/check.mjs`.** Merged motion delta ≤ 9 KB of source.

## Easter egg (v5)

One on-brand Easter egg, **"Break it to understand it"**: a visitor breaks the live network (nodes fail in a cascade from the leaves inward, the telemetry readout flips amber), telemetry catches the fault, the network self-heals in reverse with a packet burst, the readout settles cyan, and the V1 serif line prints — *"I grew up breaking things to understand them. Now I design systems you can trust precisely because I know how they fail."* (reuses `path.closing`, no new translation). It **demonstrates** the resilience claim instead of stating it.

- **Rule: a reward, not a gimmick.** It must say something true (his line, his stack, his principle), be discoverable but never advertised (no banner), be invisible and free to the 99%, and add **no second animated system** — it is one failure/heal state over the existing network.
- **Triggers (ship two, redundant across input types):** type `break` (keyboard); long-press the three-node mark `#mark` (touch), which is also `role="button" tabindex="0"` so Enter/Space fire it (keyboard parity). The Konami code is optional and dropped first if the byte budget is tight.
- **Dismissal (three):** Esc, a tap on the settled box, scrolling away — plus an explicit "Reset the network" button (≥32px, focus ring).
- **One amber holds:** while the egg runs, the amber telemetry dot replaces the observatory amber circuit packet, so still one amber per viewport.
- **Reduced motion:** no cascade — the trigger lands on the end-state and the line appears instantly; the sentence is announced via an `aria-live` status region so AT users get the content.
- **Forbidden at integration (kitsch tripwires):** no glitch/RGB-split/scanline-noise, no sound, no monospace in the telemetry, no fourth trigger, no phase label longer than three words.
- **Budget: ≤ 6 KB added raw.** The shipped build uses the two-trigger version with four visual phases but two telemetry labels (`CASCADE FAILURE` → `NETWORK RESTORED`), minified to the file's style.

## Motion (v4 reference — superseded by the v5 contract above)

- **Load**: a single timeline. 120ms hold, then portrait → name → statement → role → actions rise 12px/fade with 90ms steps; the hero network draws its edges hub-outward from 240ms to 1140ms and releases its first packet at 1100ms. One orchestrated moment.
- **Hero network**: nodes drift (two slow sines), edges at 20–55% opacity, packets every 800ms capped at 5, pointer parallax 22px, hub labels and priority-1 tools always labelled on desktop. The portrait frame shifts 6px with the pointer (fine pointer only).
- **Scroll choreography**: each document, the proof strip, the observatory and the snailfish get `.in` when 12% visible: label, title and lede rise once (600ms), panels stagger 80ms. Body background is the sky, so bands never flash.
- **Observatory wake**: the night network's draw-in (900ms) starts the first time the canvas enters the viewport, so the viewer sees it assemble. Then: packets every 420ms capped at 9, one **amber circuit packet** that loops day → agentic AI → lab → day, and the **scan line** — a vertical sweep every 9s that *acquires* each node it crosses (pulse + its name printed for 2.6s). Desktop only for the scan; mobile keeps the packets and a tap-to-name interaction.
- **Sky**: one fixed WebGL fragment shader behind the whole page — the night gradient, two soft signal-tinted light pools (≤8%) drifting on a 40–60s loop and sinking with the scroll fraction, 1.8% dithered value noise so nothing bands. 30fps cap, DPR ≤1.5, paused when hidden, one frame under reduced motion, CSS radial-gradient fallback without WebGL.
- **Language switch**: the copy cascades out and back (22ms stagger, translate 6px; blur only ≥760px) while both networks fire one packet per edge from the hubs — the page re-routes itself.
- **Reduced motion**: everything at its final state; networks drawn once in full; no packets, no scan, static sky, instant language switch.

## Depth and elevation

Depth is **luminance and layering**, never glass: sky (back) → network (mid) → text and panels (front). Panels carry one soft shadow; the portrait frame is an offset hairline; the day band is opaque paper cutting through the night at a slant. No blur filters at rest, no text parallax, no 3D.

## Content rules

- EN is the document; FR and IT are dictionaries in the page. Every string, including canvas labels, hub names and the résumé, has three versions.
- First person, specific nouns, sentence case. Numbers only as bands or verifiable facts. No customer names. Testimonials keep softened attributions.
- Agentic AI is the **first** pillar; it names who is in charge: "The agents do the work; I set the bar and I merge."
- Principles are his, not his employer's: People first, Automate everything (instrument it first), Build so it survives you.
- Retired: "turning complex infrastructure into business outcomes", "operational excellence", "customer obsession" and "velocity & impact" as principle titles.

### Brand additions (v5)

- **Positioning statement (the sentence the whole page serves):** Thomas Barandon leads a near-hundred-person AWS Enterprise Support organisation across four countries — and personally builds the production agentic-AI systems most leaders only sponsor, including the agent crew that designed and shipped this site. The ownable wedge is **rarity, never a literal superlative**: the leader at this scale who still ships. Phrase it as "rare/unusual combination", not "the only".
- **"How this gets built" teaser (on the index, after the AI pillar):** pull the colophon onto the page — a brand contract in the repo sets the rules; an agent crew designs, writes and reviews each round against it; he reads the pull request and merges; "See how →" links to `how.html`. The openable artifact every audience asks for.
- **"Speaking" section:** one small, credible section listing the two public, employer-safe appearances — *Le Podcast AWS en Français* with Sébastien Stormacq (2024-06-05, building inclusive teams; links to the episode) and the AWS Summit Paris 2024 round table on imposter syndrome — plus an availability line (talks on cloud leadership at scale and getting agentic AI into production). Turns one appearance into standing proof.
- **The DE&I band:** the Manager-France career entry carries the real, already-public result as a band — "raised the share of women on the team from under one in ten to one in four" — retiring the last "customer obsession" echo. A band, never a confidential number.
- **Voice rules (earns trust vs reads as vanity).** Prefer: a dated/linkable artifact; a specific repeatable opinion stated plainly; "here's where it failed and what I changed"; scope as an honest band; first-person specific nouns and restraint; proof you can open in ten seconds. Avoid: follower counts; a wall of tool logos or a 40-skill cloud; "AI-powered / next-gen / synergy" adjectives; seniority inflation; the employer's value vocabulary as your own; a claim whose only evidence is the claim.
- **No tracking.** No UTM, no pixel, no popups, no analytics. Influence comes from substance, not instrumentation.

### Localised term glossary (v5.1)

One consistent rendering per term, matching what a French / Italian engineer-leader actually says. Reuse these on any copy edit; do not re-translate ad hoc.

| EN term | FR | IT | Note |
|---|---|---|---|
| agentic AI | IA agentique | AI agentica | FR "IA", IT "AI" — correct per each language. |
| Enterprise Support | Enterprise Support | Enterprise Support | AWS product name — never translate. |
| technical account manager | Technical Account Manager | Technical Account Manager | Kept as the real role title, capitalised. |
| the bar (standard) | la barre | l'asticella | FR: use "la barre" for the "I set the bar" refrain; "l'exigence" only as a noun-in-a-list. |
| merge (git) | merger / je merge | fare il merge / faccio il merge | Keep the anglicism on BOTH index and how.html (the owner's real voice). |
| pull request | pull request | pull request | Kept EN in both. |
| self-heal | se rétablir | ripristinarsi | |
| cascade failure | Panne en cascade | Guasto a cascata | egg.cascade |
| network restored | Réseau rétabli | Rete ripristinata | egg.heal |
| Speaking (section) | Interventions | Interventi | |
| the stack | la stack | lo stack | Anglicism kept — what both FR and IT engineers say. |
| brand contract | contrat de marque | contratto di brand | |

**FR typography (enforced v5.1):** a narrow no-break space (U+202F) precedes `;` `:` `?` `!` and sits inside `« … »`, page-wide, in both `index.html` and `how.html` and therefore in the FR résumé. IT takes NO space before `:` `;`. Verify with a byte scan (`U+202F > 0`, no plain space before FR high punctuation) before shipping.

### Build log

- **v5 (2026-10-17):** "Telemetry in motion" — the single network set in motion across one continuous scroll film; terminator sweep; break-and-heal Easter egg.
- **v5.1 (2026-10-17):** three independent reviews (G1 critique, G2 persona panel, G3 FR/IT proofread) applied — mobile hero contained so the network never crosses the copy/CTAs; ghost labels dropped behind night documents; sweep title cross-fade tightened; ≤6 tool labels + 2px halo; egg heal driven by its own clock; perf hygiene (will-change toggled, no reduced-motion per-frame work); employer vocabulary retired; hero scope band; FR U+202F typography page-wide + glossary.

## Responsive behavior

- ≥1340px: rail visible. 761–1339px: hairline, two-column documents. ≤760px: single column, nav hidden (sections reachable by scroll and skip link), hero live cell 260px, observatory 440px, hub labels short, labels on tap, panels and proof stack, blur removed from the language cascade.
- Hero complete above the fold at 390×844 (CTA row ends before 760px). No horizontal scroll: `overflow-x: clip` on body, canvases sized from their host.

## Do and don't

Do: draw only real things (every node is a tool he runs); keep one amber per viewport; let the serif carry the paragraphs; reveal once, never loop a reveal; test every pair for AA before shipping.
Don't: add a second animated system; illustrate space; use monospace; animate numbers; add chips, carousels, cards with icons; color words inside headlines; show anything in a canvas that is not also text.

## Agent prompt guide

When extending the site: read this file, reuse the tokens by name, keep the single-file zero-build rule, write EN in the HTML and add FR/IT keys to the dictionary in the same change, rebuild the résumés (`docs/resume/build.sh`, two pages each) and the OG image when copy or tokens change, run the render check in EN/FR/IT at 1440 and 390, and run a context-free five-dimension critique before the pull request.

## Accessibility and performance floor

- One HTML file per page, no dependencies, fonts the only third-party request. Index ≤ 110 KB / 33 KB gzip (v5: v4 ≈ 90 KB + motion ≤ 9 KB + egg ≤ 6 KB delta; **gzip raised 32 → 33 KB on 2026-10-18**: the v5.1 build sat 3 bytes under the 32 KB line, leaving no room for the mobile white-gap hotfix — a ~190-byte, behaviour-only fix; the 33 KB bound restores working headroom with no palette/type/copy change); WebGL sky ≈ 2 KB of source.
- All text pairs ≥ 4.5:1 (lowest: signal-ink on paper 5.0:1, mist on paper 5.5:1). Focus rings 2px signal. One `h1`, ordered headings. 44px targets. Canvases `aria-hidden`, their facts present as text (Daily drivers, the hubs in the night paragraph, the no-JS line).
- Zero console errors in EN/FR/IT at 1440 and 390; no layout shift (portrait has explicit dimensions, animations use transform/opacity only). **v5: 0 long tasks > 50 ms during a full scroll on an unloaded machine, both widths, normal and reduced motion; page-own frame cost ≤ 8 ms average (host-independent, via `check.mjs`); zero per-frame work under reduced motion.** Scenes reversible (down/up/down → identical state); snap proximity-only.