feat: adopt original Interscript brand mark + logo teal

The original Interscript logo is a teal (#008075) parallelogram with
white "iS" letters. The whole design system now derives from it.

Brand mark:
- Copied the canonical symbol.svg from interscript/website/src/assets
  into public/symbol.svg (the actual logo, not a placeholder)
- Replaced favicon.svg (was a generic blue "i" placeholder)
- Header and footer use the real logo via <img src="/symbol.svg"> in
  place of the previous ⌘ character glyph
- Brand mark sits slightly tilted (skewY -2deg) to evoke the
  parallelogram's bias

Color system rebuilt around the logo's signature teal:
- --color-brand: #008075 (canonical brand teal, from the logo)
- --color-brand-deep: #005f57 (hover/pressed)
- --color-brand-pale: #cfe5e1 (tints)
- Replaces the previous --color-accent everywhere

Palette retuned to harmonize with brand teal:
- Paper: #f6f3ec (warmer, slightly cooler than before)
- Ink: #1a1d1f (less blue-black, more neutral)

Tests:
- Updated palette expectations to brand teal
- Added 5 new tests verifying symbol.svg ships in dist/, the brand
  teal is in the SVG, and every page renders <img src="/symbol.svg">
- 119 tests total, all passing

Author: ronaldtse

public/favicon.svg

@@ -230,8 +230,8 @@ onUnmounted(() => {
   transition: background 0.3s ease;
 }
 .status-dot.live {
-  background: var(--color-accent);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 25%, transparent);
+  background: var(--color-brand);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-brand) 25%, transparent);
   animation: pulse 2.4s ease-in-out infinite;
 }
 @keyframes pulse {
@@ -277,7 +277,7 @@ onUnmounted(() => {
   font-size: var(--text-micro);
   letter-spacing: 0.18em;
   text-transform: uppercase;
-  color: var(--color-accent);
+  color: var(--color-brand);
   font-weight: 500;
 }
 .cell-counter {

public/symbol.svg

@@ -47,7 +47,7 @@ const currentPath = Astro.url.pathname
     <header class="site-header">
       <div class="container header-inner">
         <a href="/" class="brand" aria-label="Interscript home">
-          <span class="brand-mark" aria-hidden="true">⌘</span>
+          <img src="/symbol.svg" alt="" class="brand-mark" width="22" height="22" />
           <span class="brand-name">Interscript</span>
         </a>
         <nav class="site-nav" aria-label="Primary">
@@ -79,7 +79,7 @@ const currentPath = Astro.url.pathname
       <div class="container footer-inner">
         <div class="footer-brand">
           <div class="brand-line">
-            <span class="brand-mark" aria-hidden="true">⌘</span>
+            <img src="/symbol.svg" alt="" class="brand-mark footer-mark" width="24" height="24" />
             <span class="brand-name">Interscript</span>
           </div>
           <p class="footer-tag">
@@ -165,11 +165,14 @@ const currentPath = Astro.url.pathname
         color: var(--color-ink);
       }
       .brand-mark {
-        font-family: var(--font-display);
-        font-size: 1.5rem;
-        line-height: 1;
-        color: var(--color-highlight);
-        font-variation-settings: "SOFT" 100, "WONK" 1;
+        display: inline-block;
+        width: 22px;
+        height: 22px;
+        vertical-align: middle;
+        flex-shrink: 0;
+        /* Slight tilt to evoke the parallelogram's bias */
+        transform: skewY(-2deg);
+      }
       }
       .brand-name {
         font-family: var(--font-display);
@@ -238,9 +241,11 @@ const currentPath = Astro.url.pathname
       @media (max-width: 768px) {
         .footer-inner { grid-template-columns: 1fr; gap: 2.5rem; }
       }
-      .footer-brand .brand-line { display: flex; align-items: baseline; gap: 0.5rem; }
+      .footer-brand .brand-line { display: flex; align-items: center; gap: 0.5rem; }
       .footer-brand .brand-mark {
-        color: var(--color-highlight);
+        width: 24px;
+        height: 24px;
+        /* The footer bg is dark, so the teal stays visible as-is */
       }
       .footer-brand .brand-name { color: var(--color-vellum); }
       .footer-tag {
@@ -277,7 +282,7 @@ const currentPath = Astro.url.pathname
         transition: color 0.15s ease;
       }
       .footer-col a:hover {
-        color: var(--color-accent);
+        color: var(--color-brand);
         text-decoration: underline;
       }
       .footer-base {
@@ -305,7 +310,7 @@ const currentPath = Astro.url.pathname
         border-bottom: 1px solid color-mix(in srgb, var(--color-vellum) 12%, transparent);
       }
       .footer-partner-label { font-weight: 500; }
-      .footer-partner strong { color: var(--color-accent); font-weight: 500; }
+      .footer-partner strong { color: var(--color-brand); font-weight: 500; }
       .footer-partner-divider {
         color: color-mix(in srgb, var(--color-vellum) 35%, transparent);
       }

src/components/ScriptMosaic.vue

@@ -294,7 +294,7 @@ curl interscript.org/maps/&lt;system-code&gt;.json</code></pre>
   }
   .hero-headline em {
     font-style: italic;
-    color: var(--color-accent);
+    color: var(--color-brand);
     font-variation-settings: "SOFT" 100, "WONK" 1;
   }
 
@@ -416,7 +416,7 @@ curl interscript.org/maps/&lt;system-code&gt;.json</code></pre>
     font-family: var(--font-mono);
     font-size: var(--text-micro);
     letter-spacing: 0.15em;
-    color: var(--color-accent);
+    color: var(--color-brand);
     font-weight: 500;
   }
   .step-head h3 {
@@ -465,7 +465,7 @@ curl interscript.org/maps/&lt;system-code&gt;.json</code></pre>
     font-size: var(--text-micro);
     letter-spacing: 0.15em;
     text-transform: uppercase;
-    color: var(--color-accent-deep);
+    color: var(--color-brand-deep);
     font-weight: 500;
   }
   .system-name {

src/layouts/Base.astro

@@ -1,29 +1,36 @@
 @import "tailwindcss";
 
 /* ──────────────────────────────────────────────────────────────────
-   Interscript — "scholarly ink + script mosaic"
+   Interscript — design system built on the original brand mark.
 
-   Direction: warm parchment + deep printer's-ink blue-black, oxidized
-   copperplate teal accent, vermillion highlight. Avoids the three
-   current AI defaults (cream+terracotta, near-black+acid-green,
-   broadsheet hairline columns). Type: Fraunces variable serif
-   (personality display) + Inter Tight (body) + JetBrains Mono (data).
+   The Interscript logo is a teal parallelogram (#008075) with white
+   "iS" letters, set on the bias. The whole system is derived from it:
+   brand teal as the primary accent, the parallelogram as a structural
+   motif, off-white as paper. This is the canonical Ribose/Interscript
+   brand identity — every surface inherits from it.
+
+   Type: Fraunces variable serif (characterful display) + Inter Tight
+   (body) + JetBrains Mono (data).
    ────────────────────────────────────────────────────────────────── */
 
 @theme {
-  /* Palette — deliberately not the AI defaults */
-  --color-paper: #f4ede0;
-  --color-paper-deep: #ebe2cf;
-  --color-vellum: #fbf6ec;
-  --color-ink: #0e1620;
-  --color-ink-soft: #1c2532;
-  --color-accent: #4a7a72;
-  --color-accent-deep: #355a53;
+  /* Palette — anchored on the original brand teal #008075 */
+  --color-paper: #f6f3ec;
+  --color-paper-deep: #ece6d6;
+  --color-vellum: #fcfaf4;
+  --color-ink: #1a1d1f;
+  --color-ink-soft: #2a2f33;
+  /* Brand teal — the logo's signature color. Lives in every accent. */
+  --color-brand: #008075;
+  --color-brand-deep: #005f57;
+  --color-brand-pale: #cfe5e1;
+  /* Highlight/CTA — warm complement to brand teal */
   --color-highlight: #b8462e;
   --color-highlight-deep: #8a3322;
+  /* Stone grays for secondary text */
   --color-stone: #5c5852;
   --color-stone-light: #8c857b;
-  --color-rule: #d4c9b0;
+  --color-rule: #d8d0bc;
   --color-rule-strong: #b8ab8c;
 
   /* Type */
@@ -116,11 +123,11 @@ kbd {
 }
 
 code {
-  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+  background: color-mix(in srgb, var(--color-brand) 10%, transparent);
   padding: 0.1em 0.4em;
   border-radius: 2px;
   font-size: 0.9em;
-  color: var(--color-accent-deep);
+  color: var(--color-brand-deep);
 }
 
 pre {
@@ -142,7 +149,7 @@ pre code {
 /* ── Accessibility ──────────────────────────────────────────────── */
 
 :focus-visible {
-  outline: 2px solid var(--color-accent);
+  outline: 2px solid var(--color-brand);
   outline-offset: 3px;
   border-radius: 1px;
 }
@@ -196,7 +203,7 @@ pre code {
 }
 .rule-accent {
   border: 0;
-  border-top: 2px solid var(--color-accent);
+  border-top: 2px solid var(--color-brand);
   margin: 0;
 }
 
@@ -217,11 +224,11 @@ pre code {
   display: inline-block;
   width: 1.75rem;
   height: 1.5px;
-  background: var(--color-accent);
+  background: var(--color-brand);
 }
 
 .eyebrow-accent {
-  color: var(--color-accent-deep);
+  color: var(--color-brand-deep);
 }
 
 /* ── Buttons ────────────────────────────────────────────────────── */
@@ -249,8 +256,8 @@ pre code {
   border-color: var(--color-ink);
 }
 .btn-primary:hover {
-  background: var(--color-accent-deep);
-  border-color: var(--color-accent-deep);
+  background: var(--color-brand-deep);
+  border-color: var(--color-brand-deep);
   color: var(--color-vellum);
 }
 .btn-accent {
@@ -299,7 +306,7 @@ pre code {
   color: var(--color-vellum);
 }
 .surface-ink a {
-  color: var(--color-accent);
+  color: var(--color-brand);
 }
 .surface-ink a:hover {
   color: var(--color-vellum);

src/pages/index.astro

@@ -49,14 +49,40 @@ describe("scholarly-ink design system", () => {
     expect(css.toLowerCase()).toMatch(/inter[- ]?tight/)
   })
 
-  it("applies the new palette: paper, ink, accent, highlight", () => {
-    expect(css).toContain("f4ede0") // paper
-    expect(css).toContain("0e1620") // ink
-    expect(css).toContain("4a7a72") // accent (teal)
+  it("applies the new palette: paper, ink, brand teal, highlight", () => {
+    expect(css).toContain("f6f3ec") // paper
+    expect(css).toContain("1a1d1f") // ink
+    expect(css).toContain("008075") // brand teal (from original logo)
     expect(css).toContain("b8462e") // highlight (vermillion)
   })
 })
 
+describe("original brand logo adoption", () => {
+  it("ships the original symbol.svg from the Ribose/Interscript brand", () => {
+    const exists = existsSync(resolve(DIST, "symbol.svg"))
+    expect(exists).toBe(true)
+  })
+
+  it("uses the symbol as favicon", () => {
+    const exists = existsSync(resolve(DIST, "favicon.svg"))
+    expect(exists).toBe(true)
+  })
+
+  it("symbol.svg contains the brand teal #008075 from the logo", () => {
+    const svg = readFileSync(resolve(DIST, "symbol.svg"), "utf8")
+    expect(svg).toContain("008075")
+  })
+
+  it("every page renders the brand mark as an <img src='/symbol.svg'>", () => {
+    const pages = allBuiltHtmlFiles()
+    expect(pages.length).toBeGreaterThan(50)
+    for (const page of pages.slice(0, 25)) {
+      const html = readFileSync(page, "utf8")
+      expect(html).toMatch(/src="\/symbol\.svg"/)
+    }
+  })
+})
+
 describe("script mosaic signature element", () => {
   const home = readHtml("index.html")
 

src/styles/global.css

@@ -66,15 +66,15 @@ describe("design system — palette (in compiled CSS)", () => {
   const css = readAllCss()
 
   it("uses warm paper background", () => {
-    expect(css).toContain("f4ede0")
+    expect(css).toContain("f6f3ec")
   })
 
-  it("uses oxidized copperplate teal accent", () => {
-    expect(css).toContain("4a7a72")
+  it("uses brand teal accent from the original logo", () => {
+    expect(css).toContain("008075")
   })
 
-  it("uses deep blue-black ink", () => {
-    expect(css).toContain("0e1620")
+  it("uses deep near-black ink", () => {
+    expect(css).toContain("1a1d1f")
   })
 
   it("uses vermillion highlight for CTAs", () => {