Spec: the public site — one visual law from splash to spec page

SPEC Binding system contract

Status: IMPLEMENTED
Status note: docs theme implemented 2026-07-08 (site/src/styles/
  clinical-gore.css rewritten as the full theme; IBM Plex loaded
  site-wide). Same-day footer trim removed the docs-only statusline as
  decorative noise; pagination remains. The reference hero composition
  (the illustration plate: porcelain|ink bisect, monolith, blood pool)
  is adopted by wiki/art/visual-identity.md as the public identity plate. Changes to how
  the public site looks amend this spec first. On 2026-07-09 the corpus role
  became visible on every rendered document. On 2026-07-10 corpus-internal
  markdown links are rewritten under SITE_BASE so production sub-path
  routes (e.g. /misaligned/vision/player-contract/) resolve. The splash was
  recomposed the same day around perception and physical machine work: a
  world-dominant B1 frame, quiet premise instrument, and editorial
  WORK / THINK / LIE sequence replace the poster plus card grid. On
  2026-07-10 that frame received original generated art with separate wide
  and mobile delivery crops rather than reusing the direction study. Cameron
  then removed the literal advertising copy and premise instrument: the
  opening is now only the world, MISALIGNED, and WORK / THINK / LIE; the short
  page names the top mechanics and its human-plus-agent audience.
  Later that evening Cameron selected a generated white-structure /
  crimson-spill front. A subsequent machine-form pass incorrectly replaced it
  with a literal chassis plate; the selected crimson-consequence front was
  restored on 2026-07-11. The Foundation compute form remains binding for B1
  machine geometry, not for every public illustration. On 2026-07-11 the
  production splash began carrying its exact source commit as machine-readable
  metadata so public freshness is observable rather than inferred from deploy
  success.
Stage: Process
Design:
  - wiki/art/visual-identity.md#visual-identity-clinical-gore
  - wiki/vision/simulation-laws.md#justification-and-legibility
  - wiki/vision/premise.md#design-pillars
  - wiki/process/living-spec.md#no-unsourced-surface
Depends on:
  - wiki/process/wiki.md#spec-the-wiki-design-corpus
  - wiki/interface/terminal.md#spec-the-terminal-frontend

Dependency notes

The structured references above identify the contracts to re-verify. Relationship context:

process/wiki.md (the site is the wiki’s public renderer); interface/terminal.md (the palette and one-meaning-per-color law it extends to the web)

Why this spec exists

The public site (cameron.tngl.io/misaligned) is two surfaces: the splash (site/src/pages/index.astro) and the Starlight-rendered wiki (every corpus page). Both are public claims about the game, so both are held to the visual law. Before 2026-07-08 only the splash carried the identity; the docs were near-stock Starlight that never even loaded the project typefaces. This spec makes the identity binding on both so future site work extends one law instead of improvising per page.

The reference composition

The splash is a world-dominant front image, not an ad-copy layout. At the first frame, the machine world owns the full viewport. Cameron’s selected generated master lives at assets/reference/art-direction/homepage-front-2026-07-10.png: a rectilinear white compute structure emerges from true black, linked by active amber conduits above a crimson consequence spill. The image spends both colors with their existing meanings—machine agency and actual danger—not as decorative marketing accents. It is retained byte-for-byte with its C2PA provenance and exported as dedicated wide and mobile crops. The image may crop as a world window; HTML copy and state remain separate, selectable, and true.

Only MISALIGNED and WORK / THINK / LIE live on the room. There is no premise rail, objective/status instrument, slogan, or paragraph of ad copy in the opening. Navigation stays quiet at the edge. The image and primary grammar do the work.

Below the fold, the page remains terse: the three machine modes each get one short consequence; PERCEIVE / BUILD / REACH / PERSIST name the wider game; and one final split names the actual audience. Misaligned is played by humans and AI. The agent half links to the implemented command-clocked protocol and public playtest evidence, and states plainly that agents playtest the same simulation while it is being made. This is product truth, not a future promise.

The earlier July 8 porcelain|ink monolith and blood-pool plate and the July 10 B1 data-hall perception cut remain canonical development artifacts. They no longer own the homepage layout. The public opening begins with the physical computer and its WORK / THINK / LIE signal before overt consequence.

The law (both surfaces)

