Design System integration + ISSUE 391 (On the House Style) + nav cleanup#52
Open
isaacsight wants to merge 11 commits into
Open
Design System integration + ISSUE 391 (On the House Style) + nav cleanup#52isaacsight wants to merge 11 commits into
isaacsight wants to merge 11 commits into
Conversation
… token reconciliation, editorial layer Integrate the kernel.chat Design System export as an improvement to the site. Three tracked pieces here (a fourth — the installable Agent Skill — lives outside the repo at ~/.claude/skills/kernel-chat-design/): - design-system/: the full layered system (tokens, primitives, components, ui_kits, templates, assets) plus a generated gallery (build-gallery.mjs -> index.html) embedding all 25 specimen cards at their declared viewports. The adherence oxlint config is scoped to this folder, deliberately NOT retrofit onto the literal-heavy monolith. - src/index.css: additive token reconciliation — the semantic alias layer (--surface-*, --text-*, --accent-spot, --border-hairline), the --weight-* scale, --shadow-block, and improved serif/mono fallback stacks (Georgia, Courier New). Every new token was referenced 0x in src/; verified no visual change on the running site. - src/styles/editorial.css: the editorial pop-* primitive block extracted verbatim from index.css (29,627 -> 29,494 lines) into a design-system- aligned layer, imported at the top of index.css. Cascade-safe (custom properties resolve at use time; no equal-specificity bare .pop- rule exists to flip). Verified pixel-identical on cover + fieldwork spread and clean vite build. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
A self-referential essay reading this session's design-system integration the way the magazine reads everyone else's moves: as a methods paper with the audit attached. The house style — one tomato spot, two faces, a single asterisk — bound this month into a portable, governed system. Identity decisions: - coverStock 'ivory' — the methods-bench / press-preview white. - coverLayout 'classic' — centred lockup, monument bottom-right. - coverOrnament 'asterisk-stamp' — the one system glyph IS the subject. - coverSeal PRESS · 工房 · VI·26 — the KERNEL PRESS workshop signs its own. - accent 'amethyst' — the cabinet seed reserved for issues about kernel.chat itself; fittingly the logo-mark purple, the one colour the system holds back from the page. - spread.type 'essay' with dossier + dataBlock + pullQuote + references. Registered in index.ts (LATEST_ISSUE flips to 391); PUBLISHING.md "Last updated" hygiene stamp refreshed. tsc --noEmit and vite build clean; cover (as LATEST) and full /issues/391 spread verified rendering with no console errors. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Drop two surfaces from the colophon nav: - Isaac's Portfolio — removed the /portfolio route + lazy import (router.tsx) and the nav link (IssueColophon.tsx). The PortfolioPage component and its public/portfolio_*.png images were untracked working-tree files, never committed; deleted locally. - The Wall — the /back-covers aggregate gallery: removed the route + lazy import, the nav link, and BackCoversPage.tsx. Kept intact: the per-issue back covers (IssueBackCover, the /issues/:n/back verso route, the backCover specs across ~12 issues, and the shared /back-covers/*.jpg images) — an integral magazine feature, distinct from the gallery. Removed routes degrade gracefully to the cover (no white-screen on stale bookmarks). tsc --noEmit and vite build clean (940 -> 937 modules); colophon verified: Back Issues · The Refusals · Privacy · Terms. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…Figma/Framer reconciliation - Figma Motion vs motion-contract reconciliation (figma-motion*.md, figma-tokens-to-variables.md) - Two-surface motion rule codified: editorial=CSS-only, engine=motion/react (components.md + design-language.md scope note) - Launch route /#/launch/:n (LaunchPage) — CSS-only poster reusing IssueCover/Contents/Colophon - Systemic typographic upgrade: shared EditorialProse.css (justified+hyphenated prose, oldstyle prose figures, kerning/ligatures/hanging-punctuation) across all 5 formats - Adherence gate scripts/check-adherence.mjs — surfaced 199 raw hexes (engine surface); 391's published '0' was never enforced (oxlint config unrunnable, no eslint config) - Korean design language: celadon ink seed (青磁) + Magazine B / AROUND neighbors; yeobaek/hanji/hangul layer documented - Issue 394 'THE QUIET RESCUES' — AI for human survivability; debuts the celadon accent Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013F9NBu9hroaszcBZfMgmAY
…in url-fetch - GoalsPanel: escape HTML before the markdown regex so user-authored goal text cannot inject markup (was: raw dangerouslySetInnerHTML) - url-fetch: follow redirects manually and re-run checkSSRF on each hop; redirect:'follow' let a public URL 302 to an internal address (metadata/localhost) and bypass the initial SSRF guard Found during an authorized probe of the site. mcp-proxy and import-conversation share the checkSSRF helper and should get the same redirect hardening in follow-up. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013F9NBu9hroaszcBZfMgmAY
Pure CSS scroll-driven animation (animation-timeline: view()) on the launch route's quote + CTA — no motion/react, opacity+transform only, guarded by prefers-reduced-motion and @supports (progressive enhancement). Scoped to the promotional tier, which the two-surface rule permits motion the still editorial surface forbids. The cover (hero) is untouched. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013F9NBu9hroaszcBZfMgmAY
…te in CI - mcp-proxy: redirect:'manual' so a malicious MCP server URL can't 302 to an internal address past checkSSRF (same class as the url-fetch fix) - check-adherence: precise CSS-value scan (was naive TSX grep that flagged HTML entities and prose). Ignores token homes (index/critical.css), allows structural #000/#fff and var(--t,#fallback). Default scope = the editorial design-system layer (src/styles + src/components), which is token-pure (0 raw hex). Page CSS (Landing/Leaderboard/Play) is a documented backlog, not hidden. - npm run lint:adherence + CI step in ci.yml web job: 391's '0 hand-written colours' is now an enforced gate on the design-system layer. NOTE: import-conversation intentionally NOT changed — its host allowlist (chatgpt/claude/gemini/g.co) mitigates SSRF, and g.co is a redirector so redirect:'follow' is functionally required there. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013F9NBu9hroaszcBZfMgmAY
…, security probe, adherence gate Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013F9NBu9hroaszcBZfMgmAY
…issues renumbered - 391 'On the House Style' kept (live, this branch's committed/deployed issue) - 392 'Never Sell the Fixtures' (essay) — landed from PR #53, free slot, as-is - 393 'Own the Stack: Seven Stakes on Editorial Tech' (forecast) — landed as-is - 395 'The Week the Assistant Became an Actor' (dispatch) — PR #53's colliding 391 renumbered to 395 (next free after 394); all 9 self-refs + back-cover asset (391-teletype.jpg -> 395-teletype.jpg) rewritten - Also lands the 3 design role agents (designer, japanese-editor, magazine-editor) Catalog now: 390 391 392 393 394 395. tsc clean, 395 render-verified. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013F9NBu9hroaszcBZfMgmAY
…s/line Justified prose creates rivers / loose word-spacing on a phone-width column (~30-35 chars). Below the editorial breakpoint, all 5 formats go ragged-right (hyphenation + oldstyle figures retained). Verified at 393px. The base type system (kern/liga/onum + optimizeLegibility) is already site-wide via body (index.css); this only tunes prose layout. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013F9NBu9hroaszcBZfMgmAY
The 'Read the issue' CTA was a text-height link (~14px). inline-flex + min-height:44px gives a proper touch target; the tomato underline moves from border-bottom to text-decoration so it stays tight to the glyphs instead of being pushed down by the padding. Catalog rows were already correct (whole <a> wraps the row, min-height:44px). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013F9NBu9hroaszcBZfMgmAY
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Integrates the kernel.chat Design System as an improvement to the site, ships ISSUE 391 — On the House Style documenting the move, and removes two footer surfaces. Three logically-separated commits.
Commits
design-system/layered reference + generated gallery; additive token reconciliation insrc/index.css(semantic aliases,--weight-*,--shadow-block, improved font fallbacks — all referenced 0× before, no visual change); editorialpop-*layer extracted verbatim tosrc/styles/editorial.cssand imported at the top of index.css (29,627 → 29,494 lines). The installable Agent Skill lives outside the repo at~/.claude/skills/kernel-chat-design/.PRESS · 工房 · VI·26seal; dossier + dataBlock + pullQuote + references.LATEST_ISSUEflips to 391./portfolio) and The Wall (/back-coversaggregate gallery): routes, lazy imports, nav links,BackCoversPage.tsx. Per-issue back covers (/issues/:n/back,IssueBackCover,backCoverspecs) kept intact.Verification
tsc --noEmitcleanvite buildclean (937 modules)/issues/391spread (dossier · by-the-numbers · pull quote · works-cited all render), migrated editorial layer pixel-identical on cover + fieldwork spread, colophon reduced to Back Issues · The Refusals · Privacy · Terms. Zero console errors.Base
Targets
feat/kbot-fable-5(this branch forked from it).mainis behind by the Pressroom + kbot commits, so this base keeps the PR scoped to exactly these three commits.🤖 Generated with Claude Code