feat: rebrand to website design, Apple HIG icons, ASCII onboarding animation

- Align Electron CSS with website design schema (Inter font, #FBFAF5/#191919 palette, #213448/#94B4C1 accent) - Generate proper app icons from logo.svg via cairosvg (no more Pillow ladder) - Square bg icons for Electron/tray (Apple HIG — OS applies squircle mask) - Circle bg icons for website favicon only - Add scrolling ASCII agent-activity animation to onboarding hero left panel - Remove dock.setIcon() — let macOS use bundle .icns with system mask - Fix goal title overflow with min-w-0 for flex truncation Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-24 16:39:28 -04:00
18 changed files with 337 additions and 237 deletions
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="none">
+  <!-- Apple HIG: full-bleed square, no circle, OS applies mask -->
+  <rect width="1024" height="1024" fill="#191919"/>
+  <g transform="translate(146 134) scale(6)">
+    <path fill="#FBFAF5" d="M 76.604813 111.661926 C 65.070183 111.662621 53.987053 111.662621 42.757744 111.662621 C 45.2239 101.998177 45.297546 101.949265 53.830105 102.036659 C 57.279823 102.071999 60.730202 102.04248 64.259201 102.04248 C 62.159458 93.316338 61.799103 93.009819 51.340881 91.341682 C 59.312901 73.847687 67.193756 56.553749 75.587578 38.134155 C 86.933441 62.965954 97.804642 86.758881 108.711754 110.630394 C 100.707413 111.871689 92.355965 107.246559 88.107536 98.852119 C 84.207748 91.146538 80.800591 83.191696 77.172813 75.348343 C 76.340195 73.54818 75.492958 71.754791 74.614624 69.877441 C 69.107384 75.691788 68.008286 81.475128 71.005882 88.088753 C 74.413452 95.606903 77.813919 103.128281 81.452705 111.167984 C 79.55114 111.381325 78.303734 111.521271 76.604813 111.661926 Z"/>
+    <path fill="#FBFAF5" d="M 26.805992 87.743256 C 38.616821 61.830872 50.261688 36.260269 62.470131 9.452141 C 65.732315 17.818909 71.145126 23.524567 66.258224 33.086182 C 55.518253 54.099815 46.339973 75.911873 36.533691 97.402336 C 32.699284 105.805443 26.495394 110.823158 16.012421 111.410957 C 19.72117 103.270836 23.180601 95.67794 26.805992 87.743256 Z"/>
+  </g>
+</svg>
@@ -1,6 +1,6 @@
 {
  "name": "agent-company",
-  "version": "0.4.92",
+  "version": "0.4.95",
  "private": true,
  "type": "module",
  "description": "Cross-platform Electron desktop control plane for local-first AI agent companies.",
@@ -35,7 +35,9 @@
    "@agentcompany/adapter-codex-local": "workspace:*",
    "@agentcompany/adapter-gemini-local": "workspace:*",
    "@agentcompany/adapter-utils": "workspace:*",
+    "@fontsource-variable/inter": "^5.2.8",
    "@fontsource-variable/jetbrains-mono": "5.2.8",
+    "@fontsource/instrument-serif": "^5.2.8",
    "@phosphor-icons/react": "2.1.10",
    "@tanstack/react-virtual": "^3.13.23",
    "clsx": "2.1.1",
@@ -20,9 +20,15 @@ importers:
      '@agentcompany/adapter-utils':
        specifier: workspace:*
        version: link:packages/adapter-utils
+      '@fontsource-variable/inter':
+        specifier: ^5.2.8
+        version: 5.2.8
      '@fontsource-variable/jetbrains-mono':
        specifier: 5.2.8
        version: 5.2.8
+      '@fontsource/instrument-serif':
+        specifier: ^5.2.8
+        version: 5.2.8
      '@phosphor-icons/react':
        specifier: 2.1.10
        version: 2.1.10(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -699,9 +705,15 @@ packages:
    resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

+  '@fontsource-variable/inter@5.2.8':
+    resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==}
+
  '@fontsource-variable/jetbrains-mono@5.2.8':
    resolution: {integrity: sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==}

+  '@fontsource/instrument-serif@5.2.8':
+    resolution: {integrity: sha512-s+bkz+syj2rO00Rmq9g0P+PwuLig33DR1xDR8pTWmovH1pUjwnncrFk++q9mmOex8fUQ7oW80gPpPDaw7V1MMw==}
+
  '@humanfs/core@0.19.1':
    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
    engines: {node: '>=18.18.0'}
@@ -3387,8 +3399,12 @@ snapshots:
      '@eslint/core': 0.17.0
      levn: 0.4.1

+  '@fontsource-variable/inter@5.2.8': {}
+
  '@fontsource-variable/jetbrains-mono@5.2.8': {}

+  '@fontsource/instrument-serif@5.2.8': {}
+
  '@humanfs/core@0.19.1': {}

  '@humanfs/node@0.16.7':
@@ -1,222 +1,195 @@
 #!/usr/bin/env python3
-"""Generate AgentCompany app icons (PNG, ICO, ICNS) and tray icons.
+"""Generate AgentCompany icons from SVG sources using cairosvg.

-Design v4: Circle background #191919 with #FBFAF5 "A" logo.
-Uses the actual logo paths from logo.svg rendered via cairosvg/Pillow.
+Two icon families:
+  - Web (circle bg):  icon.svg  → landing favicon + website logo
+  - App (square bg):  icon-app.svg → Electron app icon (Apple HIG, OS applies mask)
+  - Tray: rendered from logo.svg for menu bar / notification area
 """

 from __future__ import annotations

+import io
+import os
 import shutil
 import subprocess
 from pathlib import Path

-from PIL import Image, ImageDraw
+# ── Ensure cairo library is discoverable on macOS (Homebrew) ──────────
+for _lib_dir in ("/opt/homebrew/opt/cairo/lib", "/usr/local/opt/cairo/lib"):
+    if Path(_lib_dir).exists():
+        os.environ["DYLD_LIBRARY_PATH"] = (
+            _lib_dir + ":" + os.environ.get("DYLD_LIBRARY_PATH", "")
+        )
+        break
+
+import cairosvg  # noqa: E402  — must come after DYLD_LIBRARY_PATH setup
+from PIL import Image  # noqa: E402

 ROOT = Path(__file__).resolve().parents[1]
 ASSETS = ROOT / "assets"
+LANDING = ROOT / "landing" / "public"
 ICONSET = ASSETS / "icon.iconset"
-PNG_PATH = ASSETS / "icon.png"
-ICO_PATH = ASSETS / "icon.ico"
-ICNS_PATH = ASSETS / "icon.icns"
-SVG_PATH = ASSETS / "icon.svg"
+LOGO_SVG = ROOT / "logo.svg"
+
+# SVG sources
+WEB_SVG = ASSETS / "icon.svg"        # circle bg — web favicon
+APP_SVG = ASSETS / "icon-app.svg"    # square bg — Electron (Apple HIG)
+
 SIZE = 1024

-# ── Brand palette ──────────────────────────────────────────────────────
-BG_COLOR = (25, 25, 25)           # #191919
-LOGO_COLOR = (251, 250, 245)      # #FBFAF5

+# ── Helpers ───────────────────────────────────────────────────────────

-def build_icon() -> Image.Image:
-    """Build the app icon by rendering icon.svg via cairosvg, or fallback to Pillow."""
-    # Try cairosvg first (best quality)
-    try:
-        import cairosvg
-        svg_data = SVG_PATH.read_bytes()
-        png_data = cairosvg.svg2png(bytestring=svg_data, output_width=SIZE, output_height=SIZE)
-        import io
-        return Image.open(io.BytesIO(png_data)).convert("RGBA")
-    except Exception:
-        pass
-
-    # Fallback: draw programmatically with Pillow
-    icon = Image.new("RGBA", (SIZE, SIZE), (0, 0, 0, 0))
-    draw = ImageDraw.Draw(icon)
-
-    # Circle background
-    margin = SIZE // 2 - 480
-    draw.ellipse(
-        (margin, margin, SIZE - margin, SIZE - margin),
-        fill=(*BG_COLOR, 255),
+def svg_to_image(svg_path: Path, width: int, height: int | None = None) -> Image.Image:
+    """Render an SVG to a Pillow RGBA Image at the given size."""
+    h = height or width
+    png_data = cairosvg.svg2png(
+        url=str(svg_path), output_width=width, output_height=h,
    )
+    return Image.open(io.BytesIO(png_data)).convert("RGBA")

-    # Draw the "A" monogram — same geometry as the old icon but in new color
-    cx = SIZE // 2
-    apex_y = 200
-    base_y = 800
-    leg_w = 64
-    base_half = 250
-    fill = (*LOGO_COLOR, 245)

-    def leg_x(y: int) -> tuple[float, float]:
-        t = (y - apex_y) / (base_y - apex_y)
-        spread = base_half * t
-        return (cx - spread, cx + spread)
-
-    ll_top, _ = leg_x(apex_y)
-    ll_bot, _ = leg_x(base_y)
-    _, lr_top = leg_x(apex_y)
-    _, lr_bot = leg_x(base_y)
-
-    left_leg = [
-        (ll_top - leg_w * 0.35, apex_y),
-        (ll_top + leg_w * 0.35, apex_y),
-        (ll_bot + leg_w, base_y),
-        (ll_bot - leg_w, base_y),
-    ]
-    right_leg = [
-        (lr_top - leg_w * 0.35, apex_y),
-        (lr_top + leg_w * 0.35, apex_y),
-        (lr_bot + leg_w, base_y),
-        (lr_bot - leg_w, base_y),
-    ]
-
-    draw.polygon(left_leg, fill=fill)
-    draw.polygon(right_leg, fill=fill)
-
-    # Crossbars — all same cream color with varying opacity for hierarchy
-    bar_h = 42
-    bar_r = 12
-    bar_pad = 14
-
-    tiers = [
-        (440, (*LOGO_COLOR, 255)),
-        (545, (*LOGO_COLOR, 210)),
-        (650, (*LOGO_COLOR, 175)),
-    ]
-
-    for bar_cy, bar_fill in tiers:
-        left_cx, right_cx = leg_x(bar_cy)
-        bx0 = int(left_cx + bar_pad)
-        bx1 = int(right_cx - bar_pad)
-        draw.rounded_rectangle(
-            (bx0, bar_cy - bar_h // 2, bx1, bar_cy + bar_h // 2),
-            radius=bar_r,
-            fill=bar_fill,
-        )
-
-    # Apex beacon
-    dot_r = 20
-    dot_cy = apex_y - 2
-    draw.ellipse(
-        (cx - dot_r, dot_cy - dot_r, cx + dot_r, dot_cy + dot_r),
-        fill=(*LOGO_COLOR, 255),
+def svg_bytes_to_image(svg_bytes: bytes, width: int, height: int | None = None) -> Image.Image:
+    """Render SVG bytes to a Pillow RGBA Image."""
+    h = height or width
+    png_data = cairosvg.svg2png(
+        bytestring=svg_bytes, output_width=width, output_height=h,
    )
-
-    return icon
+    return Image.open(io.BytesIO(png_data)).convert("RGBA")


-def build_tray_icons() -> None:
-    """Generate tray/notification area icons for all platforms."""
-    # Color tray icon (Windows/Linux) — 32x32 and 64x64
-    for name, size in [("tray-icon.png", 32), ("tray-icon@2x.png", 64)]:
-        img = Image.new("RGBA", (size, size), (0, 0, 0, 0))
-        draw = ImageDraw.Draw(img)
-        margin = 1
-        draw.ellipse((margin, margin, size - margin, size - margin), fill=(*BG_COLOR, 255))
+# ── Web icons (circle background) ────────────────────────────────────

-        # Simple A shape scaled to tray size
-        cx = size // 2
-        top_y = int(size * 0.18)
-        bot_y = int(size * 0.82)
-        spread = int(size * 0.28)
-        w = max(2, int(size * 0.06))
+def generate_web_icons() -> None:
+    """Generate favicon.ico and icon.png for the landing site (circle bg)."""
+    print("Generating web icons from icon.svg (circle bg)…")
+    master = svg_to_image(WEB_SVG, SIZE)

-        draw.polygon([
-            (cx - w, top_y), (cx + w, top_y),
-            (cx + spread + w, bot_y), (cx + spread - w, bot_y),
-        ], fill=(*LOGO_COLOR, 240))
-        draw.polygon([
-            (cx - w, top_y), (cx + w, top_y),
-            (cx - spread + w, bot_y), (cx - spread - w, bot_y),
-        ], fill=(*LOGO_COLOR, 240))
+    # PNG for apple-touch-icon / og
+    web_png = LANDING / "icon.png"
+    master.save(web_png, format="PNG")
+    print(f"  → {web_png}")

-        # Crossbar
-        bar_y = int(size * 0.52)
-        bar_h = max(2, int(size * 0.06))
-        bar_left = cx - int(spread * 0.55)
-        bar_right = cx + int(spread * 0.55)
-        draw.rectangle((bar_left, bar_y, bar_right, bar_y + bar_h), fill=(*LOGO_COLOR, 255))
+    # Copy SVG to landing
+    shutil.copy2(WEB_SVG, LANDING / "icon.svg")
+    print(f"  → {LANDING / 'icon.svg'}")

-        img.save(ASSETS / name, format="PNG")
-
-    # macOS template icons (monochrome black + alpha)
-    for name, size in [("tray-iconTemplate.png", 22), ("tray-iconTemplate@2x.png", 44)]:
-        img = Image.new("RGBA", (size, size), (0, 0, 0, 0))
-        draw = ImageDraw.Draw(img)
-
-        cx = size // 2
-        top_y = int(size * 0.15)
-        bot_y = int(size * 0.85)
-        spread = int(size * 0.3)
-        w = max(1, int(size * 0.06))
-
-        draw.polygon([
-            (cx - w, top_y), (cx + w, top_y),
-            (cx + spread + w, bot_y), (cx + spread - w, bot_y),
-        ], fill=(0, 0, 0, 220))
-        draw.polygon([
-            (cx - w, top_y), (cx + w, top_y),
-            (cx - spread + w, bot_y), (cx - spread - w, bot_y),
-        ], fill=(0, 0, 0, 220))
-
-        bar_y = int(size * 0.52)
-        bar_h = max(1, int(size * 0.06))
-        bar_left = cx - int(spread * 0.55)
-        bar_right = cx + int(spread * 0.55)
-        draw.rectangle((bar_left, bar_y, bar_right, bar_y + bar_h), fill=(0, 0, 0, 240))
-
-        img.save(ASSETS / name, format="PNG")
-
-
-def save_png_and_ico(image: Image.Image) -> None:
-    ASSETS.mkdir(parents=True, exist_ok=True)
-    image.save(PNG_PATH, format="PNG")
-    image.save(
-        ICO_PATH,
-        format="ICO",
+    # ICO with multiple sizes for favicon
+    favicon = LANDING / "favicon.ico"
+    master.save(
+        favicon, format="ICO",
        sizes=[(16, 16), (24, 24), (32, 32), (48, 48), (64, 64), (128, 128), (256, 256)],
    )
+    print(f"  → {favicon}")


-def save_icns(image: Image.Image) -> None:
+# ── App icons (square background, Apple HIG) ─────────────────────────
+
+def generate_app_icons() -> None:
+    """Generate Electron app icons: PNG, ICO, ICNS (square bg, Apple HIG)."""
+    print("Generating app icons from icon-app.svg (square bg, Apple HIG)…")
+    master = svg_to_image(APP_SVG, SIZE)
+
+    # Main PNG
+    png_path = ASSETS / "icon.png"
+    master.save(png_path, format="PNG")
+    print(f"  → {png_path}")
+
+    # Windows ICO
+    ico_path = ASSETS / "icon.ico"
+    master.save(
+        ico_path, format="ICO",
+        sizes=[(16, 16), (24, 24), (32, 32), (48, 48), (64, 64), (128, 128), (256, 256)],
+    )
+    print(f"  → {ico_path}")
+
+    # macOS ICNS via iconutil
+    generate_icns(master)
+
+
+def generate_icns(master: Image.Image) -> None:
+    """Generate .icns from a master image using macOS iconutil."""
    if ICONSET.exists():
        shutil.rmtree(ICONSET)
    ICONSET.mkdir(parents=True, exist_ok=True)

    for size in (16, 32, 64, 128, 256, 512):
-        image.resize((size, size), Image.Resampling.LANCZOS).save(
+        master.resize((size, size), Image.Resampling.LANCZOS).save(
            ICONSET / f"icon_{size}x{size}.png", format="PNG",
        )
-        image.resize((size * 2, size * 2), Image.Resampling.LANCZOS).save(
+        master.resize((size * 2, size * 2), Image.Resampling.LANCZOS).save(
            ICONSET / f"icon_{size}x{size}@2x.png", format="PNG",
        )

+    icns_path = ASSETS / "icon.icns"
    subprocess.run(
-        ["iconutil", "-c", "icns", str(ICONSET), "-o", str(ICNS_PATH)],
+        ["iconutil", "-c", "icns", str(ICONSET), "-o", str(icns_path)],
        check=True,
    )
    shutil.rmtree(ICONSET)
+    print(f"  → {icns_path}")


+# ── Tray / notification area icons ───────────────────────────────────
+
+def generate_tray_icons() -> None:
+    """Generate tray icons following Apple HIG for menu bar.
+
+    - Color (Windows/Linux): square bg with logo, 32×32 and 64×64
+    - Template (macOS): monochrome black logo on transparent, 22×22 and 44×44
+    """
+    print("Generating tray icons…")
+
+    # Color tray icons — render app icon (square bg) at small sizes
+    for name, size in [("tray-icon.png", 32), ("tray-icon@2x.png", 64)]:
+        img = svg_to_image(APP_SVG, size)
+        img.save(ASSETS / name, format="PNG")
+        print(f"  → {ASSETS / name}")
+
+    # macOS template icons — black logo silhouette on transparent
+    # Read logo.svg paths, render as black on transparent
+    logo_svg = LOGO_SVG.read_text()
+
+    for name, size in [("tray-iconTemplate.png", 22), ("tray-iconTemplate@2x.png", 44)]:
+        # Create SVG with black fill, sized to target
+        template_svg = _make_template_svg(logo_svg, size)
+        img = svg_bytes_to_image(template_svg.encode("utf-8"), size)
+        img.save(ASSETS / name, format="PNG")
+        print(f"  → {ASSETS / name}")
+
+
+def _make_template_svg(logo_svg_content: str, target_size: int) -> str:
+    """Create a macOS template SVG: black logo silhouette on transparent bg."""
+    # Logo viewBox is 0 0 122 126 — scale to fit target with padding
+    padding = max(2, int(target_size * 0.1))
+    available = target_size - 2 * padding
+    # Scale to fit height (taller dimension)
+    scale = available / 126
+    logo_w = 122 * scale
+    # Center horizontally
+    offset_x = (target_size - logo_w) / 2
+    offset_y = padding
+
+    return f"""<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {target_size} {target_size}" fill="none">
+  <g transform="translate({offset_x:.1f} {offset_y:.1f}) scale({scale:.4f})">
+    <path fill="#000000" d="M 76.604813 111.661926 C 65.070183 111.662621 53.987053 111.662621 42.757744 111.662621 C 45.2239 101.998177 45.297546 101.949265 53.830105 102.036659 C 57.279823 102.071999 60.730202 102.04248 64.259201 102.04248 C 62.159458 93.316338 61.799103 93.009819 51.340881 91.341682 C 59.312901 73.847687 67.193756 56.553749 75.587578 38.134155 C 86.933441 62.965954 97.804642 86.758881 108.711754 110.630394 C 100.707413 111.871689 92.355965 107.246559 88.107536 98.852119 C 84.207748 91.146538 80.800591 83.191696 77.172813 75.348343 C 76.340195 73.54818 75.492958 71.754791 74.614624 69.877441 C 69.107384 75.691788 68.008286 81.475128 71.005882 88.088753 C 74.413452 95.606903 77.813919 103.128281 81.452705 111.167984 C 79.55114 111.381325 78.303734 111.521271 76.604813 111.661926 Z"/>
+    <path fill="#000000" d="M 26.805992 87.743256 C 38.616821 61.830872 50.261688 36.260269 62.470131 9.452141 C 65.732315 17.818909 71.145126 23.524567 66.258224 33.086182 C 55.518253 54.099815 46.339973 75.911873 36.533691 97.402336 C 32.699284 105.805443 26.495394 110.823158 16.012421 111.410957 C 19.72117 103.270836 23.180601 95.67794 26.805992 87.743256 Z"/>
+  </g>
+</svg>"""
+
+
+# ── Main ──────────────────────────────────────────────────────────────
+
 def main() -> None:
    ASSETS.mkdir(parents=True, exist_ok=True)
-    image = build_icon()
-    save_png_and_ico(image)
-    save_icns(image)
-    build_tray_icons()
-    print(f"Generated: {PNG_PATH}, {ICO_PATH}, {ICNS_PATH}")
-    print(f"Generated tray icons in {ASSETS}")
+    LANDING.mkdir(parents=True, exist_ok=True)
+
+    generate_web_icons()
+    generate_app_icons()
+    generate_tray_icons()
+
+    print("\nDone! All icons generated.")


 if __name__ == "__main__":
@@ -2,7 +2,7 @@ import { spawn } from "node:child_process";
 import { existsSync } from "node:fs";
 import { homedir } from "node:os";
 import { delimiter as pathDelimiter, join } from "node:path";
-import { app, nativeImage } from "electron";
+import { app } from "electron";

 interface HostEnvironmentDependencies {
  iconPath: string;
@@ -91,10 +91,7 @@ export async function prepareHostEnvironment({
    logger.info("[path] Skipping interactive shell PATH probe; using deterministic PATH setup only.");
  }

-  const appIcon = nativeImage.createFromPath(iconPath);
-  if (!appIcon.isEmpty()) {
-    if (process.platform === "darwin" && app.dock) {
-      app.dock.setIcon(appIcon);
-    }
-  }
+  // Dock icon: macOS uses the .icns from the app bundle with the system squircle
+  // mask applied automatically. Do not call dock.setIcon() — it bypasses the mask
+  // and renders the raw PNG oversized and square.
 }
@@ -0,0 +1,85 @@
+import { memo } from "react";
+
+/**
+ * Scrolling ASCII agent-activity backdrop for the onboarding hero panel.
+ * Pure CSS animation (translateY on compositor thread) — no JS ticks.
+ * Content is doubled for seamless looping.
+ */
+
+const LINES = [
+  "",
+  "       ╭──────────╮",
+  "       │   CEO    │",
+  "       ╰────┬─────╯",
+  "       ┌────┴─────┐",
+  "    ╭──┴──╮    ╭──┴──╮",
+  "    │ CTO │    │ CMO │",
+  "    ╰──┬──╯    ╰──┬──╯",
+  "    ╭──┴──╮    ╭──┴──╮",
+  "    │ Eng │    │ Mkt │",
+  "    ╰─────╯    ╰─────╯",
+  "",
+  "  $ deploy --agents 12",
+  "  ████████████████████ 100%",
+  "  [OK] all agents online",
+  "",
+  "  CEO    │ analyzing requirements",
+  "  CEO    │ identifying deliverables",
+  "  CEO    │ delegating to leads",
+  "",
+  "  CTO    │ reviewing architecture",
+  "  CTO    │ → Dev.01: auth module",
+  "  CTO    │ → Dev.02: API layer",
+  "  CTO    │ → QA: test strategy",
+  "",
+  "  CMO    │ go-to-market strategy",
+  "  CMO    │ → Mkt.01: launch copy",
+  "  CMO    │ → Mkt.02: social plan",
+  "",
+  "  ┌─ SPRINT 1 ────────────────┐",
+  "  │ tasks  ████████░░  80%    │",
+  "  │ agents 12 active          │",
+  "  │ tests  128 passing        │",
+  "  └──────────────────────────┘",
+  "",
+  "  Dev.01 │ scaffolding auth",
+  "  Dev.02 │ REST endpoints",
+  "  Design │ component library",
+  "  QA     │ integration tests",
+  "  Mkt.01 │ blog post drafted",
+  "",
+  "  CEO    │ sprint review: ✓",
+  "  CTO    │ code review: merged",
+  "  Dev.01 │ PR #12 → main",
+  "  QA     │ all tests green",
+  "  CMO    │ brief approved",
+  "",
+  "  [INFO] Sprint 1 complete",
+  "  [INFO] Advancing to Sprint 2",
+  "",
+];
+
+const BLOCK = LINES.join("\n");
+
+export const AsciiAnimation = memo(function AsciiAnimation() {
+  return (
+    <div className="pointer-events-none absolute inset-0 select-none overflow-hidden">
+      {/* Fade masks */}
+      <div
+        className="absolute inset-x-0 top-0 z-10 h-32"
+        style={{ background: "linear-gradient(to bottom, var(--bg), transparent)" }}
+      />
+      <div
+        className="absolute inset-x-0 bottom-0 z-10 h-32"
+        style={{ background: "linear-gradient(to top, var(--bg), transparent)" }}
+      />
+
+      {/* Scrolling track — doubled for seamless loop */}
+      <div className="ascii-scroll-track whitespace-pre font-mono text-[11px] leading-[1.8] text-[color:var(--accent)] opacity-[0.08]">
+        {BLOCK}
+        {"\n"}
+        {BLOCK}
+      </div>
+    </div>
+  );
+});
@@ -8,6 +8,7 @@ import {
 import type { ProfileSnapshot } from "@shared/types";
 import type { AppLocale } from "@shared/locale";
 import { ConnectorReadiness } from "./ConnectorReadiness";
+import { AsciiAnimation } from "./AsciiAnimation";

 type Step = "language" | "company" | "mission" | "launch";

@@ -57,6 +58,9 @@ export function OnboardingHero({
        }}
      />

+      {/* ASCII agent activity backdrop */}
+      <AsciiAnimation />
+
      <motion.div
        initial={{ opacity: 0, y: 24 }}
        animate={{ opacity: 1, y: 0 }}
@@ -22,12 +22,12 @@ export function GoalProgress({ goals, tasks, onNavigate }: { goals: GoalRecord[]
            onClick={() => onNavigate("goals")}
            className="focus-ring w-full rounded-[8px] border border-[color:var(--line)] bg-[color:var(--panel)] px-4 py-3.5 text-left transition hover:border-[color:var(--line-strong)] hover:shadow-sm"
          >
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <Target size={15} weight="fill" className="text-[color:var(--accent)]" />
+            <div className="flex items-center justify-between gap-3">
+              <div className="flex min-w-0 items-center gap-2">
+                <Target size={15} weight="fill" className="shrink-0 text-[color:var(--accent)]" />
                <span className="truncate text-[13px] font-medium text-[color:var(--text)]">{goal.title}</span>
              </div>
-              <span className="whitespace-nowrap text-[13px] font-bold tabular-nums text-[color:var(--accent)]">{pct}%</span>
+              <span className="shrink-0 whitespace-nowrap text-[13px] font-bold tabular-nums text-[color:var(--accent)]">{pct}%</span>
            </div>
            <div className="mt-2.5 h-2 w-full overflow-hidden rounded-full bg-[color:var(--panel-soft)]">
              <div
@@ -32,10 +32,10 @@ export function GoalList({
            onClick={() => onSelect(goal.id)}
            className={`cursor-pointer transition-colors duration-100 ${isSelected ? "bg-[color:var(--accent-soft)]" : "hover:bg-[color:var(--panel-soft)]"}`}
          >
-            <div className="mb-2 flex items-center justify-between">
-              <div className="flex items-center gap-2">
+            <div className="mb-2 flex items-center justify-between gap-3">
+              <div className="flex min-w-0 items-center gap-2">
                {isSelected && (
-                  <CheckCircle size={16} weight="fill" className="text-[color:var(--accent)]" />
+                  <CheckCircle size={16} weight="fill" className="shrink-0 text-[color:var(--accent)]" />
                )}
                <div className="truncate text-[14px] font-semibold text-[color:var(--text)]">{goal.title}</div>
              </div>
@@ -1,4 +1,6 @@
+import "@fontsource-variable/inter";
 import "@fontsource-variable/jetbrains-mono";
+import "@fontsource/instrument-serif";
 import "./styles.css";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
@@ -1,30 +1,32 @@
@import "tailwindcss";

@theme {
-  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
+  --font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
    "Noto Sans CJK SC", Helvetica, Arial, sans-serif;
+  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono Variable", "Microsoft YaHei", ui-monospace,
    SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }

+/* ─── Light theme — aligned with website ─── */
 :root {
  color-scheme: light;
-  --bg: #f7f8fa;
-  --bg-subtle: #ffffff;
-  --panel: #ffffff;
-  --panel-soft: #f0f2f5;
-  --panel-strong: #f7f8fa;
-  --line: rgba(50, 65, 85, 0.08);
-  --line-strong: rgba(50, 65, 85, 0.15);
-  --text: #1a1d24;
-  --muted: #6b7280;
-  --muted-strong: #4b5563;
-  --accent: #4a5d7a;
-  --accent-text: #3d5070;
-  --accent-soft: #edf1f7;
-  --accent-hover: #3d4f6d;
-  --text-on-accent: #ffffff;
+  --bg: #FBFAF5;
+  --bg-subtle: #FFFFFF;
+  --panel: #FFFFFF;
+  --panel-soft: #F3F2ED;
+  --panel-strong: #FBFAF5;
+  --line: rgba(25, 25, 25, 0.08);
+  --line-strong: rgba(25, 25, 25, 0.15);
+  --text: #191919;
+  --muted: #7a7a72;
+  --muted-strong: #565650;
+  --accent: #213448;
+  --accent-text: #213448;
+  --accent-soft: rgba(33, 52, 72, 0.07);
+  --accent-hover: #192838;
+  --text-on-accent: #FBFAF5;
  --danger: #c53030;
  --danger-soft: #fef2f2;
  --warn: #b45309;
@@ -37,23 +39,24 @@
  color-scheme: light;
 }

+/* ─── Dark theme — aligned with website ─── */
 :root[data-theme="dark"] {
  color-scheme: dark;
-  --bg: #16181f;
-  --bg-subtle: #1a1c24;
-  --panel: #1e2028;
-  --panel-soft: #24262e;
-  --panel-strong: #1c1e26;
-  --line: rgba(148, 163, 190, 0.12);
-  --line-strong: rgba(148, 163, 190, 0.2);
-  --text: #edf0f7;
-  --muted: #8b95a5;
-  --muted-strong: #b0b8c8;
-  --accent: #7b9cc4;
-  --accent-text: #7b9cc4;
-  --accent-soft: rgba(123, 156, 196, 0.14);
-  --accent-hover: #93b0d4;
-  --text-on-accent: #ffffff;
+  --bg: #191919;
+  --bg-subtle: #1e1e1e;
+  --panel: #222222;
+  --panel-soft: #2a2a2a;
+  --panel-strong: #1c1c1c;
+  --line: rgba(251, 250, 245, 0.08);
+  --line-strong: rgba(251, 250, 245, 0.15);
+  --text: #FBFAF5;
+  --muted: #8a8a84;
+  --muted-strong: #b8b8b2;
+  --accent: #94B4C1;
+  --accent-text: #94B4C1;
+  --accent-soft: rgba(148, 180, 193, 0.12);
+  --accent-hover: #a8c4cf;
+  --text-on-accent: #191919;
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --warn: #f59e0b;
@@ -65,21 +68,21 @@
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
-    --bg: #16181f;
-    --bg-subtle: #1a1c24;
-    --panel: #1e2028;
-    --panel-soft: #24262e;
-    --panel-strong: #1c1e26;
-    --line: rgba(148, 163, 190, 0.12);
-    --line-strong: rgba(148, 163, 190, 0.2);
-    --text: #edf0f7;
-    --muted: #8b95a5;
-    --muted-strong: #b0b8c8;
-    --accent: #7b9cc4;
-    --accent-text: #7b9cc4;
-    --accent-soft: rgba(123, 156, 196, 0.14);
-    --accent-hover: #93b0d4;
-    --text-on-accent: #ffffff;
+    --bg: #191919;
+    --bg-subtle: #1e1e1e;
+    --panel: #222222;
+    --panel-soft: #2a2a2a;
+    --panel-strong: #1c1c1c;
+    --line: rgba(251, 250, 245, 0.08);
+    --line-strong: rgba(251, 250, 245, 0.15);
+    --text: #FBFAF5;
+    --muted: #8a8a84;
+    --muted-strong: #b8b8b2;
+    --accent: #94B4C1;
+    --accent-text: #94B4C1;
+    --accent-soft: rgba(148, 180, 193, 0.12);
+    --accent-hover: #a8c4cf;
+    --text-on-accent: #191919;
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.12);
    --warn: #f59e0b;
@@ -133,11 +136,11 @@ select {

 ::-webkit-scrollbar-thumb {
  border-radius: 999px;
-  background: rgba(60, 75, 100, 0.2);
+  background: rgba(25, 25, 25, 0.15);
 }

 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(60, 75, 100, 0.32);
+  background: rgba(25, 25, 25, 0.25);
 }

 .mono {
@@ -147,7 +150,7 @@ select {
 .surface {
  background: var(--panel);
  border: 1px solid var(--line);
-  box-shadow: 0 1px 3px rgba(26, 29, 36, 0.06), 0 0 0 0.5px rgba(26, 29, 36, 0.03);
+  box-shadow: 0 1px 3px rgba(25, 25, 25, 0.06), 0 0 0 0.5px rgba(25, 25, 25, 0.03);
 }

 .focus-ring {
@@ -160,9 +163,19 @@ select {

 .focus-ring:focus-visible {
  box-shadow:
-    0 0 0 1px rgba(74, 93, 122, 0.5),
-    0 0 0 4px rgba(74, 93, 122, 0.12);
-  border-color: rgba(74, 93, 122, 0.35);
+    0 0 0 1px rgba(33, 52, 72, 0.5),
+    0 0 0 4px rgba(33, 52, 72, 0.12);
+  border-color: rgba(33, 52, 72, 0.35);
+}
+
+/* ─── ASCII animation ─── */
+@keyframes ascii-scroll-up {
+  0% { transform: translateY(0); }
+  100% { transform: translateY(-50%); }
+}
+
+.ascii-scroll-track {
+  animation: ascii-scroll-up 80s linear infinite;
 }

@media (prefers-reduced-motion: reduce) {