feat(website): /t27f/graph/ in the site's own style

[gHashTag]

{
  "version": 1,
  "head_sha": "2ea2f722d4161c4c7802f7300f61623d72fd5e54",
  "summary": "The T27F graph page at t27.ai/t27f/graph/ is no longer plain white: the page chrome uses the t27.ai site tokens (black page, green accent, Outfit and JetBrains Mono) with a link back to t27.ai, and the colour of every box and line now comes from the view spec in t27, rebuilt into the wasm.",
  "changes": [
    "apps/website/public/t27f/graph/index.html: dark page chrome from the site tokens in src/index.css, fonts loaded from the site's own woff2 files, header with a t27.ai link, styled picker and status line (62 lines; CSS is chrome only)",
    "apps/website/public/t27f/graph/graph.js: still 39 lines; the only change is the SVG font family, JetBrains Mono, so box text matches the site",
    "apps/website/public/t27f/graph/t27f.wasm, spec_graph_view.mjs and specs/spec_graph_view.t27: rebuilt on the lab from the recoloured view spec (gHashTag/t27#10215, master 538df0750); the colours live in the spec, not in JS",
    "apps/website/public/t27f/graph/PROVENANCE.txt: new source commit, glue commit, checksums, colour provenance and why derived edges are still absent",
    "apps/website/README.md: the graph page section says the page follows the site tokens and where the colours live"
  ],
  "tests": [
    {
      "command": "t27c test-report specs/t27f/spec_graph_view.t27 on the Railway lab",
      "result": "9 pass, 0 fail, 4 invariants proved, 0 vacuous passes",
      "status": "passed",
      "evidence": "lab run for gHashTag/t27#10215 with the recoloured constants and updated asserts"
    },
    {
      "command": "t27c gen-js, t27c gen and zig build-exe to wasm32-freestanding on the Railway lab from the vendored specs",
      "result": "the shipped t27f.wasm, spec_graph_view.mjs and the two generated Zig files have the sha256 values recorded in PROVENANCE.txt",
      "status": "passed",
      "evidence": "lab run on 2026-10-18; t27f.wasm sha256 7b2a0f0c...1e60"
    },
    {
      "command": "static server over apps/website/public, open /t27f/graph/ and select the specs",
      "result": "page renders dark with site fonts; specs draw with green solid, golden, blue and grey dashed boxes; over-cap specs show the refusal in the warn colour; no console errors",
      "status": "passed",
      "evidence": "Claude built-in browser pane against a local static server on the branch before the commit"
    }
  ],
  "limitations": [
    "Derived edges are not included: the derive pass (t27#10198) is a separate module that the wasm glue does not call, and wiring it in needs more hand-written glue.",
    "Derived boxes are golden and dashed, not solid, because the view spec's invariant requires a distinct dash per label for colour-blind readers.",
    "No CI check re-verifies the checksums in PROVENANCE.txt yet.",
    "Merge is not deploy: t27.ai is published by a separate publisher, so the page is not live until it deploys."
  ],
  "tags": [
    "t27f",
    "website",
    "design",
    "wasm"
  ],
  "blog": {
    "title": "The T27F graph page now looks like t27.ai",
    "summary": "The graph page that draws a t27 spec as boxes and lines now uses the site's own dark style, and the colours of the boxes are set by a t27 spec rather than by CSS.",
    "outline": [
      "The first version of the graph page drew correctly but looked like a plain white document, unlike the rest of t27.ai.",
      "The page chrome now uses the site's tokens: black page, green accent, Outfit text and JetBrains Mono for names.",
      "The colour of every box and line is a constant in the t27 view spec, changed through a t27 pull request and rebuilt into the wasm.",
      "The label stays readable without colour: each of exact, derived, suggested and unknown keeps its own outline dash and a text label."
    ]
  }
}

Makes /t27f/graph/ match the rest of t27.ai. Refs #1648 (RFC #1649).

Which palette, and why

I followed the site's own tokens (apps/website/src/index.css :root and src/lib/explorerTheme.ts), not docs/BRAND-KIT.md. The brand kit is the older trios palette; the live site does not use it, so using it would make the page look foreign next to the pages it links to.

token	value
page / panel / raised	#000 / #0b0d0c / #121614
border / bright border	rgba(0,255,136,.10) / rgba(0,255,136,.34)
text / muted	#fff / #8b9490
accent / golden / blue / warn	#00FF88 / #FFD700 / #58A6FF / #f0a020
fonts	Outfit for text, JetBrains Mono for code, names and line spans

Where each colour lives

