ARCHIVED — "Parallel Cut" (rejected at prototype, 2026-08-27)
This direction was killed by its own prototype, on the same day it was locked. Do not build from it. Kept because the failure is the useful part.
What the prototype proved. Two failures were in the CORE of the direction, not the implementation:
Anybody's width axis is ugly at the extremes. Atwdth62 the display type went muddy, heavy, and squashed. That axis was named "the load-bearing choice" of the whole direction — the thing that made type be the layout. It could not carry it.- A lane system converges on a card grid. Five equal-height lanes rendered as a Bootstrap pricing table with a dead vertical void in each cell — precisely the cliché the blocklist forbids. A v2 that threw out the cards and made the lanes thin horizontal strips read far better and hit 0 dropped frames, but by then the identity was no longer the one that had been approved, and the user rejected the direction rather than keep patching it.
Three implementation bugs found along the way, worth not repeating:
calc(1fr - 0.72fr * var(--x))is invalid CSS —fris not a length andcalc()cannot dofrarithmetic. The wholegrid-template-columnsdeclaration is dropped silently and the grid falls back to ONE column. Nothing warns you; it was caught by readinggetComputedStyle(...).gridTemplateColumnsin a real browser.overflow: hidden+white-space: nowrapon per-lane headline fragments sliced the headline into gibberish: "N AGENTS. ONE VERIFIED WINNER." rendered as "N AG ONE VEF WINNER SHIP".- Counting a frame as dropped above 16.7ms measures the vsync floor as failure. 16.7ms is 60fps. The threshold is ~20ms (a missed vsync).
The process lesson, which is the one that changed how the next round runs: this direction was chosen on paper — from written proposals and ASCII wireframes — and only prototyped afterwards. The user could not visualize it from a terminal, and both external models had independently recommended it, which made it look safer than it was. The next round renders visual options BEFORE anything is locked.
Everything below is the rejected specification, preserved verbatim.
The single source of truth for the Cyberine website's visual identity. Locked 2026-08-27 by the user via /nf-design-system heavy, after an independent three-way brainstorm (codex gpt-5.6-sol at effort high, opencode deepseek-v4-pro, and this session). Load this file FIRST before any website work. It supersedes the palette half of website-theme-decision.md; that note remains as the record of why Dracula happened and why the rebuild epic was shelved.
Why the rebuild reopened
website-theme-decision.md shelved the epic and named exactly what would reopen it: "a marketing surface with conversion goals, a docs experience VitePress structurally cannot deliver, or a brand system spanning site + TUI + assets" — and explicitly ruled out "aesthetic dissatisfaction alone". The user's ask is the first of those three, not the excluded one: a conversion-driven marketing surface with a real signature moment. The premise changed; the shelve decision was not overruled.
Measured baseline of the site being replaced (detect-slop.mjs docs --surface marketing): 6 HIGH + 2 MEDIUM. Six rgba(16,17,23,...) shadows hardcoded past the token tier, one typeface (Newsreader) carrying the whole identity, and no color-scheme declaration — the last is a live bug, not a style opinion: on a light-OS machine the forced-dark page renders white native scrollbars and inputs. Plus three blocklist hits the detector cannot see: 01/02/03 step cards, serif-display-on-dark-with-one-accent, and a completely static first viewport.
Subject pin
Cyberine is a terminal-native orchestration engine for engineers who already pay for several AI coding subscriptions and resent being locked to whichever they picked first. The landing page has one job: make one task -> N parallel agents -> judge -> one verified winner land in seconds, read as real systems engineering rather than a wrapper, and get an install.
The one risk
Slice the primary headline and reading grid across unequal worker lanes. Most teams keep a hero safely centered. Cyberine earns the fracture because parallelism is not decoration here — it is the product's defining operation. The type does not sit inside the layout; the type IS the layout, because Anybody's variable WIDTH axis animates together with the lane widths.
Rejected alternatives, recorded so they are not re-litigated: opencode's Schematic (hexagon topology + verdict stamp) was strong but built its identity on the hexagon, which is a meme in this niche, and its light-only drafting sheet collided with the dev-tools playbook. Its Evidence Board (cork, red string, a graveyard of retired workers) was the most memorable and the most divisive. codex's Hex Court replaced conventional page reading with a navigable topology — filed as a possible future campaign page, not the install page.
Both external models independently recommended making the mechanism the layout and both refused a fake-terminal hero. That convergence is why this direction is the one that shipped.
Dials
| Dial | Value | Consequence |
|---|---|---|
| variance | HIGH | grid-breaking, asymmetric lanes; nothing centered by default |
| motion | HIGH | a signature suite, not one moment — see the governing rule |
| density | MEDIUM on marketing, HIGH on docs | the docs surface is lived in daily and runs denser |
Archetype: the landing is Marketing/Landing (full boldness budget). The ~41 docs pages are a reading surface at reduced boldness — they share the palette, type, and motion personality, and drop every scroll-triggered move.
Theme strategy — theme-aware, both modes
Committed single-mode was rejected. The dev-tools playbook flags light-mode-default as an anti-pattern for this category, while both external models argued light on the grounds that this product is about reviewing evidence. Rather than pick a side, every role token carries a value under BOTH schemes; the page follows prefers-color-scheme and a [data-theme] toggle overrides it.
color-scheme MUST be declared on :root in both modes. That is the bug the current site has, and it is the single most common theme mistake.
The constant across modes is the pigment, not the luminance. Both palettes are the same green-black family at different exposure — the light base is a mineral workbench under daylight, the dark base is the same workbench under instrument light. This is what keeps a maximalist page reading as one voice in two schemes.
Role tokens
Every value below was verified with WCAG contrast math against BOTH backgrounds of its own mode. All clear AA-body (>=4.5:1).
| Role | Light | Dark | Meaning |
|---|---|---|---|
base | #D8E2DF Workbench Mist | #0B1412 | the work surface |
surface | #F7FAF8 Worktree White | #131E1B | one isolated candidate's own territory |
ink | #061816 Head Ink | #E4EDE9 | body and oversized display type |
action | #1748FF Route Cobalt | #4C7BFF | dispatch, navigation, install — the striking accent |
refute | #BA1A4E | #FF5C8A | adversarial pressure, rejected candidates |
verified | #006E50 | #1DBF8E | ONLY after a judge gate succeeds |
retired | #5A6560 | #8A968F | a retired worker, still visible as a registry entry |
Measured ratios (fg on base / on surface) — light: ink 13.79/17.38, action 4.66/5.87, refute 4.74/5.97, verified 4.74/5.97, retired 4.58/5.77. Dark: ink 15.66/14.31, action 4.97, refute 6.37, verified 7.92, retired 6.09/5.56.
Two hard rules that fall out of the math:
- Raw
#1748FFfails on the dark base (3.03:1). The lift to#4C7BFFis required, not a preference. Never reference the light value from a dark context. refuteandverifiedare never the sole signal. Every pass/reject state carries a text label and a shape difference as well as the color, so the page survives both color-blindness and a greyscale print.
Token tiers
Three tiers, prefix cyb-. No component token may reference a raw value directly.
--cyb-raw-cobalt-500: #1748FF; /* raw: a pigment, no meaning */
--cyb-role-action: var(--cyb-raw-cobalt-500); /* role: meaning, flips per mode */
--cyb-btn-bg: var(--cyb-role-action); /* component */Never md.sys.*, --ion-*, or any other system's naming.
Typography
Three real faces, all variable, all Google Fonts.
- Anybody — display. The load-bearing choice: its WIDTH axis is what lets the headline compress into a narrow worker lane and expand with the winning one. Display scale
clamp(5.25rem, 13vw, 12.5rem), mobileclamp(3.5rem, 18vw, 5.5rem), width variation constrained by measured lane space. - Instrument Sans — body, navigation, controls. Body
1.0625–1.125rem, line length held to 60–75ch. - Martian Mono — diffs, worker ids, run ids, cost figures, sandbox modes, event data. Tabular figures for anything that counts.
Signature suite — the governing rule
Maximalist means several signature moves, which is allowed ONLY under one governing system. Here it is, and it is deliberately tight:
Every signature move is the same state machine at a different scale: lane count collapsing from N to 1. Same easing family, same palette logic (losers desaturate toward
retired, the survivor takesverified), same timing signature. Nothing orbits, nothing glows, nothing loops forever.
Four moves, and they are sequenced, never simultaneous — only the first fires on load:
- Verdict Gate (hero, on load). Worker lanes launch at the same instant; a full-height judge rail crosses them; rejected lanes collapse into narrow evidence strips; the verified lane widens and carries the eye to install.
Anybody's WIDTH axis animates with the lane widths. - Worktree Split (scroll-gated, plays once). One lane divides into N isolated tracks, each with its own gutter — the detached
git worktreeper worker, drawn. - Diff Gate (scroll-gated, plays once). Candidate diffs stack; the DiffJudge rule passes once;
git apply+tsc --noEmitresolve; failures fall to arefuteoutline. This is the one genuinely differentiating fact of the product, so it gets a move of its own. - Cost Admission (scroll-gated, plays once). The lane pool narrows as a spend meter fills toward the daily cap; denied lanes never enter. Admission control, drawn.
If the built page cannot hold 60fps with all four, cut moves until it does — in reverse order (4, then 3, then 2). The Verdict Gate is the last thing to go.
Motion
- Motion for React (motion.dev) for layout animation, springs, and
useReducedMotion. - GSAP + ScrollTrigger for the three scroll-gated moves (pin + play once).
- No canvas, no blur filters, no continuous animation. Only transforms and opacity animate.
Named personality: Decisive arbitration — simultaneous launch, a short evaluation hold, ONE purposeful judge sweep, then an overshoot-free winner snap.
Named tokens. Reference these by name; no bare ms or cubic-bezier literal anywhere in animation code.
| Token | Value | Character |
|---|---|---|
--cyb-ease-enter | cubic-bezier(0.16, 1, 0.3, 1) | expo-out: arrives fast, settles without overshoot |
--cyb-ease-exit | cubic-bezier(0.7, 0, 0.84, 0) | expo-in: a rejected lane leaves decisively |
--cyb-ease-onscreen | cubic-bezier(0.4, 0, 0.2, 1) | the judge sweep: even, deliberate, no drama |
--cyb-ease-snap | cubic-bezier(0.22, 1, 0.36, 1) | the winner lock: one hard step, critically damped |
--cyb-dur-micro | 120ms | hover, focus ring |
--cyb-dur-fast | 200ms | button press, chip state |
--cyb-dur-base | 320ms | lane width change |
--cyb-dur-slow | 520ms | judge sweep |
--cyb-dur-scenic | 900ms | full Verdict Gate resolution |
--cyb-dur-hold | 180ms | the evaluation pause before the verdict |
spring arbitrate | { stiffness: 420, damping: 38, mass: 1 } | micro-interaction: firm, zero bounce |
spring laneResolve | { stiffness: 220, damping: 30, mass: 1.1 } | layout: lane widening, no overshoot |
Never linear, never a bouncy spring, never transition: all.
Reduced motion. Under prefers-reduced-motion: reduce the resolved final layout renders immediately, plus a manual "Show evaluation sequence" control that uses crossfades only. Fades survive; parallax, morphing, large slide/scale, and every pin are dropped.
What the page must never contain
No fabricated metric, customer count, testimonial, or provider logo — the product has no customers to cite, and supported workers are named as text. No emoji. No fake-terminal-with-traffic-lights hero. No 01/02/03 step cards. Every claim maps to a capability that exists in src/.
Docs surface at reduced boldness
Shared: the full role-token palette, all three typefaces, and the "Decisive arbitration" personality reduced to micro-interactions only.
Dropped: all four signature moves, every scroll-triggered animation, and the display-scale Anybody setting. Docs pages load fully composed with zero motion beyond hover and focus. Density rises; line length stays 60–75ch.
Restyling this later
Archive this file as website-master-<yyyymmdd>.md and write a fresh one. Do not edit it into a different direction in place — the point of a MASTER is that a later session inherits a decision instead of re-deriving a palette.
ARCHIVED — Plasma home + "Six Instruments" routes (2026-08-27 to 2026-10-01)
Read this before any website work. It replaces website-master-20260827-parallel-cut.md, which was rejected at prototype the same day it was written — read its post-mortem before proposing...
Persona — Cyberine
Cyberine ships a single built-in persona, Cyberine, that gives the chat planner a consistent voice and identity. The persona is optional: set CYBERINEPERSONA=none to disable it and run with bare...