site: token-driven brand restyle, self-hosted fonts and vendor JS#71
Merged
site: token-driven brand restyle, self-hosted fonts and vendor JS#71
Conversation
Pivots the site brand from the older Bell-Labs-manual / serif-journal direction to a monospace-only "Workshop Terminal" system that aligns with the rest of the Empathic family (empathic/site, pathbase) on container, nav, type stack, and @layer cascade — while keeping toolpath's distinctive copper-on-parchment palette and adding a warm-dark theme the old book lacked. Structure: family positioning, single canonical token table (Token / Dark / Light / Purpose), single canonical type hierarchy table, DAG promoted to a first-class section ahead of components, restored tone-of-voice with CLI-specific guidance (errors, --help, README rhythm), reasoned don'ts, and an implementation appendix (cascade contract, theme switching, Prism map, a11y floor, asset inventory). BRANDBOOK.md is removed; BRAND.md is the sole brand reference. CSS restyling against the new tokens is follow-up work.
|
🔍 Preview deployed: https://e44ad29f.toolpath.pages.dev |
Restyles the site against the new BRAND.md token system and removes all third-party CDN dependencies at runtime. Tokens & themes - Two-theme palette (warm-dark default + parchment light) wired through CSS variables; @layer reset/base/layout/components cascade. - Theme toggle in the nav cycles system / dark / light with sun / moon / monitor (or phone on touch devices) SVG icons. Pref persisted to localStorage; live-follows prefers-color-scheme in system mode. - Inline SVGs (hero topo, DAG figure, decorative contours on every content page) consume tokens via <style> blocks and class names so they flip with the theme. - Visualizer & playground refactored to read tokens at runtime: dagre-d3 styles use color-mix(var(--accent), …) so theme switching is purely cascade-driven; xterm theme is rebuilt from getComputedStyle and reapplied on toolpath:theme-change events. Typography - Hybrid register: monospace for chrome / headings / code / labels, Source Serif 4 for body prose (long-form readability — toolpath is more docs-heavy than its siblings). Documented in BRAND.md. - IBM Plex Mono (400/500/600/700) and Source Serif 4 (400/600 + 400 italic) self-hosted via @fontsource packages and passthrough- copied to /fonts/ at build time. - Six critical weights are <link rel=preload> in <head> with font-display: optional. A metric-matched fallback @font-face (Georgia / Menlo with size-adjust + ascent/descent overrides) prevents layout shift even if optional commits to fallback. - Font-load coordination: an inline head script holds .fonts-loading on <html> until either document.fonts.ready resolves or a 1500ms timeout fires, then unhides the body in a single render commit — collapses the multi-stage FOUT seen on throttled connections. Vendor JS - d3, dagre-d3, @xterm/xterm + addon-fit, prismjs all installed via pnpm and passthrough-copied to /vendor/. base.njk and visualizer.njk point at local paths. Verified xterm v6 UMD still attaches Terminal and FitAddon to window globals. Layout - Body padding hosts the outer side gutter (24px / 20px on mobile) so .site-nav-inner (max-width: max-w + 2*space-lg) and main (max-width: max-w) share content edges on every viewport. - FIG_NNN margin labels introduced on the homepage DAG figure. Brand book - BRAND.md updated to reflect the hybrid type system, the self-hosted asset inventory, and the runtime "no third-party CDNs" contract.
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
BRAND.mdtoken system that unifies it withempathic/siteandpathbase(sharp corners, mono chrome, two themes,@layer reset/base/layout/componentscascade) while preserving toolpath's distinctive copper-on-parchment palette and topographic-DAG language.@fontsource/ npm packages and passthrough-copied to/fonts/and/vendor/at build time.<link rel=preload>,font-display: optional, metric-matchedSource Serif 4 Fallback/IBM Plex Mono Fallbackfaces usesize-adjust/ascent-override/descent-overrideso any fallback paint matches the web font's box dimensions, and an inline<head>script holds.fonts-loadingon<html>until eitherdocument.fonts.readyresolves or 1500ms passes — collapsing the multi-stage FOUT seen on throttled connections into a single render commit.What changed
Brand book.
site/BRANDBOOK.md(the older serif/journal direction) is replaced bysite/BRAND.md— a token-driven, dark + light, S-tier reference: family positioning, single canonical token + type-hierarchy tables, DAG-as-topographic-map promoted to a first-class section, tone of voice with CLI-specific examples, reasoned don'ts, and an implementation appendix (cascade contract, theme switching, font-loading, accessibility floor, asset inventory).Typography. Hybrid register: monospace owns chrome / headings / code / labels; Source Serif 4 owns body prose. The split is documented as load-bearing — toolpath is more docs-heavy than its siblings, and long-form mono is hard on the eyes. Headings, nav, footer, table headers, page-titles, fig-labels, hero-install, buttons, crate-card metadata are all explicit
font-family: var(--font)so they never inherit serif.Theme system. Two-theme palette (warm-dark default + parchment light) wired through CSS variables. Theme toggle in nav cycles system / dark / light with sun / moon / monitor (or phone on touch devices) SVG icons; pref persisted to localStorage; live-follows
prefers-color-schemein system mode. Inline-script theme init runs synchronously in<head>to avoid any wrong-theme flash.Inline SVGs. Hero topo, DAG figure, and decorative contour SVGs on every content page now consume tokens via
<style>blocks and class names so they flip with the theme. The DAG figure on the home page introduces the FIG_001 — STEP DAG margin-label convention from the brand book.Visualizer & playground. dagre-d3 styles use
color-mix(var(--accent), …)so theme switching is purely cascade-driven (no JS re-render). xterm theme is rebuilt fromgetComputedStyleand reapplied ontoolpath:theme-changeevents. All CSS migrated to the new tokens.Layout. Body owns the outer side gutter (24px / 20px on mobile) so
.site-nav-inner(max-width:--max-w + 2 * --space-lg) andmain(max-width:--max-w) share content edges on every viewport. 940px container, 48px fixed nav, sharp corners, no shadows, matched against the family.Test plan
cd site && pnpm run build— clean output, 7 pages/visualizer/flips DAG node colors without re-rendercdn|fonts|gstatic|d3js)