• Box and line colours are in specs/t27f/spec_graph_view.t27, not in JS or CSS. Changed in spec(t27f): the graph view uses the t27.ai site colours t27#10215 (closes spec(t27f): the graph view uses the t27.ai site colours (dark backdrop, accent green) t27#10213, merged as 538df0750), tests updated, ASCII only. t27f.wasm, spec_graph_view.mjs and the vendored view spec here are regenerated from it on the lab. The JS never overrides a spec colour.
• exact: green #00FF88, solid. derived: golden #FFD700, dashed. suggested: blue #58A6FF, dashed. unknown: muted #8B9490, dashed. Edges follow their label's stroke. The text label stays in every box, and each label keeps its own dash, so colour is never the only signal.
• The too-many verdict is shown in the warn colour. That is page chrome (CSS on #status.refused).
• The CSS in index.html is page chrome only: background, fonts, header, picker, link back to t27.ai.

Deviation from the suggested mapping

Derived is dashed, not solid. The view spec has an invariant that all four dashes are distinct and exact is 0, so a reader who cannot tell colours apart can still tell labels apart. Making derived solid would break that invariant. Edges are not given a separate colour per kind (tested_by, data_flow): the view spec already separates edge kinds by lane (each kind is shifted by its own lane), and the colour of a line is its inference label's stroke, so I left that rule alone rather than add a second colour axis.

Hand-written code

graph.js is still 39 lines (comments included); its only change is the SVG font family. index.html is 62 lines: markup plus the chrome CSS. No layout or colour logic in JS.

Contrast

White text on each box fill is above 13:1. Each stroke on the #0b0d0c backdrop is above 6:1; the muted grey is the lowest. Muted #8b9490 body text on the black page is above 6:1 too. All are well past 4.5:1. (Computed by hand from the relative-luminance formula, not by a tool run.)

Derived edges: not included

The derive pass (spec_graph_derive.t27, t27#10198) is merged, but it is a separate module that the wasm glue (export.zig in t27-mcp) does not call. Wiring it in means exporting its entry points from that hand-written glue, which is more foreign code. Until t27 has a way to wire it without glue, every edge on the page is exact, and the page says so. PROVENANCE.txt records this.

Verification

• Lab: t27c test-report on the view spec gives 9 pass, 0 fail, 4 invariants proved, 0 vacuous. The wasm rebuilt from the vendored specs matches the shipped file byte for byte (sha256 7b2a0f0c...1e60).
• Browser pane against a local static server: page renders dark with the site fonts, the specs draw with the new colours, over-cap specs show the refusal, no console errors.

After merge

Merge is not deploy. The page goes live only after the publisher runs (Publish website from trinity in gHashTag/ghashtag.github.io) and the Pages build finishes.

🤖 Generated with Claude Code

[tri-claw]

Summary by t27-bees

Checked by the t27 compiler

_{t27c parse, parse-complete and typecheck on each changed .t27 file at 2ea2f72. Nothing was generated, built or run. A pass means the file is well formed, not that it is right.}

• apps/website/public/t27f/graph/specs/spec_graph_view.t27: parses and typechecks.

Read by the model

The PR redesigns the /t27f/graph/ page to match t27.ai's dark theme (black background, green accent, Outfit/JetBrains Mono fonts) and moves all box/line colours into the t27 view spec (spec_graph_view.t27) so they're rebuilt into the wasm. The page chrome is styled with site tokens in index.html; the wasm and its generated JS module now carry the new palette.

Worth a look

• apps/website/public/t27f/graph/index.html:14–17 – Fonts are preloaded from ../../fonts/outfit-latin.woff2 and ../../fonts/jetbrains-mono-latin.woff2. If those files aren't present in apps/website/public/fonts/, the fonts will fall back to system fonts and the page won't match the site's typography.
• apps/website/public/t27f/graph/index.html:22 – --panel:#0b0d0c is used for the graph container background, while VIEW_BACKDROP in the spec is 0x0B0D0C. They match now, but any future change to one without the other will create a visible seam between the SVG backdrop and the container.
• apps/website/public/t27f/graph/spec_graph_view.t27:84–87 – The comment claims the dark fills give white text a 4.5:1 contrast ratio on every box. The diff doesn't include contrast measurements; if any fill/stroke pair falls short, labels becomes illegible for some users.
• apps/website/public/t27f/graph/graph.js:25 – The SVG font-family is set to 'JetBrains Mono',ui-monospace,monospace. If the @font-face in index.html fails to load (wrong path, CSP, network error), the SVG text falls back to a generic monospace font and may render at a different width, breaking the "kind name" character-fit calculation that uses VIEW_FONT_PX * 0.6.
• apps/website/public/t27f/graph/PROVENANCE.txt:57–60 – The note about derived edges being absent is accurate per the current wasm glue, but the file is not machine-checked. A future rebuild that accidentally includes the derive module without updating this note would make the provenance misleading.

---

_{Read: 7 files, +78 -26, the whole diff. Head 2ea2f72. Model: openai-compatible/nvidia/nemotron-3-ultra-550b-a55b. Commands: @t27-bees review | summary | help | pause | resume. Free for every repository.}