cyberine
Design notes

Website MASTER — "Run record" (marketing) + "Day Assembly / Night Approach" (docs)

Read this before any website work. Locked 2026-10-01 by the operator. It supersedes the Plasma home + "Six Instruments" routes MASTER, archived as website-master-20260925-plasma.md; the rejected "Parallel Cut" direction before that is website-master-20260827-parallel-cut.md.

History, short

  • 2026-08-27: "Parallel Cut" rejected at first render. Rule kept from it: render first, lock second — nothing enters this file until the operator has seen it in a browser and picked it.
  • 2026-08-27 to 2026-09-25: six routes with six dissimilar skeletons ("Six Instruments"), then the Plasma palette (violet / magenta / mint on near-black) with a three.js hero on /.
  • 2026-10-01: four rendered site versions compared side by side; the operator picked version B, the "run record", had it expanded (dark mode, more motion, a docs page), then picked the docs palette from six rendered docs colourings. The approved prototypes are local reference only (.local/design/2026-10-01-site-versions.niafam-m3max/b-expanded/ and docs-final/). Plasma, the three.js hero and Lenis smooth scroll are gone from the site. The TUI and the web dashboard keep Plasma.
  • 2026-10-02: the operator ruled the split deliberate (knvqm). The site, the TUI and the web dashboard share the confluence mark's shape, not its colours; the TUI and dashboard stay on Plasma, and aligning any surface to another's palette needs a new ruling.

The idea

The product is a race with a verdict: one task to many agents at once, each in a sealed worktree, and a judge that cannot be argued with (git apply plus typecheck) keeps one diff. The site reads like that run's own record: paper and ink for the log, graphite for workers that finished, rust for error / stuck / cancelled, and one blue for the kept result and nothing else. CTAs are ink, not accent. Dark mode is the same run read live, as it streams: a cool screen ground, warm ink, states lit against it. Roles never move between modes; only the ground temperature flips.

Marketing palettes — LOCKED 2026-10-01

Every text role is WCAG AA-body (>= 4.5:1) on each ground it sits on; site/scripts/qa.mjs carries this table as MASTER_PALETTE and re-measures it, plus checks every hex is still in tokens.css.

Role (--cyb-*)Light "paper"Dark "screen"Job
paper#F1ECE1#13151Cpage ground
sheet#FAF7F0#1A1D26raised record sheets, cards
track#E3DCCB#272B37lane tracks, inline code ground
rule#C9BFA9#3A3F4Ehairlines (non-text)
band#E9E2D1#22262Fhover and linked rows
code#ECE6D8#0E1016code ground
ink#1A1C22 (14.5:1 on paper)#ECE6D9 (14.7:1)text, CTAs, gate marks, focus ring
ink-2#4A4A4F (7.5:1)#A9AAB3 (7.9:1)secondary text
graphite#77746C (3.4:1 on track)#737A8E (3.3:1)bars of finished, unkept workers (non-text)
stamp#2337C6 (7.3:1)#9AAAFF (8.3:1)the kept result only
stamp-wash#DDE1F6#232B57track behind the kept lane
rust#983A1F (6.0:1)#F0905F (7.7:1)error, stuck, cancelled
on-ink / on-ink-2 / on-ink-3#FAF7F0 / #B9B4A6 / #D8D3C6#13151C / #4E5260 / #3A3E4Atext on the ink button (prompt sign, copy state)
ink-hover#2C2F38#FFFAF0ink button hover

Docs palettes — LOCKED 2026-10-01

Dark is "Night Approach" (from a glass-cockpit source), light is "Day Assembly" (from a PCB source). Docs carry no stamp blue: nothing on a docs page is being judged.

Role (--cyb-*)Light "Day Assembly"Dark "Night Approach"
paper / sidebar / sheet#F3F0E5 / #E4EBDD / #F9F7ED#101B22 / #14272C / #20313A
track / rule / band / code#E2E5D5 / #9AAB94 / #D9E6D3 / #EBEDE3#25333D / #526B75 / #193C36 / #0D1820
ink / ink-2#20372D / #506354#DCE6DF / #ADBCC5
place (current location)#286046#79DCAB
h1 / h2#286046 / #286046#DCE6DF / #82CDE5
link / link-hover#914326 / #693918#82CDE5 / #B5E7F2
inline (inline code)#77481A#82CDE5
control / control-hover#914326 / #693918#82CDE5 / #B5E7F2
copied-ground (copied state, text in place)#DFEADB#193C36
trusted on trusted-ground#286046 on #DFEADB#79DCAB
restricted on restricted-ground#914326 on #F0DFD1#E9BF70
focus#8B5218#DAB7E9
syntax key / string / number / punctuation#276357 / #77531C / #7C396A / #4E605E#82CDE5 / #DAB7E9 / #BFCDF4 / #B6C4CE
syntax command / flag / path / comment#914326 / #3D5187 / #286046 / #526351#82CDE5 / #DAB7E9 / #BFCDF4 / #ADBCC5

