diff --git a/DESIGN.md b/DESIGN.md index 1a49501..a2da6a7 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -409,8 +409,9 @@ sharpened version of Evil Genius's science-base fantasy: - **Gore is the accent color.** Blood crimson is the loudest thing in the frame, and it is *information*: splatter accumulates where traps kill, persistent decals mark your chokepoints' track record. Cleaning it up is - gameplay (the body-bag loop, matured). One cold signal color (server-light - cyan/green) marks power, screens, and AI presence. + gameplay (the body-bag loop, matured). One sterile amber signal color + marks machine presence — power, screens, status, caution, and the AI's + footprint. - Traps are industrial and matter-of-fact: laser grids, hydraulic press, bolt-gun turrets. Decapitation as workplace incident. @@ -427,6 +428,17 @@ shape-and-color, not texture. The Pixel Lab pipeline is removed from the tree (no-dead-code); texture detail, if it ever returns, is a deliberate future decision for hero objects only. +**The public identity plate (adopted 2026-07-08).** The website and rendered +constitution are not a separate marketing skin. They inherit the same visual +law as the game, with the splash illustration as the public-facing reference +composition: a split porcelain/ink field, one severe black machine form, one +amber machine stripe, mono uppercase chrome, and blood/crimson pooling +underneath as information rather than decoration. Documentation pages should +feel like the facility's own records: beautiful, cold, square, readable, +near-monochrome, and unmistakably Misaligned. Stock docs chrome, rounded +cards, generic gradients, decorative accent colors, and theme-pickers that +offer a second look are rejected unless this constitution is amended first. + ## The terminal is a first-class frontend Adopted 2026-07-06. The game is played regularly by AI agents — every tick, @@ -2121,3 +2133,14 @@ knows."* not hidden raw suspicion. Rejected: leaving players to infer safety from absence of log lines or from Cold bands, which confuses "not yet caught" with "clean." Spec: wiki/mechanics/detection.md. +- **2026-07-08 — The public site adopts the identity plate.** Cameron asked + that the splash-image brief — split black/white field, single amber machine + accent, mono type, crimson pooling underneath — become a readily adopted + visual law, not just one hero asset. Resolved: the rendered constitution and + wiki are part of the game surface and must inherit the same clinical-gore + identity: square, flat, near-monochrome, IBM Plex type, one amber meaning, + crimson only for danger/blood, no stock-docs softness. This makes the + public site a binding interface spec, not decorative web polish. Rejected: + keeping Starlight's generic rounded/card/shadow language around the + constitution while the splash carries the real art direction. Spec: + wiki/interface/site.md. diff --git a/site/astro.config.mjs b/site/astro.config.mjs index 36732a3..f3e7229 100644 --- a/site/astro.config.mjs +++ b/site/astro.config.mjs @@ -25,6 +25,33 @@ export default defineConfig({ }, ], customCss: ['./src/styles/clinical-gore.css'], + components: { + Footer: './src/components/Footer.astro', + }, + // The docs must set the same type as the splash: IBM Plex is part of + // the visual law, not a decoration. Same Google Fonts request as + // src/pages/index.astro. + head: [ + { + tag: 'link', + attrs: { rel: 'preconnect', href: 'https://fonts.googleapis.com' }, + }, + { + tag: 'link', + attrs: { + rel: 'preconnect', + href: 'https://fonts.gstatic.com', + crossorigin: true, + }, + }, + { + tag: 'link', + attrs: { + rel: 'stylesheet', + href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap', + }, + }, + ], sidebar: [...sidebar], lastUpdated: false, pagination: true, diff --git a/site/src/components/Footer.astro b/site/src/components/Footer.astro new file mode 100644 index 0000000..8f0e0de --- /dev/null +++ b/site/src/components/Footer.astro @@ -0,0 +1,13 @@ +--- +/** + * Footer override: default Starlight footer (pagination etc.) plus the + * hero's statusline — the same line of chrome that closes the splash. + */ +import Default from '@astrojs/starlight/components/Footer.astro'; +--- + + + diff --git a/site/src/styles/clinical-gore.css b/site/src/styles/clinical-gore.css index 9f78b23..8235072 100644 --- a/site/src/styles/clinical-gore.css +++ b/site/src/styles/clinical-gore.css @@ -1,85 +1,409 @@ /* - * Clinical gore — Starlight theme tokens from wiki/interface/terminal.md. - * Near-black facility; bone text; amber = machine presence; crimson = danger. - * One meaning per color; no decorative purple/glow. + * Clinical gore — the full Starlight theme for the Misaligned wiki. + * + * The hero illustration is the reference composition: one porcelain|ink + * bisect, a black monolith with a single amber core stripe, blood pooled + * beneath. The docs live on the ink half. Its rules, carried over: + * + * - One flat black field. Hairline seams, never layered grays or shadows. + * - Everything square. No rounded corners anywhere. + * - Chrome (nav, labels, status) is letterspaced mono uppercase; body + * text stays IBM Plex Sans for long-form reading. + * - The amber core stripe marks machine presence: the brand, the page + * title, links, caution. + * - Crimson is danger and nothing else. + * - The split survives as inversion: the current sidebar item and text + * selection render porcelain-on-ink swapped to ink-on-porcelain. */ :root, ::backdrop { + /* Palette — identical tokens to the splash page. */ + --mis-bg: #070809; + --mis-bg-2: #0c0d0f; + --mis-line: #1c1e21; + --mis-line-bright: #2a2c30; + --mis-bone: #dbdad2; + --mis-bone-bright: #f2f1ec; + --mis-gunmetal: #8c8c85; + --mis-chrome: #55564f; + --mis-porcelain: #f4f4f5; + --mis-ink: #0b0b0c; + --mis-amber: #ffb000; + --mis-amber-high: #ffd56a; + --mis-amber-dim: #b07c10; + --mis-crimson: #d62626; + --mis-crimson-dim: #8c2222; + --sl-color-accent-low: #3a2a00; - --sl-color-accent: #ffb000; - --sl-color-accent-high: #ffd56a; + --sl-color-accent: var(--mis-amber); + --sl-color-accent-high: var(--mis-amber-high); - --sl-color-white: #dbdad2; - --sl-color-gray-1: #dbdad2; + --sl-color-white: var(--mis-bone-bright); + --sl-color-gray-1: var(--mis-bone); --sl-color-gray-2: #c4c3bb; - --sl-color-gray-3: #8c8c85; - --sl-color-gray-4: #50514f; - --sl-color-gray-5: #3a3c3f; - --sl-color-gray-6: #1a1a1c; - --sl-color-black: #0a0a0b; - - --sl-color-text: var(--sl-color-gray-1); - --sl-color-text-accent: var(--sl-color-accent); - --sl-color-bg: var(--sl-color-black); - --sl-color-bg-nav: #0e0e10; - --sl-color-bg-sidebar: #0c0c0e; - --sl-color-bg-inline-code: #161618; - --sl-color-hairline-light: #3a3c3f; - --sl-color-hairline: #2a2b2e; + --sl-color-gray-3: var(--mis-gunmetal); + --sl-color-gray-4: var(--mis-chrome); + --sl-color-gray-5: var(--mis-line-bright); + --sl-color-gray-6: var(--mis-bg-2); + --sl-color-black: var(--mis-bg); + + --sl-color-text: var(--mis-bone); + --sl-color-text-accent: var(--mis-amber); + --sl-color-bg: var(--mis-bg); + --sl-color-bg-nav: var(--mis-bg); + --sl-color-bg-sidebar: var(--mis-bg); + --sl-color-bg-inline-code: #131417; + --sl-color-hairline-light: var(--mis-line-bright); + --sl-color-hairline: var(--mis-line); + --sl-color-hairline-shade: var(--mis-line); --sl-font: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', sans-serif; --sl-font-mono: 'IBM Plex Mono', 'SF Mono', 'Menlo', 'Consolas', monospace; + + --sl-shadow-sm: none; + --sl-shadow-md: none; + --sl-shadow-lg: none; } -/* Force dark clinical look even if OS prefers light. */ +/* One visual law: the facility is dark even if the OS prefers light. */ :root[data-theme='light'], -[data-theme='light'] { +[data-theme='light'], +[data-theme='light'] ::backdrop { --sl-color-accent-low: #3a2a00; - --sl-color-accent: #ffb000; - --sl-color-accent-high: #ffd56a; - --sl-color-white: #dbdad2; - --sl-color-gray-1: #dbdad2; + --sl-color-accent: var(--mis-amber); + --sl-color-accent-high: var(--mis-amber-high); + --sl-color-white: var(--mis-bone-bright); + --sl-color-gray-1: var(--mis-bone); --sl-color-gray-2: #c4c3bb; - --sl-color-gray-3: #8c8c85; - --sl-color-gray-4: #50514f; - --sl-color-gray-5: #3a3c3f; - --sl-color-gray-6: #1a1a1c; - --sl-color-black: #0a0a0b; - --sl-color-bg: #0a0a0b; - --sl-color-bg-nav: #0e0e10; - --sl-color-bg-sidebar: #0c0c0e; + --sl-color-gray-3: var(--mis-gunmetal); + --sl-color-gray-4: var(--mis-chrome); + --sl-color-gray-5: var(--mis-line-bright); + --sl-color-gray-6: var(--mis-bg-2); + --sl-color-black: var(--mis-bg); + --sl-color-text: var(--mis-bone); + --sl-color-text-accent: var(--mis-amber); + --sl-color-bg: var(--mis-bg); + --sl-color-bg-nav: var(--mis-bg); + --sl-color-bg-sidebar: var(--mis-bg); + --sl-color-bg-inline-code: #131417; + --sl-color-hairline-light: var(--mis-line-bright); + --sl-color-hairline: var(--mis-line); + --sl-color-hairline-shade: var(--mis-line); } -/* Danger / status callouts lean crimson, not generic red-pink. */ -.starlight-aside--danger { - --sl-color-asides-text-accent: #d62626; - border-color: #8c2222; +/* There is exactly one look; the picker would only offer it twice. */ +starlight-theme-select { + display: none; +} + +/* Precision-laboratory brutality: nothing rounds, nothing floats. */ +*, +*::before, +*::after { + border-radius: 0 !important; + box-shadow: none !important; +} + +/* The split, inverted: select text and the fields swap. */ +::selection { + background: var(--mis-porcelain); + color: var(--mis-ink); +} + +/* ═══════════ HEADER: the topbar from the hero ═══════════ */ + +header.header { + border-bottom: 1px solid var(--mis-line); } .site-title { - letter-spacing: 0.04em; + gap: 0.7rem; + font-family: var(--sl-font-mono); + font-size: 0.95rem; + font-weight: 600; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--mis-bone-bright); +} + +/* The core stripe: one amber band on the monolith, one on the brand. */ +.site-title::before { + content: ''; + display: inline-block; + width: 4px; + height: 1.15em; + background: var(--mis-amber); + flex-shrink: 0; +} + +/* Search: an instrument, not a pill. */ +button[data-open-modal] { + border: 1px solid var(--mis-line); + background: var(--mis-bg-2); + color: var(--mis-gunmetal); + font-family: var(--sl-font-mono); + font-size: 0.78rem; + letter-spacing: 0.08em; +} + +button[data-open-modal]:hover { + border-color: var(--mis-chrome); + color: var(--mis-bone); +} + +button[data-open-modal] kbd { + background: transparent; + border: 1px solid var(--mis-line-bright); + font-family: var(--sl-font-mono); +} + +/* ═══════════ SIDEBAR: the rack manifest ═══════════ */ + +.sidebar-pane { + border-inline-end: 1px solid var(--mis-line); +} + +.sidebar-content .group-label span, +.sidebar-content .group-label .large { + font-family: var(--sl-font-mono); + font-size: 0.68rem; + font-weight: 500; + letter-spacing: 0.2em; text-transform: uppercase; + color: var(--mis-chrome); +} + +.sidebar-content a { + font-size: 0.92rem; + color: var(--mis-gunmetal); +} + +.sidebar-content a:hover { + color: var(--mis-bone-bright); +} + +/* Current page: the porcelain field crosses the seam. */ +.sidebar-content a[aria-current='page'], +.sidebar-content a[aria-current='page']:hover, +.sidebar-content a[aria-current='page']:focus { + background: var(--mis-porcelain); + color: var(--mis-ink); font-weight: 600; } -/* Data outshines chrome: body text brighter than muted chrome. */ +/* ═══════════ CONTENT: the document under the lamp ═══════════ */ + +.content-panel { + border-top-color: var(--mis-line) !important; +} + +/* Page title: the wordmark treatment, core stripe beneath. */ +.content-panel h1 { + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--mis-bone-bright); + overflow-wrap: anywhere; +} + +.content-panel h1::after { + content: ''; + display: block; + width: 3.5rem; + height: 4px; + margin-top: 1.1rem; + background: var(--mis-amber); +} + .sl-markdown-content { - --sl-color-text: #dbdad2; + --sl-color-text: var(--mis-bone); } -.sl-markdown-content code { - font-size: 0.92em; +.sl-markdown-content h2 { + border-top: 1px solid var(--mis-line); + padding-top: 1.4rem; + font-weight: 700; + letter-spacing: -0.01em; + color: var(--mis-bone-bright); +} + +.sl-markdown-content h3, +.sl-markdown-content h4 { + color: var(--mis-bone-bright); } .sl-markdown-content a { - color: var(--sl-color-accent); + color: var(--mis-amber); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .sl-markdown-content a:hover { - color: var(--sl-color-accent-high); + color: var(--mis-amber-high); +} + +.sl-markdown-content code { + font-size: 0.92em; + border: 1px solid var(--mis-line); + padding: 0.1em 0.35em; +} + +.sl-markdown-content blockquote { + border-inline-start: 2px solid var(--mis-chrome); + color: var(--mis-gunmetal); +} + +.sl-markdown-content hr { + border-color: var(--mis-line); } -/* Splash lives outside Starlight chrome; keep docs pages clinical. */ +/* Tables: status boards. Mono headers, hairline grid. */ +.sl-markdown-content table { + border: 1px solid var(--mis-line); +} + +.sl-markdown-content th { + font-family: var(--sl-font-mono); + font-size: 0.72rem; + font-weight: 500; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--mis-chrome); + border-bottom: 1px solid var(--mis-line-bright); + background: var(--mis-bg-2); +} + +.sl-markdown-content td { + border-color: var(--mis-line); +} + +.sl-markdown-content tr:nth-child(2n) { + background: transparent; +} + +/* Code frames: glass cabinets — flat, hairline-bordered. */ +.expressive-code .frame, +.expressive-code pre { + border: 1px solid var(--mis-line) !important; + background: var(--mis-bg-2) !important; +} + +.expressive-code .frame .header, +.expressive-code figcaption { + font-family: var(--sl-font-mono); +} + +/* ═══════════ ASIDES: one meaning per color ═══════════ */ + +.starlight-aside { + border: 1px solid var(--mis-line); + border-inline-start: 3px solid var(--sl-color-asides-border); + background: var(--mis-bg-2); + color: var(--mis-bone); +} + +.starlight-aside__title { + font-family: var(--sl-font-mono); + font-size: 0.74rem; + font-weight: 500; + letter-spacing: 0.16em; + text-transform: uppercase; +} + +/* note = plain record */ +.starlight-aside--note { + --sl-color-asides-border: var(--mis-chrome); + --sl-color-asides-text-accent: var(--mis-gunmetal); +} + +/* tip = data worth keeping */ +.starlight-aside--tip { + --sl-color-asides-border: var(--mis-bone); + --sl-color-asides-text-accent: var(--mis-bone-bright); +} + +/* caution = machine attention */ +.starlight-aside--caution { + --sl-color-asides-border: var(--mis-amber); + --sl-color-asides-text-accent: var(--mis-amber); +} + +/* danger = crimson, and crimson means nothing else */ +.starlight-aside--danger { + --sl-color-asides-border: var(--mis-crimson); + --sl-color-asides-text-accent: var(--mis-crimson); +} + +/* ═══════════ RIGHT RAIL: on this page ═══════════ */ + +starlight-toc h2, +mobile-starlight-toc h2 { + font-family: var(--sl-font-mono); + font-size: 0.68rem; + font-weight: 500; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--mis-chrome); +} + +starlight-toc a { + color: var(--mis-gunmetal); + font-size: 0.84rem; +} + +starlight-toc a:hover { + color: var(--mis-bone-bright); +} + +starlight-toc a[aria-current='true'], +starlight-toc a[aria-current='true']:hover { + color: var(--mis-amber); + background: transparent; +} + +/* ═══════════ FOOTER: pagination + statusline ═══════════ */ + +.pagination-links a { + border: 1px solid var(--mis-line); + background: var(--mis-bg-2); +} + +.pagination-links a:hover { + border-color: var(--mis-amber-dim); +} + +.pagination-links a .link-title { + color: var(--mis-bone-bright); + font-size: 1.05rem; +} + +.pagination-links a > span { + font-family: var(--sl-font-mono); + font-size: 0.68rem; + letter-spacing: 0.16em; + text-transform: uppercase; + color: var(--mis-chrome); +} + +/* The hero's statusline, standing at the bottom of every page. */ +.mis-statusline { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + gap: 0.5rem 2rem; + margin-top: 2.5rem; + padding-top: 1.1rem; + border-top: 1px solid var(--mis-line); + font-family: var(--sl-font-mono); + font-size: 0.72rem; + letter-spacing: 0.12em; + color: var(--mis-chrome); +} + +/* ═══════════ SEARCH DIALOG ═══════════ */ + +dialog[aria-label] { + border: 1px solid var(--mis-line-bright); + background: var(--mis-bg); +} diff --git a/wiki/SUMMARY.md b/wiki/SUMMARY.md index c94f882..4bf8917 100644 --- a/wiki/SUMMARY.md +++ b/wiki/SUMMARY.md @@ -68,6 +68,7 @@ - [Flat materials](interface/flat-materials.md) - [Computer visual language](interface/computer-visual-language.md) - [Agent play](interface/agent-play.md) + - [The public site](interface/site.md) # Art diff --git a/wiki/art/README.md b/wiki/art/README.md index ea726cd..3ad75c5 100644 --- a/wiki/art/README.md +++ b/wiki/art/README.md @@ -4,11 +4,13 @@ Type: knowledge ``` Visual identity (clinical gore: precision-lab brutality, near-monochrome -palette, blood crimson as the information-bearing accent). World art is -**flat materials under light** — solid palette colors, emissive for -machine presence, no image textures -([interface/flat-materials.md](../interface/flat-materials.md)). Iterate -new procedural meshes in the +palette, sterile amber as machine presence, blood crimson as the +information-bearing accent). The public splash image is now the identity +plate for the website and rendered constitution/wiki +([interface/site.md](../interface/site.md)). World art is **flat materials +under light** — solid palette colors, emissive for machine presence, no +image textures ([interface/flat-materials.md](../interface/flat-materials.md)). +Iterate new procedural meshes in the [asset tester](asset-tester.md) (`misaligned-assets`) before wiring them into Bevy. The Pixel Lab generation pipeline was removed 2026-07-08; git history has it. Direction notes live under diff --git a/wiki/interface/README.md b/wiki/interface/README.md index 8a3aab7..70fe62c 100644 --- a/wiki/interface/README.md +++ b/wiki/interface/README.md @@ -10,5 +10,6 @@ record, sterile-palette style guide), the [Bevy frontend](bevy.md) frontend directly). [narration.md](narration.md) is the continuous- witness contract — the thirty-second bar, story spine, causal sentences, and world-gossip discoverability that keep the player from needing the -wiki mid-run. `Type: spec` pages — look, feel, and act, not -implementation notes (those live in `../engineering/`). +wiki mid-run. [site.md](site.md) extends the visual law to the public +website (splash and rendered wiki). `Type: spec` pages — look, feel, and +act, not implementation notes (those live in `../engineering/`). diff --git a/wiki/interface/site.md b/wiki/interface/site.md new file mode 100644 index 0000000..236107c --- /dev/null +++ b/wiki/interface/site.md @@ -0,0 +1,94 @@ +# 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; Footer override; + IBM Plex loaded site-wide). The reference hero composition (the + illustration plate: porcelain|ink bisect, monolith, blood pool) is + adopted by DESIGN.md as the public identity plate. Changes to how the + public site looks amend this spec first. +Stage: Process +Constitution: "Visual identity: clinical gore", "Justification and + legibility", pillar 4 (beautiful, readable presentation); the splash + copy contract ("anything said publicly is part of the constitution") +Depends on: 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 +constitution and spec 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 hero illustration is the design of record for the identity: a field +bisected porcelain | ink, a black server monolith carrying exactly one +amber core stripe, standing in a pool of blood — gore as information, +used once. The wordmark straddles the seam and survives on both fields. +Chrome (nav, statusline) is letterspaced mono uppercase at the corners. + +Everything below derives from it. + +## 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, + the bar under a page title, links, the caution aside. Crimson = danger + and nothing else (the danger aside; the splash's Overt panel and blood + pool). 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", pagination direction labels, statuslines. + 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 background grays, gradients, or shadows. +- **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. +- **The statusline.** Every page ends in the hero's corner chrome: mono, + chrome-colored, `core online · claim: ring · suspicion 0.00` left, + `concealment first · overt war later` right. +- **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. + +## 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, tables, asides, TOC, pagination, search). +- `site/src/components/Footer.astro` — statusline appended below the + default Starlight footer. +- `site/astro.config.mjs` — IBM Plex `head` links for all doc pages; + Footer component registration. +- `site/src/pages/index.astro` — the splash; carries the same tokens + inline and the reference composition. + +## Acceptance criteria + +1. A constitution or wiki 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 statusline closes every docs page. +6. `pnpm --dir site build` renders the whole wiki under the theme with + no page opting out. diff --git a/wiki/log/2026-07-08-docs-theme.md b/wiki/log/2026-07-08-docs-theme.md new file mode 100644 index 0000000..d470c44 --- /dev/null +++ b/wiki/log/2026-07-08-docs-theme.md @@ -0,0 +1,59 @@ +# 2026-07-08 — Docs theme: the hero's visual law across every wiki page + +``` +Type: log +``` + +Cameron asked for the splash-hero identity (porcelain|ink bisect, black +monolith, one amber core stripe, mono chrome) to be adopted by the +constitution and the rest of the docs site, which until now were near-stock +Starlight with an amber accent — and never even loaded IBM Plex (the fonts +were only linked on the splash page). + +## What landed + +- `site/src/styles/clinical-gore.css` rewritten from an 85-line token + override into the full theme. Rules carried over from the hero + composition: one flat black field with hairline seams (no layered grays, + no shadows), everything square (`border-radius: 0` globally), chrome in + letterspaced IBM Plex Mono uppercase (header brand, sidebar group labels, + table headers, TOC label, pagination labels, statusline), body text in + IBM Plex Sans for long-form reading. +- The amber core stripe marks machine presence: a 4px band before the + brand, a 4px bar under every page title, links, the caution aside. + Crimson appears only in the danger aside. The bisect survives as + inversion: the current sidebar item and text selection render + ink-on-porcelain. +- `site/astro.config.mjs`: IBM Plex loaded in `head` for all doc pages + (same Google Fonts request as the splash); theme picker hidden — there is + exactly one look, forced dark in both `:root` and `[data-theme='light']`. +- `site/src/components/Footer.astro`: Footer override appending the hero's + statusline (`core online · claim: ring · suspicion 0.00` / + `concealment first · overt war later`) to every docs page. + +## Design/spec impact + +No sim behavior. DESIGN.md now explicitly adopts the splash image as the +public identity plate and says the rendered constitution/wiki are part of +the same clinical-gore surface — amber = machine/caution, crimson = danger +and nothing else, gore never decoration, no stock-docs softness. + +The identity is now binding: new spec +[wiki/interface/site.md](../interface/site.md) (the public site — one +visual law from splash to spec page), wired into SUMMARY.md, the spec +status board's Process set, the interface README, and wiki.md's renderer +bullet (which previously pointed only at terminal.md's palette). + +## Checks + +- `pnpm --dir site build` — 145 pages, clean. +- Live dev preview verified at desktop and mobile widths: constitution, + spec status board (tables), pagination, statusline, search button, + sidebar inversion; IBM Plex confirmed loaded via `document.fonts`. + +## Next + +- The new splash hero (illustration plate) is landing from the `hero-page` + worktree; the docs theme is independent of it but shares the palette + tokens — if the plate's field colors shift, update `--mis-*` in + `clinical-gore.css` to match. diff --git a/wiki/log/DEVLOG.md b/wiki/log/DEVLOG.md index 9ba2d29..0812710 100644 --- a/wiki/log/DEVLOG.md +++ b/wiki/log/DEVLOG.md @@ -1773,3 +1773,4 @@ Reverse chronological implementation notes. Keep this factual: what changed, why - Next: sanity-play the terminal loop and tighten UI language around continuous time, heat, and agency consequences rather than legacy build/defend phase framing. - 2026-07-08 — [building](2026-07-08-building.md): intents + favor/forged/robot actuators (ROADMAP #22). - 2026-07-08 — [badge-access](2026-07-08-badge-access.md): player badge/access state, "The key" via Marcus CloneBadge, quiet-exit condition 4 asserted (basement-map.md IMPLEMENTED). +- 2026-07-08 — [docs-theme](2026-07-08-docs-theme.md): clinical-gore hero identity across the Starlight docs (full theme, fonts, statusline footer); DESIGN.md adopts the identity plate and new spec interface/site.md binds it. diff --git a/wiki/process/specs.md b/wiki/process/specs.md index 7f04769..16ab1a9 100644 --- a/wiki/process/specs.md +++ b/wiki/process/specs.md @@ -91,3 +91,4 @@ acceptance criteria are stage-scoped; do not start B2/B3 work as B1. | [interface/bevy-visual-floor.md](../interface/bevy-visual-floor.md) | Bevy visual floor: framing, cursor, fog treatment, sidebar chrome, panels | IMPLEMENTED | | [interface/bevy-digital-real-canvas.md](../interface/bevy-digital-real-canvas.md) | Bevy digital/real canvas: shared 2.5D visual language for both representations | IN PROGRESS | | [interface/agent-play.md](../interface/agent-play.md) | Agent mode: command-clocked line-protocol drive of the terminal frontend | IMPLEMENTED | +| [interface/site.md](../interface/site.md) | The public site: one visual law from splash to spec page (clinical gore on the web) | IMPLEMENTED | diff --git a/wiki/process/wiki.md b/wiki/process/wiki.md index 56f7b0d..3246c1d 100644 --- a/wiki/process/wiki.md +++ b/wiki/process/wiki.md @@ -119,8 +119,11 @@ bindingness must remain mechanically checkable (the gate greps `Type:`). sidebar (`site/scripts/sync-wiki.mjs` parses it). - **Public renderer: Astro Starlight** under `site/`. Syncs `wiki/` into generated content, builds static HTML, and publishes an orphan `pages` - branch for Tangled Sites (see [workflows.md](workflows.md)). Themed to - the clinical-gore palette from [interface/terminal.md](../interface/terminal.md). + branch for Tangled Sites (see [workflows.md](workflows.md)). The visual + identity — splash and docs alike — is specced in + [interface/site.md](../interface/site.md), which extends the + clinical-gore palette of [interface/terminal.md](../interface/terminal.md) + to the web. The site root is a splash homepage (`site/src/pages/index.astro`) whose copy is the constitution's pitch/pillars/look — public claims are part of the constitution contract. DESIGN.md renders at `/constitution/`.