Documentation

What is here

• /: the design lab, the twenty-seven directions read as an article, one live exhibit at a time, or as a grid of captures, with the anatomy wall (the flagship cut into section tiles, light and dark, desktop and mobile) and the capabilities ledger (what the system can do, each entry pointing at where it runs live)
• /brand: the brand book, the identity canon in ten sections
• /docs: the repository documents read in the browser, one address per document, with the build log under the readme
• /deck: the General Translation brand deck, 93 slides in its own viewer
• /skills: the curated skills, one page per skill with its SKILL.md, its files and its install line, and the raw files at /skills/<slug>/SKILL.md
• /handbook: how Kevin runs General Translation work, read as one book: the operating principles, the quality bar, the multi-session playbook, the product map, the glossary and the decisions log, one address per document (/handbook/<slug>)
• /marks: the mark explorations, every candidate drawn in one color
• /blog: the docs-redesign series as General Translation published it, three posts with their sources under content/
• /graphics: every illustration of the series, by area, with what it shows and the glyphfield export it sits on; made with the toolchain in graphics/
• /motion: every film on the motion roster with its length and status, the research package of each film in the translation series (/motion/<slug>), and the contact sheet and script of each published cut; generated from motion/ by pnpm build:motion, which publishes a film's credits, sheet and script only for the cut public/motion/published.json pins and lists a newer cut as in review
• /compare: two directions side by side in scroll-synced frames
• /present: the presenter, a full-screen walkthrough of the redesign with every prototype live
• /archive: the retired directions, each kept as a full-page capture with the commit that last held its code

Run it

pnpm install
pnpm dev        # http://localhost:3005

Read first

Skills

The skills under skills/ record how Kevin does General Translation work: the rules, the tokens, the commands, the files, the traps and the review standard for each area of it. Each is a folder in the standard SKILL.md format (frontmatter name and description, a metadata block with the title, the areas and the last update, then the body), with its references and scripts beside it, so Claude Code, Codex and other agents load it as it is. /skills lists them by area, each skill's page shows its body, its files and its install line, and /skills/<slug>/SKILL.md serves the raw file (/skills/index.json lists the whole set for an agent). skills/README.md indexes the folder by area for a reader on GitHub or in an imported copy; pnpm build:skills writes it.

Install them into any project from a checkout of this repository. The script needs Node and nothing else:

node scripts/install-skills.mjs --list                               # the set
node scripts/install-skills.mjs --project ~/code/app --dry-run       # every step, nothing written
node scripts/install-skills.mjs --project ~/code/app                 # link all of them
node scripts/install-skills.mjs gt-voice gt-brand --project ~/code/app --copy   # vendor two

• --project <dir> writes <dir>/.claude/skills/<slug> and <dir>/.agents/skills/<slug>; --agents claude,agents,codex adds .codex/skills. --user writes the same folders under the home directory, and --into <dir> writes one folder of your choice.
• The default is a link to the canonical folder, so a git pull here updates every project that links it. Inside this repository the links are relative, which is how the committed .claude/skills and .agents/skills links are made (--project .). In a repository that teammates clone, use --copy; the script says so when git tracks the target.
• The script never writes into another git repository through a linked folder. On Kevin's machine ~/.claude/skills and ~/.agents/skills are links into his wiki's runtime list, so --user refuses there and says why; --into names a folder when that write is wanted.
• It replaces only its own entries (a link to this checkout, or a folder whose SKILL.md says origin: prototemplate). It skips anything else with the same name, and --force moves that entry aside, never deleting it. --uninstall removes its own entries and nothing else.

How the set relates to the other skills Kevin uses:

• Kevin's wiki holds his general skills (the humanizer, kevin-voice, agent-browser, create-graphics, the HyperFrames skills) and projects them into ~/.claude/skills and ~/.agents/skills. The skills here are the General Translation layer on top of them: each names the wiki skills it builds on, and no slug here exists in the wiki, so an install never shadows one. Prototemplate work never edits the wiki.
• gt-cloud's own .agents/skills (gt-landing, gt-ui, gt-dashboard, glyphfield, code-comments) stay authoritative for gt-cloud's code maps. A skill here points to them and copies none of their file maps.

To change or add a skill, edit skills/<slug>/SKILL.md and run pnpm build:skills, which validates every skill against the contract and regenerates src/lib/skills.ts for the site and skills/README.md; pnpm lint:skills fails while either is stale or a skill breaks the contract. The contract and the steps for a new skill are in skills/prototemplate.

Import this into another project

The hub is built to be copied into another repository so that project's agents work the GT way. What travels: the skills with their installer, AGENTS.md, the handbook, and the two canon files the skills cite (BRAND.md, DESIGN.md). Copied into the same places, every relative link between them keeps working. From a checkout of this repository:

# 1. the skills and their installer, at the project root as they sit here
cp -R skills ~/code/app/skills
mkdir -p ~/code/app/scripts && cp scripts/install-skills.mjs ~/code/app/scripts/

# 2. the agent guide, the canon the skills cite, and the handbook
cp AGENTS.md BRAND.md DESIGN.md ~/code/app/
mkdir -p ~/code/app/docs && cp -R docs/handbook ~/code/app/docs/handbook

# 3. link the skills where agents look for them (see every step first),
#    and point Claude Code at AGENTS.md
cd ~/code/app
node scripts/install-skills.mjs --project . --dry-run
node scripts/install-skills.mjs --project .
printf '# CLAUDE.md\n\n@AGENTS.md\n' > CLAUDE.md

• Step 3 writes relative links from .claude/skills and .agents/skills to the copied skills/, the layout this repository commits, so they work for everyone who clones the project.
• On your own machine you can skip the copy and link every project to this checkout instead: node scripts/install-skills.mjs --project ~/code/app from here, so a git pull here updates them all. The handbook's links to skills/ then resolve only on the site and on GitHub.
• If the project already has an AGENTS.md or a CLAUDE.md, merge the sections in by hand and keep the project's own.
• Then edit the copied AGENTS.md for the new project: its name and what it is, its own commands, ports and gates in "Working in this repository", its session lanes, and any house rule that does not apply there (the line law and the radius law hold for GT surfaces). Keep the read order, the principles and the routing table.
• A few handbook links name files that stay here (ARCHITECTURE.md, LICENSE, docs/ARTIFACT-PICTURES.md). Read them on the site or on GitHub. To take later changes, copy the folders again; to read the current canon without copying, use its address on the site (www.prototemplate.com/docs/design, /docs/brand, /handbook, /skills/<slug>).
• The page check and the line audit run against any site from this checkout: pnpm check:pages --base <url> --pages-module <file> and node scripts/lint-lines.mjs <url> (the prototemplate skill, "Using the hub from another project"). On another machine set CHROME_PATH to a local Chrome for Testing first.
• The license still applies to what you copy: the code, the writing, the brand and the designs are copyright General Translation, Inc. (License below).

The one-paragraph tour

Every page runs on the laws: hairlines drawn exactly once (scripts/lint-lines.mjs fails the round otherwise; pnpm check:pages, scripts/pagecheck/, reads every page at ten viewports in both themes and reports what did not hold), four absolute colors plus one spectral accent per page, dark mode as a pure token remap, and one mobile type ladder (DESIGN.md §12). src/app/d/toolchain is the single source of truth the fork directions import and re-skin by root-class rescoping; src/lib holds the visual engines; src/components/shared holds the instruments. src/lib/directions.ts registers every direction, and the index, the presenter and the sitemap all follow it. The anatomy wall's tiles come from docs/harness/gallery-shoot.mjs under deterministic names (ARCHITECTURE.md, "The gallery pipeline"), and a missing tile drops from the wall.

License

Prototemplate is public so that anyone can read it, but it is not open source. The code, the writing, the brand and the designs are copyright General Translation, Inc., all rights reserved, and no reuse is granted without written permission. Third-party fonts, icons, photographs and adapted skills keep their own licenses. See LICENSE.

The name

General Translation was chosen deliberately, in this order:

1. Ambition. Like General Motors or General Electric, the name says we intend to be the trustworthy, technologically innovative number one in the category, an enterprise in the old sense.
2. Generality. A reference to "artificial general intelligence": general AI models outperform specific translation models because they understand context and can be directed.
3. Distinction. Every other localization company seemed to begin with an "L".

The naming system

The idea

Every product in every language. Native-level speed and quality, from day one. That's the whole thesis, executed insanely hard.