Mapping onto Fumadocs: site/src/styles/docs.css binds every --color-fd-* variable to these roles (primary is place, accent is band, ring is focus, success is trusted, warning and error are restricted), sets the typography plugin's --tw-prose-* variables, and styles code blocks and their copy control. The trusted / restricted roles reach the docs through a rehype plugin in site/source.config.ts: every cell under a table header named Trust gets trust-full when it opens with "fully trusted" and trust-restricted otherwise, so USAGE.md stays plain Markdown. Syntax highlighting is one shiki theme in site/source.config.ts whose colours ARE the eight --cyb-syn-* role variables, so it flips with the mode; a small transformer moves path-shaped shell arguments to the path role.

Colour mode

  • Marketing follows the OS on first visit and keeps following it until the visitor picks a mode.
  • Docs open dark for everyone; they never follow the OS.
  • One choice, stored in localStorage['cyb-theme'], is honoured on both surfaces once made.
  • THEME_BOOTSTRAP (site/src/lib/theme.ts) runs as a blocking inline script in <head> and stamps data-surface and data-theme (plus fumadocs' .dark class) before first paint, so nothing flashes; ThemeSync re-resolves on client navigation between surfaces. The switch cross-fades with a view transition.

Type

Display Fraunces (opsz 9-144, wght 300-500, roman and italic), body IBM Plex Sans (400-600), mono IBM Plex Mono (400, 500). All SIL OFL, self-hosted by site/scripts/fetch-fonts.mjs, which verifies the license from each family's METADATA.pb; the site makes zero third-party requests. Headlines are Fraunces 400, sentence case, -0.015em; the kept phrase is italic in stamp. Labels, kickers, lanes and printouts are Plex Mono.

Routes

All six share one language; structure varies by content, not by a different skeleton per route.

RouteContent
/hero with the recorded-run race figure (replays once when visible, Replay button), claim vs checks, four points, the scroll-driven git graph of the four stages, four judges with hover diagrams, four surfaces dropping into one run store, the worker roster, closing CTA
/how-it-works/the mechanism: scroll-driven git graph beside the four stages (Dispatch, Isolate, Judge, Ship), then the annotated printout of the recorded run linked to the run.json fields it records
/judges/DiffJudge across the full width with its scored gate table (the judge's own rationale strings), the three reading judges in a row with hover diagrams, then what the verdict says when evidence runs out
/cost/one Fraunces figure (the recorded run's real spend), one meter bar scroll-filled to that spend against an example cap the legend names as an example, four facts
/providers/the worker registry as mono ledgers: loop workers, CLI workers, retired workers with date and reason
/surfaces/six surfaces as glyph cards, then the real T697 captures in the reader's mode

Every route ends with the readout strip (same runId, its own angle) above the footer.

Every figure the site prints cites a real run. The hero, the readout strip and the cost meter all describe run 81cbc07c (cyberine run --cheap, recorded 2026-09-25): 4 implementers, 3 diffs applied by DiffJudge, 1 kept, $0.10 total (READOUT in site/src/lib/routes.ts; source records ~/.cyberine/runs/81cbc07c-*.json and the worker track record). The daily cap is off by default, so no cap is shown as measured; drawn lengths and example values are captioned as such. Swapping the run means updating all three together.

Motion

A run is discrete events, so nothing loops. The hero types the command, dispatches all lanes in one frame, runs bars at one rate, stalls and cancels the stuck lane, counts workers down, judges only after the last one stops, fills gates in printed order, and turns the kept lane blue last. Diagrams are scrubbed by scroll position; claim checks, the cost meter and the run record reveal on scroll. Hover and focus link meaning (a lane and its printed lines, a run.json field and its lines, each judge playing its rule). Routes cross-fade (React ViewTransition). Only transform, opacity and small SVG strokes animate. Under prefers-reduced-motion every sequence renders its finished state at once, the Replay button is hidden and view transitions are off.

Brand mark

The confluence ring geometry is unchanged (site/scripts/gen-mark.mjs). On the site the ring is ink and the verified arc and diamond are stamp, in both modes and on docs (where stamp resolves to the docs green / cyan). App icons sit on a paper plate; social cards are paper with the mark as the one blue element. The dashboard copies keep Plasma.

QA

npm run site:qa builds and runs site/scripts/qa.mjs: slop detection on both surfaces, the locked palettes above, contrast measured from the real stylesheets in all four modes, token discipline (three tiers in tokens.css, no hex below the ---- ROLE: marker, no #fff/#000), fonts, assets, metadata, static accessibility, dead links and third-party requests. Browser-only checks are reported as not verified, never as passes.

Restyling later

Archive this file as website-master-<yyyymmdd>-<slug>.md with a one-paragraph post-mortem, and write a fresh one. Never edit it into a different direction in place.