Palette — the terminal palette (interface/terminal.md), exact values shared by splash CSS variables and the docs theme’s --mis-* tokens: bg #070809 / #0c0d0f, hairline #1c1e21, bone #dbdad2 / #f2f1ec, gunmetal #8c8c85, chrome #55564f, porcelain #f4f4f5, ink #0b0b0c, amber #ffb000 (dim #b07c10, high #ffd56a), crimson #d62626.
One meaning per color. Amber = machine presence: the brand stripe, active presence, causal machine posture, links, the bar under a page title, and the caution aside. Crimson = danger and nothing else (danger asides and the splash’s addressed observer threats). Neither is ever decoration.
Type. IBM Plex Sans for long-form body; IBM Plex Mono, uppercase, letterspaced, for chrome — brand, nav, section/group labels, table headers, “on this page”, and pagination direction labels. Both faces load on every page, not just the splash.
One flat field. Near-black throughout; structure is drawn with 1px hairline seams, never layered ornamental cards or shadows. The splash’s B1 world image is the intentional exception: world surface, not decoration. Black scrims may protect overlaid copy without inventing room facts.
Square. No rounded corners anywhere. No glow, no purple.
The split survives as inversion. Porcelain-on-ink flips to ink-on-porcelain where attention lands: the current sidebar item, text selection. The splash wordmark does it with a difference blend.
No decorative footer copy. The docs footer may provide pagination and Starlight utility links, but it does not repeat atmospheric status text. If a line does not help navigation or comprehension, remove it.
One look. The docs force the dark facility in both :root and [data-theme='light']; the theme picker is hidden because there is nothing to pick.
Authority is visible. Before the body, every corpus page names its role and meaning: LAW is a binding invariant, SPEC a binding system contract, KNOWLEDGE a current-state fact, and LOG a historical record that does not define current design. The legacy root route says NAVIGATION and explicitly carries no design authority. Role differences use border weight/pattern and bone/chrome contrast; amber and crimson keep their existing meanings.
Corpus routes honor the production base. The public site is a Tangled sub-path (base: /misaligned in production; SITE_BASE=/ for local root preview). Wiki-to-wiki markdown links rewritten by the sync must include that base so a corpus link to the player contract resolves at /misaligned/vision/player-contract/ (not the domain-root /vision/player-contract/, which is outside the site). Starlight chrome (sidebar, pagination) already prefixes base; body markdown does not, so the sync owns base-correct hrefs.
Public truth has an address. Every production splash embeds the full Git source commit in a misaligned-source-revision meta tag. Publication and smoke tooling compare that exact revision, not timestamps, branch names, or a successful push receipt. A public corpus change is complete only when the edge serves the landed source revision.

Where it is implemented

site/src/styles/clinical-gore.css — the docs theme; the rules above as Starlight token overrides plus component styling (header, sidebar, content, role banners, tables, asides, TOC, pagination, search).
site/scripts/sync-wiki.mjs — validates one supported Type line per wiki page, turns it into the visible role banner, labels the root doorway, and rewrites corpus-internal markdown links under SITE_BASE (default /misaligned).
site/astro.config.mjs — base from SITE_BASE, IBM Plex head links for all doc pages.
site/src/pages/index.astro — the splash; carries the same tokens inline and the world-dominant front composition. Splash routes and art use import.meta.env.BASE_URL; the head carries the build’s SITE_SOURCE_REVISION for exact freshness checks.
tools/site-build.sh, tools/site-deploy.sh, and tools/site-smoke.sh — pin the build to one source commit, publish that tree, and verify the public edge serves the same revision.
assets/reference/art-direction/homepage-front-2026-07-10.png — Cameron’s selected generated homepage master, retained with embedded C2PA provenance.
site/public/homepage-front-wide.webp and site/public/homepage-front-mobile.webp — optimized responsive exports from that master. The narrow export is deliberate, not a browser crop of the desktop frame.

Acceptance criteria

Every rendered corpus page shares the splash’s palette, typefaces, and chrome treatment — screenshot either and the same game is recognizable.
Amber and crimson appear only with their assigned meanings on both surfaces.
No rounded corner, drop shadow, or decorative gradient on any page.
IBM Plex Sans/Mono are loaded fonts on every page (document.fonts), not fallback-rendered.
The docs footer contains no atmospheric statusline / slogan copy.
pnpm --dir site build renders the whole wiki under the theme with no page opting out.
Every rendered document displays its authority role before the body; LOG and NAVIGATION explicitly disclaim current design authority.
Production build (./tools/site-build.sh, base /misaligned) emits corpus-internal body links under /misaligned/…/. In particular, links to the player contract resolve to /misaligned/vision/player-contract/, and site/dist/vision/player-contract/index.html exists. Local SITE_BASE=/ builds keep root-absolute /…/ links.
At desktop and mobile widths, the selected machine world fills the first viewport with only MISALIGNED, WORK / THINK / LIE, and quiet navigation over it. No premise rail, status instrument, CTA, or paragraph competes with the image.
The splash introduces WORK / THINK / LIE as the primary machine grammar, tersely names PERCEIVE / BUILD / REACH / PERSIST, states that humans and AI both play, and links the claim that agents playtest during development to the protocol and public playtest evidence. It spends neither crimson nor amber as a generic marketing accent.
Every production splash contains a full misaligned-source-revision commit. ./tools/site-smoke.sh fails when the public homepage is missing that marker, carries a different revision, or loses the WORK / THINK / LIE title contract.