📄 Say where judgment goes, and give the argument a page of its own

site/components/Header.tsx

@@ -9,7 +9,9 @@ const LINK_ACTIVE =
   "font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--green);border-bottom:var(--rule) solid var(--green);padding-bottom:1px;";
 
 /** `active` marks the top-level section the current page belongs to. */
-export function Header({ active }: { active?: "docs" } = {}) {
+export function Header(
+  { active }: { active?: "docs" | "workflows" } = {},
+) {
   return (
     <header style="position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:var(--rule) solid var(--line);">
       <div
@@ -20,6 +22,12 @@ export function Header({ active }: { active?: "docs" } = {}) {
           <Wordmark size="1rem" fold />
         </a>
         <nav style="display:flex;align-items:center;gap:1.125rem;font-size:0.8125rem;">
+          <a
+            href="/designing-workflows"
+            style={active === "workflows" ? LINK_ACTIVE : LINK}
+          >
+            Designing workflows
+          </a>
           <a href="/docs" style={active === "docs" ? LINK_ACTIVE : LINK}>
             Docs
           </a>

site/components/Prose.tsx

@@ -0,0 +1,71 @@
+import { Fragment } from "preact";
+import type { ComponentChildren } from "preact";
+
+/* The type scale the marketing pages set their prose at. Sizes carry their
+ * own measure where the design gives them one, so a page states a style
+ * rather than restating a stack of declarations. */
+
+export const MONO = "font-family:var(--font-mono);";
+
+export const H3 =
+  "margin:0;font-size:1.0625rem;font-weight:800;letter-spacing:-0.01em;line-height:1.25;";
+export const P_SM =
+  "margin:0;font-size:0.875rem;line-height:1.6;color:var(--body);";
+export const P_MD =
+  "margin:0;max-width:74ch;font-size:0.9375rem;line-height:1.6;color:var(--body);";
+export const P_MEASURED = `${P_SM}max-width:74ch;`;
+
+/** A claim set at the weight of a heading, opening a panel or closing a list. */
+export const CLAIM =
+  "margin:0;font-size:1.0625rem;line-height:1.45;color:var(--ink);font-weight:800;letter-spacing:-0.01em;";
+
+export const CHAIN_ITEM =
+  `${MONO}font-size:0.8125rem;font-weight:700;color:var(--ink);`;
+
+/** An inline identifier: monospace, at full contrast against body prose. */
+export function Term({ children }: { children: ComponentChildren }) {
+  return (
+    <code style={`${MONO}font-weight:700;color:var(--ink);`}>{children}</code>
+  );
+}
+
+/** A ruled arrow chain, e.g. `Repository → Worktree → Implementor`. */
+export function Chain(
+  { steps, boxed }: { steps: string[]; boxed?: boolean },
+) {
+  return (
+    <div
+      style={`display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;${
+        boxed
+          ? "border:var(--rule) solid var(--line);padding:0.75rem 0.875rem;"
+          : "padding-top:0.125rem;"
+      }`}
+    >
+      {steps.map((step, i) => (
+        <Fragment key={step}>
+          <span style={CHAIN_ITEM}>{step}</span>
+          {i < steps.length - 1
+            ? <span style="color:var(--dim);">→</span>
+            : null}
+        </Fragment>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * The marketing pages close on a production note rather than the docs
+ * footer's link set — see `Footer.tsx` for the one the docs carry.
+ */
+export function PageFooter() {
+  return (
+    <footer style="border-top:var(--rule) solid var(--line);padding:1.5rem 0;margin-top:1rem;">
+      <div
+        class="container"
+        style={`${MONO}font-size:0.8125rem;color:var(--dim);`}
+      >
+        Made with ❤️ Effection.
+      </div>
+    </footer>
+  );
+}

site/components/Source.tsx

@@ -0,0 +1,41 @@
+import { Fragment } from "preact";
+
+/**
+ * One run of source text. A bare string is unstyled; a tuple carries the
+ * token class the design system paints it with, and `bold` is the Markdown
+ * structure (headings) that reads at full weight rather than as a token.
+ */
+export type Tok = string | ["key" | "str" | "mod" | "dim" | "bold", string];
+
+export const key = (text: string): Tok => ["key", text];
+export const str = (text: string): Tok => ["str", text];
+export const mod = (text: string): Tok => ["mod", text];
+export const dim = (text: string): Tok => ["dim", text];
+export const bold = (text: string): Tok => ["bold", text];
+
+const TOK_CLASS = {
+  key: "tok-key",
+  str: "tok-str",
+  mod: "tok-mod",
+  dim: "tok-dim",
+} as const;
+
+/** Source lines, joined with newlines so `<pre>` lays them out. */
+export function Source({ lines }: { lines: Tok[][] }) {
+  return (
+    <>
+      {lines.map((parts, line) => (
+        <Fragment key={line}>
+          {line > 0 ? "\n" : null}
+          {parts.map((part, i) =>
+            typeof part === "string"
+              ? part
+              : part[0] === "bold"
+              ? <span key={i} style="font-weight:700;">{part[1]}</span>
+              : <span key={i} class={TOK_CLASS[part[0]]}>{part[1]}</span>
+          )}
+        </Fragment>
+      ))}
+    </>
+  );
+}

site/routes/_app.tsx

@@ -16,7 +16,16 @@ const DEFAULT_DESC =
 
 // Per-route metadata so each page has a distinct title and its own canonical URL.
 const META: Record<string, { title: string; desc: string }> = {
-  "/": { title: DEFAULT_TITLE, desc: DEFAULT_DESC },
+  "/": {
+    title: "executable.md — turn repeatable work into programs",
+    desc:
+      "Turn repeatable work into readable Markdown programs. Encode what you already know how to do, and use agents only where judgment remains.",
+  },
+  "/designing-workflows": {
+    title: "Designing workflows · executable.md",
+    desc:
+      "Use the least autonomy that works: encode what you already know how to do, and reserve agents for the judgment that remains.",
+  },
   "/docs": {
     title: "Getting started · executable.md docs",
     desc: