# Spec: the public site — one visual law from splash to spec page ``` Type: spec 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. 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 **perception cut**, not a detached key-art poster or an ad-copy layout. At the first frame, the B1 world owns the full viewport. The world uses the original homepage master at `assets/reference/art-direction/b1-perception-cut-generated.jpg`: oblique clinical space reconstructed out of true black, porcelain floor, severe machines, black conduit, and one amber core. The owned core is deliberately unlike a commodity rack: an asymmetric stepped compute monolith with a recessed black spine, severe porcelain masses, integrated cable roots, and one narrow amber seam. It was generated from the locked B1 direction study under this page's visual constraints, then human-selected 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 original July 8 porcelain|ink monolith and blood-pool plate remains a canonical identity artifact and useful overt-phase image. It no longer owns the homepage layout. The public opening sells the concealment-era simulation 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. ## 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 perception-cut composition. Splash routes and art use `import.meta.env.BASE_URL`. - `assets/reference/art-direction/b1-perception-cut-generated.jpg` — selected generated homepage master; the neighboring B1 direction study remains its source constraint rather than a public delivery asset. - `site/public/b1-perception-cut-wide.webp` and `site/public/b1-perception-cut-mobile.webp` — optimized responsive exports from that master. The narrow export is a deliberate square composition, not a browser crop of the desktop frame. ## Acceptance criteria 1. Every rendered corpus page shares the splash's palette, typefaces, and chrome treatment — screenshot either and the same game is recognizable. 2. Amber and crimson appear only with their assigned meanings on both surfaces. 3. No rounded corner, drop shadow, or decorative gradient on any page. 4. IBM Plex Sans/Mono are loaded fonts on every page (`document.fonts`), not fallback-rendered. 5. The docs footer contains no atmospheric statusline / slogan copy. 6. `pnpm --dir site build` renders the whole wiki under the theme with no page opting out. 7. Every rendered document displays its authority role before the body; LOG and NAVIGATION explicitly disclaim current design authority. 8. 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. 9. At desktop and mobile widths, the B1 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. 10. 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.