The positioning: the Vercel of localization. Two halves designed together: open-source developer tools (the Next.js of the analogy: the gt libraries) and closed-source infrastructure (the Vercel: context-aware translation APIs, versioning, editing, integrations, agents) that is the best-in-class way to use those tools. Because we build the entire stack, we can promise what point solutions can't: consistent, high-quality translation across a whole business, integrated in an afternoon.

Two registers, one family: the open source should feel community-owned; the platform should feel enterprise-grade.

The values, which the visual identity must carry:

• Engineering-first. Built by people with deep technical roots, for the world's best engineering teams.
• Craft. We care about the difference between drawn-once and drawn-twice lines. That is literal: see the line law in DESIGN.md.
• Infrastructure-grade. Reliable, fast, secure. The brand should feel like something an enterprise stands on, not an app it tries.
• Cosmopolitan. Urbane, sophisticated, connecting the world and its languages. Language is our material, not just our market.
• Hand-crafted. The brand reads as made by people who care, not assembled from a template.

The character

The brand carries itself like a "fullstack director": it writes the script and it pushes the camera. Creative and technically innovative, never one without the other. On time, under budget, over-delivering, always working with the best people, with a keen sense of the market and for making things people love.

Personality (working readings, from the completed system)

Aesthetic (working readings)

These are read from the shipped system for basement to confirm or push.

Voice

Measured, declarative, precise, quietly confident. Captions state laws: "the ground is the seam." Short sentences carry their own weight, with no exclamation marks doing the work, no hedging, and no marketing adjectives where a fact would do. Wit is allowed as precision, never as decoration. Technical terms are used precisely and sparingly, then explained plainly. The register sits closer to a well-written spec or a good engineering blog than to marketing copy: product focus over performative marketing.

• Say: "One pipeline. Every language ships with the deploy."
• Not: "Supercharge your global growth with cutting-edge AI!"

The mark

The GT monogram (/brand/gt-logo-light.svg, gt-logo-dark.svg + transparent PNG variants): every stroke of the mark is two parallel lines, the doubled-line grammar at brand scale. Locadex carries its own mark (/brand/locadex-mark.svg).

Rules:

• One ink. The mark renders in ink on paper or paper on ink. Never a third color, never a gradient, never a shadow.
• The dark surface inverts the drawn mark's ink, either as an alpha mask taking the surface's ink or as a clean invert. The mark is a drawing, not a picture.
• In illustration systems (the iso family), marks render as alpha masks so the shape takes the surface's ink; the sanctioned flourish is the Bayer-dithered specular shimmer (DitheredMark), never a GIF, never a filter glow.
• At text size, the wordmark sits inline with prose (the hero's "GT builds full-stack infrastructure…" pattern) at the cap height of the line it lives in.
• The identity must survive compression: a favicon, a CLI banner, a README, a syntax-highlighted code block. Developers meet the brand in a terminal as often as on a website.

Color

Four absolute colors (ink #070707, raised ink #101010, titanium #8a8f98, paper #ffffff) plus exactly one spectral accent per page (the working accent: #2f5ce0; its dark-band lift #86a8ff). Structural color everywhere derives from the four as alpha steps; dark mode is a pure token remap. Full law: DESIGN.md §1. The accent is a controlled edge, never a wash; one bright white; depth from lines and material, not shadows.

Type

• Inter is the one typeface: display, interface and text. Headlines, interface chrome, captions, long-form reading and documentation prose are all set in it. The build is the real rsms.me Inter (v4.1 variable, roman + italic, opsz axis), self-hosted rather than loaded from Google Fonts.
• Headings use weight 500 at most. Display text never goes bolder than 500; long-form text is set at weight 400.
• Multilingual-first. Headlines, UI, and marks must hold up in CJK, RTL, and Indic scripts as well as Latin. A wordmark or layout that only works in English contradicts the company. Inter covers Latin, Greek and Cyrillic; other scripts fall back to the system face for that script, and every layout is checked in them. Licensed type needs credible CJK and RTL coverage, or well-matched companion faces.
• Inter is the working typeface for the identity project. It is not a final decision. Alternatives remain open if they satisfy the script-coverage constraint.
• Monospace is an instrument voice, not a brand voice. It appears where code artifacts appear (tokens, terminals, file paths, small labels in technical diagrams and product UI) and nowhere else, and even those labels are avoided where possible. The direction explicitly avoids monospace as the brand voice in headlines, body, and marketing.
• The prototemplate chrome (this site's own serif/grotesk pairing) is the lab's stationery, not the product brand.

Language as material

The signature device: glyphs, characters that make up greater wholes. Writing systems are the raw material the brand keeps returning to:

• The sentence reassembler (EverySentence): a headline dissolves into glyph dust and reassembles in the next language. Matter is conserved; the same swarm becomes the next sentence.
• The glyph field: rain from eight writing systems condensing into the word "language," script after script.
• Locale pills (LocaleTag): flag print + code, the one way a locale is named anywhere. The prints are SVG, never emoji; a flag is a functional data chip, never decoration.
• The 1-bit Bayer language: density as ordered dither, never alpha veils. This is the texture of the brand.
• The doubled line: every connector one path stroked twice; the mark's own grammar running through every diagram.

All of them run live on /craft with their APIs.

The completed reference

The Dossier (/d/singularity-dossier, with /enterprise) is the completed version of this identity in application: the belt-driven morphing headline, the translate window, the stack tower with the Locadex shimmer, the edge globe with its dithered atmosphere, the four-color dark band. When in doubt about how the brand behaves in product, the Dossier is the answer. The other directions are the working record of how we got there.

Context for partners

• Industry: AI developer tools; the full stack for localization, meaning i18n libraries, context-aware translation APIs, and the infrastructure for versioning, editing, and integrations.
• Audience: technical and product executives at growth-stage startups; their engineering and growth teams are the users. Auth0 translates docs, Sierra translates marketing and sales material, Ramp translates its core dashboard.
• Against: legacy TMS (seat-based, partial-stack). GT is usage-based and owns the whole stack, so it can own the whole experience.
• Admired: Vercel, Resend, Stripe, for reliable, developer-first infrastructure with engineering excellence and customer experience.
• Direction: International Style discipline with Art Deco's future-embracing stance. Swiss grids, blueprints, boxes, no rounded corners. Water and ocean as the recurring theme, connecting the globe. Bespoke material textures (reference: materialarchiv.ch).
• References: Josef Müller-Brockmann and the Swiss poster tradition; Otl Aicher's Munich 1972 pictograms; Vignelli's subway map; split-flap departure boards; undersea cable maps and nautical charts; the Rosetta Stone; the Chrysler Building; Powers of Ten; vintage National Geographic; Borges' Library of Babel; the Whole Earth Catalog; transit signage; NYRB Classics; Dieter Rams; vintage Olympics stamps.
• Avoid (final): - monospace as the brand voice in headlines, body, or marketing; small mono labels inside technical diagrams and product UI remain instruments, avoided where possible. - smooth scrolling, scroll-hijacking, and inertia libraries; native scroll everywhere. - robot and sparkle iconography for AI. - the flag-soup cliche; flags are functional data chips only, printed as SVG, never emoji. - iridescent AI gradients and glassmorphism. - eyebrow text that has not earned its place; three stacked lines saying the same thing is noise, functional tags and labels are fine. - em dashes in rendered prose.

The four-color system

Four absolute colors, declared once in src/app/globals.css:

• Structural color everywhere derives from these plus alpha: every text step is ink or white at some alpha, every hairline is titanium at some alpha, every hatch is a thin ink or white veil.
• Each page adds exactly one spectral accent (toolchain: #2f5ce0; its dark-band lift: #86a8ff). One bright white. An accent is a controlled edge, never a wash.
• Pages never touch the raw values. Each root class (.pt-root, .toolchain-root, fork roots) publishes a semantic layer — surfaces, ink steps (-2/-3/-4), hairlines (--*-hair, --*-hair-2), hatch — and everything downstream reads those.
• Dark mode is a token remap, nothing else: under [data-theme='dark'] <root> the paper family collapses onto ink, ink flips to white, and hairline alphas rise so a 1px seam survives between two ink surfaces. One surface family in the dark, the way light mode is one white.
• The second surface: light diagrams sit on exactly one sanctioned second surface (--tc-plate), mirroring the ink / raised-ink pair dark mode runs on. --tc-panel (#101010) is the one dark artifact surface for code, config, and diffs.

The line law

Structure comes from hairlines, and every line is drawn exactly once. The auditor (scripts/lint-lines.mjs) enforces it mechanically — see docs/SHIP-LOOP.md. Four defect classes:

1. Doubled lines — two parallel strokes from different owners within 4px, including coincident strokes that composite darker than either.
2. Missing seams — section and row junctions no rule closes.
3. Self-stacks — a translucent border over the element's own translucent background. Fix: background-clip: padding-box, everywhere.
4. Invisible seams — rules that exist geometrically but sit within a few RGB steps of the surface they cross.

Ownership

• Exactly one thing draws the page rails for any section — a rails wrapper, or the section's own full-bleed pair. Never both. The pair is the column's inner pair only: one hairline at each column edge, nothing outside it.
• The row owns every structural line; cells never draw borders that parallel a row seam. Framed cells expose the ground through a 1px padding reveal instead of a border — the ground is the seam.
• Flush at the rail: where a row meets a line that already exists, the cell sits flush and that side's reveal is dropped. A reveal never runs beside a rail; a border never runs beside a seam.

The named antipattern

The overlap: two owners each drawing a real line along the same edge, compositing into a band darker and thicker than any line the system allows. The auditor cannot see SVG strokes — reconstructed lines come from computed CSS — so figures must be checked by eye at 2× pixel crops of the junctions.

Sanctioned devices

• The diagonal-hatch band marks the boundary between a book's front matter and its first section, once per book: 42px of repeating-linear-gradient(-45deg, transparent 0 6px, var(--pt-hatch) 6px 7px) between two hairlines it draws itself, border-block: 1px solid var(--pt-hair) (.pt-book-band, BookView.css). Its rules and its hatch run across the whole stage, as every rule of a book does (see The reading column), and nothing else draws a line within 4px of either rule; the first section's divider draws no rule of its own. The gallery's article (.pt-hatch, prototemplate.css) is the one place a band draws only its bottom rule, because every section there draws its own bottom rule and owns the band's top seam.
• Border crosses: where two hairlines must legitimately cross, a small plus seated exactly on the intersection (ink, 1px, non-scaling) declares the crossing deliberate — the one ornament a junction is allowed.
• The doubled line is the one sanctioned double — one owner, one path, stroked twice (see §5). The auditor's allow list holds deliberate devices by name; everything else stays strict.
• The fixed sheet's ring is the one sanctioned doubled line in chrome. It is the edge of a fixed-size artifact: a slide, the gallery's live 1440x900 exhibit, the compare rig's panes, and the live page on /directions/<slug> (.dr-sheet). The shell draws it as a 1px --pt-hair border on .sheet, a 1px paper gap from the padding of .sheet-mat, and a 1px --pt-hair-soft outline on the mat, with no shadow, on the --pt-plate letterbox of the fixed stage, as the deck's slide view draws it. A reading page has no ring and no plate. The active thumbnail frame and the active book page frame carry the same border plus offset outline. The auditor allows them under sheet, thumb-frame and page-frame.

The reading column

A reading page sits straight on the stage's paper. That covers the book mode of /brand, /docs, /handbook, /motion, /graphics, /skills and /marks, their record pages, /directions/<slug> and /archive/<slug>: every route that renders Sheet variant='flow'. Its column is the deck's book column (deck/parts/head.html .book-in): 1280px at most and centered in the stage, with --pt-col-pad-x (56px, 16px under 900px) on each side, --pt-title-clear over the title and 120px (80px under 900px) under the last block. The column draws no border, no ground and no mat. The toolbar's bottom rule is the only line above the title, and the sidebar's right edge is the only line beside the page. A fixed-size artifact inside a reading page keeps a frame, because the frame is its edge: the live page on a direction page keeps the fixed sheet's ring, and a capture takes the frame role with the card corner. Kevin asked for this on 2026-10-06, after the grey mat had made every page a framed picture of a page.

Every structural horizontal rule of a book runs across the whole stage, from the sidebar's edge to the stage's right edge: the mast's rule, the contents rows, the band and the dividers, the full-width list rows of /skills, /graphics, /motion, /marks and a direction page, an archive record's rows, and the rule over a blog post's footer. The element keeps its 1px border for layout and paints it as a border image outset past both ends (--pt-bleed-top, --pt-bleed-bottom and --pt-bleed-block in tokens.css); the outset never scrolls, and the scroll region clips it at the stage's edges. A rule that drops its border also writes border-image-source: none, because the image ignores border-width and the build empties the shorthand border-image: none (lint:practices holds this). Under forced colors the hairs take CanvasText. A contents row is one line: the first link of each row draws it and the others draw none. Rules inside the content keep their measure: the head panel's rows, tables, prose lists, the --- rule, ledgers and file lists. Kevin asked for full-width rules on 2026-10-07.

Line law for chrome

Chrome is everything the viewer shell draws around content: the toolbar, the sidebar, the index panel, the search, the fixed sheet's ring, the grid, the book frame, the help card, the direction corner, and the standalone deck viewer's own chrome. Every rule in chrome is 1px, drawn once, in one of three roles, and this is part of the identity: a page reads as Prototemplate because its lines are single and their weights mean something.

The three roles, and only three:

The weights carry meaning. A frame at 0.62 alpha is the darkest line in chrome because it holds a picture in place: the eye must find the edge of a capture against the paper around it. A large surface (a fixed sheet, a card, a panel, a head) is not a picture; it is the paper itself, so its edge is the structural hairline, and its outer ring (where it has one) steps down again to the row weight. A fixed sheet drawn in the frame weight reads as a boxed image, which is the bug Kevin named in round six ("make the borders around these areas the proper border colors"). The help card is the one card that keeps the frame weight: it floats over a scrim, where the hairline would vanish.

Nothing in chrome sets a border color from any other token or literal. --pt-ink appears on a border only as a state: a pressed button (.is-on), the active thumbnail or page frame (.is-active), the count while it is being edited, the solid call to action, the sidebar's current thumb on its rail, and a field while it holds focus. Book heads, table headings and the deck surface index's group headers draw --pt-hair, never ink; the sidebar's group headers draw no rule at all. Outlines are rings: the three roles, ink for focus and active rings, paper for a ring on an ink plate.

Where two bordered components touch, exactly one draws the line:

The auditor enforces this from computed CSS. pnpm lint:lines:shell walks /, /docs, /brand, /compare, /archive/<first slug>, /directions/<first slug>, /skills, /skills/<first slug>, /handbook, /motion, /motion/<first package>, /graphics, /marks, /d/production and /deck (the iframe's document) at 1440, 1280 and 390 in both themes against the dev server on port 3005, with the list toggled, the index panel open, the search open, and the grid and book modes on / and /deck. It fails on any doubled line (two owners within 4px), any junction (two owners coincident on one seam), and any border color in chrome outside the three roles. The sidebar's rail is a masked box the walk cannot see, so the auditor reads its vertical runs from its path (data-rail-path), holds its ink to the row role, and fails a state audited with the list open in outline density when the rail layer is not live. pnpm lint:all runs it. The allow list in scripts/lint-lines.mjs names every sanctioned multi-stroke device with its reason inline; for chrome those are the fixed sheet's ring (sheet: a hair border, a paper gap, a hair-soft outline, on /compare, in slide mode and around a direction's live page), the active frames (thumb-frame, page-frame, the sidebar's site tiles as pt-tile) and the hover preview's mat (pt-preview).

Scroll regions belong to the same law: one thin scrollbar everywhere in chrome, a 4px gutter with no track rule and a 2px thumb in --pt-thumb that widens to 4px on hover, owned by .pt-scroll in src/components/viewer/tokens.css and mirrored by the deck's .scroll rule. No scroll region draws a rule beside its thumb.

Corners: rounded controls, square shells

Kevin's toolbar is the reference (2026-10-05): the search pill and the segmented control round at 6px, the key chip at 4px. Everything a reader presses, types into, picks up or looks at as an object is rounded; the surfaces that hold the interface are square. src/components/viewer/tokens.css holds the corners as six tokens, and nothing in the shell or the pages writes a radius any other way.

• A part n px inside a rounded box (n from 1 to 3) takes calc(var(--pt-radius-<role>) - npx).
• A picture in a rounded frame is clipped by the frame or takes the concentric radius.
• Named exceptions: Present keeps 8px (section 15); the marks page's app tile keeps the platform's 22% and its browser tab mock stays square, because they are specimens. The /d/ directions, the deck, the presenter, the craft article and the dashboard plate keep their own grammar.
• scripts/lint-radius.mjs holds the law: statically in pnpm lint:radius and the build, and on the rendered pages in pnpm lint:radius:live.

The corner notches on hero cards are not drawn — they are the ground showing through, so a corner can never disagree with the seam that meets it.

The rails

The page's spine is a ruled column with ONE rail on each side.

• The column wrapper draws the pair once, with its own border-inline.
• A band mounted inside the wrapper draws no side rails of its own: the wrapper already owns them.
• A full-bleed band that sits outside the wrapper draws its own inner pair once, at the column edges, from its own -in column, in the band's rule ink. It never draws a pair beside the column.
• Retired everywhere: the outer pair at ±10px that earlier directions drew from a wrapper pseudo (the "doubled rail"). A second stroke beside a rail is defect class 1 above, and a coincident second stroke stacks alphas and reads as a different color.

The doubled LINE of section 5 is a different device: one path stroked twice, a connector, never a page rail.

The sidebar's rail (section 16) is a different device: a row-weight line inside the list that marks the place, never a page rail.

Typography and voices

• Three voices: the serif face for brand moments, the grotesk for labels (11px, letter-spacing: 0.06em), the mono for numbers and tokens only.
• Hairline-boxed code blocks; figcaptions under figures; one type scale per page. Labels never shout; the active element is the only color.

Book type

The shell's type is one family, the rsms InterVariable (v4.1) through next/font, bound as ptInter in src/lib/fonts.ts so its family name matches no installed Inter. Every stylesheet reads the type tokens of src/components/viewer/tokens.css and declares no family, feature list or display size of its own. The /d/ directions keep their own type.

• Stacks. --pt-text is var(--font-inter), system-ui, sans-serif; --pt-display reads it. --pt-mono is for code, numbers and tokens only. The per-language stacks (--pt-text-hant, -hans, -ja, -he) name system faces after Inter. The nameplate's faces are --pt-face-serif and --pt-face-grot.
• Features. h1 and h2 (and a display sentence such as the brand plate's .ptc-every) take --pt-ff-display: the single-storey a (cv11) and the open digits (ss01). Everything else takes --pt-ff-text. Both name 'liga' 1, 'calt' 1, because Chrome turns contextual forms off under any letter-spacing. The base rules on the shell's roots set them; a rule never writes a feature list.
• Weight. 400 for text, 500 for labels, headings and strong. Nothing above 500.
• The display ladder. Optical size follows the size, so 32px and up is the Display design.

| step | role | size / line | tracking | 900px and under | | --- | --- | --- | --- | --- | | d1 | page title (the book head's h1) | 44 / 1.04 | -0.025em | 32 | | d2 | section title (a divider's h2, a brand chapter) | 32 / 1.05 | -0.025em | 26 / 1.15 | | d3 | h2 in prose, a record's title | 24 / 1.25 | -0.02em | 21 |

• The text ladder. Title 18/1.35 at 500 and -0.01em (h3, a row's title); lead 17/1.55 in ink; body 16/1.6 in ink-2; small 14/1.55 (table cells, contents links, ledgers); meta 13/1.5 in titanium (meta tables, gutter notes, captions, th); group labels 12.5 at 500 and -0.005em. Weight 400 text is never tracked, and nothing on Inter is tracked positive.
• Measure. Body text at --pt-measure (32em, about 66 characters); a head's lead at --pt-measure-lead (30em). Tables, figures, code and ledgers keep the full column.
• The book page. Every page with a book head has one structure, rendered by BookHead (BookView.tsx), and differs from another only in its words and its facts: 1. nothing is drawn in the --pt-title-clear space between the toolbar's bottom rule and the title (the reading column's top padding), and no line crosses a title; 2. the title, the page's plain name from src/lib/page-names.ts (Brand, Documentation, Motion) or a record's own title, at d1 across the mast; a page may set one badge after the name on the title's line (BookHead's badge: a 1px --pt-hair box at the card corner, its figure the cap height tall on the baseline, hidden from the accessible name). /brand's badge is the traced GT monogram in dotted outline (src/app/brand/GtOutline.tsx); 3. the lead (one to three lines at --pt-measure-lead, at most 200 characters, plain declarative sentences) and the panel on one row under the title, both starting on the lead's first line; 4. the panel: Updated first (the day of the last commit that touched the page's own sources, from src/lib/updated.ts, linked to its commit, with a relative hint after hydration), then three facts, or one fact and the install field; each row a Heroicons 20 solid glyph in titanium, a label in ink-2 and a value in ink at 500, one lead line tall so its baseline lands on a lead baseline; 5. one --pt-hair rule --pt-head-rule-pad under the taller of lead and panel, across the stage; 6. the note at the body step, then the contents; 7. one hatch band ruled on both edges and running across the stage, --pt-sec-over under the block above it; 8. the sections, each a section.pt-book-part opened by a divider: a --pt-hair rule (the first section's rule is the band's), --pt-sec-pad, a gutter note of two lines in titanium (Section n, then one fact) on the h2's last baseline, the h2 at d2.

Under 880px of head width the panel stacks under the lead with a row rule over its first row, and the mast's rule closes its last row. The gallery (/) is the site's front page, the nameplate hero and the redesign post in the article's own grammar, and has no book head; /compare is a tool and has none. scripts/lint-heads.mjs holds the structure, statically and on the rendered pages.

• The gutter. Sections and rows keep the deck's 128px gutter and 28px gap. A gutter number takes the size, line height and baseline of the title beside it, in titanium (ink while active); under 900px it sits above the title at the meta step.
• The lint. scripts/lint-type.mjs holds all of this: statically in pnpm lint:type and the build, and on the rendered pages with pnpm lint:type:live. Its allowlist names every exception with its reason: the nameplate, the gallery's grotesk labels, the mono numbers and tokens, the specimens, and other sessions' code. scripts/lint-heads.mjs holds the book page (pnpm lint:heads, pnpm lint:heads:live).

The doubled line (thread grammar)

The brand's connector: one SVG path stroked twice — a full-gauge ink stroke under a narrower surface-colored core (stroke-width: gap), carving two parallel hairline threads at a constant gap along any curve. Tokens: --thread-gauge: 1.5px, --thread-gap: 3px.

• All three roles carry vector-effect: non-scaling-stroke.
• The core's stroke must match the actual surface behind the diagram, or the carve reads as a painted stripe.
• Layer order is load-bearing: threads first, pulses next, cores last. Draw a later sandwich over an earlier one and the junction re-carves into one clean pair — merges cost zero parallel-curve math.
• The live pulse is a third copy of the same path in accent at full sandwich gauge, between threads and cores — carved into two accent hairlines, never a filled band. The traveling window is real geometry (a sub-polyline rewritten per tick), never stroke-dasharray — dash distances drift under anisotropic stretch.
• Two-tone (one white thread, one gray): clip the white copy to a half-plane closed along the same center path — the split seam lies inside the carve. Componentized as src/components/shared/diagrams/DoubledLine.tsx. Offset clones collapse on curves; concentric restrokes only make symmetric rings.

The isometric family

One 30° axonometric map for every iso drawing (src/app/d/toolchain/diagrams/iso.ts): project(x, y, z) = [(x−y)·cos30, (x+y)·sin30 − z], camera at (+,+,+).

• Light from the upper left, always: exactly three faces visible, shaded top 4% / left 9% / right 15% (currentColor mixes; accent faces keep the same order). Reordering is forbidden.
• The extrusion recipe: opaque hull from roundedPolygon(silhouette(...)) (the occluder), then right/left/top face fills, then hairlines — rim, top contour, and the interior front edge(s) the silhouette doesn't draw.
• IsoPrism extrudes any convex plan polygon under the same visibility and tone law; plane(z, ox, oy) seats whole flat drawings into a surface with one matrix; markPath() lays rounded bars in a face; brand marks render as alpha masks so the shape takes the surface's ink.
• One corner radius family-wide (ISO_RADIUS = 2.4); plate thickness ≈4% of footprint, air between stacked plates ≈40%; depth cues live in per-plate stroke alphas, never group opacity; each drawing spends its accent on exactly one element.
• The mark shimmer is DitheredMark (§7's 1-bit language as a specular band): nested Bayer coverage tiers windowed by pre-rotated 60° clip paths, swept by pure horizontal translate — rotate() windows are GSAP-origin fragile.

The 1-bit language (Bayer dither)

Density ramps render as ordered dither, never alpha veils.

• The 4×4 matrix ([0,8,2,10 / 12,4,14,6 / 3,11,1,9 / 15,7,13,5]) and the 8×8 (an exact permutation of 0..63 — 65 tonally linear levels) are the house screens.
• Coverage tiers nest by construction — every tier's lit cells are a subset of the next — so non-overlapping regions filled with different tiers compose exact ramps, and opaque glint ink means doubled cells never brighten.
• Cells are square screen pixels: transforms that would foreshorten them (a plane seat) go inside the alpha mask; crispEdges keeps cells 1-bit at any zoom; CSS upscales with image-rendering: pixelated.
• Engines: src/lib/dither.ts (CPU, any scalar field, 1 device px per cell) and src/lib/studio-field.ts (GPU, the authentic BAYER_PRESETS roster of ten variants, one shared GL context, switch by remount).
• Artifact pictures (the dithered photographs and scans on the plate's field, the deck's mood slides and the transition demo on /docs) follow the Blue Marble standard in docs/ARTIFACT-PICTURES.md, held by scripts/lint-pictures.mjs.

The moving type law

• The morphing unit is one shaped text node — never per-character spans, which break Arabic joining and Devanagari matras. lang + dir on the node; unicode-bidi: isolate on the container.
• Width is measured from a hidden probe carrying the word's own lang/dir — never a sum of per-character boxes — cached, device-pixel snapped, and the container's width is the only layout-affecting property that animates, one continuous tween per cycle. Re-measure on resize and fonts.ready.
• One clock per page: the component never runs a timer; the host drives it (the dossier's locale belt, a craft plate's interval). Engine: src/components/shared/EverySentence.tsx.
• Locale pills render through one component (LocaleTag): flag first (fixed 15×11 SVG print), code in the host's mono on the baseline; the host supplies the box.

Motion discipline

• Every loop is created paused; ScrollTrigger (or an IntersectionObserver) plays/pauses it while the section is on screen; multi-phase choreography lives on ONE timeline so phases can never drift.
• prefers-reduced-motion short-circuits setup entirely; the markup pose IS the still (static accent pair, parked seam cut, single dither frame).
• Dash gotchas: normalize pathLength to 1000 (GSAP integer-rounds offsets); dashes clip at a subpath's end rather than wrapping closed loops; Chromium computes dash patterns in screen space under non-scaling-stroke and ignores pathLength there — rings that dash use raw user units with neither.
• Cache a path's source d (el.dataset.traceD) before an animation blanks it per tick — a re-run would otherwise trace an emptied path.
• Leader joints overshoot into opaque hulls so joints are gapless; leaning shapes (scan beams) are re-projected per phase (beamAt(t)), never a translated constant.
• The sidebar's thumbs and pills move on transform only, by WAAPI, at --pt-dur-sb (a pick) and --pt-dur-toast (the pointer), eased by --pt-ease. Their geometry is read once per layout change (a ResizeObserver per group, a MutationObserver for rows and marks), never per frame and never on hover. Before the shell settles they are placed, not moved. Reduced motion places them at once.

The seam (slide-to-reveal)

Both layers full-width and pinned; the handle writes one CSS var (--seam-cut) and the top layer clips to it — content never travels with the handle. State lives in the var: drags cause zero re-renders, GSAP tweens drive the same dial, the keyboard path re-reads the live computed value. The handle is the dossier refit: a 64px transparent hitbox, solid two-tone threads with the payload's ink filling the run, and a 16×40 rectangular grip tab — the light surface wears the dark chip, the dark surface the light chip. Component: src/app/d/toolchain/sections/RevealSeam.tsx (host CSS supplies the skin).

Engine lifecycle

Every canvas/GL engine follows one contract: mount lazily (an IntersectionObserver arms the plate), pause offscreen and on hidden tabs by its own observer, render exactly one still under reduced motion, and destroy() releases everything the instance owns (shared GL contexts persist for the session by design). Ink re-resolves on data-theme flips. Where an engine has quality tiers, quality follows measured frame cost, not just the window: glyph-field's frame-time governor ratchets a slow device down the phone cut's own ladder (lean device-pixel cap, then the lean pool), down only, with pool cuts applied at idle.

The mobile type ladder

Under 720px, type and spacing are one token ladder, not per-rule values — --tcm-* slots declared on .toolchain-root in the engine's LATE 720px block (src/app/d/toolchain/styles.css), consumed by every floor below:

• The px-fallback consumption law: every consumer reads var(--tcm-X, <px fallback>) with the slot's canonical value as the fallback — a rule the ladder doesn't reach (a 721–900px cut, a fork that hasn't declared it) degrades to the same number, never to unstyled. New mobile rules never hardcode a size the ladder has a slot for.
• Unlayered engine beats utilities: the engine's plain CSS is unlayered and Tailwind utilities live in a @layer, so engine floors outrank utility metrics (the box-gap rule beats a head's max-lg:mb-6). Heading and paragraph metrics therefore live in engine CSS, never in page utilities.
• The late block: the ladder and its floors sit in the engine's LAST 720px block because several base rules they override appear after the earlier 720px block — same-specificity declarations only win by following them. New mobile floors go there, not in the early block.
• The sg cut outranks the engine: v0-pages.css's mobile cut (.toolchain-root:is(.sgdh-root, …)) carries higher specificity than any engine floor, so it must consume the same tokens — an engine-only raise silently fails to render on the singularity homes. Change one, change both.

The box-air standard

Boxed cells — framed cards, bento plates, stacked dark-band cells — breathe alike on mobile: block padding --tcm-box-pt/--tcm-box-pb (36/38), and --tcm-box-gap (28px) between a box's head and its artifact. The gap is card-scoped (.tc-card > .shell-cell-head) on purpose: cells are flex columns, margins never collapse, so an unscoped head margin would stack onto the copy cells' own body margins. The seam floor rides alongside: copy never sits within 20px of a hairline (--tc-card-pad: 20px; the trust lead's 20px bottom pad).

The svh/dvh law

A mobile stage measures the viewport twice, and the two units never trade jobs:

• Reach is dvh. Whatever must touch the true screen bottom — the stage's rails, the text zone — sizes from 100dvh, the real viewport with browser chrome collapse included.
• Layout is svh. Any height that participates in layout rides 100svh, the stable viewport: a dvh layout height grows the document on every chrome toggle and jitters the scroll under it.
• The difference is a token — the stack stage's --v0sm-bar-gap (dvh − svh, 0 while the URL bar shows) — and only overhangs (the rails' lower reach) spend it. Anything SIZED from the stage derives from the stable var, or it breathes with the URL bar.

The two read lines

The stack story runs on two ladders of scroll anchors, measured per beat and re-anchored on every ScrollTrigger refresh (src/app/d/_v0/sections/FullStack.tsx):

• The read line (55%) is structural. A beat LOCKS IN when its COPY BLOCK's center takes the 55% line — the same line the sticky figure's seat centers the tower on, and, for the finale, its pin-engage. The tower's build clock and the capstone scrub both key on it. Anchors are measured on the copy itself, from FLOW geometry (the sticky finale's own rect would read the stuck pose on a mid-dwell refresh) — never on the beat window's top, which runs nearly half a viewport ahead of the copy and fires every arrival early.
• The highlight line (80%) is the spotlight's alone. A beat's copy lights as its center rises through the 80% line — just after entering the screen, while the arriving layer is still mid-build beside it.

One scrubbed dial spans the whole read; a piecewise map (measured lock-ins in, story time out) HOLDS the clock while a row is being read and spends each gap hold → build → lock, so a layer stands locked before its own copy takes the line.

Chrome exceptions Kevin asked for

The shell's chrome is Inter only, weight 500 or less, corners as section 2 sets them (square shells, 6px controls and cards, 4px chips), one hairline per rule, colors from src/components/viewer/tokens.css and borders in the three roles of section 2. Kevin's round six directives override those rules for exactly five elements. Each exception is listed here with its owner file so nothing else reaches for it, and so the next sweep does not "fix" it back.

Everything else in chrome keeps the rules above: every other toolbar button takes the control corner, the palette and the help card take the card corner, the index panel is a shell column and stays square, and no other element carries a chroma or a face outside Inter.

The sidebar's rows

Three rules govern the list in column one (src/components/viewer/Sidebar.tsx), on every route that shows the site map.

Every row is a link to a page. A site map row navigates to its route through the router; a row that leaves the site opens a new tab. A route's own item navigates too when its href names a page other than the one the reader is on: a direction row on / opens /directions/<slug>, an archive row /archive/<slug>, a skill row /skills/<slug>. The shell selects in place only an item with no address of its own (a slide, a brand section), an item that asks for it (ShellItem.inPlace, the documents on /docs, whose book scrolls and writes the address itself), or the item of the page the reader is already on. No row scrolls the gallery. The grid's tiles and the filter's Enter follow the same rule.

A page's sections open under its row. On the page's own routes, its sections open as a run under the page's row, in the row's group (ShellSection.under: brand, docs, handbook, marks, graphics, motion, skills). A run is flush under the row. Each row of the run draws the route's own number in the icon's slot, in the deck's number style, and a name that wraps (a run row to two lines at most, a deep heading to three) and is never cut; a title that is a sentence takes a short name (ShellItem.short). When two or more of the page's sections hold more than one row, each gets a label with a chevron and a count inside the run; a section of one row is that row. The headings of the item being read hang under it as a deep run, at 12.5px titanium, ink while read. A chevron button at the right end of the page row folds the run for the visit; the run opens again on the page's next visit. A labelled group opens when the run has 40 rows or fewer, and past 40 only the group holding the active item opens; those folds persist under gt-shell-groups. A route section that stands for a site map group (Shipped, Sites, Explorations, Archive) keeps replacing that group. The sidebar is 208px, the deck's column.

The rail marks the place. In outline density each top-level group carries one rail: a 1px --pt-hair-soft line drawn by .pt-sb-rail (src/components/viewer/SidebarRails.ts) and masked to an SVG path down the group's rows. The rail runs in a column 16px before each level's first glyph: x 18, under the group header's chevron, for the tree rows; x 34 for a run's rows and labels, a site's enterprise page and the live site's rows, whose icons and numbers start at 50; x 50 for the deep headings, which start at 66. Where the level changes, the path bends at 45 degrees across one 16px step. The marked row carries a 2px ink thumb on the rail and a --pt-sb-pill-current ground with the control corner. The row under the pointer, or under keyboard focus, carries a --pt-thumb thumb and a --pt-plate ground. The marked row is the deep heading being read when the deep run is shown, else the active item when its row is shown, else the current page's row, else the page row the reader is inside. A plain click moves both marks to the clicked row over --pt-dur-sb and turns it ink before the page arrives. When the click opens another route, the new page's list keeps the clicked row where it was and the marks travel from it to that page's mark once the shell settles. Thumbnail density has no rail: its rows lead with their captures, each run keeps its guide and the active row its 2px bar.

The current page is always marked. The row whose path is the longest one covering the pathname is current, site map row or route item alike: on /skills/<slug> the skill's row, on /directions/<slug> the direction's, on /d/production/enterprise the Enterprise row and not Home. While no item is marked (a direction page, the gallery at its top) that row carries the rail's thumb and ink text; while an item is, it draws ink text (.is-current, aria-current="page"), as does the page row the reader is inside (Skills on /skills/<slug>). Exactly one row is aria-current="page": the current row whose own path is the pathname; a page row the reader is inside is "true".

The list is cheap to change. Rows are memoized on data built once per route, so a fold renders only the rows it adds or removes, a pick renders the rows whose state changed, and a hover renders nothing in React. Rows are opaque in their first frame; nothing fades in on mount. A row that opens another route prefetches it after the pointer rests on it for 80ms or on keyboard focus, never on pointer down: the click's own navigation follows within milliseconds, and a prefetch there fetches the route twice and renders the arriving page twice. The index panel builds its rows on first open.

The shape of the app

src/
  app/
    page.tsx              the index, the working file of the redesign
    craft/                the build log: laws, auditors, live library plates
    present/              the presenter deck (intro → prototypes → scoreboard)
    d/<slug>/             one route per direction (see src/lib/directions.ts)
    d/toolchain/          THE SSOT: sections, diagrams, styles other forks import
    d/_v0/                shared v0 sections (TranslateWindow, StackTower,
                          Locadex, FullStack, Deploy …) used by the
                          singularity-* homes
    blog/                 the docs-redesign posts (content/blog) rendered with
                          the landing site's MDX components
    graphics/             the illustration catalogue, read from
                          graphics/build/manifest.json
    docs/                 the documents book: registry.ts (the documents),
                          book.tsx (reads and renders them on the server),
                          markdown.tsx and links.ts (the renderer and where
                          a repository path opens on the site), DocsShell
                          (the shell for both books)
    handbook/             /handbook: the handbook's registry and its two
                          routes, rendered by the same DocsShell
    prototemplate.css     the pt grammar (index + craft chrome)
    globals.css           the four color tokens
  components/
    shared/               cross-page instruments: EverySentence, StudioField,
                          PrismaticField, HeroFieldSwitcher, TcMobileNav,
                          diagrams/ (DoubledLine, …)
    shell/                Bento primitives (Rails / BentoRow / BentoCell)
    plate/                the dashboard's sign-in and onboarding system
                          (frame, field, pages, fixtures) with its state
                          console, served under /d/production/{signin,
                          onboarding,consent,device,cli}
  lib/                    the engines: dither.ts, studio-field.ts,
                          glyph-field.ts, horizon-field.ts, prismatic-field.ts,
                          directions.ts (the direction registry),
                          page-names.ts (each page's plain name),
                          updated.ts (generated by build-updated.mjs; server
                          modules only) and page-updated.ts (its type)
scripts/
  lint-lines.mjs          the line auditor (see docs/SHIP-LOOP.md)
  lint-practices.mjs      the practices ratchet (+ baseline JSON)
  lint-type.mjs           the type lint: one Inter through the tokens,
                          static (lint:type, in the build) and --live
                          (lint:type:live), with its ratchet baseline
                          lint-type.baseline.json and its tests
  lint-radius.mjs         the radius lint: rounded controls, square shells,
                          every corner through the six --pt-radius-<role>
                          tokens, static (lint:radius, in the build) and
                          --live (lint:radius:live), with its tests
  lint-heads.mjs          the book page lint: one head, one band, one
                          divider grammar on every book, static
                          (lint:heads, in the build) and --live
                          (lint:heads:live), with its tests
  build-updated.mjs       git to src/lib/updated.ts, the day each book page
                          last changed for its head's Updated row
                          (pnpm build:updated; --check is pnpm
                          lint:updated, in the build), with its tests
  pagecheck/              the page check: every page at ten viewports in
                          both themes, layout shifts, interactions, a
                          report (pnpm check:pages; its README explains)
  site-pages.mjs          page discovery and the theme door, shared by
                          capture-pages.mjs and pagecheck/
  shoot-route.mjs         screenshot harness (external playwright-core)
  build-skills.mjs        skills/ to src/lib/skills.ts and skills/README.md,
                          with the skill contract and lint (pnpm
                          build:skills; --check is pnpm lint:skills)
  install-skills.mjs      links or copies skills/<slug> into a project's
                          .claude/skills and .agents/skills (its tests:
                          install-skills.test.mjs, pnpm test:skills)
docs/
  handbook/               how Kevin runs GT work, served at /handbook:
                          the operating principles, the quality bar, the
                          multi-session playbook, the product map, the
                          glossary and the decisions log, with README.md
  harness/gallery-shoot.mjs   the gallery shooter (see "The gallery
                              pipeline" below; the rest of harness/ is
                              one-off probes)
graphics/                 the blog-illustration toolchain (docs/GRAPHICS.md)
content/                  the three docs-redesign posts and their authors
skills/                   the curated skills, one folder per skill
                          (SKILL.md, references/, scripts/); the canonical
                          copy, published on /skills
.claude/skills/, .agents/skills/
                          relative links to skills/<slug>, made by
                          install-skills.mjs --project .
AGENTS.md                 the agent entry point (CLAUDE.md imports it);
                          served at /docs/agents

The direction registry

src/lib/directions.ts is the single source of truth for what exists: sixteen directions, three of them full site pairs (site: true): singularity-dossier, singularity-orbit, singularity-signal. singularity-dossier is the completed direction; signal and orbit keep their own heroes and carry the previous-generation sections the dossier retired, as exploration showcases. The index, the presenter, and the sitemaps all map over DIRECTIONS — add or remove a direction there and everything follows. When a direction is deleted, also sweep scripts/lint-practices.baseline.json for its paths and re-check stated counts (index funnel, layout description, craft intro).

The SSOT rule

src/app/d/toolchain/ is the single source of truth for the tc-* vocabulary. The fork homes (chroma-flow, dither-field, aurora-paper, glyph-rain, prism-light, lens-gate, paper-foundry, terminus-board, wide-rule, event-horizon, hourglass, singularity…) import toolchain's sections and diagrams directly and re-skin by root-class rescoping: each fork carries a root class (.lensgate-root, .terminusboard-root, …) and copies only the CSS it must re-scope.

• Never edit toolchain's files as part of fork work; change the SSOT only when the change is meant for every consumer.
• Some forks still carry frozen local copies of toolchain diagrams from an earlier era. They are dead unless a fork section imports them (the one live exception historically: glyph-rain/diagrams/lang/*). Before adding a new copy, don't: import the SSOT and rescope CSS.
• The singularity-* homes are toolchain-based (toolchain-root sgXh-root) and pull shared v0 sections from src/app/d/_v0/; their /enterprise pages are singularity-based. Never edit toolchain's TopNav for one site.

Componentized instruments

The signature pieces live as libraries, not page code (each has a live plate + API snippet on /craft):

When a page needs one of these behaviors, mount the component — do not re-implement it locally. When an engine gains an option, update its craft entry (body + snippet) in the same round.

The gallery pipeline

The index's anatomy wall and the variant gallery are fed by one harness, and the file names are the contract between the two ends:

• The shooter (docs/harness/gallery-shoot.mjs) shoots the flagship home section by section — element shots anchored on each section's own landmark selector, never scroll depths, so side-by-side pairs align regardless of viewport — across desktop/mobile cuts and both themes, plus one hero viewport shot per variant home. Theme is set before first paint by an addInitScript that writes localStorage['gt-theme'], which the root inline script applies; one full scroll pass settles every lazy/armed section before shooting. A selector that misses is reported, never fatal — the wall just skips that tile.
• The manifest contract: the shooter writes manifest.json beside the tiles — { flagship, sections: [{ key, label, cut, theme, file }], variants: [{ slug, theme, file }] } — so a consumer can import the set instead of globbing the directory.
• Deterministic tile names are what the anatomy wall reads: sec-<key>-<cut>-<theme>.png under public/shots/gallery/ (key ∈ hero, customers, story, developer, locadex, context, global, deploy, footer; cut ∈ desk, mob; theme ∈ light, dark), and var-<slug>-<theme>.png for the variant heroes (slugs from src/lib/directions.ts). Any single tile may be missing — consumers hide on onError or render from a known-good list, never a broken image.
• /compare puts two directions side by side as synced same-origin iframes — same origin is what lets the route drive both frames' scroll and theme in lockstep. (The index's home/enterprise sweep, src/app/SiteCompare.tsx, is the still-image cousin: two shots under the house seam, the cut living in one CSS var.)

Skills and docs

• AGENTS.md: the entry point for an agent, here or in a project that imported the hub (served at /docs/agents; CLAUDE.md imports it).
• BRAND.md: the identity canon (the basement-facing brand book; served at /docs/brand and /brand).
• DESIGN.md: the visual canon (this repo's law book).
• docs/SHIP-LOOP.md: the verify/ship procedure every round runs.
• docs/LIBRARIES.md: the library index (defers to /craft for depth).
• docs/GRAPHICS.md: the graphics pipeline: how the blog illustrations are made with graphics/, and the rules that came out of review.
• docs/handbook/: the handbook, what spans the skills (principles, the quality bar, the multi-session playbook, the product map, the glossary, the decisions log). src/app/handbook/registry.ts lists it and /handbook renders it through the docs shell (src/app/docs/DocsShell.tsx with book='handbook'). A relative link in any rendered document resolves the way GitHub resolves it (src/app/docs/links.ts): a rendered document opens its route, a skill its page, any other file GitHub.
• skills/<slug>/ is the one copy of each curated skill: SKILL.md with its frontmatter contract (name, description with "Use when", metadata title, areas, updated and origin), its references and scripts. scripts/build-skills.mjs validates the set and writes src/lib/skills.ts and the folder's index, skills/README.md; /skills and /skills/<slug> render it, the pages read each body from the folder on the server, and src/app/skills/[slug]/[...path]/route.ts serves the raw files.
• scripts/install-skills.mjs links or copies the set into any project (--project <dir>, --user, --into <dir>, with --dry-run). This repository's .claude/skills and .agents/skills are its relative links (--project .); README.md's Skills section has the rules.

The mirror

Prototemplate main is the primary repository for this code. The public site builds and deploys from it, and the routes that exist only here (/docs, /brand, /deck, /compare, /present) have no counterpart in apps/redesign. apps/redesign in the gt-cloud monorepo is a downstream copy of the direction pages: when a direction changes there, the changed files are copied into Prototemplate one at a time and pnpm build must pass before the commit. No bulk rsync --delete runs toward Prototemplate from any tree. Root docs (BRAND.md, DESIGN.md, ARCHITECTURE.md, README.md, docs/) are edited here first. See docs/SHIP-LOOP.md section 7 (the mirror step) for the sequence.

Ground rules

• The dev server runs at http://localhost:3005.
• A concurrent session may be editing the same worktree. Check git status before staging; commit only your own files. Expect the other session to absorb your changes into its commits — when that happens, verify by content, not by diff, and push the backup branch from HEAD.
• pnpm lint:all may be red on files you don't own; ship anyway when your own diff is clean under the checks below.

The line audit

node scripts/lint-lines.mjs http://localhost:3005/<page> --theme light
node scripts/lint-lines.mjs http://localhost:3005/<page> --theme dark

• Audits at 1440 and 1280; expects zero findings in all four classes (doubles, missing, selfStacks, invisibles) in both themes.
• The standing battery: /, /craft, and the three singularity homes (dossier, orbit, signal) — plus every page the round touched.
• Deliberate devices live on the ALLOW list inside the script; add an owner there only for a sanctioned device, never to silence a real double.
• The auditor reconstructs lines from computed CSS — it cannot see SVG strokes. Figures get verified by eye with 2× pixel crops of junctions.

The page check

pnpm check:pages --pages <id>,<id>            # the round's touched pages
pnpm check:pages                              # the whole site, before a release

scripts/pagecheck/ (its README explains the tool) loads every named page on the dev server at ten viewports (360x800, 390x844, 430x932, 768x1024, 1024x768, 1280x720, 1440x900, 1527x814, 1920x1080, 2560x1440) in both themes and reads each cell: horizontal overflow, boxes past the viewport edge, text clipped mid-word, console errors and failed resources, the theme applied, the phone tap targets and the site invariants hooks.mjs names (the 52px toolbar row, the stage rows, the sidebar column, the deck's sheet, the docs contents grid, the gallery's tiles). It then runs a layout-shift observer on every page at four viewports, the declared interactions (the theme flip, the index panel and the preview, the search, the deck's arrow key, a docs contents link, the presenter's dock) with before and after captures, and writes .pagecheck/REPORT.md.

• Thresholds: a tap target under 40px on its smaller side is a defect, 40 to 43 a note (44 is the target); a layout-shift entry over 0.001 is listed with its sources; an ellipsis truncation is a note, a clip without one a defect.
• Each defect row names the file and line to change (the rule declaring the element's class, the line rendering its text, or the line naming a missing file) and a fix written from the element's kind; a folder stands in when no line matched.
• Expects zero defects and every interaction passing; the run exits 1 otherwise. Notes are read, not fixed on sight.
• A round's touched pages run it in both themes at the ten viewports before shipping; the whole site runs before a release.
• Captures live under .pagecheck/shots/ (ignored by git); --sheets adds a contact sheet per viewport for a quick look at every page.

The practices ratchet

scripts/lint-practices.mjs counts button types, bare effects, any-types, raw hex in TS/TSX ('#xxxxxx'-quoted — unquoted hex inside template CSS snippets doesn't count), and !important. It refuses anything that adds to lint-practices.baseline.json. When files are deleted, prune their baseline entries in the same commit.

scripts/lint-type.mjs holds the type to DESIGN.md section 4 ("Book type"): statically on every pnpm build and pnpm lint:type (family, stack, next/font binding, features, weight, heading and tracking rules, plus a per-file ratchet of literal sizes in lint-type.baseline.json), and against the dev server with pnpm lint:type:live (the face Chrome rendered, the computed features, tracking, optical size and weight). pnpm test:type runs its tests; --update-baseline records a burn-down.

scripts/lint-radius.mjs holds the corners to DESIGN.md section 2 ("Corners: rounded controls, square shells"): statically on every pnpm build and pnpm lint:radius (every radius reads one of the six --pt-radius-<role> tokens, shells and rows stay square, controls are never square, chips read the chip corner, the token values are pinned), and against the dev server with pnpm lint:radius:live (the computed corners at 1440 and 390, the overlays on /brand and the toolbar's hover boxes: square shells, round controls, a picture clipped by its frame). A named exception carries /* lint-radius: allow <reason> */. pnpm test:radius runs its tests.

scripts/lint-heads.mjs holds every book page to DESIGN.md section 4 ("The book page"): statically (pnpm lint:heads, in the build: BookHead's props, page titles from src/lib/page-names.ts, no route restyling the shared head, band or dividers, no second hatch, no guide over a title, the spaces on their tokens), and against the dev server with pnpm lint:heads:live (each head route at 1440 and 390 in both themes: the structure, the title's clearance, the lead, the panel and its Updated day, the mast rule, the band's two rules and the dividers, measured). pnpm test:heads runs its tests.

Types

pnpm exec tsc -p tsconfig.json --noEmit

Film it

Screenshot every changed visual with the external harness (the in-app browser pane pauses rAF — shader canvases come out blank):

• Driver: playwright-core from scripts/node_modules, launched against the Chrome for Testing binary.
• Dark shots: seed localStorage['gt-theme'] = 'dark' in an init script.
• Zoom junctions at deviceScaleFactor: 2+ and crop — full-page shots hide 1px defects.
• Scroll through the page first so IntersectionObserver-armed plates mount; wait out arm delays before shooting animated engines.

Commit and back up

• Commit only your files; Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>.
• Run pnpm build:updated --staged after staging the change, and stage src/lib/updated.ts with it. pnpm lint:updated (in the build and pnpm lint:all) fails when a commit touched a book page and the file was not regenerated with it.
• Push a NEW backup branch each round from HEAD: redesign/diagram-standard-v1<next-letter>.

The mirror

Prototemplate main (~/repos/Prototemplate) is the primary repository. The public site builds and deploys from it, and it carries routes that apps/redesign does not have (/docs, /brand, /deck, /compare, /present). Nothing is rsynced from apps/redesign into Prototemplate with --delete: that command would erase every one of those routes.

Work that lands in Prototemplate main stays there. When a direction page is still edited in apps/redesign, the changed files move into Prototemplate one at a time, and the build is the gate:

cd ~/repos/Prototemplate
git checkout main && git pull --ff-only
cp <monorepo>/apps/redesign/src/app/d/<slug>/<file> src/app/d/<slug>/<file>   # only the files the round touched
pnpm build > /tmp/proto-build.log 2>&1; echo $?   # capture the REAL exit code

• The build must exit 0; cmd | tail reports tail's exit, so capture as above. A flaky exit-1 with a clean log warrants one re-run before diagnosing.
• Sanity-grep the route manifest for pages you added or deleted.
• Commit and push Prototemplate main ("push to main" always means this repo).
• To refresh apps/redesign from Prototemplate, copy in the other direction, again file by file. Root docs (BRAND.md, DESIGN.md, ARCHITECTURE.md, README.md, docs/) are edited in Prototemplate first and copied outward.

What a visual is

One HTML page, 1600 by 900, rendered headlessly at 7680 wide and downsampled to 3840. The page holds real screenshots of the product cut into padded crops, labels and leader lines drawn once, and a glyphfield export as the ground. Nothing in it is invented: every rectangle is a measured region of a captured page, every label names something the reader can find in the product.

The rules the set settled on, each learned from a review:

• No text except labels. No titles, captions or descriptions inside an image; the post carries the prose.
• One idea per slide. A carousel is a set of different points; a slide that restates its neighbour gets new content, not a new style.
• Real crops, not mockups. The one illustrative mock in the set is labelled as a mock.
• Red for what was removed, blue for the page and what replaced it.
• No glass panels, no sparkle icons, no over-rounded boxes: the graphics obey the same hit list the post publishes.

Sizing

The article column is about 700 CSS px wide, so a 1600px stage is shown at 0.44x. Everything is sized for that, not for a full-screen viewer:

Resolution was never the blur. At 1x the dither's one-pixel dots landed on less than a device pixel and aliased into noise; at 2x with smooth scaling they read as a halftone. Small labels were the other half of it.

The floor is measured after zoom-to-fit, not as declared. A composition wider than 90% of the frame is scaled down, and its 28px labels with it, so when the audit reports text under the floor the usual fix is to make the composition narrower (smaller crops, shorter labels, one label column) rather than to enlarge the type. MIN_TEXT in gen-lib.js holds the floor.

The files

Generated folders (graphics/build/visuals/, graphics/out/, graphics/rec/stopmo*/) are ignored by git; everything in them comes back from the scripts.

Procedure

1. Install once: pnpm install at the root (heroicons for the label icons), pip install pillow, and agent-browser and ffmpeg on the PATH.
2. Serve: pnpm graphics:serve keeps graphics/ on port 8765.
3. Capture sources into graphics/shots/hi/ (see "Capturing") and register them in SHOTS with their density.
4. Measure the rectangles you will cut, in CSS px at 1440 by 900, into the page objects in gen-visuals.js.
5. Write each visual as one add(id, area, name, bg, why, () => html). Assign it its own export in ASSIGN.
6. pnpm graphics:gen writes the HTML and the manifest; pnpm graphics:audit [ids] measures every text against the floor and lists overlapping boxes (fix the failures, judge the warnings); pnpm graphics:render [ids] shoots them; python3 graphics/build/sheet.py [ids] tiles them for review.
7. For a clip, record (see "Clips"), then graphics/build/composite-videos.sh.
8. pnpm graphics:export writes the webp set and GIFs into public/static/blogs; --dest points at a landing checkout. Bump the ?v= stamp on every reference in the post.
9. Check the set on /graphics and the post on /blog.
10. Let the page serve each image at the width it is shown. The masters are 3840px wide and the column is about 700 CSS px, so a browser left to shrink them itself blurs them (measured: about an eighth of the edge contrast on a 2x screen, none for a variant at the device width). Every blog image goes through next/image with the column's sizes and the dense images.deviceSizes ladder in next.config.ts, at quality 95; clips are cut at 1400px, the column's 2x width.

Capturing

Sources come from a landing dev server built from main, captured with agent-browser at a device pixel ratio of 4 or 5 at 1440 by 900, the Next.js dev portal hidden, the pointer parked on plain text. Themes come from agent-browser set media light|dark; the docs follow the preference when no theme is stored. Menus open with their real control. The old docs lived on an SSO-protected Vercel preview; those were captured by serializing the DOM from a signed-in Chrome to the local server and screenshotting the saved page. Convert captures to lossless webp; the library reads webp sizes.

Backgrounds

The exports are Kevin's glyphfield project, rendered headlessly through window.glyphfield.studio (graphics/glyph/gfexport.sh). The generator draws one export per visual at exactly 2x the stage and dims it under article visuals; covers keep the full export. Blue duotone variants carry the covers. Every cover has a light-theme twin (light: true on coverExploded and coverWiremap): the same ground and scale, the docs captured in their light theme, the wireframe plate in paper and ink. The post lists the light cover under imagesLight and the blog shows the one for the reader's theme.

Clips

The recorder keeps one or two frames per second at 4x, so interactions are captured as stop-motion: pause the Web Animations, step currentTime between screenshots, assemble with ffmpeg at variable frame durations. Screenshots re-fire trusted pointer events on the last clicked element, so the capture blocks real pointer events in the region and drives hovers synthetically. The composite reads the crop rectangle from the rendered visual, overlays the clip, and writes a 30fps MP4 master and the GIF the post embeds: 1600 wide, 256 colours, sierra dither, rectangle diffing.

Handing off to a post

The post embeds the set with the Carousel and HitList MDX components of the landing blog (children with string attributes; the blog's MDX renderer strips expression props). Covers ship as 3840 webp and the OG image as a 2400 by 1260 PNG; the landing app serves webp covers at quality 90. Posts live in the generaltranslation/content submodule, so a change is two pull requests: content first, then gt-cloud pointing at the content merge commit. The content repository's preview app needs a simple version of every component or its build fails. This repository keeps the authoritative copy of the three docs-redesign posts under content/blog and their graphics under public/static/blogs, read by /blog and /graphics.

Where it went wrong, and the fix

• A captured Lucide glyph is a <rect> plus a path (copy, sidebar). The inliner used to strip width/height from every element, so the rect collapsed and only a corner path drew. It now resizes the root tag only.
• With the static server down, render.sh shot Chrome's error page and the export shipped it. The render now skips a page that never centres.